Les conditions if else en JavaScript

Objectif

• Connaitre les structures conditionnelles de type if...else en JavaScript
• Manipuler les structures conditionnelles de type if...else en JavaScript.

Présentation

• On appelle structure conditionnelle les instructions qui permettent de tester si une condition est vraie ou non.
• L'instruction if est la structure de test la plus basique. Elle permet d'exécuter une série d'instructions si une condition est vraie.
• Les instructions conditionnelles de JavaScript:
if if-else nested-if if-else-if Ces instructions vous permettent de contrôler le flux de l'exécution de votre programme en fonction de conditions connues uniquement pendant l'exécution.

Définition et utilisation

1. Structure avec un if simple

   • La structure conditionnelle if permet de tester si une condition est vraie. Dans ce cas elle a la valeur booléenne true. Si c'est le cas alors le programme exécute l'instruction qui suit ou le bloc d'instructions qui suit.

   1. Syntaxe:

      // La condition toujours entre parenthèses
      if ( condition ) une_seule_instruction ;
      if ( condition ) {
      	// Un bloc = une ou plusieurs instructions
      	// entre une paire d'accolades
      	instruction_1 ;
      	instruction_2 ;
      }

   2. Exemple:

      if ( true ) alert('C\'est true'); // Affiche C'est true
      if ( false ) alert("C'est false"); // Affiche rien

2. Structure avec l'alternative else

   • L'instruction if... else permet de choisir entre deux blocs d'instructions lors d'un test logique.
   • L'instruction if... else utilise les opérateurs de comparaison pour des tests de type boolean (vrai/faux).
   • Cette instruction est conditionnelle, elle permet de choisir entre deux blocs d'instructions celui qui sera exécuté selon que la condition passée en paramètre est vraie (true) ou fausse (false).
   • L'instruction if / else exécute un bloc de code si une condition spécifiée est vraie. Si la condition est fausse, un autre bloc de code peut être exécuté.

   1. Syntaxe:

      

      if (condition) {
      Instruction1
      InstructionN
      } else {
      Instruction1
      InstructionM
      }

   2. Exemple :

      // hasard est un nombre aléatoire compris entre 0 et 100
      hasard = Math.round(100*Math.random())
      // Si hasarf vaut 7, on écrit 'hasard vaut 7'
      if ( hasard == 7 ) {
      document.write('hasard vaut 7' + '<BR>')
      // Sinon, on écrit 'hasard ne vaut pas 7'
      } else {
      document.write('hasard ne vaut pas 7' + '<BR>')
      }

3. Structure avec l'alternative else if

   • Il est possible de mettre les tests de conditions "les uns à la suite des autres" avec autant de else if que l'on veut.

   1. Syntaxe :

      // Si condition_1
      if ( condition_1 ) {
      	// premier bloc
      // sinon si condition_2
      } else if ( condition_2 ) {
      	// deuxième bloc
      // sinon si condition_3
      } else if ( condition_3 ) {
      	// troisième bloc
      // sinon
      } else {
        // quatrième bloc
      }

   2. Exemple :

      if ( false )
        alert(1); 
      else if ( false )
        alert(2);
      else
        alert(3); // Affiche 3

