• Facile

Ce cours est visible gratuitement en ligne.

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

J'ai tout compris !

Mis à jour le 14/08/2017

Les conditions

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

Pour le moment, nos scripts ne sont vraiment pas très élaborés. Mais dans ce chapitre nous allons passer un cap, puisque nous allons écrire des programmes qui seront capables de prendre des décisions (comme des grands ^^ ).

Je m'explique... nous allons par exemple écrire un script qui demande l'âge à l'utilisateur, et qui affichera ensuite le message "vous êtes majeur" ou "vous êtes mineur", selon le cas.

C'est grâce à des conditions que le navigateur pourra réagir différemment selon certaines données.

Les booléens

Un nouveau type de variable

Vous savez qu'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 ?

Avant de se lancer dans des explications, un peu d'histoire.
Ce nom vient de Georges Boole, un britannique à l'origine de cette technique.

Il s'agit de traiter des informations qui peuvent prendre deux valeurs (par exemple "vrai" ou "faux"), ce qui est très utilisé, particulièrement en électronique et en informatique : soit il y a du courant (première valeur), soit il n'y en a pas (deuxième valeur).

Pourquoi je vous parle de cela dans un chapitre sur les conditions ?
Car ces dernières ne sont rien d'autre... que des valeurs booléennes !
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).

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

var majeur = true;

Ce n'est pas plus compliqué que ça ...

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.

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 à (plus petit que) b, alors on a true, sinon false.

  • a > b : si a est supérieur à (plus grand que) 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

Revenons à 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.

Pas très difficile avec ces opérateurs : on est majeur si on a 18 ans ou plus.
On écrira donc :

var age = prompt('Quel âge avez-vous ? (en années)');

// on compare l'age : s'il est superieur ou egal à 18 ans, alors le visiteur est majeur
var majeur = (age >= 18);

alert('Vous êtes majeurs : ' + majeur);     // on verifie que ça marche ^^

Des conditions plus élaborées

Et si 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 ?

Eh bien c'est ici que deux nouveaux opérateurs entrent en scène, des opérateurs logiques.
Vous avez vous-mêmes prononcé le nom de l'un d'eux : il s'agit de l'opérateur ET. Le second est l'opérateur OU.

En JS, on les note && (ET) et || (OU) ; vous formez ce "|" en appuyant deux fois sur Alt Gr + 6 sur un clavier AZERTY français, et Alt Gr + 1 sur un belge.

ET

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 la taille et le poids du visiteur :

var taille = prompt('Combien mesurez-vous ? (en mètres)');
var poids = prompt('Combien pesez-vous ? (en kgs)');

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

Voyons maintenant quelles sont les deux conditions nécessaires :
- la première : taille >= 2 (on pourrait aussi prendre uniquement supérieur à)
- la seconde : 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 cela en une seule fois.
Il faut que les deux conditions soient vraies, d'où l'emploi de ET.

On obtient :

costaud = (taille>=2 && poids>=90);

(Je n'ai pas mis d'espace de part et d'autre des signes >= pour mieux faire ressortir les deux conditions : encore une fois, libre à vous d'en mettre où bon vous semble.)

On assemble ces morceaux, ce qui nous donne ce script :

var taille = prompt('Combien mesurez-vous ? (en mètres)');
var poids = prompt('Combien pesez-vous ? (en kgs)');
 
costaud = (taille>=2 && poids>=90);
alert('Vous êtes costaud : ' + costaud);

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 veut maintenant faire 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 &&.

Ici, il suffit qu'une seule condition soit vérifiée pour que le message s'affiche, c'est pourquoi on emploie OU.
Notez que si les deux conditions sont vérifiées, ça marche aussi ^^ .

On a donc le code suivant :

var taille = prompt('Combien mesurez-vous ? (en mètres)');
var poids = prompt('Combien pesez-vous ? (en kgs)');
 
costaud = (taille>=2 || poids>=90);
alert('Vous êtes costaud : ' + costaud);

Et n'oublions pas 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.

a && b || c && d     =     (a && b) || (c && d)

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"

