La structure de controle et boucles en java support de cours

La structure de contrôle et boucles en java support de cours

La commande if

Quand vous écrivez un programme, quel que soit le langage de programmation que vous utili¬siez, vous avez souvent besoin d’exécuter différentes séries d’instructions, en fonction de critères déterminés à l’avance.

Par exemple, vous pouvez avoir besoin d’exécuter des commandes différentes selon l’heure de la journée ou le type de navigateur Web qui exécute votre programme. Le déroulement de votre programme peut aussi être modifié par la saisie de l’utilisateur. Il peut s’agir d’une page Web sur laquelle un utilisateur passe une commande en ligne. Si l’utilisateur clique sur le bouton Ajouter au panier de commande, des instructions permettant de générer la liste des arti¬cles commandés doivent être exécutées. En revanche, si l’utilisateur clique sur le bouton Fin de la commande, c’est une autre série d’instructions qui est exécutée.

Le processus de détermination de l’ordre dans lequel les commandes d’un programme sont exécutées s’appelle prise de décision ou flux de commande. Les commandes spéciales Java-Script qui permettent de prendre des décisions se nomment des structures de contrôle.

L’un des moyens les plus courants pour contrôler le flux d’un programme consiste à utiliser la commande if. La commande if est employée pour exécuter des instructions spécifiques si l’évaluation d’une expression conditionnelle retourne la valeur true.

La syntaxe de la commande if est la suivante :

if (expression conditionnelle) { commande(s);

}

La commande if se compose de trois parties : le mot-clé if, une expression conditionnelle entre parenthèses et les commandes à exécuter. Notez bien que l’expression conditionnelle doit être encadrée par des parenthèses.

Si la condition évaluée dans la commande if retourne la valeur true, la ou les commandes qui suivent immédiatement le mot-clé if et sa condition sont exécutées. Après exécution de la commande if, le code qui suit s’exécute normalement.

Examinez l’exemple illustré à la figure 4.2. La commande if utilise l’opérateur de compa-raison égale (==) pour déterminer si ExempleVar est égal à 5. Dans la mesure où la condi¬tion retourne la valeur true, deux boîtes de dialogue d’avertissement apparaissent. La première boîte de dialogue est générée par la commande if lorsque la condition retourne la valeur true. La seconde boîte de dialogue s’exécute après achèvement de la commande if.

var ExempleVar = 5;

if (ExempleVar == 5) // condition évaluée à true

alert("La variable est égale à '5'.");

alert("Cette boîte de dialogue est générée après la commande if.");

Figure 4.2 – Une commande if évaluant une condition vraie.

La commande qui suit immédiatement la commande if dans le programme illustré à la figure 4.2 peut s’écrire sur la même ligne. Cependant, le fait de passer à la ligne suivante et d’indenter le code le rend plus lisible.

Le code illustré à la figure 4.3 n’affiche que la seconde boîte de dialogue. La condition est évaluée à false car la valeur 4 est assignée à la variable ExempleVar.

var ExempleVar = 4;

if (ExempleVar == 5) // condition évaluée à false

alert("La variable est égale à '5'.");

alert("Cette boîte de dialogue est générée après la commande if.");

Figure 4.3 – Une commande if évaluant une condition fausse.

Vous pouvez utiliser un bloc de commandes pour créer une structure de contrôle en employant plusieurs commandes if. Un bloc de commandes désigne plusieurs commandes encadrées par des crochets. Les commandes d’une fonction sont délimitées de la même manière. Chaque bloc de commandes doit avoir un crochet ouvrant ({) et un crochet fermant (}) . S’il manque un crochet dans un bloc de commandes, une erreur se produit.

La figure 4.4 illustre un programme qui exécute un bloc de commandes si l’expression condi-tionnelle de la commande if est évaluée à true.

