JavaScript 制御メソッドの呼び出し

JavaScript は、多くの素晴らしいインタラクティブな効果を実現できる、広く使用されているスクリプト言語です。 JavaScript では、さまざまなメソッド (関数) を使用してさまざまなタスクを実行できます。ただし、特定の状況下でこれらのメソッドの呼び出しを制御する必要がある場合があります。そのためには、メソッド呼び出しを制御するためのいくつかのテクニックを使用する必要があります。

この記事では、条件ステートメント、ループ ステートメント、イベント バインディング、その他のメソッドなど、メソッド呼び出しを制御するために JavaScript で一般的に使用される手法を紹介します。読者が JavaScript でメソッド呼び出しを制御する方法をよりよく理解できるように、これらのテクニックを 1 つずつ紹介します。

1. 条件ステートメント

条件ステートメントはメソッド呼び出しを制御するためによく使用される手法で、さまざまな条件に従ってさまざまなコード ブロックを実行できます。 JavaScript では、一般的な条件ステートメントには if ステートメントと switch ステートメントが含まれます。

1. if ステートメント

if ステートメントは、条件に基づいてさまざまなコード ブロックを実行するために使用されます。その構文構造は次のとおりです。

if (条件表达式) {
    // 如果条件表达式为 true，则执行这里的代码块。
}

次に、単純な if ステートメントの例を示します。

var age = 18;
if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

上の例では、年齢が 18 歳以上の場合、「大人」は次のようになります。それ以外の場合は「Minor」が出力されます。

2. switch ステートメント

switch ステートメントは、複数の条件に基づいてさまざまなコード ブロックを実行するために使用されます。その構文構造は次のとおりです。

switch (表达式) {
  case 值1:
    // 执行代码块 1
    break;
  case 值2:
    // 执行代码块 2
    break;
  default:
    // 执行默认代码块
}

以下は、単純な switch ステートメントの例です。

var day = 2;
switch (day) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  case 3:
    console.log("星期三");
    break;
  default:
    console.log("其他");
}

上記の例では、day が 1 に等しい場合、「Monday」が出力されます。日が 2 の場合は「火曜日」が出力され、日が 3 の場合は「水曜日」が出力され、それ以外の場合は「その他」が出力されます。

2. ループ ステートメント

ループ ステートメントは、メソッド呼び出しを制御するためによく使用されるもう 1 つの手法で、特定の条件に達するまでコードを繰り返し実行できます。 JavaScript では、一般的なループ ステートメントには、for ループ、while ループ、do-while ループなどがあります。

1. for ループ

for ループは、指定された条件に基づいてコードのブロックを実行できる一般的に使用されるループ ステートメントです。構文構造は次のとおりです。

for (初始化语句; 条件表达式; 增量表达式) {
  // 执行代码块
}

以下は簡単な for ループの例です。

for (var i = 0; i < 10; i++) {
    console.log(i);
}

上記の例では、変数 i の初期値は 0 で、コード ブロックは次のようになります。ループ内で実行され、毎回 i の値が 10 以上になるまで 1 ずつ増加します。

2. while ループ

while ループも一般的に使用されるループ ステートメントであり、指定された条件が満たされた場合にコードの一部を繰り返し実行できます。構文構造は次のとおりです。

while (条件表达式) {
  // 执行代码块
}

以下は、単純な while ループの例です。

var i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

上記の例では、変数 i の初期値は 0 であり、条件 i< の場合、 ;10 が満たされる コード ブロックは、i の値が 10 以上になるまで、毎回 1 ずつ増加して繰り返し実行されます。

3. do-while ループ

do-while ループは while ループに似ていますが、唯一の違いは、コード ブロックを 1 回実行してから、条件は満たされています。構文構造は次のとおりです。

do {
  // 执行代码块
} while (条件表达式);

次に、単純な do-while ループの例を示します。

var i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

上の例では、変数 i の初期値は 0 で、その後、コードブロックが 1 回実行されると、i<10 の条件下でコード ブロックを繰り返し実行し、i の値が 10 以上になるまで毎回 1 ずつ増加します。

3. イベント バインディング

イベント バインディングは、メソッド呼び出しを制御するために一般的に使用される手法でもあり、特定のイベントが発生したときに指定されたコードを実行できます。 JavaScript では、一般的なイベントには、マウス イベント、キーボード イベント、フォーム イベントなどが含まれます。

イベントをバインドするには多くの方法があります。一般的な方法には、直接バインド、イベント委任の使用、サードパーティ ライブラリの使用などが含まれます。

1. ダイレクト バインディング

ダイレクト バインディングは、HTML 要素または JavaScript を通じて実装できる、最も一般的なイベント バインディング方法です。構文構造は次のとおりです。

element.addEventListener(event, function, useCapture);

次に、単純なイベント バインディングの例を示します。

var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
    alert("Hello world!");
});

上の例では、ユーザーが ID btn を持つ要素をクリックすると、プロンプト ボックスが表示されます。ポップアップが表示され、「Hello world!」と表示されます。

2. イベント委任

イベント委任は、イベントをバインドする効率的な方法です。各子要素ではなくコンテナ要素にイベントをバインドできます。子要素がイベントを起動すると、イベントはコンテナ要素にバブルアップして、対応するコードを実行します。構文構造は次のとおりです。

container.addEventListener(eventType, function(event) {
  if (event.target.matches(selector)) {
    // 执行代码块
  }
});

次に、単純なイベント委任の例を示します。

var list = document.getElementById("list");
list.addEventListener("click", function(event) {
    if (event.target.nodeName === "LI") {
        alert(event.target.innerHTML);
    }
});

上の例では、ユーザーが list の ID を持つコンテナ要素をクリックすると、クリック ターゲットが決定されます。要素が li 要素であるかどうかが決まります。li 要素である場合は、対応するテキスト コンテンツを表示するプロンプト ボックスがポップアップ表示されます。

4. 概要

JavaScript でのコントロール メソッド呼び出し手法には、条件ステートメント、ループ ステートメント、イベント バインディング、その他のメソッドが含まれます。さまざまなニーズに応じてメソッド呼び出しを制御する適切な方法を選択できるため、よりエキサイティングなインタラクティブな効果を実現できます。

実際の開発では、状況に応じて適切な手法を選択し、さまざまな手法を柔軟に利用して必要な機能を実現する必要があります。同時に、Web ページのパフォーマンスやユーザー エクスペリエンスに影響を与えないように、メソッド呼び出しの数と頻度の制御にも注意を払う必要があります。

以上がJavaScript 制御メソッドの呼び出しの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。