[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> Javascript
> Lecture du tutoriel
Les conditions
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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.
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
Ce n'est pas plus compliqué que ça ...
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) :
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 : JavaScript1
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 ^^
|
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 : JavaScript1
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 : JavaScript1 | 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 : JavaScript1
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).
| 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 :
Code : JavaScript1
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 ...
| 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.
Code : Autre1
| 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.
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 : JavaScript1 | 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 : JavaScript1 | var mineur = !(age >= 18);
|
C'est tout

.
Enfin presque, j'allais oublier la table de vérité (certes toute simple) :
Théorème de De Morgan
Ça rappelle la SI
(Sciences de l'Ingénieur) du lycée... que de bons souvenirs

.
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
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 Morgan1) !(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 : Autre1
| !(a && b) est égal à !a && !b |
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 : JavaScript1
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
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 : JavaScript1
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 : JavaScript1
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 : JavaScript1
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 : JavaScript1
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 : JavaScript1
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 : JavaScript1
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
- 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".
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');
}
|
Présentation
Continuons avec une fonction qui a bien sa place dans ce chapitre :
isNaN (à première vue, un joli nom

), 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 :
"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 : JavaScript1
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.
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 : JavaScript1
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 : JavaScript1
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;
}
|
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

.