Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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

Prérequis: Connaissances basiques en informatique, compréhension basique de HTML et CSS, Premiers pas en JavaScript.
Objectif: Comprendre comment utiliser les structures conditionelles en JavaScript.

Tu peux l'avoir à une conditon... !

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 devrais rester dans mon pays d'origine et travailler à la ferme de mon père, ou démenager aux Etats Unis pour é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 (e.g. "un biscuit ou deux"), à la conséquence de ces choix (il se peut que la conséquence de "a mangé un biscuit" soit "avoir encore faim", et la conséquence de "a mangé deux biscuits" soit "se sentir rassasié, mais se faire gronder par maman pour avoir manger tous les biscuits")

Instruction if ... else

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 basique if ... else

La syntaxe basique if...else ressemble à cela en pseudocode:

if (condition) {
  code à exécuter si la condition est true
} else {
  exécute un autre code à la place
}

Ici nous avons:

  1. L'instruction if suivie de parenthèses.
  2. Une condition à évaluer, placée entre les parenthèses (typiquement "cette valeur est elle plus grande que cette valeur", ou "est ce que cette valeur existe"). Cette condition se servira des opérateurs de comparaisons que nous avons étudié dans le précédent module, et renverra true ou false.
  3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code que l'on shouaite, et il sera exécuté seulement si la condition renvoie true.
  4. L'instruction else.
  5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — cela peut être n'importe quel code que l'on shouaite, et il sera exécuté seulement si la condition ne renvoie pas true.

Ce code est plutôt lisible pour un humain — il dit "si la condition revoie true, exécute le code A, sinon exécute le code B"

Vous remarquerez que vous n'avez pas besoin d'inclure l'instruction else et le deuxième bloc entre accolades — le code qui suit est aussi parfaitement viable:

if (condition) {
  code à exécuter si la condition est true
}

exécute un autre code

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é, peu importe si la condition renvoie true ou false. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous voulez — le plus souvent vous voudrez exécuter un bloc de code ou l'autre, pas les deux.

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans les accolades, de manière raccourcie comme suit:

if (condition) code à exécuter si la condition est true
else exécute un autre code à la place

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

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:

var coursesFaites = false;

if (coursesFaites === true) {
  var argentDePoche = 10;
} else {
  var argentDePoche = 5;
}

Ce code tel quel se finira toujours avec la variable shoppingDone renvoyant false, ce qui veut dire déception pour notre 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.

Note: Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

else if

L'exemple précédent nous fournissait deux choix, ou résultats — mais qu'en est il si l'on en souhaite plus de deux ?

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

<label for="weather">Sélectionner le type de temps pour aujourd'hui: </label>
<select id="weather">
  <option value="">--Choisir--</option>
  <option value="sunny">Ensoleillé</option>
  <option value="rainy">Pluvieux</option>
  <option value="snowing">Neigeux</option>
  <option value="overcast">Nuageux</option>
</select>

<p></p>
var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);

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

  if (choice === 'sunny') {
    para.textContent = 'Il fait un temps beau et ensoleillé aujourd\'hui. Mettez un short ! Allez à la plage, ou au parc, et commandez une glace.';
  } else if (choice === 'rainy') {
    para.textContent = 'Il pleut; prenez un imperméable et un parapluie, et ne restez pas dehors trop longtemps.';
  } else if (choice === 'snowing') {
    para.textContent = 'La neige commence à tomber — il gèle ! Mieux vaut rester à l\'intérieur avec une tasse de chocolat chaud, ou aller faire un bonhomme de neige.';
  } else if (choice === 'overcast') {
    para.textContent = 'Il ne pleut pas mais le ciel est gris et sombre; cela peut arriver n\'importe quand, donc prenez un imperméable au cas où.';
  } else {
    para.textContent = '';
  }
}

  1. Ici nous avons un <select> HTML nous permettant de sélectionner différents choix de météos, et un simple paragraphe.
  2. Dans le JavaScript, nous conservons une référence aussi bien à l'élement <select> qu'à l'élement <p>, et ajoutons un écouteur d'évènement à l'élement <select> de sorte que la function setWeather() soit exécutée quand sa valeur change.
  3. Quand cette fonction est exécutée, nous commençons par assigner à la variable choice la valeur actuellement sélectionnée dans l'élément <select>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de choice. Remarquez comment toutes les conditions sont testées avec des blocs else if() {...}, mis à part le tout premier, qui est testé avec un  bloc if() {...}.
  4. Le tout dernier choix, à l'intérieur du bloc else {...}, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est true. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le text de substitution "--Choisir--" présenté au début.

