Le but d'un programme n'est pas simplement afficher bêtement du texte à l'utilisateur dans la console. Il serait intéressant de "rendre intelligent" notre programme afin qu'il puisse réaliser une action particulière lorsque qu'une variable rempli un état et ainsi capable de prendre une décision.

La structure conditionnelle "if" (Si)

Dans la plupart des programmes respectant la notions de l'algorithmique, le JavaScript est capable de prendre en compte les structures conditionnelles tel que "Si une condition est vrai, alors effectuer une condition". Par exemple, Si "Une voiture appuie sur le bouton", Alors "Lever la barrière". Voyons ensemble les différentes structures de contrôles.

La forme de base : Si... Alors... Sinon...

L'algorithme standard se présente sous la logique suivante :

Si (condition vraie) Alors
    # -> "Actions à exécuter si la condition est vraie"
Sinon
    # -> "Actions à exécuter si la condition est fausse"
Fin Si

L'équivalent du codage en Javascript sera :

if (condition) {
    # Code à exécuter si la condition vaut "True"
} else {
    # Code à exécuter si la condition vaut "False"
}

Voici un exemple concret :

let temperature = 15,      // Pour la température
    message;               // Pour le message de retour
    
if (temperature >= 20) {
    // La variable "temperature" est supérieure ou égal à 20.
    message = "Il fait chaud";
} else {
    // La variable "temperature" est inférieure ou égal à 20.
    message = "Il fait froid";
}

// Message de retour en fonction de la condition
console.log(message);

La forme simplifiée : Si ... Alors ...

Il n'est pas toujours nécessaire d'avoir à coder des instructions si la condition est fausse, dans ce cas, le codage de la structure sera plus simple :

if (condition) {
     # -> Code à exécuter si la condition vaut "true"
}

Par exemple :

let temperature = 15;

if (temperature > 20) {
    console.log("Attention ! La température a dépassé les 20°.");
}

Les conditions multiples

Dans certains cas, il peut être nécessaire de combiner les résultats de plusieurs comparaisons pour obtenir la condition souhaitée. Pour cela on utilise les opérateurs booléens ET (symbole &&) ou OU (symbole ||).

Par exemple, lorsqu'on souhaite vérifier qu'une variable est comprise entre 2 valeurs, il faut vérifier d'une part si elle supérieure à la plus petite des deux valeurs et d'autre part si elle est inférieure à la plus grande :

let temperature = 15;

if ((temperature > 10) && (temperature < 20)) {
   console.log("La température mesurée est correcte) ;
}

Ce code permet d'afficher un message indiquant que la température est correcte lorsqu'elle est comprise entre 10° et 20°.

Extension avec "Else if"

La séquence if...else if...else est une structure conditionnelle qui permet d'étendre le nombre de cas que l'on souhaite vérifier à l'intérieur d'une structure if...else.... En effet, il est possible d'écrire autant de else if que l'on veut dans une structure if ... else... En plus de if...else chaque else if permettra de tester une nouvelle condition.

Codage en JavaScript :

if (condition1) {
    # -> Code à exécuter si condition1 vaut "true"
} else if (condition2) {
    # -> Code à exécuter si condition2 vaut "true"
} else if (condition3) {
    # -> Code à exécuter si condition3 vaut "true"
} else {
    # -> Code à exécuter si aucune condition vaut "true"
}

Exemple :

let x = 0.5,        // Valeur de x
    message;        // Pour le message de retour

if (x > 1) {
    message = "x contient une valeur strictement supérieure à 1";
} else if (x == 1) {
    message = "x contient la valeur 1";
} else {
    message = "x contient une valeur strictement inférieure à 1";
}

// Message de retour en fonction de la condition
console.log(message) ;

La structure conditionnelle à choix multiple "switch" (Selon)

Cette structure permet d'exécuter du code en fonction de la valeur d'une variable, comme l'instruction else if, elle offre la possibilité de gérer autant de cas qu'on le souhaite. L'instruction switch représente une alternative à l'utilisation de la forme if ... else if ... else ... mais n'est pas strictement équivalente car chaque cas est associé à une et une seule valeur particulière.

En effet, l'instruction switch ne supporte pas l'utilisation des opérateurs de supériorité ou d'infériorité.

Algorithme :

Selon (variable_A_Tester) Parmi :
    Cas valeur1 :
        # -> Code à exécuter si variable_A_Tester vaut valeur1
    Cas valeur2 :
        # -> Code à exécuter si variable_A_Tester vaut valeur2
    ....
    Autrement par défaut
        # -> Code à exécuter si variable_A_Tester ne vaut aucune des valeurs précédentes
Fin Selon

Attention, les valeurs à tester ne peuvent être que des valeurs entières ou éventuellement des chaines de caractères

Codage en JavaScript :

switch(variable_A_Tester) {
   case valeur1:
        // Code à exécuter si "variable_A_Tester" vaut valeur1break;case valeur2:// Code à exécuter si "variable_A_Tester" vaut valeur2break;
   ....
   default:
        // Code à exécuter si "variable_A_Tester" ne vaut aucune des valeurs précédentes
}

Chaque case doit se terminer par une instruction break pour indiquer à JavaScript qu'il doit sortir du switch et ne pas continuer à tester les autres case dès que l'un d'entre eux correspond à la valeur de la variable testée.

Exemple :

let nombre = 1,         // Pour le nombre choisi
    codeBinaire;        // Pour le résultat du code binaire

// Comparaison du chiffre en fonction des différents cas
switch (nombre) {
   case 0: 
     codeBinaire = "00";
     break;
   case 1:
     codeBinaire = "01";
     break;
   case 2:
     codeBinaire = "10";
     break;
   case 3:
     codeBinaire = "11";
     break;
   default:
     codeBinaire = "inconnu";      
}

// Retour du code binaire en fonction du nombre
console.log(codeBinaire);

Activité 1 : Interprétation de l'IMC

L'interprétation de l'IMC permet de fournir une description correspondant à la corpulence d'une personne, elle se fait selon les critères définis par l'OMS (Organisation Mondiale de la santé).

Dans votre EDI préféré comme Visual Studio Code par exemple, créez dans votre dossier de projet un nouveau fichier HTML 5 (.html) et ainsi qu'un fichier JavaScript (.js). Compléter l'application de calcul d'IMC avec la séquence qui permet de donner l'interprétation correspondant à la valeur de l'IMC. L'interprétation sera affichée dans la console du navigateur à la suite de la valeur de l'IMC :