appel de méthode de contrôle javascript

JavaScript est un langage de script largement utilisé qui peut produire de nombreux effets interactifs merveilleux. En JavaScript, nous pouvons utiliser diverses méthodes (fonctions) pour effectuer différentes tâches. Mais parfois, nous devons contrôler l'appel de ces méthodes dans des circonstances spécifiques, ce qui nécessite l'utilisation de certaines techniques pour contrôler l'appel de méthode.

Cet article présentera les techniques couramment utilisées en JavaScript pour contrôler les appels de méthodes, y compris les instructions conditionnelles, les instructions de boucle, la liaison d'événements et d'autres méthodes. Nous présenterons ces techniques une par une pour aider les lecteurs à mieux comprendre comment contrôler les appels de méthode en JavaScript.

1. Instructions conditionnelles

Les instructions conditionnelles sont une technique courante pour contrôler les appels de méthodes, qui peuvent exécuter différents blocs de code en fonction de différentes conditions. En JavaScript, les instructions conditionnelles courantes incluent les instructions if et les instructions switch.

1. if instruction

if l'instruction est utilisée pour exécuter différents blocs de code en fonction d'une condition. Sa structure syntaxique est la suivante :

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

Ce qui suit est un exemple simple d'instruction if :

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

Dans l'exemple ci-dessus, si l'âge est supérieur ou égal à 18, " Adulte" sera affiché "Personne", sinon "mineur" sera affiché.

2. instruction switch

L'instruction switch est utilisée pour exécuter différents blocs de code en fonction de plusieurs conditions. Sa structure syntaxique est la suivante :

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

Ce qui suit est un exemple simple d'instruction switch :

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

Dans l'exemple ci-dessus, si day est égal à 1, "Monday" sera sera affiché, si le jour est égal à 2, "Mardi" sera affiché, si le jour est égal à 3, "Mercredi" sera affiché, sinon "Autre" sera affiché.

2. L'instruction Loop

L'instruction Loop est une autre technique couramment utilisée pour contrôler les appels de méthode. Elle peut exécuter à plusieurs reprises un morceau de code jusqu'à ce qu'une condition spécifique soit atteinte. En JavaScript, les instructions de boucle courantes incluent la boucle for, la boucle while et la boucle do-while.

1. for loop

La boucle for est une instruction de boucle couramment utilisée qui peut exécuter un bloc de code en fonction de conditions spécifiées. Sa structure syntaxique est la suivante :

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

Ce qui suit est un exemple simple de boucle for :

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

Dans l'exemple ci-dessus, la valeur initiale de la variable i est 0, puis la boucle exécute le bloc de code, en augmentant de 1 à chaque fois jusqu'à ce que la valeur de i soit supérieure ou égale à 10.

2. while loop

La boucle while est également une instruction de boucle couramment utilisée, qui peut exécuter à plusieurs reprises un morceau de code si les conditions spécifiées sont remplies . Sa structure syntaxique est la suivante :

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

Ce qui suit est un exemple simple de boucle while :

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

Dans l'exemple ci-dessus, la valeur initiale de la variable i est 0, puis lorsque i< est satisfait ; Le bloc de code est exécuté à plusieurs reprises sous la condition de 10, en augmentant de 1 à chaque fois jusqu'à ce que la valeur de i soit supérieure ou égale à 10.

3. boucle do-while

La boucle do-while est similaire à la boucle while, la seule différence est qu'elle exécutera le code bloquez d'abord une fois, puis vérifiez à nouveau si les conditions sont remplies. La structure syntaxique est la suivante :

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

Ce qui suit est un exemple simple de boucle do-while :

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

Dans l'exemple ci-dessus, la valeur initiale de la variable i est 0, puis exécutez le bloc de code une fois, puis exécutez le bloc de code à plusieurs reprises sous la condition que i<10, en augmentant de 1 à chaque fois jusqu'à ce que la valeur de i soit supérieure ou égale à 10.

3. Liaison d'événement

La liaison d'événement est également une technique couramment utilisée pour contrôler les appels de méthode, qui peuvent exécuter du code spécifié lorsqu'un événement spécifique se produit. En JavaScript, les événements courants incluent les événements de souris, les événements de clavier, les événements de formulaire, etc.

Il existe de nombreuses façons de lier des événements. Les méthodes courantes incluent la liaison directe, l'utilisation de la délégation d'événements, l'utilisation de bibliothèques tierces, etc.

1. Liaison directe

La liaison directe est la méthode de liaison d'événement la plus courante, qui peut être implémentée dans des éléments HTML ou via JavaScript. Sa structure syntaxique est la suivante :

element.addEventListener(event, function, useCapture);

Ce qui suit est un exemple simple de liaison d'événement :

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

Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur l'élément avec l'identifiant btn , une boîte de dialogue apparaîtra, affichant « Bonjour tout le monde ! ».

2. Délégation d'événement

La délégation d'événement est une méthode de liaison d'événement efficace, qui peut lier un événement à un élément conteneur plutôt qu'à chaque enfant. élément. Lorsqu'un élément enfant déclenche un événement, l'événement remonte jusqu'à l'élément conteneur, exécutant le code correspondant. La structure syntaxique est la suivante :

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

Ce qui suit est un exemple simple de délégation d'événement :

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

Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur l'élément conteneur avec l'identifiant de la liste, il déterminera si l'élément cible cliqué est un élément li. Si tel est le cas, une boîte de dialogue apparaîtra pour afficher le contenu du texte correspondant.

4. Résumé

Les techniques d'appel de méthodes de contrôle en JavaScript incluent les instructions conditionnelles, les instructions de boucle, la liaison d'événements et d'autres méthodes. Nous pouvons choisir des méthodes appropriées pour contrôler les appels de méthodes en fonction de différents besoins, obtenant ainsi des effets interactifs plus excitants.

Dans le développement réel, nous devons choisir des techniques appropriées en fonction de situations spécifiques et utiliser avec flexibilité diverses méthodes pour atteindre les fonctions requises. Dans le même temps, vous devez également veiller à contrôler le nombre et la fréquence des appels de méthode pour éviter d'affecter les performances des pages Web et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!