Quand une commande if contient un bloc de commandes, les instructions du bloc de commandes sont exécutées lorsque la condition de la commande if est évaluée à true. Après exécution du bloc de commandes, le code qui suit est exécuté normalement. Lorsque la condition de la commande if est évaluée à false, le bloc de commandes est ignoré, et les commandes qui le suivent sont exécutées.

Si la condition de la commande if illustrée à la figure 4.4 est évaluée à false, seule la commande document.writeln() qui suit le bloc de commandes est exécutée.

var ExempleVar = 5;

if (ExempleVar == 5) { // condition évaluée à true document.writeln("La condition est évaluée à true."); document.writeln("ExempleVar est égal à 5."); document.writeln("Chacune de ces lignes sera affichée.");

}

document.writeln(

"Cette commande s'exécute toujours après la commande if.");

Figure 4.4 – Une commande if avec un bloc de commandes.

Il est facile d’oublier dans un bloc de commandes une instruction qui doit s’exécuter lorsque la condition de la commande if est évaluée à true. Pour vous en persuader, examinez l’exemple suivant :

if (ExempleVar == true)

var conditionTrue = "la condition est vraie"; alert(conditionTrue);

De prime abord, le code semble correct. En réalité, lorsque la condition est évaluée à true, tout se passe bien, mais si elle est évaluée à false, la boîte de dialogue alert affiche undefined, car la déclaration de la variable conditionTrue est ignorée. Pour résoudre ce problème, vous devez insérer les deux instructions dans un bloc de commandes de la manière suivante :

if (ExempleVar == true) {

var conditionTrue = "la condition est vraie"; alert(conditionTrue);

}

À présent, si la condition est évaluée à false, les deux instructions sont ignorées puisqu’elles font partie d’un bloc de commandes.

L’opérateur d’égalité est l’un des nombreux opérateurs que vous pouvez utiliser avec la commande if. Vous pouvez accomplir des comparaisons booléennes en utilisant n’importe lequel des opérateurs de comparaison que vous avez étudiés au cours n° 3. Vous pouvez égale¬ment employer des opérateurs logiques en combinaison avec des opérateurs de comparaison.

var ExempleVar1 = 5;

if (ExempleVar1 != 3) // non égal

document.writeln("Cette ligne s'affiche.");

if (ExempleVar1 > 3) // supérieur à

document.writeln("Cette ligne s'affiche.");

if (ExempleVar1 < 3) // inférieur à

document.writeln("Cette ligne ne s'affiche pas.");

if (ExempleVar1 >= 3) // supérieur ou égal à

document.writeln("Cette ligne s'affiche.");

if (ExempleVar1 <= 3) // inférieur ou égal à

document.writeln("Cette ligne ne s'affiche pas."); var ExempleVar2 = false;

if (ExempleVar1 > 3 && ExempleVar2 = true) // et logique

document.writeln("Cette ligne ne s'affiche pas.");

if (ExempleVar1 == 5 || ExempleVar2 = true) // ou logique

document.writeln("Cette ligne s'affiche.");

if (!ExempleVar2) // non logique

document.writeln("Cette ligne s'affiche.");

Figure 4.5 – Une commande if avec des opérateurs logiques et des opérateurs de comparaison.

La figure 4.5 illustre l’emploi d’opérateurs logiques et d’opérateurs de comparaison dans une commande if.

Vous allez maintenant commencer à créer le fichier QCMDessinAnime.html, que vous avez découvert au début de ce cours.

Le programme est conçu de telle sorte que les utilisateurs sélectionnent les choix multiples à l’aide de boutons radio créés au moyen de balises . Quand il n’est pas activé, un bouton radio ressemble à un petit cercle vide. Lorsqu’il est activé, le petit cercle est rempli par un point noir. Un bouton radio fait généralement partie d’un ensemble d’autres boutons radio, et vous ne pouvez sélectionner qu’un seul bouton à la fois dans le groupe. Tous les boutons radio d’un même groupe doivent avoir le même attribut NAME.

