Mis à jour le 16/01/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 étaient systématiquement exécutées. Nous allons voir comment enrichir nos programmes en y ajoutant des possibilités d'exécution conditionnelle.

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.

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

Créez ce programme sous la forme d'un fichiercours.js dans le répertoirechapitre_3/js (à créer) puis créez le fichiercours.html associé danschapitre_3/html. Ouvrez cette page Web avec Firefox et saisissez un nombre positif : un message s'affiche dans la console du navigateur.

Testez ensuite avec un nombre négatif ou nul (égal à 0) : vous n'obtenez aucun affichage. Le débogage permet également de constater que l'instructionconsole.log() n'est exécutée que si le nombre saisi 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).

Modifiez le programme d'exemple pour remplacer l'opérateur> par>= et modifier le message, puis testez ce programme en saisissant le nombre 0.

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

 

Le message s'affiche dans la console, ce qui signifie que la condition(nombre >= 0) a bien été vérifiée. Revenez ensuite à la version initiale du programme.

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.

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

Testez ce programme plusieurs fois en saisissant successivement un nombre positif, 0, puis un nombre négatif : un message adapté est toujours affiché dans la console. Notre programme agit différemment selon que la condition(nombre > 0) soit vraie ou fausse : c'est ce que l'on appelle une alternative.

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.

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.

var 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");
    }
}

Testez ce programme plusieurs fois : il affiche bien un message adapté au nombre saisi, y compris lorsque ce nombre est 0.

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.

var 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); // Affiche true
console.log(true && false); // Affiche false
console.log(false && true); // Affiche false
console.log(false && false); // Affiche 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); // Affiche true
console.log(true || false); // Affiche true
console.log(false || true); // Affiche true
console.log(false || false); // Affiche 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); // Affiche false
console.log(!false); // Affiche 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

var 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 !");
}

Testez le code source ci-dessus dans le fichiercours.js.

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.

var 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 !");
}

Recopiez puis testez ce code. Son résultat est identique à la version précédente.

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 ! Créez les programmes associés à ces exercices dans le répertoirechapitre_3. Voici quelques recommandations pour les réaliser :

  • Consultez le résultat à obtenir et reproduisez aussi fidèlement que possible son comportement.

  • N'hésitez pas à déboguer vos programmes pour observer leur fonctionnement de l'intérieur.

  • Continuez à 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 (résultat à obtenir)

Ecrivez un programmejour_suivant.js qui fait saisir un nom de jour à l'utilisateur, puis affiche le nom du jour suivant. Les erreurs de saisie (jour incorrect) doivent être gérées.

Comparaison de deux nombres (résultat à obtenir)

Ecrivez un programmecomparaison.js qui fait saisir deux nombres puis compare leurs valeurs et affiche un message approprié.

Baccalauréat (résultat à obtenir)

Ecrivez un programme baccalaureat.js qui fait saisir la moyenne d'un candidat puis affiche si ce candidat est recalé (moyenne inférieure à 10), reçu (moyenne entre 10 et 12) ou reçu avec mention (moyenne supérieure ou égale à 12).

Valeurs finales

Examinez le programmevaleurs.js ci-dessous.

var nb1 = Number(prompt("Entrez nb1 :"));
var nb2 = Number(prompt("Entrez nb2 :"));
var nb3 = Number(prompt("Entrez nb3 :"));

if (nb1 > nb2) {
    nb1 = nb3 * 2;
} else {
    nb1++;
    if (nb2 > nb3) {
        nb1 = nb1 + nb3 * 3;
    } else {
        nb1 = 0;
        nb3 = nb3 * 2 + nb2;
    }
}

Avant de l'exécuter, tentez de prévoir les valeurs finales des variablesnb1,nb2 etnb3 en fonction de leurs valeurs initiales et complétez le tableau ci-dessous.

Valeurs initiales

Valeur finale de nb1

Valeur finale de nb2

Valeur finale de nb3

nb1=nb2=nb3=4

 

 

 

nb1=4, nb2=3, nb3=2

 

 

 

nb1=2, nb2=4, nb3=0

 

 

 

Vérifiez vos prévisions en déboguant le programme.

Nombre de jours du mois (résultat à obtenir)

Ecrivez un programmenombre_jours.jsqui fait saisir le numéro d'un mois (nombre entre 1 et 12) puis affiche le nombre de jours de ce mois. On ne tiendra pas compte des années bissextiles. Les erreurs de saisie doivent être gérées.

Heure suivante (résultat à obtenir)

Ecrivez un programme qui demande une heure à un utilisateur sous la forme de trois informations (heures, minutes, secondes). il affiche ensuite l'heure qu'il sera une seconde plus tard. Les erreurs de saisie doivent être gérées.

Solutions des exercices

Le code source des solutions est consultable en ligne

Exemple de certificat de réussite
Exemple de certificat de réussite