JavaScript入門シリーズの知識まとめ_JavaScriptスキル-jsチュートリアル-php.cn

JavaScript は、型のサポートが組み込まれた、動的に型付けされた弱い型付けのプロトタイプベースの言語です。そのインタプリタは JavaScript エンジンと呼ばれ、ブラウザの一部であり、クライアント側のスクリプト言語で広く使用されています。これは、HTML Web ページに動的機能を追加するために HTML (標準ユニバーサル マークアップ言語に基づくアプリケーション) で最初に使用されました。 。

1. 準備:

1. JavaScript を学ぶ理由

すべての主要なブラウザは Javascript のみです

ほとんどの Web ページは Javascript を使用しています

Web ページにさまざまな動的な効果を表示できます

学びやすい

2. JSの挿入方法

タグはペアで指定し、 の間に JavaScript コードを記述します。

は、 の間のテキスト タイプ (テキスト) が、内部のテキストが JavaScript 言語に属していることをブラウザーに伝えるために使用されることを示します。

3. JS 外部ファイルを参照する

HTML ファイルと JS コードを分離して、別の JavaScript ファイル (略して JS ファイル) を作成できます。通常、ファイルの拡張子は .js です JS ファイルでは、 タグは必要なく、JavaScript コードを直接記述するだけです。

コードをコピーします コードは次のとおりです: 4. ページ内の JS の位置

JavaScript はスクリプト言語として、HTML ページのどこにでも配置できます。通常、Web ページの先頭部分または本文部分に配置されます。ただし、ブラウザは HTML を順番に解釈するため、前のスクリプトが最初に実行されます。たとえば、ページ表示の初期化用の js は、事前に初期化を行う必要があり (ページ本文の CSS の設定など)、イベント呼び出しを通じて関数が実行される場合は、head に配置する必要があります。場所の要件はありません。

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") を通じて取得される要素など、取得される要素オブジェクトです。 基本プロパティ テーブル (プロパティ)

backgroundColor/height/width/color/font/fontFamily/fontSize

5、顯示與隱藏（Display屬性）

Object.style.display = value

注意:Object是取得的元素對象，如透過document.getElementById("id")取得的元素。

value取值:

none:此元素不會被顯示（隱藏）

block：此元素將顯示為區塊級元素（顯示）

6、控制類別名稱（className屬性）

設定或傳回元素的class屬性

object.className = classname

1.取得元素的class 屬性

2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