JavaScript/Structures de contrôle

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Structures conditionnelles

Tests conditionnels avec if et else

Les instructions if et else mettent en place une condition dans le code. Elles permettent de différencier plusieurs cas lors de l'exécution.

if (condition){
  ...
}else{
  ...
}

Dans la condition, on se sert généralement des opérateurs de comparaison mais toute fonction renvoyant un booléen est autorisée.

var age = 15;

if (age >= 18){
  document.write("Vous pouvez entrer.");
}else{
  document.write("Vous ne pouvez pas entrer.");
}

Notez que ceci est également possible (lorsque le bloc à exécuter ne nécessite qu'une seule ligne) :

var age = 15;

if (age >= 18) document.write("Vous pouvez entrer.");
else document.write("Vous ne pouvez pas entrer.");

On peut aussi rajouter des conditions intermédiaires entre le if et le else qui permettront de tester plus de cas. Voyez plutôt :

var temps = "orageux";
var je_prends;

if (temps == "ensoleillé") je_prends = "mon parasol.";
else if (temps == "nuageux") je_prends = "mon chapeau.";
else if (temps == "pluvieux") je_prends = "mon parapluie.";
else je_prends = "mon paratonnerre.";

document.write("Lorsque le temps est "+temps+", je prends "+je_prends);
// Lorsque le temps est orageux, je prends mon paratonnerre.

Cet exemple montre comment gérer simplement les conditions multiples en JavaScript.

Rallier plusieurs conditions

Il est possible de rallier plusieurs conditions en une seule. Évidemment, la précision sera moindre mais cela se révèle vite incontournable et très pratique. Pour cela il existe deux opérateurs très simples d’utilisation.

• && : il veut dire ET.
• || : il veut dire OU.

Voyons comment cela fonctionne :

var temps = "neigeux";
var temperature = -5;
var je_prends;

if (temps == "neigeux" || temperature <= 0) je_prends = "ma luge ou mon gros blouson.";
else if (temps == "neigeux" && temperature <= 0) je_prends = "ma luge et mon gros blouson.";
else je_prends = "mes lunettes de soleil."; // Avec un peu de chance il fait beau :)

document.write("Lorsque le temps est "+temps+" et que la température est de "+temperature+"{{Abbr|°C|degré Celcius}}, je prends "+je_prends);
// Lorsque le temps est orageux et que la température est de -5{{Abbr|°C|degré Celcius}}, je prends ma luge ou mon gros blouson.

On peut aussi séparer les ET et les OU avec des parenthèses.

L'alternative switch

Il existe une alternative intéressante aux if et else. En effet, lorsque vous avez un nombre important de cas à vérifier, il peut être intéressant de ne pas avoir à recopier une cascade de else if.

Pour cela, il y a le mot-clé switch :

switch (variable)
{
  case a:  /*...*/  break;
  case b:  /*...*/  break;
  case c:  /*...*/  break;
  default:  /*...*/  break;
}

L'instruction switch permet de gérer plusieurs cas en fonction de la valeur d'une variable.

Exemple :

var temps = "soleil";
var je_prends;

switch (temps)
{
  case "soleil": je_prends = "mon parasol."; break;
  case "nuageux": je_prends = "mon chapeau."; break;
  case "pluvieux": je_prends = "mon parapluie."; break;
  default: je_prends = "mon paratonnerre."; break;
}

document.write("Lorsque le temps est "+temps+", je prends "+je_prends);
// Lorsque le temps est soleil, je prends mon parasol.

Vous admettrez que la seconde méthode est préférable :-)

Structures ternaires

Derrière ce nom "barbare" se cache un procédé raisonnablement complexe mais surtout très pratique et permettant de gagner du temps, de la place et de la lisibilité.

Les ternaires sont en fait un concentré d'un groupe if et else (sans else if au milieu). Cela permet d'écrire une condition en une seule ligne. C’est une alternative aux structures conditionnelles vues précédemment. Voici la syntaxe :

(condition) ? ...bloc du if : ...bloc du else

Le "?" remplace donc l'accolade du if tandis que les " : " remplacent celle du else. Un code avec if et else :

var age = 15;

if (age >= 18) document.write("Vous pouvez entrer.");
else document.write("Vous ne pouvez pas entrer.");

Un code avec structure ternaire renvoyant le même résultat :

var age = 15;

document.write((age >= 18) ? "Vous pouvez entrer." : "Vous ne pouvez pas entrer.");

Pratique non ?

Ici, on a mis la condition en ternaire directement dans le document.write (allez faire ça avec un if...)

Structures répétitives : les boucles

Qu'est-ce qu'une boucle ?

Une boucle, c’est un bloc d'instructions qui sera répété tant qu'une condition sera vérifiée (= true). Une boucle peut être finie (elle finira à un moment) ou au contraire infinie (généralement il s'agit d'une erreur de code et cela finit par faire "planter" le navigateur).

La boucle while

L'instruction while est la boucle la plus simple d’utilisation puisqu'elle ne comporte qu'un seul "argument" : la condition ! Voici la syntaxe de while :

while (condition)
{
  ... (instructions, incrémentation...)
}

Voici un exemple simple :

var i = 0;
while (i < 5){
  document.write("Ligne "+i+"<br />");
  i++;
}
document.write("Boucle terminée !");

Cela va vous afficher ceci :

Ligne 0

Ligne 1

Ligne 2

Ligne 3

Ligne 4

Boucle terminée !

L'instruction do... while

La boucle do while est la sœur de la boucle while puisqu’il s'agit de la même boucle SAUF que le bloc d'instruction s'effectuera au minimum une fois et ce même si la condition de la boucle n’est pas vérifiée dès le début.

Voici un exemple simple :

var i = 5;
do
{
  document.write("Ligne "+i+"<br />");
  i++;
} while (i < 5);

document.write("Boucle terminée !");

Ici, la condition vaut false dès le début. Un while normal aurait donc sauté la condition pour passer à la suite du code. Mais le do while exécute une fois le code et affiche :

Ligne 5

Boucle terminée !

L'instruction for

Cette structure répétitive ne porte pas bien son nom contrairement aux précédentes. Pour faire court, for est un alias de while à la différence qu'elle regroupe en son sein l'initialisation de(s) variable(s) utilisée(s), la condition ainsi que l'incrémentation (décrémentation) de celle(s)-ci.

Syntaxe :

for (initialisation; condition; incrémentation)
{
  ...
}

Exemple :

for (i = 0; i<5; i++)
{
  document.write("Ligne "+i+"<br />");
}
document.write("Boucle terminée !");

Le résultat est le même que celui de la boucle while. Ceci dit, l’utilisation d'une des trois boucles dépend du contexte et des besoins du script.

L'instruction break

Il arrive parfois que l’on veuille sortir d'une boucle alors même que la condition de la boucle est encore vraie. Pour cela, on peut faire appel à l'instruction break. Lorsque cette instruction est exécutée, la boucle se termine immédiatement et le code la suivant est exécuté.

var i = 1;
while (i <= 10)
{
  if (i == 5) break;
  i++;
}
document.write("La valeur de i est "+i);

Ce qui affiche : La valeur de i est 5. En effet, le programme sort de la boucle lorsque i prend la valeur de 5, donc après 4 tours.

L'instruction continue

Le rôle de l'instruction continue est de sauter le tour actuel et d’en recommencer un nouveau. Cette instruction s'utilise exactement de la même façon que break.