Dans cette version du questionnaire, chaque question est comptabilisée immédiatement. Vous allez créer le formulaire contenant les boutons radio, puis vous utiliserez une série de com¬mandes if pour comptabiliser chaque question.

Commencez par créer le document HTML et la section du formulaire. Vous ajouterez ensuite le code JavaScript permettant de comptabiliser chaque question.

  Créez le document QCMDessinAnime.html et sa section de formulaire.

1. Ouvrez un nouveau document dans votre éditeur de texte ou votre éditeur HTML.
2. Saisissez les sections et du document. Cette section comprend égale-ment une paire de balises , que vous utiliserez plus tard pour créer le code qui calcule le score :

Test sur les dessins animés

3. Ajoutez le code suivant contenant la balise d’ouverture , le texte qui apparaît en haut du questionnaire et la balise d’ouverture pour les boutons radio :

Questionnaire sur les dessins animés

Répondez à toutes les questions de ce test, puis cliquez sur le bouton

Score pour connaître votre résultat.

4. Ajoutez les lignes suivantes pour la première question. Les quatre boutons radio représen-tent les réponses. Puisque tous les boutons à l’intérieur d’un groupe sont dotés du même attribut NAME, ces quatre boutons radio ont le même nom, question1. Une valeur cor-respondant au numéro de la question, a, b, c ou d, est assignée à chaque bouton. Pour cha-que groupe de boutons radio, l’événement onClick envoie la valeur du bouton à une fonction individuelle, qui comptabilise la réponse. Notez que la valeur de chaque bouton est envoyée à la fonction en utilisant la référence this sous la forme this.value. La commande this.value peut se traduire par « envoie la valeur de ce bouton à la fonction » :

1. Quel est le nom de la célèbre souris de Walt Disney ?

Mighty Mouse
Mickey Mouse
Marty Mouse
Melvin Mouse

Vous pouvez créer le programme rapidement en copiant le code de la première question et en le collant dans les quatre questions suivantes. Assurez-vous cependant de bien modifier les numéros des questions pour chaque nom de bouton ainsi que la fonction qu’il appelle.

5. Ajoutez les lignes de la deuxième question :

2. Le personnage Buzz l'éclair apparaît dans quel dessin animé ?

Fantasia

Hercule
Toy Story

Mulan

6. Ajoutez les lignes de la troisième question :

3. Pluto est un chien, et Goofey ?

Un ours
Un mulet
Un cheval
Aussi un chien

7. Ajoutez les lignes de la quatrième question :

4. Qui essaye toujours de manger Titi ?

Poumba
Droopy
Grominet
Elmer

8. Ajoutez les lignes de la cinquième question :

5. Quelle est la nourriture préférée de Winnie l'ourson ?

Du miel
De la mélasse

Du beurre

Du yaourt

9. Ajoutez le code suivant pour fermer les balises , et :

Vous allez maintenant ajouter les fonctions permettant de comptabiliser chaque question. Les fonctions contiennent des commandes if, qui évaluent chaque réponse.

  Créez le code JavaScript permettant de comptabiliser le score des questions.

1. Remplacez la ligne // Ajoutez le code ici par la fonction suivante, qui compta¬bilise le score de la première question. Un message Réponse correcte apparaît si la réponse est juste, et un message Réponse incorrecte dans le cas contraire :

function scoreQuestion1(reponse) { if (reponse == "a")

alert("Réponse incorrecte"); if (reponse == "b")

alert("Réponse correcte"); if (reponse == "c")

alert("Réponse incorrecte"); if (reponse == "d")

alert("Réponse incorrecte");

}

2. Ajoutez la fonction scoreQuestion2() :

function scoreQuestion2(reponse) { if (reponse == "a")

alert("Réponse incorrecte"); if (reponse == "b")

alert("Réponse incorrecte"); if (reponse == "c")

alert("Réponse correcte"); if (reponse == "d")

alert("Réponse incorrecte");

}

3. Ajoutez la fonction scoreQuestion3() :