Note: Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

A note on comparison operators

Comparison operators are used to test the conditions inside our conditional statements. We first looked at comparison operators back in our Basic math in JavaScript — numbers and operators article. Our choices are:

  • === and !== — test if one value is identical to, or not identical to, another.
  • < and > — test if one value is less than or greater than another.
  • <= and >= — test if one value is less than or equal to, or greater than or equal to, another.

Note: Review the material at the previous link if you want to refresh your memories on these.

We wanted to make a special mention of testing boolean (true/false) values, and a common pattern you'll come across again and again. Any value that is not false, undefined, null, 0, NaN, or an empty string ('') actually returns true when tested as a conditional statement, therefore you can simply use a variable name on its own to test whether it is true, or even that it exists (i.e. it is not undefined.) So for example:

var cheese = 'Cheddar';

if (cheese) {
  console.log('Yay! Cheese available for making cheese on toast.');
} else {
  console.log('No cheese on toast for you today.');
}

And, returning to our previous example about the child doing a chore for their parent, you could write it like this:

var shoppingDone = false;

if (shoppingDone) { // don't need to explicitly specify '=== true'
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

Nesting if ... else

It is perfectly OK to put one if...else statement inside another one — to nest them. For example, we could update our weather forecast application to show a further set of choices depending on what the temperature is:

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
  } else if (temperature >= 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
  }
}

Even though the code all works together, each if...else statement works completely independently of the other one.

Logical operators: AND, OR and NOT

If you want to test multiple conditions without writing nested if...else statements, logical operators can help you. When used in conditions, the first two do the following:

  • && — AND; allows you to chain together two or more expressions so that all of them have to individually evaluate to true for the whole expression to return true.
  • || — OR; allows you to chain together two or more expressions so that one or more of them have to individually evaluate to true for the whole expression to return true.

To give you an AND example, the previous example snippet can be rewritten to this:

if (choice === 'sunny' && temperature < 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
}

So for example, the first code block will only be run if choice === 'sunny' and temperature < 86 return true.

Let's look at a quick OR example:

if (iceCreamVanOutside || houseStatus === 'on fire') {
  console.log('You should leave the house quickly.');
} else {
  console.log('Probably should just stay in then.');
}

The last type of logical operator, NOT, expressed by the ! operator, can be used to negate an expression. Let's combine it with OR in the above example:

if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('Probably should just stay in then.');
} else {
  console.log('You should leave the house quickly.');
}

In this snippet, if the OR statement returns true, the NOT operator will negate it so that the overall expression returns false.

You can combine as many logical statements together as you want, in whatever structure. The following example executes the code inside only if both OR statements return true, meaning that the overall AND statement will return true:

if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
  // run the code
}

A common mistake when using the logical OR operator in conditional statements is to try to state the variable whose value you are checking once, and then give a list of values it could be to return true, separated by || (OR) operators. For example:

if (x === 5 || 7 || 10 || 20) {
  // run my code
}

In this case the condition inside if(...)  will always evaluate to true since 7 (or any other non-zero value) always evaluates to true. This condition is actually saying "if x equals 5, or 7 is true — which it always is". This is logically not what we want! To make this work you've got to specify a complete test either side of each OR operator:

if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // run my code
}

switch statements

if...else statements do the job of enabling conditional code well, but they are not without their downsides. They are mainly good for cases where you've got a couple of choices, and each one requires a reasonable amount of code to be run, and/or the conditions are complex (e.g. multiple logical operators). For cases where you just want to set a variable to a certain choice of value or print out a particular statement depending on a condition, the syntax can be a bit cumbersome, especially if you've got a large number of choices.