4. Structure nested-if

   • Une structure "nested-if" en JavaScript, c'est-à-dire des instructions "if" imbriquées, vous permet de gérer des conditions complexes en vérifiant plusieurs critères à différents niveaux.
   • Un if imbriqué est une instruction if qui est la cible d'un autre if ou else.
   • Les instructions if imbriquées signifient une instruction if dans une instruction if. Oui, JavaScript nous permet d'imbriquer des instructions if dans des instructions if. c'est-à-dire que nous pouvons placer une instruction if dans une autre instruction if.

   1. Syntaxe :

      if(condition1) 
      {
         // S'exécute lorsque la condition1 est vraie
         if(condition2) 
         {
            // S'exécute lorsque la condition2 est vraie
         }
      }

   2. Exemple :

      <script type = "text/javaScript"> 
      let age = 25;
      let isCitizen = true;
      
      if (age >= 18) {
        if (isCitizen) {
          console.log("Vous êtes majeur et citoyen.");
        } else {
          console.log("Vous êtes majeur, mais vous n'êtes pas citoyen.");
        }
      } else {
        console.log("Vous n'êtes pas majeur.");
      }
      < /script> 

   3. Application :

      • Enoncé
        • Écrivez un programme qui demande à l'utilisateur son poids en kilogrammes et sa taille en mètres, puis calcule l'indice de masse corporelle (IMC). Ensuite, en utilisant des instructions "if" imbriquées, affichez une catégorie d'IMC (sous-poids (<16.5>, poids normal (< 24.9), surpoids (< 29.9), obésité(> 29.9)) en fonction de la valeur de l'IMC.
        • Utilisez la formule suivante pour calculer l'IMC IMC = poids / (taille * taille).
      • Solution
        Script

        // Demander à l'utilisateur son poids en kilogrammes
        let poids = parseFloat(prompt("Entrez votre poids en kilogrammes :"));
        
        // Demander à l'utilisateur sa taille en mètres
        let taille = parseFloat(prompt("Entrez votre taille en mètres :"));
        
        // Calculer l'IMC (Indice de Masse Corporelle)
        let imc = poids / (taille * taille);
        
        // Afficher la catégorie d'IMC en fonction de la valeur de l'IMC en utilisant des instructions "if" imbriquées
        if (imc < 16.5) {
          console.log("Votre IMC indique un sous-poids sévère.");
        } else {
          if (imc < 18.5) {
            console.log("Votre IMC indique un sous-poids modéré.");
          } else {
            if (imc < 24.9) {
              console.log("Votre IMC est dans la plage de poids normal.");
            } else {
              if (imc < 29.9) {
                console.log("Votre IMC indique un surpoids.");
              } else {
                console.log("Votre IMC indique de l'obésité.");
              }
            }
          }
        }
        

   Dans le cas ou il n'y a qu'une instruction, les accolades sont facultatives. ☛Il est possible d'imbriquer des structures conditionnelles (la forme généralisée) ☛ Une autre syntaxe pour exprimer une condition : (expression) ? instruction1 : instruction2 Si l'expression entre parenthèse est vraie, l'instruction1 est exécutée. Si l'expression entre parenthèses est fausse, c'est l'instruction2 qui est exécutée.

Applications

1. A1

   • Dans un programme Javascript demander à l'utilisateur de saisir trois chiffres
   • Le programme doit afficher le maximum de ses trois chiffres

   <!doctype html>
   <HTML>
   <HEAD>
   <TITLE>la structure IF</TITLE>
   </HEAD>
   <BODY>
   
   <script language="javascript">
   var a= window.prompt("Entrez un premier entier :","");
   var b= window.prompt("Entrez un deuxième entier :","");
   var c= window.prompt("Entrez un troisième entier :","");
   
   if (Number(a)>Number(b))
   {
    m=a;
    }else
   {
    m=b;
   }
   if (Number(c)>Number(m))
   {
    m=c;
   }
   
   alert("le maximum de "+a +" , "+b +" et "+c +" est = "+m);
   
   </script>
   </BODY>
   </HTML>

2. A2

   • Créer le programme JavaScript suivant :
   • Si l'heure est inférieure à 20h00, créez une salutation "Bonne journée", sinon "Bonne soirée":
   • La salutation doive être affectée à une variable avant d’être affichée

   <!doctype html>
   <HTML>
   <HEAD>
   <TITLE>la structure IF</TITLE>
   </HEAD>
   <BODY>
   
   <script language="javascript">
   var time = new Date().getHours(); 
   if (time < 20) {
       saluer = "Bonne journée";
   } else {
       saluer = "Bonne soirée";
   alert(saluer);
   }
   </script>
   </BODY>
   </HTML>

3. A3

   • Créer une page HTML5 , contenant un formulaire qui demande à un visiteur d'entrer un nombre compris entre 0 et 99
   • Un script JavaScript doit annoncer si le nombre saisie est inférieur,égal ou supérieur 80

   <!doctype html>
   <HTML>
   <HEAD>
   <TITLE>la structure IF</TITLE>
   </HEAD>
   <BODY>
    
   <script language="javascript">
   var chiffre = prompt("Saisir un nombre compris entre 0 et 99"); 
   if (chiffre > 80) {
       alert(" Le nombre"+chiffre+ " est supérieure à 80");
   } else if (chiffre < 80){
       alert(" Le nombre"+chiffre+ " est inférieure à 80");
   }
   else{
       alert(" Le nombre"+chiffre+ " est égale à 80");
   }
   </script>
   </BODY>
   </HTML>