function scoreQuestion3(reponse) { if (reponse == "a")

alert("Réponse incorrecte"); if (reponse == "b")

alert("Réponse incorrecte"); if (reponse == "c")

alert("Réponse incorrecte"); if (reponse == "d")

alert("Réponse correcte");

}

4. Ajoutez la fonction scoreQuestion4() :

function scoreQuestion4(reponse) { if (reponse == "a")

alert("Réponse incorrecte"); if (reponse == "b")

alert("Réponse incorrecte"); if (reponse == "c")

alert("Réponse correcte"); if (reponse == "d")

alert("Réponse incorrecte");

}

5. Ajoutez la fonction scoreQuestion5() :

function scoreQuestion5(reponse) { if (reponse == "a")

alert("Réponse correcte"); if (reponse == "b")

alert("Réponse incorrecte"); if (reponse == "c")

alert("Réponse incorrecte"); if (reponse == "d")

alert("Réponse incorrecte");

}

6. Enregistrez le fichier sous le nom QCMDessinAnime1.html, et ouvrez-le dans votre navi-gateur. Lorsque vous sélectionnez une réponse à une question, le programme vous dit immédiatement si la réponse est juste. La figure 4.6 illustre ce fichier quand vous choisissez une mauvaise réponse à la première question :

function scoreQuestion2(reponse) { if (reponse == "a")

alert("Réponse incorrecte"); if (reponse == "b")

alert("Réponse incorrecte"); if (reponse == "c")

alert("Réponse correcte"); if (reponse == "d")

alert("Réponse incorrecte");

}

7. Fermez la fenêtre du navigateur.

Figure 4.6 – Le résultat du fichier QCMDessinAnime1.html.

La commande if... else

Lorsque vous utilisez une commande if, vous pouvez inclure une clause else pour exécuter un autre ensemble d’instructions si l’expression conditionnelle évaluée par la commande if retourne la valeur false.

Supposez que vous deviez écrire un programme qui utilise une commande if dont l’expres-sion conditionnelle évalue la valeur retournée par une boîte de dialogue invitant l’utilisateur à acheter des actions.

Si la condition est évaluée à true (l’utilisateur a cliqué sur le bouton OK), la commande if affiche une page Web sur les meilleurs investissements en actions. Si la condition est évaluée à false (l’utilisateur a cliqué sur le bouton Annuler), les commandes de la clause else affi¬chent une page Web sur les autres types d’investissement.

Une commande if qui inclut une clause else s’appelle une commande if... else. Vous pouvez vous représenter la clause else comme une solution de repli lorsque la condition de la commande if est évaluée à false.

La syntaxe de la commande if... else est la suivante :

if (expression conditionnelle) {

commande(s);

}

else {

commande(s);

}

Vous pouvez utiliser des blocs de commandes pour créer une commande if... else de la manière suivante :

if (condition) { commandes; }

else {

commandes;

}

Une commande if peut être créée sans clause else, mais la clause else ne peut être utilisée que dans une commande if.

La figure 4.7 illustre l’utilisation d’une commande if... else.

var aujourdhui = "Mardi"

if (aujourdhui == "Lundi")

document.writeln("Nous sommes lundi");

else

document.writeln("Nous ne sommes pas lundi");

Figure 4.7 – Un exemple de commande if... else.

Dans le programme illustré à la figure 4.7, la valeur Mardi est assignée à la variable aujourdhui. Comme if (aujourdhui == "Lundi") est évalué à false, le contrôle du programme passe à la clause else, et la commande docu-ment.writeln("Nous ne sommes pas lundi"); est exécutée, ce qui affiche la chaîne de caractères Nous ne sommes pas lundi. Si la valeur Lundi avait été assi-gnée à la variable aujourdhui, la commande if (aujourdhui == "Lundi") aurait été évaluée à true, et la commande document.writeln("Nous sommes lundi"); aurait été exécutée.

