{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.

Vous l'aurez à une condition !..

Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)

Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)

Instruction if ... else

Prérequis :	Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, Premiers pas en JavaScript.
Objectif :	Comprendre comment utiliser les structures conditionnelles en JavaScript.

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste instruction if ... else.

Syntaxe élémentaire if ... else

La syntaxe élémentaire de if...else ressemble à cela en {{glossary("pseudocode")}}:

Ce code est facile à lire pour une personne — il dit « si la condition renvoie true, exécuter le code A, sinon exécuter le code B ».

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera toujours exécuté, que la condition ait renvoyé true ou false. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code ou l'autre, et non les deux.

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans accolades, de manière abrégée, ainsi :

Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.

Un exemple concret

Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

else if

Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

Une note sur les opérateurs de comparaison

Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre Mathématiques de base en JavaScript — nombres et opérateurs article. Nos choix sont :

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
Par exemple :

Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :

if ... else imbriqué

Il est parfaitement correct d'ajouter une déclaration if...else à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :

Même si tout le code fonctionne ensemble, chaque déclaration if...else fonctionne indépendamment de l'autre.

Opérateurs logiques AND, OR et NOT

Si vous voulez tester plusieurs conditions sans imbriquer des instructions if...else , les opérateurs logiques pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :

Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :

Ainsi, par exemple, le premier bloc de code ne sera exécuté que si choice === 'sunny' ET temperature < 86 renvoient tous deux true.

Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur !, peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :

Dans cet extrait, si la déclaration avec OR renvoie true, l'opérateur NOT va nier l'ensemble : l'expression retournera donc false.

Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors true :

Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer true séparées par des || (OR) opérateurs. Par exemple :

Dans ce cas, la condition dans le if(...) sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours true. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :

Instruction switch

Les Instructions if...else font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :

Un exemple de switch

Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction switch à la place :

Opérateur ternaire

Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

Ici, nous avons une variable nommée est_anniversaire — si elle est true, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si est_anniversaire renvoie false, nous disons simplement « Bonjour ».

Exemple opérateur ternaire

L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.

{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.

Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.

Apprentissage actif : un calendrier simple

Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :

Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction onchange, juste au dessous du commentaire // AJOUTER LA CONDITION ICI. Elle doit :

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".

Playable code

<div class="output" style="height: 500px;overflow: auto;">
  <label for="month">Choisissez un mois : </label>
  <select id="month">
    <option value="Janvier">Janvier</option>
    <option value="Février">Février</option>
    <option value="Mars">Mars</option>
    <option value="Avril">Avril</option>
    <option value="Mai">Mai</option>
    <option value="Juin">Juin</option>
    <option value="Juillet">Juillet</option>
    <option value="Août">Août</option>
    <option value="Septembre">Septembre</option>
    <option value="Octobre">Octobre</option>
    <option value="Novembre">Novembre</option>
    <option value="Decembre">Décembre</option>
  </select>

  <h1></h1>

  <ul></ul>
</div>

<hr>

<textarea id="code" class="playable-code" style="height: 500px;">
var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');

select.onchange = function() {
  var choice = select.value;

  // AJOUTER LA CONDITION ICI

  createCalendar(days, choice);
}

function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (var i = 1; i <= days; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

createCalendar(31,'Janvier');
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Réinitialiser">
  <input id="solution" type="button" value="Voir la solution">
</div>

.output * {
  box-sizing: border-box;
}

.output ul {
  padding-left: 0;
}

.output li {
  display: block;
  float: left;
  width: 25%;
  border: 2px solid white;
  padding: 5px;
  height: 40px;
  background-color: #4A2DB6;
  color: white;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

Activité : plus de choix de couleurs !

Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire // AJOUT D'UNE DIRECTIVE SWITCH :

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».

Playable code 2

<div class="output" style="height: 300px;">
  <label for="theme">Choisissez un thème : </label>
  <select id="theme">
    <option value="white">Blanc</option>
    <option value="black">Noir</option>
    <option value="purple">Mauve</option>
    <option value="yellow">Jaune</option>
    <option value="psychedelic">Psychédélique</option>
  </select>

  <h1>Voici mon site Web</h1>
</div>

<hr>

<textarea id="code" class="playable-code" style="height: 450px;">
const select = document.querySelector('select');
const html = document.querySelector('.output');

select.onchange = function() {
  let choice = select.value;

  // AJOUT D'UNE DIRECTIVE SWITCH
}

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Réinitialiser">
  <input id="solution" type="button" value="Voir la solution">
</div>

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  updateCode();
});

const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n  let choice = select.value;\n\n  switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n  html.style.backgroundColor = bgColor;\n  html.style.color = textColor;\n}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

Conclusion

C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.

Voir aussi