Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 5: Structures de contrôle (conditions et boucles)

Toutes les pages

Structures de contrôles en Javascript

Les structures de contrôles (ou structures conditionnelles) sont des blocs qui permettent de tester si une condition est vraie pour faire un traitement (ou des traitements répétitifs).

Structure if else

La structure if else permet de vérifier si une condition est vraie. Elle est déclarée comme ceci:
if(condition){
   traitement 1;
}
else{
   traitement 2;
}
Ce code signifie que si la condition est vraie alors on fait le traitement 1, sinon (c'est à dire si la condition n'est pas vraie) alors on fait le traitement 2.

Notez que la condition est toujours contenue dans des parenthèses. Elle peut être simple ou composée de plusieurs conditions regroupées par des opérateurs logiques. Les accolades ({ et }) sont obligatoires si on procède à un traitement qui contient plusieurs instructions dans le bloc. Si une seule instruction est déclarée alors les accolades sont facultatives.

Exemple:
a=10;
if(a%2==0)
   let b="Nombre pair";
else
   let b="Nombre impair";
Remarquez le mot-clé let qui précède l'initialisation de la variable b dans le bloc de la condition if-else. Dans ce cas, cette variable sera reconnue uniquement dans ce bloc-là et non pas dehors. On parle de portée limité au bloc (ou portée locale au bloc) comme on l'a vu dans le chapitre consacré aux bases du Javascript
Les structures if else peuvent s'imbriquer les unes dans les autres comme ceci:
if(condition 1){
   traitement 1;
}
else{
   if(condition 2)
      traitement 2;
   else
      traitement 3;
}
On peut faire imbriquer autant de if else que l'on souhaite. Notez que les accolades du premier else sont obligatoires dans ce cas, car le bloc contient plusieurs instructions.

Opérateur ternaire

L'opérateur ternaire est une écriture abrégée de la structure if else. Il est souvent utilisé si on souhaite retourner un résultat en fonction de l'état d'une condition. La structure est déclarée sous cette forme:
(condition)?(traitement 1):(traitement 2);
Ce qui signifie: si la condition est vraie (le point d'interrogation fait allusion à une question), alors le premier bloc délimité par les parenthèses (traitement 1) est exécuté, sinon (représentée par :) alors le deuxième bloc est exécuté (dans ce cas traitement 2).

En utilisant l'opérateur ternaire dans l'exemple précédent le code devient:
a=10;
b=(a%2==0)?("Nombre pair"):("Nombre impair");
Ici la variable b peut recevoir soit "Nombre pair" ou "Nombre impair" selon la condition (est ce que la variable a est divisible par 2?).

Structure for

La structure for (ou boucle for) permet d’exécuter le même bloc instructions plusieurs fois. Il faut donc prévoir une variable qui sert de compteur, sa valeur initiale, sa valeur finale et son pas d'incrémentation. Quand la variable atteint la valeur finale précisée, la boucle s'arrête.

Exemple:
str="";
for(i=1;i<5;i++){
   str+=i;
}
Tout d’abord nous avons déclaré la variable str qui contient une chaîne de caractères vide. La boucle for utilise la variable i comme compteur. Elle commence à 1 et fini à 4 (car on a précisé i<5). Le pas d'incrémentation de i sera égal à 1 (i++). Tant que la boucle tourne, on ajoute à la chaîne str la valuer courante de i (vous avez remarqué str+= qui signifie qu'on concatène la chaine str avec la variable i). Même si i est un entier, l'opérateur + dans ce cas désigne la concaténation car on a initialisé la variable str en tant que chaîne de caractères au début du programme.

A la fin de la boucle, la valeur de la variable str sera 1234.

Structure while

La structure while (ou boucle while) exécute le même bloc plusieurs fois (comme le fait la boucle for). Elle signifie littéralement: "Tant que la condition est vrai, faire le traitement".

Avec la boucle while, l'exemple précédent devient:
str="";
i=1;
while(i<5){
   str+=i;
   i++;
}
Ici, nous avons initialisé la variable i qui fait office de compteur. La condition à vérifier par la boucle while est i<5. Dans les accolades on fait le traitement souhaité puis on incrémente la variable i.
Une mauvaise manipulation des boucles for ou while (comme par exemple incrémenter le compteur au lieu de le décrémenter...) conduit à une boucle infinie, qui risque de bloquer le navigateur.

Arrêt prématuré: instruction break

Des fois, on souhaite arrêter une boucle avant d'atteindre la valeur finale du compteur. On parle donc d'un arrêt prématuré (ou arrêt inconditionnel) qui est exprimé avec le mot clé break. Cet arrêt s'applique aux boucles for et while.

Exemple:
str="";
i=1;
while(i<5){
   if(i==3){
      break;
   }
   str+=i;
   i++;
}
A la fin de la boucle la variable str vaudra 12. En effet, si la boucle se terminait normalement alors la variable str vaudrait 1234. Mais comme on a arrêté prématurément la boucle avec l’instruction break une fois le compteur i arrive à 3. Alors la boucle s'arrête aussitôt sans exécuter le reste du code après break.

Saut d'une itération: instruction continue

L’instruction continue permet de sauter l'itération courante et passer immédiatement à l'itération suivante.

Exemple:
str="";
i=0;
while(i<5){
   i++;
   if(i==3){
      continue;
   }
   str+=i;   
}
A la fin de la boucle la variable str vaudra 1245. La valeur 3 a été sautée car cette itération a été ignorée par l'instruction continue qui est passée directement à l'itération 4. Vous avez remarqué qu'en plus de l'instruction break qui a été remplacée par continue, la structure du code a été légèrement modifiée en faisant monter l'incrémentation avant la condition qui lance continue. Car si on conserve l'incrémentation là où elle a été dans l'exemple précédent, le moment où i aura la valeur 3, l'instruction continue poussera interpréteur à ignorer le reste des instruction dans la boucle y compris l'incrémentation. A la prochaine itération on se retrouvera donc toujours avec i=3 et continue sera encore exécutée et ainsi de suite à l'infini. On se retrouvera donc avec une boucle infinie. Cette modification du code nous mène aussi à changer la valeur initiale de i.

Structure switch case

La structure switch case permet de faire plusieurs tests sur une condition. La structure if else permet aussi de faire plusieurs tests mais avec beaucoup d'imbrications de structures les unes dans les autres. La structure switch case simplifie donc bien la chose.

Exemple:
a=3;
switch(a){
   case 1: b="Un"; break;
   case 2: b="Deux"; break;
   case 3: b="Trois"; break;
   default: b="Aucun des trois";
}
A la sortie de la structure switch case, la variable b aura la valeur "Trois". En effet, la variable a vaut 3. switch() reçoit comme paramètre la variable a, donc c'est cette variable qui sera testée par les différentes case. Devant chaque case on déclare une des valeurs que peut éventuellement prendre a, suivi de deux poins, suivi du traitement qui consiste à l'affectation d'une chaîne de caractères à la variable b. L'instruction break met fin à la structure une fois la condition satisfaite. Si aucune condition n'est satisfaite alors l’interpréteur exécute le traitement associé à default.

Structures de contrôles en Javascript en vidéo