Mis à jour le 19/11/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Ajoutez des conditions

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Jusqu'à présent, toutes les instructions de nos programmes (à part les commentaires) étaient systématiquement exécutées. Nous allons voir comment enrichir nos programmes en y ajoutant des possibilités d'exécution conditionnelle.

TL;DR

  • Le mot-clé if  définit une instruction conditionnelle, appelée également test. Les instructions associées au  if  ne sont exécutées que si la condition est vérifiée (vraie). Une condition est une expression dont l'évaluation produit une valeur booléenne (true  ou  false).

  • Les instructions associées à une instruction  if  sont regroupées dans un bloc de code délimité par une paire d'accolades ouvrante et fermante. Pour plus de lisibilité, le contenu d'un bloc de code être indenté (décalé vers la droite) par rapport à l'instruction à laquelle il est associé.

  • Les opérateurs  ===  ,  !==  ,  <,   <=  ,  >  et  >=  peuvent être utilisés pour comparer des nombres au sein d'une condition. Ils renvoient tous un résultat booléen.

  • Associée à un  if  , l'instruction  else  permet d'exprimer une alternative. Selon la valeur de la condition, le bloc de code associé au  if  ou celui associé au  else  sera exécuté, mais jamais les deux. On peut imbriquer sans limite des instructions  if/else  à l'intérieur d'autres instructions  if/else.

  •  Les opérateurs logiques  &&  (ET),  ||  (OU) et  !  (NON) permettent de créer des conditions composées.

  • L'instruction  switch  permet d'exécuter un bloc de code parmi plusieurs selon la valeur d'une expression.

Exprimer une condition

Imaginons qu'on souhaite écrire un programme qui fasse saisir un nombre à l'utilisateur, puis qui affiche un message si ce nombre est positif. Voici l'algorithme correspondant.

Saisir un nombre
Si ce nombre est positif
    Afficher un message

L'affichage du message ne doit avoir lieu que si le nombre est positif : on dit qu'il est soumis à une condition.

L'instruction if

Voici comment ce programme se traduit en JavaScript.

const nombre = Number(prompt("Entrez un nombre :"));
if (nombre > 0) {
    console.log(nombre + " est positif");
}

Vous venez de découvrir comment soumettre l'exécution d'une partie d'un programme à une condition grâce à l'instruction JavaScriptif. La syntaxe de cette instruction est la suivante.

if (condition) {
    // instructions exécutées quand la condition est vraie
}

La paire d'accolades ouvrante et fermante délimite ce que l'on appelle un bloc de code associé à l'instructionif. Cette instruction représente un test. On peut la traduire par l'ordre suivant : "Si la condition est vraie, alors exécute les instructions contenues dans le bloc de code".

La condition est toujours placée entre parenthèses après leif. Les instructions du bloc de code associé sont décalées vers la droite par rapport au if. Cette pratique est appelée l'indentation et permet de rendre les programmes bien plus lisibles. A mesure que vos programmes deviendront plus complexes (avec desif et d'autres instructions étudiées plus loin), leur indentation deviendra essentielle pour faciliter leur lisibilité. Quelle que soit la valeur d'indentation choisie (entre 2 et 4 espaces), il est indispensable de toujours bien indenter son code !

La notion de condition

Une condition est une expression dont l'évaluation produit une valeur soit vraie, soit fausse : on parle de valeur booléenne.

 Nous avons déjà étudié les types nombre et chaîne : le type booléen fait également partie des types supportés par le langage JavaScript. Ce type n'a que deux valeurs possibles :true (vrai) etfalse (faux).

if (true) {
    // la condition du if est toujours vraie :
    // les instructions de ce bloc seront toujours exécutées
}
if (false) {
    // la condition du if est toujours fausse :
    // les instructions de ce bloc ne seront jamais exécutées
}

Toute expression produisant une valeur booléenne (donc soit vraie, soit fausse) peut être utilisée comme condition dans une instructionif. Si la valeur de cette expression esttrue, le bloc de code associé auif sera exécuté.

On peut créer des expressions booléennes en utilisant les opérateurs de comparaison regroupés dans le tableau suivant.

Opérateur

Signification

===

Egal à

!==

Différent de

