JavaScript入門系列之知識點總結_javascript技巧

JavaScript一種直譯式腳本語言，是一種動態類型、弱型別、基於原型的語言，內建支援型別。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來為HTML網頁增加動態功能。

一、準備工作：

1.為什麼要學習JavaScript

所有的主流瀏覽器都只是Javascript

大部分網頁都使用Javascript

它可以讓網頁呈現各種動態效果

易學

2、如何插入JS

<script>標籤要成對出現，並把JavaScript程式碼寫在<script></script>之間。

4、JS在頁中的位置

javascript作為一種腳本語言可以放在html頁面中任何位置，我們通常放在網頁的head或body部分。但是瀏覽器解釋html時是先後順序的，所以前面的script就先執行。例如進行頁面顯示初始化的js必須放在head裡面，因為初始化都要求提前進行（如給頁面body設定css等）；而如果是透過事件呼叫執行的function那麼對位置沒什麼要求的。

5、語句與符號

每一句JavaScript程式碼格式: 語句;

6、註解方法

單行註釋，在註釋內容前加符號 “//”。

多行註解以"/*"開始，以"*/"結束。

7、變數

定義變數使用關鍵字var,語法如下：

var 變數名

變數名可以任意取名，但要遵循命名規則:

1.變數名稱必須使用字母或底線(_)開始。

2.變數名稱必須使用英文字母、數字、底線(_)組成。

3.變數名稱不能使用JavaScript關鍵字與JavaScript保留字。

8、判斷語句（if...else）

文法:

if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

9、函數

function 函数名()
{
函数代码;
}

説明:

1. function キーワードは関数を定義します。

2.「関数名」は関数に付ける名前です。

3. 「関数コード」を特定の関数を完了するコードに置き換えます。

関数呼び出し:

関数を定義した後は、自動的に実行することはできないため、関数を呼び出す必要がある場合は、必要な場所に関数を直接記述するだけです

2. よく使用される対話方法

1. 出力内容(document.write)

document.write() を使用すると、コンテンツを HTML 出力ストリームに直接書き込むことができます。簡単に言うと、コンテンツをWebページ上に直接出力することです。

1つ目のタイプ: 出力内容を""で囲み、""内の内容をそのまま出力します。

2 番目のタイプ: 変数を介してコンテンツを出力

3 番目のタイプ: 複数のコンテンツを出力し、コンテンツを + 記号で接続します。

4 番目の方法: HTML タグを出力し、タグを "" で囲みます。

2. 警告（警告メッセージダイアログボックス）

小さなウィンドウにメッセージ テキストが表示されます (アラートはメッセージ ダイアログ ボックス ([OK] ボタンを含む) を表示します):alert (文字列または変数);

注:

1. ダイアログボックスの「OK」ボタンをクリックするまでは、他の操作を行うことはできません。

2. メッセージ ダイアログ ボックスは通常、プログラムのデバッグに使用できます。

3. アラート出力コンテンツ。document.write と同様の文字列または変数にすることができます。

3. 確認（メッセージ確認ダイアログ）

ダイアログ ボックス ([OK] ボタンと [キャンセル] ボタンを含む) をポップアップします。確認(str);

パラメータの説明:

str: メッセージダイアログボックスに表示されるテキスト

戻り値: ブール値

戻り値:

ユーザーが「OK」ボタンをクリックすると、true を返します

ユーザーが「キャンセル」ボタンをクリックすると、false を返します

注: 戻り値を使用して、ユーザーがどのボタンをクリックしたかを判断できます

注: メッセージ ダイアログ ボックスは排他的です。つまり、ユーザーはダイアログ ボックス内のボタンをクリックするまで他の操作を実行できません。

4. 質問 (プロンプトメッセージダイアログボックス)

メッセージ ダイアログ ボックス (OK ボタン、キャンセル ボタン、テキスト入力ボックスを含む) をポップアップします。prompt(str1, str2);

パラメータの説明:

str1: メッセージ ダイアログ ボックスに表示されるテキスト。変更できません

str2: テキスト ボックスの内容は変更できます

戻り値:

1. [OK] ボタンをクリックすると、テキスト ボックスの内容が関数の戻り値として使用されます

2. キャンセルボタンをクリックすると null が返されます

注: ユーザーがダイアログ ボックスのボタンをクリックするまで、他の操作は実行できません。

5. 新しいウィンドウを開きます (window.open)

open() メソッドは、新しいウィンドウを開くために使用されます: window.open(, , )

パラメータの説明:

URL: ウィンドウを開くための URL またはパス。

ウィンドウ名: 開いているウィンドウの名前。

「_top」、「_blank」、「_selft」などを使用できます。

パラメータ文字列: ウィンドウパラメータを設定します。各パラメータはカンマで区切られます。 (上、左、幅、高さ、メニューバー、ツールバー、スクロールバー、ステータス)

注:

1. パラメータ間のカンマと等号の前後にスペースがある場合、その文字列は無効になります。スペースを削除するだけで正常に実行できます。

2. 実行結果にはブラウザの互換性の問題が考慮されています。

6. ウィンドウを閉じる (window.close)

window.close(); // 指定されたウィンドウを閉じます

<ウィンドウオブジェクト>.close();

3. DOM 操作

1. DOM について知る

ドキュメント オブジェクト モデル DOM (ドキュメント オブジェクト モデル) は、HTML ドキュメントにアクセスして処理するための標準メソッドを定義します。 DOM は HTML ドキュメントを要素としてレンダリングします。

属性とテキストのツリー構造(ノードツリー)。

1. 要素ノード: 上の図では、、、

などはすべて要素ノード、つまりラベルです。

2. テキスト ノード:

...

内の JavaScript、DOM、CSS、その他のテキストなど、ユーザーに表示されるコンテンツ。

3. 属性ノード: タグのリンク属性 href="http://www.imooc.com" など。

2. ID で要素を取得します

document.getElementById(“id”)

注: 取得した要素はオブジェクトです。要素を操作したい場合は、そのプロパティまたはメソッドを使用する必要があります。

3. innerHTML 属性

.innerHTML プロパティは、HTML 要素のコンテンツを取得または置換するために使用されます。

Object.innerHTML

1.Object は、document.getElementById("ID") を通じて取得された要素など、取得された要素オブジェクトです。

2. 書き方に注意してください。innerHTML では大文字と小文字が区別されます

4. HTML スタイルを変更する

Object.style.property=新しいスタイル;

注: Object は、document.getElementById("id") を通じて取得される要素など、取得される要素オブジェクトです。

基本プロパティ テーブル (プロパティ)

背景色/高さ/幅/色/フォント/フォントファミリー/フォントサイズ

5. 表示と非表示 (表示属性)

Object.style.display = 値

注: Object は、document.getElementById("id") を通じて取得される要素など、取得される要素オブジェクトです。

値:

none: この要素は表示されません (非表示になります)

ブロック: この要素はブロックレベル要素 (表示) として表示されます

6. コントロールクラス名(className属性)

要素のクラス属性を設定または返します

object.className = クラス名

1. 要素のクラス属性を取得します

2. Web ページ内の要素の CSS スタイルを指定して、要素の外観を変更します