Aller au menu - Aller au contenu

Icône Les conditions

Par Avatar JoSé2
Mise à jour : 22/07/2009
5 116 visites depuis 7 jours, dont 91 sur ce chapitre classé 38/786
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.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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) :
Code : JavaScript
1
var majeur = true;



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

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 !
Il sert à comparer deux variables, à la différence du signe =, utilisé pour affecter une valeur à une variable.
Confondre les deux est une erreur classique...

Retenez donc bien 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 à (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 :
Code : JavaScript
1
2
3
4
5
6
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 ^^


Les parenthèses autour de la condition ne sont pas nécessaires, mais elles rendent le code beaucoup plus lisible (à mon goût ^^ ).
Libre à vous de les mettre ou non.
Retour en haut

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 :
Code : JavaScript
1
2
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 :
Code : JavaScript
1
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 :
Code : JavaScript
1
2
3
4
5
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).
aba && 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 :
Code : JavaScript
1
2
3
4
5
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 ...
aba || 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.
Code : Autre
1

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.
Retour en haut

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 :
Code : JavaScript
1
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 :
Code : JavaScript
1
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 :
Code : Autre
1
2

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


Une petite table de vérité permet de vérifier ça :
ab!(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 :
Code : Autre
1

!(a && b)   est égal à   !a && !b
Retour en haut

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 :
Code : JavaScript
1
2
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 :
Code : JavaScript
1
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.
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 à nous, voici le résultat :
Code : JavaScript
1
2
3
4
5
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) :
Code : JavaScript
1
2
3
4
5
6
7
8
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 :
Code : JavaScript
1
2
3
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 :
Code : JavaScript
1
2
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 :

Code : JavaScript
1
2
3
4
5
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 ?
Code : JavaScript
1
2
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.
    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 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".
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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');
}
Retour en haut

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é.
Rappel : le sigle NaN signifie "Not a Number".
Soit, après une traduction très difficile : "pas un nombre" ^^ .


Voilà, je vous ai tout dit !
Le nom isNaN devient tout de suite moins barbare : "is Not a Number", 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).


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



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.

Code : JavaScript
1
2
3
4
5
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.
Retour en haut

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 :
Code : JavaScript
1
2
3
4
5
6
7
8
9
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 :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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;
}


Cette syntaxe n'existe qu'à partir du JavaScript 1.2.
Autrement dit, les vieux navigateurs ne seront pas capables de la comprendre.

Rassurez-vous cependant, lorsque je dis "vieux navigateurs", il s'agit dans ce cas de Internet Explorer 3.0 et de Netscape Navigator 3.0 (et versions antérieures)... Ce qui permet donc de relativiser le problème de compatibilité.



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 :
Code : JavaScript
1
2
3
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 :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
switch(variable)
{
        case VALEUR_1:
                INSTRUCTIONS;
                break;
        case VALEUR_2:
                INSTRUCTIONS;
                break;
        /* etc... */
        default:
                INSTRUCTIONS;
                break;
}



Autre exemple



Terminons avec un petit exemple commenté :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}
Retour en haut

Q.C.M.

Quel est le symbole <= ?
Quelle sera la valeur booléenne de la variable egalite dans le code suivant :

Code : JavaScript
1
2
3
var nombre1 = 10;
var nombre2 = 15;
var egalite = (nombre1 = nombre2);
Code : JavaScript
1
2
3
4
5
6
var heure = 21;

if(heure<7 || 22<heure)
   alert ("Il fait nuit.");
else
   alert ("Il fait jour.");


(À faire de préférence sans tester.)
Quel message s'affiche ?

Statistiques de réponses au QCM

Retour en haut
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 ;) .
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
19 commentaires pour "Les conditions"
Note moyenne : 3.51 / 4 (260 votes)
Pseudo Commentaire
Hors ligne gcornut # Posté le 23/08/2009 à 19:59:11
Avatar

 Salut,
On peut faire une condition comme ceci aussi:
(condition) ? (instruction si vrai) : (instruction si faux)
pour reprendre ton exemple:
Code : JavaScript
1
2
3
4
var age = prompt('Quel âge avez-vous ? (en années)');
var majeur = (age >= 18);

majeur ? alert('majeur') : alert('pas majeur');
Hors ligne siiZar # Posté le 05/10/2009 à 09:13:46

Je pensais que javascript était un langage obscure et pas forcément utile... [Je tiens à signaler que je suis en formation développement à l'AFPA (autant dire que je suis autodidacte)]...
Autant dire que je n'avais rien compris ! Et puis, j'ai découvert ce tutoriel et je l'ai suivit!
Désormais, JS est mon ami ; il ne me quitte plus ^=^!
Merci. Merci. MERCIIIIIIIIIIII!
Hors ligne deeper # Posté le 13/10/2009 à 15:30:14
Avatar

Études : AFPA Amiens

 lol siiZar, je suis aussi en formation à l'AFPA d'Amiens, et tout comme toi on peut dire que je suis autodidact :p

D'ailleurs, les 3/4 de ce que je connais vient du site du 0 ^^
Hors ligne white_Xacker # Posté le 23/09/2010 à 04:53:41
Avatar

Avis : Très bon

nice tutorial ^^
Hors ligne VirtuElle # Posté le 28/12/2010 à 00:30:47
Avatar

 "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 Alt Gr + 7 pour les claviers suisses(QWERTZ)
^^

Voir tous les commentaires