Il ne peut y avoir qu’une seule série d’instructions qui s’exécutent : soit les instructions qui suivent la commande if, soit les instructions qui suivent la clause else. Une fois que l’une des deux séries d’instructions a été exécutée, le code qui suit la commande if... else s’exécute normalement.

Le code JavaScript du programme QCMDessinAnime1.html que vous avez créé précédem-ment utilise plusieurs commandes if pour évaluer les réponses du questionnaire. Bien que ces commandes if multiples fonctionnent correctement, elles peuvent être simplifiées en utilisant des commandes if... else.

Vous allez à présent simplifier le programme QCMDessinAnime1.html de telle sorte qu’il contienne une commande if... else au lieu de plusieurs commandes if.

  Ajoutez des commandes if... else au fichier QCMDessinAnime1.html.

1. Chargez le fichier QCMDessinAnime1.html, et enregistrez-le sous le nom QCMDessinAnime2.html.
2. Puisque vous avez seulement besoin de la commande if pour tester la bonne réponse, vous pouvez grouper toutes les réponses fausses dans la clause else. Modifiez chacune des fonctions qui comptabilisent le score des questions de telle sorte que les commandes if multiples soient remplacées par une commande if... else. Le code suivant montre la modification du code de la fonction scoreQuestion1() :

function scoreQuestion1 (reponse) {

if (reponse == "b")

alert("Réponse correcte"); else

alert("Réponse incorrecte");

}

3. Sauvegardez le fichier QCMDessinAnime2.html, et ouvrez-le dans votre navigateur Web. Le programme doit fonctionner de la même manière que lorsqu’il ne contenait que des commandes if.
4. Fermez la fenêtre du navigateur.

◆ Les commandes if et if... else imbriquées

Lorsque vous prenez une décision à l’aide d’une structure de contrôle telle que if ou if... else, vous pouvez prévoir d’autres alternatives et définir des tests conditionnels supplémen¬taires.

Supposez, par exemple, que vous rédigiez un programme qui utilise une commande if pour demander à l’utilisateur s’il aime le sport. Si l’utilisateur répond par l’affirmative, vous pouvez exécuter une autre commande if pour lui demander s’il préfère les sports individuels ou les sports d’équipe. Dans la mesure où vous pouvez inclure n’importe quelle instruction dans la commande if ou dans la clause else, vous pouvez également insérer d’autres commandes if ou if... else.

Une commande if insérée au sein d’une autre commande if ou d’une commande if... else s’appelle une commande if imbriquée. De la même manière, une commande if... else insérée au sein d’une autre commande if ou d’une commande if... else s’appelle une commande if... else imbriquée. Vous utilisez les commandes if et if... else imbri¬quées pour ajouter d’autres conditions à la condition originale.

Le code suivant accomplit deux évaluations conditionnelles avant l’exécution de la commande document.writeln() :

var nombre = 7 ;

if (nombre > 5)

if (nombre < 10)

document.writeln(

"Ce nombre est compris entre 5 et 10.");

Si l’une des deux conditions de cet exemple est évaluée à false, l’interpréteur JavaScript ignore le reste de la commande if.

Vous pouvez imbriquer des commandes if... else. Lorsque vous utilisez des clauses else avec des commandes if imbriquées, vous devez savoir à quelle commande if correspond la clause else qui lui est associée. La clause else fait partie de la commande if la plus proche.

Examinez le code suivant :

var nombre = 7;

var PlageNombre;

if (nombre > 5)

if (nombre > 10)

PlageNombre = "Le nombre est supérieur à 10.";

else

PlageNombre = "Le nombre est inférieur à 5.";

document.writeln(PlageNombre);

Dans la mesure où une clause else fait partie de la commande if la plus proche, la clause else de l’exemple ci-dessus fait partie de la deuxième commande if. Dans ce cas, puisque la variable nombre n’est pas supérieure à 10, la commande de la clause else, qui assigne la chaîne « Le nombre est inférieur à 5 » à la variable PlageNombre, s’exécute. Ce résultat est incorrect puisque la première commande if a déjà déterminé que la variable nombre était supérieure à 5.

