JavaScript - Partie 4 : les conditions

Passage au stade supérieur : pour écrire des scripts pouvant prendre des décisions.
C'est grâce à des conditions que le navigateur pourra réagir différemment selon certaines données.

---

Retour accueil JS

---

Sommaire partie 4

---

Les booléens

Un nouveau type de variable

Une variable peut contenir un nombre ou une chaîne de caractères.
Mais elle peut également contenir d'autres données : celle que nous allons aborder s'appelle un booléen.

Qu'est-ce que c'est ?

Il s'agit de traiter des informations qui ne peuvent prendre que deux valeurs : vrai ou faux.
Soit la condition est vraie, soit elle est fausse.

Variable booléenne

Il est possible de créer des variables contenant de telles valeurs (pour enregistrer par exemple le résultat d'un test).
Ces variables prennent deux valeurs : true (vrai) et false (faux).

Exemple, cette variable pourrait permettre de savoir si le visiteur est majeur ou mineur (la valeur serait à demander au visiteur) :

---

Opérateurs et conditions

Il serait bien de pouvoir comparer des variables entre elles pour déterminer la valeur d'une variable booléenne.
Par exemple, si l'âge du visiteur est inférieur à 18 ans, alors on retient qu'il n'est pas majeur, sinon on retient qu'il est majeur.

C'est bien sûr possible en JS, grâce à des opérateurs de comparaison.

Opérateurs de comparaison

Les opérateurs d'égalité (fonctionnent aussi avec des chaînes de caractères) :

• == : si les deux valeurs sont égales, alors on a true, sinon false.
• != : si les deux valeurs sont différentes, alors on a true, sinon false.

En JS (comme dans de nombreux autres langages), le signe ! sert à marquer la négation. != veut donc dire "non égal", donc "différent".

Le signe == n'est pas une erreur d'écriture ! Sert à comparer deux variables, à la différence du signe =, utilisé pour affecter une valeur à une variable. Confondre les deux est une erreur classique Bien retenir que pour comparer deux valeurs, on emploie le signe ==.

Opérateurs de comparaison de valeurs numériques (si les valeurs ne sont pas des nombres, le résultat ne sera pas celui attendu) :

• a<b : si a est inférieur à b, alors on a true, sinon false.
• a>b : si a est supérieur à b, alors on a true, sinon false.
• a<=b : si a est inférieur ou égal à b, alors on a true, sinon false.
  C'est le contraire de > : si a n'est pas supérieur à b, …
• a>= b : si a est supérieur ou égal à b, alors on a true, sinon false.
  C'est le contraire de < : si a n'est pas inférieur à b, …

Utilisation de ces opérateurs

Reprenons notre exemple : on a une variable age contenant l'âge du visiteur, et on veut en déduire la valeur de la variable booléenne majeur.
Avec ces opérateurs :

Les parenthèses autour de la condition ne sont pas nécessaires, mais elles rendent le code beaucoup plus lisible.

---

Des conditions plus élaborées

Ce sont les deux opérateurs logiques : ET et OU.

En JS, on les note && (ET) et || (OU); on forme ce "|" en appuyant sur Alt Gr + 6.

ET

Exemple : on veut une variable costaud qui sera vraie lorsque le visiteur mesurera plus de 2 mètres et qu'il pèsera plus de 90 kgs.

Commençons par demander le taille et le poids du visiteur :

(Attention à taper un point, et non une virgule pour la taille !).

les deux conditions nécessaires :
- taille >= 2 (on aurait pu prendre uniquement supérieur à)
- poids >= 90
On pourrait créer deux valeurs booléennes contenant les résultats de ces deux tests, et ensuite créer notre variable costaud, mais faisons le en une seule fois.
Il faut que les deux conditions soient vraies, d'où l'emploi de ET. (On n' a pas mis d'espace de part et d'autre des signes >= pour mieux faire ressortir les deux conditions : mais on peut faire comme on veut.)

En mettant tout ensemble :

Voici ce qu'on appelle une table de vérité pour l'opérateur &&. On affiche la valeur de a && b selon les valeurs de a et de b, ligne par ligne, (false = 0 et true = 1).

a b a && b 0 0 0 0 1 0 1 0 0 1 1 1

OU

On reprend le même script, mais avec une personne de plus de 2 mètres OU de plus de 90 kgs.
Une petite modification : on emploie || au lieu de &&.

Il suffit qu'au moins une seule condition soit vérifiée pour que le message s'affiche, c'est pourquoi on emploie OU.

La table de vérité de cet opérateur :

a b a || b 0 0 0 0 1 1 1 0 1 1 1 1

Priorités de ces opérateurs

En l'absence de parenthèses, les && sont prioritaires sur les || : on commence par eux.

En présence de parenthèses, comme pour des calculs, les éléments entre ces dernières sont calculés avant le reste.

---

La négation

Symbole "NON"

Reprenons l'exemple concernant l'âge…
Cette fois, on ne veut pas une variable booléenne "majeur", mais une variable "mineur" (qui sera true pour un mineur et false pour un majeur).
Mais au lieu de se dire "c'est vrai si l'âge est inférieur à 18 ans", on va se servir de la condition élaborée pour la variable "majeur" :

C'est simplement l'opposé de cette condition, on veut "si l'âge n'est PAS supérieur ou égal à 18 ans".

Ce "PAS", c'est !. Il précède la condition comme ceci :

La table de vérité (très simple) :

a !a 0 1 1 0

Théorème de De Morgan

Illustration

Exemple concret : étant vétarien, arrivé à un repas, on dit :
"je mange s'il n'y a PAS de viande ET PAS de poisson"
Ou bien : "je mange s'il n'y a PAS : (du poisson OU de la viande)"

On aurait donc égalité entre ces deux expressions :

Une table de vérité permet de vérifier ça :

a b !(a||b) !a&&!b 0 0 1 1 0 1 0 0 1 0 0 0 1 1 0 0

Et en inversant les opérateurs logiques && et ||, on obtient le même résultat.

Ce qui nous prouve les lois de De Morgan (formulées ici avec les notations du JS) : (Noter qu'elle est également vérifiée avec 3 variables booléennes ou plus.)

	Cela permet de simplifier et d'éviter cette erreur :
	Code : Autre 1     !(a && b)     est égal à     !a && !b

---

IF et ELSE

Avec toutes ces variables booléennes, il est possible de faire un test : c'est-à-dire, si une variable booléenne vaut true, alors on effectue une action, et si elle vaut false, on n'en effectue pas (ou une autre).

IF

Reprenons noter code avec la variable majeur :

Nous voulons maintenant afficher un message SI la personne est majeure :
Si la valeur booléenne est true, alors l'instruction qui suit le test est exécutée.
Sinon, elle est ignorée et on passe à la suite.

Si on veut mettre plusieurs instructions avec un seul if, on les place entre accolades pour former un bloc d'instructions, qui sera exécuté seulement si le test est vrai.

Avec notre code, cela donne :
Voici ce même code, mais avec un bloc d'instructions (indispensable s'il y a plusieurs instructions à exécuter si le test est vrai, facultatif s'il n'y en a qu'une comme ici) :
On n'est pas obligés de stocker le résultat du test, on peut l'utiliser directement dans le if() de cette manière : C'est généralement comme ça qu'on fait, sauf lorsqu'on a besoin de conserver le résultat.

Et pour faire encore plus court, on peut encore se passer de la variable age : on teste directement la valeur entrée par l'utilisateur :

ELSE

Si le test est faux, on vient de voir que l'instruction (ou le bloc d'instructions) qui suit est ignoré(e), et que le script continue après celui (celle)-ci.
Il est également possible d'effectuer une instruction ou un bloc d'instructions si la condition est fausse : il (elle) sera ignoré(e) à son tour si le test est vrai.

Pour cela, on rajoute simplement le mot-clé "else" (en français : "SINON").
On reprend notre code, mais qui affichera cette fois-ci un message aux mineurs :

Ce qui se "traduit" par : SI l'âge est supérieur ou égal à 18, alors on affiche que le visiteur est majeur, SINON on affiche qu'il est mineur.

Conversion en valeur booléenne

Et si on fait ce test, ça donne quoi ?

On utilise assez souvent ce type de test.
Le résultat sera false dans les cas suivants :

• la variable a été déclarée, mais n'a pas de valeur.
  Code : JavaScript
  1     var age;
• La variable vaut 0 (zéro - ATTENTION, la valeur '0' - zéro, mais sous forme de chaîne de caractères - ne rentre pas dans cette liste !).
• La variable vaut '' (une chaîne de caractères vide).
• La variable vaut null (valeur renvoyée par certaines fonctions dans certains cas).

Dans les autres cas, le résultat sera true.

Ce test permet donc de savoir si l'utilisateur a entré une valeur.

Exemple : lorsqu'on demande l'âge, il y a un bouton "Annuler" à coté du bouton "Valider". En cliquant dessus, la variable age contiendra la valeur '' (chaîne de caractères vide).
On peut donc se servir de ce test pour vérifier que l'utilisateur n'a pas cliqué sur "Annuler".

---

La fonction isNaN

Présentation

La fonction isNaN prend un seul argument. Elle retourne une valeur booléenne.
isNaN signifie : "is Not a Number".
Cette fonction renvoie :

• true si l'argument n'est pas un nombre
• false si l'argument est un nombre (ou bien une chaîne de caractères qui "est" un nombre : un nombre entre guillemets).

Rappel : on utilise un point à la place de la virgule. 3.14 est donc un nombre, mais 3,14 n'en est pas un !

Exemple

On calcule le carré d'un nombre demandé à l'utilisateur.
S'il n'a pas tapé un nombre, on le lui fait remarquer.

Remarquer au passage que les valeurs null (lorsqu'on clique sur "Annuler") et '' (chaîne vide - lorsqu'on laisse le champ vide) prennent la valeur numérique 0.

---

Distinguer plusieurs cas avec SWITCH

Exemple d'utilisation

Si on a besoin de tester plusieurs valeurs, on peut faire plusieurs if les uns à la suite des autres, comme ici :

Mais cela devient rapidement lourd. D'où le switch :

Cette syntaxe n'existe qu'à partir du JavaScript 1.2. Autrement dit, les vieux navigateurs (à relativiser, il s'agit de IE 3.0 et antérieurs) ne seront pas capables de la comprendre.

Explications

switch est peu différent de if.
Il y a une différence, mais qui est radicale. Pour un if, ce qui est entre les parenthèses est un booléen (il est soit vrai, soit faux) : on a donc seulement deux cas possibles.
Pour un switch, c'est une variable quelconque (dans notre cas, il s'agit d'une chaîne de caractères), avec une infinité de cas possibles.

Comment ça marche ?

On commence par dire qu'on veut étudier la valeur d'une variable, grâce à switch(variable), qu'on fait suivre d'accolades pour en délimiter le corps.
Pour ce qui est du corps (le "contenu" de notre switch), on utilise le même modèle pour chaque cas possible :

Le case VALEUR indique au navigateur qu'il doit commencer à partir de cette ligne si la variable vaut VALEUR.
Le navigateur va donc exécuter toutes les instructions se trouvant dans les lignes qui suivent, jusqu'à trouver l'instruction break, qui va forcer le navigateur à sortir du switch (délimité par les accolades).

Il est possible de ne pas mettre ce break : dans ce cas, les instructions suivantes (celles du cas suivant) seront exécutées elles aussi. (nous verrons cela dans l'exemple suivant.)

Dans le cas où il n'existe pas de case correspondant à la valeur de la variable, le code qui se trouve à partir de default: (qui doit être placé après les autres cas) sera exécuté.

Pour résumer, voici la syntaxe :

Autre exemple commenté

---