Repartons (encore) de notre exemple concernant l'âge...
Cette fois-ci, nous ne voulons pas une variable booléenne "majeur", mais une "mineur" (qui sera true pour un mineur et false pour un majeur - extraordinaire, vous ne trouvez pas ? ^^ ).

Vous me dites : "facile, c'est vrai si l'âge est inférieur à 18 ans".
Certes, vous n'avez pas tort.
Sauf si je rajoute qu'il faut se servir de la condition élaborée pour la variable "majeur", qui est la suivante :

var majeur = (age >= 18);

Après longue réflexion, vous m'affirmez que c'est simplement l'opposé de cette condition.
On a ici "si l'âge est supérieur ou égal à 18 ans".
Mais on veut "si l'âge n'est PAS supérieur ou égal à 18 ans".

Eh bien ce "PAS" existe : il s'agit du symbole ! (comme j'ai pu vous l'annoncer avec le signe !=, signifiant "pas égal").
Il précède la condition, comme ceci :

var mineur = !(age >= 18);

C'est tout ;) .
Enfin presque, j'allais oublier la table de vérité (certes toute simple) :

a

!a

0

1

1

0

Théorème de De Morgan

Ça rappelle la SI (Sciences de l'Ingénieur) du lycée... que de bons souvenirs :soleil: .
Bref, notez tout d'abord qu'il n'y a pas de faute de frappe, il s'agit bien du théorème de De Morgan.

Il nous vient d'un certain Auguste (ou Augustus) De Morgan, mathématicien britannique du dix-neuvième siècle, qui est, avec Boole (eh oui ;) ), le fondateur de cette logique binaire (booléenne).
Mais ce qui nous intéresse maintenant plus particulièrement, ce sont les lois qu'il a formulées...

Plutôt que de vous les énoncer "bêtement", nous allons les retrouver ensemble.

Illustration

On sort de nos variables pour prendre un exemple concret.

Vous êtes végétariens : vous mangez de tout, sauf de la viande et du poisson (si ce n'est pas le cas, on va faire comme si ;) ).
Vous arrivez à un repas, vous vous dites : "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 :

!a && !b
!(a || b)

Une petite 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) :

Citation : lois de De Morgan

1) !(a || b) = !a && !b
2) !(a && b) = !a || !b

(Notez qu'elle est également vérifiée avec 3 variables booléennes ou plus.)

On pourrait très bien s'en passer.
Tu nous compliques la vie pour pas grand chose !

Tout d'abord, ça permet de simplifier (moins de parenthèses) les conditions.
Et ça évite surtout cette erreur :

IF et ELSE

Mais à quoi ça sert, toutes ces variables booléennes ?

Eh bien il est possible de faire un test : c'est-à-dire que 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

Pour commencer, nous allons reprendre notre code avec la variable majeur :

var age = prompt('Quel âge avez-vous ? (en années)');
var majeur = (age >= 18);

Ce que nous voulons maintenant, c'est afficher un message SI la personne est majeure.
En anglais, le "si" nous donne "if"... c'est justement ce qu'on utilise pour faire un test :

if(valeur_booleene)

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.

Avec notre code à nous, voici le résultat :

var age = prompt('Quel âge avez-vous ? (en années)');
var majeur = (age >= 18);

if(majeur)      // on effectue le test
   alert('Vous êtes majeur');   // si la variable vaut "true", alors on affiche ce message

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) :

var age = prompt('Quel âge avez-vous ? (en années)');
var majeur = (age >= 18);