Il serait erroné de croire que la clause else fait partie de la première commande if en raison de l’indentation du code. Rappelez-vous que l’interpréteur JavaScript ignore l’indentation ou les espaces, que vous n’utilisez que pour rendre le code plus lisible.

Le code suivant illustre une version modifiée du programme, avec une clause else supplé-mentaire, qui corrige le programme :

var nombre = 7;

var PlageNombre;

if (nombre > 5)

if (nombre > 10)

PlageNombre = "Le nombre est supérieur à 10.";

else

PlageNombre = "Le nombre est inférieur à 10.";

else

PlageNombre = "Le nombre est inférieur à 5.";

document.writeln(PlageNombre);

Vous pouvez imbriquer les commandes if sur autant de niveaux que vous le souhaitez. Cependant, votre code risque de devenir rapidement illisible si le niveau d’imbrication est trop important. Dans la figure 4.8, chaque commande if évalue la variable pays, puis le contrôle du programme passe à la commande if suivante située dans une clause else.

var pays = "France"

if (pays == "Espagne")

document.writeln("Buenos dias");

else

if (pays == "Allemagne")

document.writeln("Guten Tag");

else

if (pays == "Italie")

document.writeln("Buon giorno");

else

if (pays == "France")

document.writeln("Bonjour");

else

document.writeln("Je ne parle pas votre langue");

Figure 4.8 – Un programme d’accueil employant des commandes if imbriquées.

Notez que la clause else finale ne contient aucune commande if. Une clause else finale sans commande if, au sein d’un ensemble de commandes if imbriquées, est utilisée pour accomplir une tâche lorsque aucune des précédentes commandes if ne remplit la condition.

Un moyen plus efficace de concevoir le programme illustré à la figure 4.8 consiste à inclure chaque commande if sur la même ligne que la clause else précédente. Rappelez-vous que l’interpréteur JavaScript ne prend pas en compte les retours chariot. Cette modification n’aura aucune incidence sur l’exécution de la fonction. La figure 4.9 illustre une version modifiée du programme de la figure 4.8.

var pays = "France"

if (pays == "Espagne")

document.writeln("Buenos dias");

else if (pays == "Allemagne")

document.writeln("Guten Tag");

else if (pays == "Italie")

document.writeln("Buon giorno");

else if (pays == "France")

document.writeln("Bonjour");

else

document.writeln("Je ne parle pas votre langue");

Figure 4.9 Une version modifiée du programme d’accueil employant des commandes if imbriquées.

Le code JavaScript du fichier QCMDessinAnime2.html est assez inefficace, puisqu’il contient plusieurs fonctions qui accomplissent la même tâche de comptabilisation du score. Une meilleure méthode de comptabilisation des réponses du questionnaire consiste à inclure des structures de contrôle imbriquées au sein d’une même fonction.

Vous allez modifier le code JavaScript du fichier QCMDessinAnime.html de façon qu’il contienne une seule fonction contrôlant la réponse juste à chaque question, en utilisant des commandes if... else imbriquées.

  Ajoutez des commandes if... else imbriquées au fichier QCMDessinAnime.html.

1. Chargez le fichier QCMDessinAnime2.html, et enregistrez-le sous le nom QCMDessinAnime3.html.
2. Supprimez les cinq fonctions à l’intérieur de la paire de balises .
3. Ajoutez la première ligne suivante de la fonction unique qui va contrôler toutes les réponses :

function scoreQuestions(numero, reponse) {

Vous envoyez un argument réponse à la fonction scoreQuestions, tout comme vous le faisiez avec les fonctions qui comptabilisaient chaque question individuelle. Vous envoyez également à la fonction scoreQuestions un nouvel argument, numero, qui représente le numéro de question.

4. Appuyez sur la touche Entrée, et ajoutez la commande if d’ouverture, qui vérifie si le numéro de la question est égal à 1. Dans un tel cas, une commande if... else imbriquée évalue la réponse :

if (numero == 1) {

if (reponse == "b")

alert("Réponse correcte"); else

alert("Réponse incorrecte");

}

5. Ajoutez une commande if... else pour la question n° 2 :

else if (numero == 2) { if (reponse == "c")

alert("Réponse correcte"); else

alert("Réponse incorrecte");

}

6. Ajoutez une commande if... else pour la question n° 3 :

else if (numero == 3) { if (reponse == "d")

alert("Réponse correcte"); else

alert("Réponse incorrecte");

}

7. Ajoutez une commande if... else pour la question n° 4 :

else if (numero == 4) { if (reponse == "c")

alert("Réponse correcte"); else

alert("Réponse incorrecte");

}

8. Ajoutez une commande if... else pour la question n° 5 :

else if (numero == 5) { if (reponse == "a")

alert("Réponse correcte"); else

alert("Réponse incorrecte");

}

9. Ajoutez un crochet fermant (}) pour terminer le code de la fonction scoreQuestions().

10.À l’intérieur des cinq balises , changez le nom de la fonction appelée dans le gestion¬naire d’événement onClick() en scoreQuestions(numéro, this.value), en modifiant l’argument numéro de façon qu’il prenne le numéro de réponse correct. Par exem¬ple, le gestionnaire d’événement de la question n° 1 doit s’écrire : scoreQuestions(1, this.value).

11.Sauvegardez le fichier HTML, et ouvrez-le dans votre navigateur Web. Le programme doit fonctionner de la même manière que lorsqu’il contenait des commandes if et plusieurs fonctions.

12.Fermez la fenêtre du navigateur.

La commande switch

La commande switch est une autre commande JavaScript utilisée pour contrôler le flux d’un programme en exécutant un ensemble de commandes, en fonction de la valeur d’une expres¬sion. La commande switch compare la valeur d’une expression à une étiquette contenue dans la commande switch. Si la valeur correspond à une étiquette, la commande associée à cette étiquette est exécutée. Par exemple, vous pouvez avoir dans votre programme une variable nommée MusiquesPreferees.

Une commande switch peut évaluer la variable – qui est une expression – et la comparer à une étiquette au sein de la commande switch. La commande switch peut contenir diffé¬rentes étiquettes, telles que Jazz, Rock ou Rap. Si la variable MusiquesPreferees est égale à Rock, les commandes qui font partie de l’étiquette Rock sont exécutées. Bien que vous puissiez obtenir le même résultat avec des commandes if ou if... else, une commande switch facilite l’organisation des différents branchements de code à exécuter.

La commande switch comprend les éléments suivants : le mot-clé switch, une expression, un crochet ouvrant, une étiquette case, le mot-clé break, une étiquette default, des commandes exécutables et un crochet fermant.

Voici la syntaxe de la commande switch :

switch (expression) { case etiquette: commande(s); break;

case étiquette: commande(s); break;

...

default:

commande(s);

}

Les étiquettes au sein de la commande switch sont appelées étiquettes case. Elles marquent des segments de code spécifiques. Une étiquette case se compose du mot-clé case, suivi d’une valeur littérale ou d’un nom de variable et d’un caractère deux-points. JavaScript compare la valeur retournée par l’expression de la commande switch à la valeur littérale ou au nom de la variable suivant le mot-clé case. S’il y a correspondance, les commandes de l’étiquette case sont exécutées.

Par exemple, l’étiquette case, case 3.17: représente une valeur numérique en virgule flottante de 3,17. Si la valeur de l’expression de la commande switch est égale à 3,17, les commandes de l’étiquette case 3.17: sont exécutées. Vous pouvez utiliser une grande variété de types de données comme étiquettes case. La figure 4.10 illustre quelques exemples d’étiquettes case.