<

Inférieur à

<=

Inférieur ou égal à

>

Supérieur à

>=

Supérieur ou égal à

Dans d'autres langages de programmation, les opérateurs d'égalité et d'inégalité  s'écrivent respectivement== et!=. JavaScript supporte également ces opérateurs, mais il vaut mieux utiliser=== et!== (plus de détails).

Exprimer une alternative

Dans un programme, on souhaite fréquemment agir différemment selon que la condition soit vraie ou fausse.

L'instruction else

Enrichissons notre programme d'exemple pour qu'il affiche un message adapté au nombre saisi par l'utilisateur.

const nombre = Number(prompt("Entrez un nombre :"));
if (nombre > 0) {
    console.log(nombre + " est positif");
}
else {
    console.log(nombre + " est négatif ou nul");
}

Une alternative s'exprime en JavaScript grâce à l'instructionelse associée à unif. Voici sa syntaxe.

if (condition) {
    // instructions exécutées quand la condition est vraie
}
else {
    // instructions exécutées quand la condition est fausse
}

On peut traduire une instructionif/else comme ceci : "Si la condition est vraie, alors exécute les instructions du bloc de code associé auif, sinon exécute celles du bloc de code associé auelse".

L'instructionif/else permet de créer un branchement logique à l'intérieur d'un programme. Pendant l'exécution, les instructions exécutées seront différentes selon la valeur de la condition. Un seul des deux blocs de code sera pris en compte.

Pour mieux vous familiariser avec le fonctionnement de cette instruction, n'hésitez pas à expérimenter dans l'éditeur ci-dessous.

C3-1

Imbriquer des conditions

Notre programme d'exemple peut encore être enrichi pour afficher un message spécifique si le nombre saisi est nul. Pour cela, le code doit être modifié de la manière suivante.

const nombre = Number(prompt("Entrez un nombre :"));
if (nombre > 0) {
    console.log(nombre + " est positif");
} else { // nombre <= 0
    if (nombre < 0) {
        console.log(nombre + " est négatif");
    } else { // nombre === 0
        console.log(nombre + " est nul");
    }
}

C'est maintenant qu'il faut faire appel à votre sens logique pour le comprendre. Si le premier blocelse est exécuté, c'est que le nombre saisi est soit négatif, soit nul, puisque la condition(nombre > 0) du premierif n'a dans ce cas pas été vérifiée. A l'intérieur de ce blocelse, on vérifie si le nombre est strictement négatif avec la condition(nombre < 0). Si cette condition est fausse, alors le nombre est forcément égal à 0.

Il est possible de représenter graphiquement l'exécution du programme précédent au moyen d'un diagramme de flux qui montre les différents cheminements possibles selon la valeur du nombre saisi.

Diagramme de flux du programme d'exemple