if(majeur)
{
   alert('Vous êtes majeur');
   // instructions dans le bloc a placer 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 :

var age = prompt('Quel âge avez-vous ? (en années)');
if(age >= 18)
   alert('Vous êtes majeur');

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 :

if(prompt('Votre âge ?') >= 18)   // on demande l'age et on le compare à 18
   alert('Vous êtes majeur');

ELSE

Si le test est faux, nous avons vu 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").
Reprenons notre code, mais qui affichera cette fois-ci un message aux mineurs :

var age = prompt('Quel âge avez-vous ? (en années)');
if(age >= 18)
   alert('Vous êtes majeur');
else
   alert('T\'es mineur');

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 je fais ce test, ça donne quoi ?

if(age)
   // instruction ici

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.

    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 null.

  • 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".

var age = prompt('Quel âge avez-vous ? (en années)');
if(!age)
   alert('Vous devez entrez votre âge');
else
{
   if(age >= 18)
      alert('Vous êtes majeur');
   else
      alert('T\'es mineur');
}

La fonction isNaN

Présentation

Continuons avec une fonction qui a bien sa place dans ce chapitre : isNaN (à première vue, un joli nom o_O ), qui prend un seul argument.
Elle a bien sa place ici, car elle retourne une valeur booléenne.

Que fait cette fonction ?

Derrière un nom qui peut sembler bizarre, il n'y a en fait rien de compliqué.

Voilà, je vous ai tout dit !
Le nom isNaN devient tout de suite moins barbare : "isNot aNumber", ou bien encore "n'est pas un nombre".

En effet, 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).

Petit exemple

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

var nb = prompt('Entrez un nombre');
if(isNaN(nb))
        alert('Vous devez entrer un nombre !');
else
        alert('Son carré est ' + nb*nb);

Vous remarquerez au passage que les valeurs null (lorsque vous cliquez sur "Annuler") et '' (chaîne vide - lorsque vous laissez le champ vide) prennent la valeur numérique 0.

Distinguer plusieurs cas avec SWITCH

Exemple d'utilisation

Et si on a besoin de tester plusieurs valeurs ? On est obligé de faire plusieurs if les uns à la suite des autres ?

Il est possible d'utiliser cette solution. Un exemple :

var nom = prompt("Entrez un nom d'animal");
if(nom == "chat")
        alert("Miaou !");
else if(nom == "chien")
        alert("Et PAF, le chien !");
else if(nom == "pingouin")
        alert("Bonjour, Tux");
else
        alert("Je n'ai rien à te dire...");

Mais cette solution devient particulièrement lourde à écrire et peu lisible lorsqu'on a beaucoup de possibilités.

C'est pourquoi il existe une autre méthode, plus adaptée.
Voyez plutôt l'exemple précédent, réalisé de cette manière :

var nom = prompt("Entrez un nom d'animal");
switch(nom)
{
        case "chat":
                alert("Miaou !");
                break;
        case "chien":
                alert("Et PAF, le chien !");
                break;
        case "pingouin":
                alert("Bonjour, Tux");
                break;
        default:
                alert("Je n'ai rien à te dire...");
                break;
}
Explications...

Le switch n'est en fait pas si différent d'un if...

Si on regarde la première ligne, dans un cas on a if(truc), et dans l'autre, switch(truc).

On pourrait dire qu'ils n'ont qu'une différence, mais qui est radicale. Dans le cas d'un if, le "truc" 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) : on a donc 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 :

case VALEUR:
        INSTRUCTIONS
        break;

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. (Vous verrez 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 :

switch(variable)
{
        case VALEUR_1:
                INSTRUCTIONS;
                break;
        case VALEUR_2:
                INSTRUCTIONS;
                break;
        /* etc... */
        default:
                INSTRUCTIONS;
                break;
}
Autre exemple

Terminons avec un petit exemple commenté :

var plat = prompt("Quel est votre plat préféré ?");
switch(plat)    // debut du switch
{
        case "frites":  // si c'est les frites ...
                alert("C'est classique...");    // ... on affiche ce message...
                break;  // ... et on sort du switch.
                
        case "hamburger":
                alert("Yeah, do you come from the USA ?!");
                break;
                
        // on ne met pas de "break" entre les deux, pour afficher le meme message
        case "lasagnes":
        case "pizza":
                alert("Monsieur est italien ?");
                break;
                
        default:        // si c'est un autre plat
                alert("Je ne connais pas ce plat...");
                break;
}

Les conditions sont très courantes en JS : puisqu'on se base sur les données fournies par le client, on aura bien souvent besoin de leur faire subir quelques tests.
Vous le verrez par la suite, nous allons les employer très souvent.

Prenez donc le temps de bien comprendre leur fonctionnement avant de passer au prochain chapitre ;) .

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