Une étiquette case peut être suivie d’une ou plusieurs commandes. Cependant, à la différence des commandes if, les commandes multiples pour une étiquette case n’ont pas besoin d’être insérées à l’intérieur d’un bloc de commandes.

case exempleVar: // nom de variable

commande(s)

case "chaîne de caractères" // littéral chaîne

commande(s)

case 75: // littéral entier

commande(s)

case –273.4: // littéral en virgule flottante

commande(s)

Figure 4.10 – Des exemples d’étiquettes case.

Certains langages de programmation, tels Java et C++, nécessitent que toutes les étiquettes case à l’intérieur d’une commande switch soient du même type de données.

L’étiquette default est un autre type d’étiquette utilisé au sein de la commande switch. Elle contient les commandes qui s’exécutent lorsque la valeur retournée par l’expression conditionnelle de la commande switch ne correspond à aucune étiquette case. Une étiquette default se compose du mot-clé default suivi du caractères deux-points.

Quand une commande switch s’exécute, la valeur retournée par l’expression conditionnelle est comparée à chaque étiquette case dans l’ordre de leur déclaration. En cas de correspon¬dance avec une étiquette, ses commandes sont exécutées. À la différence de ce qui se produit avec la commande if... else, l’exécution du programme ne quitte pas automatiquement la structure switch après exécution des commandes d’une étiquette case. Cela signifie que la commande switch continue a évaluer le reste des étiquettes case de la liste.

 Une fois qu’une correspondance avec une étiquette case est trouvée, l’évaluation des autres étiquettes case n’est pas nécessaire. Si vous travaillez avec une commande switch compor¬tant de nombreuses étiquettes case, l’évaluation des étiquettes case supplémentaires peut potentiellement ralentir votre programme.

C’est une bonne habitude à prendre en programmation que de terminer une commande switch une fois qu’elle a accompli sa tâche. Une commande switch se termine automa-tiquement lorsque l’interpréteur JavaScript rencontre un crochet fermant (1) ou une commande break. Une commande break est utilisée pour sortir d’une commande switch et d’autres structures de contrôle qui permettent de réaliser des boucles telles que while, do... while, for et for... in. Pour terminer une commande switch une fois qu’elle a terminé sa tâche, vous devez inclure une commande break dans chaque étiquette case.

Vous en apprendrez plus sur les boucles à la section B de ce cours.

La figure 4.11 illustre une commande switch au sein d’une fonction. Lors de l’appel de la fonction, l’argument nommé villeFrance est passé. La commande switch compare le contenu de l’argument villeFrance aux étiquettes case. S’il y a correspondance, le nom de la ville est retourné, et une commande break termine la commande switch. Si aucune correspondance n’est trouvée, la valeur France est retournée par l’étiquette default.

function departement_ville(villeFrance) {

switch (villeFrance) {

case "Lyon":

return "Rhône";

break;

case "Dijon":

return "Côte d'Or";

break;

case "Bordeaux":

return "Gironde";

break;

case "Grenoble":

return "Isère";

break;

case "Lille":

return "Nord";

break;

default:

return "France"

1

1

document.writeln(departement_ville("Lyon"));

Figure 4.11 – Une fonction contenant une commande switch.

 Vous arrivez au même résultat avec la commande if qu’avec la commande switch. Il est toutefois plus efficace d’utiliser la commande switch si vous n’avez besoin d’évaluer qu’une seule expression. Reportez-vous, par exemple, au programme d’accueil illustré à la figure 4.9, qui a été créé en utilisant une série de commandes if... else. Le programme fonctionne, mais il n’est pas des plus efficaces, car l’évaluation conditionnelle qui compare la variable pays au nom d’un pays spécifique se répète plusieurs fois. Vous pouvez écrire une version plus efficace du même programme en utilisant une commande switch, comme illustré à la figure 4.12.

var pays = "France"

switch (pays) {

case "Espagne":

document.writeln("Buenos dias");

break