switch statements are your friend here — they take a single expression/value as an input, and then look through a number of choices until they find one that matches that value, executing the corresponding code that goes along with it. Here's some more pseudocode, to give you an idea:

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
    
  // include as many cases as you like

  default:
    actually, just run this code
}

Here we've got:

  1. The keyword switch, followed by a set of parentheses.
  2. An expression or value inside the parentheses.
  3. The keyword case, followed by a choice that the expression/value could be, followed by a colon.
  4. Some code to run if the choice matches the expression.
  5. A break statement, followed by a semi-colon. If the previous choice matches the expression/value, the browser stops executing the code block here, and moves on to any code that appears below the switch statement.
  6. As many other cases (bullets 3–5) as you like.
  7. The keyword default, followed by exactly the same code pattern as one of the cases (bullets 3–5), except that default does not have a choice after it, and you don't need to break statement as there is nothing to run after this in the block anyway. This is the default option that runs if none of the choices match.

Note: You don't have to include the default section — you can safely omit it if there is no chance that the expression could end up equaling an unknown value. If there is a chance of this however, you need to include it to handle unknown cases.

A switch example

Let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead:

<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);


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

  switch (choice) {
    case 'sunny':
      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
      break;
    case 'rainy':
      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
      break;
    case 'snowing':
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
      break;
    case 'overcast':
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
      break;
    default:
      para.textContent = '';
  }
}

Note: You can also find this example on GitHub (see it running live on there also.)

Ternary operator

There is one final bit of syntax we want to introduce you to, before we get you to play with some examples. The ternary or conditional operator is a small bit of syntax that tests a condition and returns one value/expression if it is true, and another if it is false — this can be useful in some situations, and can take up a lot less code than an if...else block if you simply have two choices that are chosen between via a true/false condition. The pseudocode looks like this:

( condition ) ? run this code : run this code instead

So let's look at a simple example:

var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';

Here we have a variable called isBirthday — if this is true, we give our guest a happy birthday message; if not, we give her the standard daily greeting.

Ternary operator example

You don't just have to set variable values with the ternary operator; you can also run functions, or lines of code — anything you like. The following live example shows a simple theme chooser where the styling for the site is applied using a ternary operator.

<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</h1>
var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';

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

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}

Here we've got a <select> element to choose a theme (black or white), plus a simple <h1> to display a website title. We also have a function called update(), which takes two colors as parameters (inputs). The website's background color is set to the first provided color, and its text color is set to the second provided color.

Finally, we've also got an onchange event listener that serves to run a function containing a ternary operator. It starts with a test condition — select.value === 'black'. If this returns true, we run the update() function with parameters of black and white, meaning that we end up with background color of black and text color of white. If it returns false, we run the update() function with parameters of white and black, meaning that the site color are inverted.

Note: You can also find this example on GitHub (see it running live on there also.)

Active learning: A simple calendar

In this example you are going to help us finish a simple calendar application. In the code you've got:

  • A <select> element to allow the user to choose between different months.
  • An onchange event handler to detect when the value selected in the <select> menu is changed.
  • A function called createCalendar() that draws the calendar and displays the correct month in the <h1> element.

We need you to write a conditional statement inside the onchange handler function, just below the // ADD CONDITIONAL HERE comment. It should:

  1. Look at the selected month (stored in the choice variable. This will be the <select> element value after the value changes, so "January" for example.)
  2. Set a variable called days to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example.

Hints:

  • You are advised to use logical OR to group multiple months together into a single condition; many of them share the same number of days.
  • Think about which number of days is the most common, and use that as a default value.

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

Active learning: More color choices!

In this example you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the <select> — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT comment:

  • It should accept the choice variable as its input expression.
  • For each case, the choice should equal one of the possible values that can be selected, i.e. white, black, purple, yellow, or psychedelic.
  • For each case, the update() function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. Remember that color values are strings, so need to be wrapped in quotes.

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

Conclusion

And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

See also

In this module

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : OxyDesign
 Dernière mise à jour par : OxyDesign,