Cet exemple nous montre que l'indentation permet de bien visualiser les différents blocs crées par les instructionsif/else. Il n'y a pas de limite (si ce n'est la lisibilité du programme) au niveau de profondeur des imbrications.

On rencontre fréquemment le cas particulier où la seule instruction d'un blocelse est unif (leelse éventuellement associé à ceif ne compte pas comme une seconde instruction). Dans ce cas, il est possible d'écrire ceif  sur la même ligne que le premier else, sans accolades ni indentation. Ainsi, notre programme d'exemple peut être réécrit de la manière suivante.

const nombre = Number(prompt("Entrez un nombre :"));
if (nombre > 0) {
    console.log(nombre + " est positif");
} else if (nombre < 0) {
    console.log(nombre + " est négatif");
} else {
    console.log(nombre + " est nul");
}

Créer des conditions composées

L'opérateur logique ET

Supposons qu'on souhaite vérifier qu'un nombre est compris entre 0 et 100. Cela signifie que le nombre doit être à la fois supérieur à 0 et inférieur à 100. La condition "nombre compris entre 0 et 100" peut s'exprimer sous la forme de deux sous-conditions "nombre supérieur ou égal à 0" et "nombre inférieur ou égal à 100". Il faut que l'une ET l'autre de ces sous-conditions soient vérifiées.

La traduction en JavaScript de cette condition donne le résultat suivant.

if ((nombre >= 0) && (nombre <= 100)) {
    console.log(nombre + " est compris entre 0 et 100");
}

L'opérateur && (ET logique) s'applique à deux valeurs de type booléen. Son résultat est la valeurtrue uniquement si les deux valeurs auxquelles il s'applique valent true.

console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

Le résultat ci-dessus constitue ce qu'on appelle la table de vérité de l'opérateur &&

L'opérateur logique OU

Imaginons maintenant qu'on souhaite vérifier qu'un nombre est en dehors de l'intervalle [0, 100]. Pour satisfaire à cette condition, ce nombre doit être inférieur à 0 OU supérieur à 100.

Traduit en JavaScript, cet exemple donne le résultat suivant.

if ((nombre < 0) || (nombre > 100)) {
    console.log(nombre + " est en dehors de l'intervalle [0, 100]");
}

L'opérateur || (OU logique) s'applique à deux valeurs de type booléen. Son résultat est la valeur true si au moins une des deux valeurs auxquelles il s'applique vaut true. Voici la table de vérité de l'opérateur ||.

console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

L'opérateur logique NON

Il existe un troisième opérateur logique qui permet d'inverser la valeur d'une condition : l'opérateur NON. Il s'écrit en JavaScript sous la forme d'un point d'exclamation (!).

if (!(nombre > 100)) {
    console.log(nombre + " est inférieur ou égal à 100");
}

Voici la table de vérité de cet opérateur.

console.log(!true);  // false
console.log(!false); // true

Exprimer un choix

Essayons d'écrire un programme qui conseille l'utilisateur sur la tenue à porter en fonction de la météo actuelle. Une première solution consiste à utiliser des instructionsif/else

const meteo = prompt("Quel temps fait-il dehors ?");
if (meteo === "soleil") {
    console.log("Sortez en t-shirt.");
} else if (meteo === "vent") {
    console.log("Sortez en pull.");
} else if (meteo === "pluie") {
    console.log("Sortez en blouson.");
} else if (meteo === "neige") {
    console.log("Restez au chaud à la maison.");
} else {
    console.log("Je n'ai pas compris !");
}

Lorsqu'un programme consiste à déclencher un bloc d'opérations parmi plusieurs selon la valeur d'une expression, on peut l'écrire en utilisant l'instruction JavaScriptswitch. Voici le programme précédent, réécrit en utilisant un  switch.

const meteo = prompt("Quel temps fait-il dehors ?");
switch (meteo) {
case "soleil":
    console.log("Sortez en t-shirt.");
    break;
case "vent":
    console.log("Sortez en pull.");
    break;
case "pluie":
    console.log("Sortez en blouson.");
    break;
case "neige":
    console.log("Restez au chaud à la maison.");
    break;
default:
    console.log("Je n'ai pas compris !");
}

L'instructionswitch déclenche l'exécution d'un bloc d'instructions parmi plusieurs possibles. Seul le bloc correspondant à la valeur de l'expression testée sera pris en compte. Sa syntaxe est la suivante.

switch (expression) {
case valeur1:
    // instructions exécutées quand expression vaut valeur1
    break;
case valeur2:
    // instructions exécutées quand expression vaut valeur2
    break;
...
default:
    // instructions exécutées quand aucune des valeurs ne correspond
}

Il n'y a pas de limite au nombre de cas possibles. Le mot-clédefault, à placer en fin deswitch, est optionnel. Il sert souvent à gérer les cas d'erreurs, comme dans l'exemple ci-dessus.

A vous de jouer !

C'est le moment de valider votre compréhension de ce chapitre ! Voici quelques recommandations pour réaliser ces exercices :

  • Pensez à bien nommer vos variables en respectant les normes définies au chapitre précédent, et indentez systématiquement les blocs de code des instructions if,else etswitch.

  • Essayez de trouver et d'écrire plusieurs solutions au problème posé, par exemple une solution utilisant l'instruction if et une autre utilisant le switch.

  • Entraînez-vous à tester vos programmes aussi complètement que possible, sans avoir peur d'y trouver des erreurs. C'est un exercice très formateur.

Jour suivant

C3-E1

Baccalauréat

C3-E2

Heure suivante

C3-E3

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite