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

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.

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 ;
}

Exemple:

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

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é.

Syntaxe:

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

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>')
}

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.

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
}

Exemple :

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

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.

Syntaxe :

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

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>

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

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>

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>

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>

Sommaire du cours JavaScript

La structure switch en JavaScript

Sommaire du cours JavaScript

JavaScript

Les conditions if else en JavaScript

Les conditions if else en JavaScript

Objectif

Présentation

Définition et utilisation

Structure avec un `if` simple

Syntaxe:

Exemple:

Structure avec l’alternative `else`

Syntaxe:

Exemple :

Structure avec l’alternative `else if`

Syntaxe :

Exemple :

Structure `nested-if`

Syntaxe :

Exemple :

Application :

Applications

A1

A2

A3

Sommaire du cours JavaScript

L’accès aux éléments HTML en Javascript

La structure switch en JavaScript

JavaScript

Les conditions if else en JavaScript

Objectif

Présentation

Définition et utilisation

Structure avec un if simple

Syntaxe:

Exemple:

Structure avec l’alternative else

Syntaxe:

Exemple :

Structure avec l’alternative else if

Syntaxe :

Exemple :

Structure nested-if

Syntaxe :

Exemple :

Application :

Applications

A1

A2

A3

Sommaire du cours JavaScript

L’accès aux éléments HTML en Javascript

La structure switch en JavaScript

You may also like

Correction exercices les évènements en JavaScript Série01

Exercices les évènements en JavaScript : Série 01

Correction Exercices les Fonctions en Javascript Série 01

Structure avec un `if` simple

Structure avec l’alternative `else`

Structure avec l’alternative `else if`

Structure `nested-if`