Créé le 09 Septembre 2009, par Anis Safine
Et bien bonjour à tous et bienvenue dans ce tout nouveau chapitre où nous apprendrons à imposer des conditions à notre code JavaScript.
Ces outils de conditions vont nous être indispensables, et on réutilisera d'ailleurs ces connaissances dans le chapitre suivant. Croyez-moi, sans conditions, on ne fait rien, que ce soit en JavaScript comme dans n'importe quel autre langage ! 
Et cerise sur le fromage, ce chapitre va être un peut long certes, mais relativement simple. 
Remonter
1. Conditions et opérateurs de comparaison
Il arrive très souvent (pour ne pas dire tout le temps) en programmation, que l'on ai à choisir entre plusieurs actions suivant le cas dans lequel on se trouve. En général, ce qui va nous permettre de décider de ce qu'il faut faire, c'est la valeur de telle ou telle variable. Par exemple, supposons que l'on ai une variable actif qui contient un booléen. Si cette variable vaut true, il faut exécuter une instruction, sinon on ne fait rien.
Si je vous demande de réaliser un tel script, là, maintenant, je pense que vous vivriez un grand moment de solitude, mais la théorie, vous allez le voir, est assez simple.
Nous allons dans un premier temps apprendre à rédiger ce que j'appelle des expressions de conditions. Ces expressions sont en fait un groupe de conditions telles que "variable1 doit être égale à 5", "variable2 doit être inférieure ou égale à variable3" etc.
Jusque là, tout va bien, et pour l'instant, je vais vous demander d'oublier le terme expression afin de nous concentrer sur les conditions. Il faut bien comprendre qu'une condition vaut toujours, aux yeux de l'ordinateur, true ou false. En effet, une condition est toujours soit vraie, soit fausse !
Reprenons l'idée d'au-dessus : "variable1 est-elle égale à 5" ? A cette question, il n'existe que 2 réponses possibles : oui ou non. Et bien, quelle que soit l'expression, l'ordinateur va lire la condition, se demander si elle est vraie ou fausse et suivant le cas, la remplacer par true (pour vrai) ou false (pour faux).
Si vous avez compris ça, vous avez tout compris et tout le reste du chapitre sera du gâteau ! (quand je vous disais que ce chapitre serait simple !) Pour ceux qui ne sont pas sûrs d'avoir bien compris le principe, rassurez-vous, la pratique effacera j'en suis sûr les derniers doutes qui pourraient encombrer votre esprit ! 
Les opérateurs de comparaison
Encore une fois, on utilise un terme à priori compliqué (opérateurs de comparaison) pour parler d'une chose vraiment toute bête : une condition consiste presque toujours à comparer deux valeurs. Est-ce que ces deux valeurs sont égales ? Au contraire sont-elles différentes ? Une valeur est-elle supérieure à une autre ? Ou inférieure ? Inférieure ou égale ?
Tous ces cas s'expriment à l'aide de ce que l'on appelle donc des opérateurs de comparaison ! Nous allons les découvrir dans l'exemple qui suit :
Code javascript
// Opérateur d'égalité
(valeur1 == valeur2)
// Opérateur de différence
(valeur1 != valeur2)
// Opérateur de supériorité
(valeur1 > valeur2)
// Opérateur de supériorité ou égalité
(valeur1 >= valeur2)
// Opérateur d'infériorité
(valeur1 < valeur2)
// Opérateur d'infériorité ou égalité
(valeur1 <= valeur2)
Ce code n'est pas un vrai code JavaScript, et il générera des erreurs si vous tentez de l'exécuter tel quel (ne serait-ce que le fait que valeur1 et valeur2 n'existent pas ou qu'il n'y ai pas le moindre point-virgule !). Cependant, les conditions contenues dans les parenthèses sont des conditions valides !
Comme vous pouvez le constater, l'égalité et la différence sont un peu particuliers à transcrire. En effet, on utilise deux "égal" pour vérifier une égalité entre deux valeurs ! Un seul "égal" est la syntaxe pour une assignation de valeur, et vous comprenez bien qu'on ne pouvait pas utiliser la même syntaxe pour deux actions différentes.
Pour la différence entre deux valeurs, on fait "!=". En réalité, il n'y a rien à expliquer à ce niveau, c'est ainsi que le JavaScript (et pas que le JavaScript...) fonctionne et il faut le savoir. Retenez cependant que le point d'exclamation signifie généralement la négation... on le retrouvera plus tard !
Pour le reste, la syntaxe me semble assez facile à comprendre...
Un petit détail cependant pour ce qui est des comparaisons de supériorité, infériorité etc. Si vous comparez deux nombres, c'est évidemment une comparaison toute bête qui sera faite. Si vous comparez deux chaines de caractère, ce sera une comparaison par ordre alphabétique.
Ainsi, "anis" est inférieur à "banane" parce que "a" vient avant "b". En revanche, "anis" est supérieur à "acariâtre" car "n" vient après "c".
Un booléen, quant à lui (et vous devriez le savoir maintenant) est automatiquement remplacé par 0 pour false et 1 pour true.
Enfin, on va raisonner un peu comme dans nos bons vieux chapitres de types de données, puisque si vous comparez un nombre et une chaîne de caractère, alors la chaîne de caractère sera automatiquement convertie en nombre (si c'est possible). Si la conversion est impossible, alors la condition vaudra toujours false.
Vous pouvez maintenant très bien vous amuser à tester vos conditions à l'aide de document.write ! Eh oui, ça ne devrait pas vous étonner puisque je vous l'ai dit, vos conditions valent true ou false quel que soit le cas ! La méthode write peut donc parfaitement afficher ce résultat ! Comme ceci :
Code javascript
// Condition d'égalité
document.write(2 == 5);
document.write('<br/>');
// Condition de différence
document.write(2 != 5);
document.write('<br/>');
// Condition de supériorité
document.write(2 > 2);
document.write('<br/>');
// Condition de supériorité ou égalité
document.write(2 >= 2);
document.write('<br/>');
// Condition d'infériorité
document.write('anis' < 'banane');
document.write('<br/>');
// Condition d'infériorité ou égalité
document.write(true <= false);
document.write('<br/>');
// Comparaison entre nombres et chaînes de caractère
document.write(2 > '1');
document.write('<br/>');
document.write(2 > '10');
document.write('<br/>');
document.write(2 > 'anis');
document.write('<br/>');
document.write(2 <= 'anis');
document.write('<br/>');
Et voilà ! Vous savez maintenant rédiger des conditions et tester leur résultat. Je ne m'amuserais pas à commenter chaque résultat de ce code, vous êtes assez grands pour comprendre par vous même ! Juste une petite remarque concernant le dernier test. Notre condition "true <= false" revient en fait à écrire "1 <= 0", ce qui est évidement faux !
Comme je vous le disais au début de chapitre, la majorité des conditions sert plutôt à tester la valeur de certaines variables. En effet, écrire "2 est-il supérieur à 2 ?" n'a généralement pas grand intérêt.
Vous pouvez également vous servir des retour des fonctions dans vos conditions ! Regardez plutôt :
Code javascript
var nombre = 12;
// On compare une variable à un nombre
document.write(nombre > 2);
document.write('<br/>');
// On change la valeur de cette variable et on recompare
nombre = true;
document.write(nombre > 2);
document.write('<br/>');
// On compare le retour de typeof() à un type attendu
document.write(typeof(nombre) == 'boolean');
Bon bon, ça commence à devenir très intéressant tout ça n'est-ce pas ? Seulement, jusque là, nous n'avons écrit que des conditions et il est grand temps de s'intéresser de plus près à ce que j'évoquais tout à l'heure : les expressions !
Remonter
2. Expressions et opérateurs logiques
Comme je vous le disais, les expressions sont en fait un groupe de conditions. La vérité, c'est qu'une condition forme déjà à elle seule une expression à part entière ! De plus, de la même manière que les conditions, les expressions valent soit true, soit false.
Dans le cas d'une seule condition, ce n'est pas compliqué, l'expression a la même valeur que sa condition. En revanche, quand elle est composée de plusieurs conditions, tout va dépendre des opérateurs logiques utilisés.
Les opérateurs logiques
Comme tout à l'heure pour les conditions et leurs opérateurs de comparaison, les expressions ont besoin des opérateurs logiques pour exister car ce sont eux qui vont lier les multiples conditions qui les composent. Ils sont au nombre de trois : ET, OU, NON...
Pour commencer, étudions de plus près le OU et le ET. Comme vous vous en doutez, le ET impose que les deux conditions liées soient vérifiées tandis que le OU impose que au moins une des deux conditions liées soit vérifiée.
Ainsi, si je crée une expression du type (condition1 ET condition2), alors elle sera vraie seulement si les deux conditions sont vraies. Si une seule des deux au moins est fausse, l'expression sera alors fausse.
En langage JavaScript, le ET s'écrit "&&" et le OU s'écrit "||" (la barre verticale s'écrit généralement avec AltGr + -). Et on peut maintenant tester quelques expressions :
Code javascript
// L'opérateur ET : toutes les conditions doivent être vraies
document.write(2 < 5 && 2 < 1);
document.write('<br/>');
document.write(2 > 5 && 2 > 1);
document.write('<br/>');
document.write(2 > 5 && 2 < 1);
document.write('<br/>');
document.write(2 < 5 && 2 > 1);
document.write('<br/>');
// L'opérateur OU : une condition au moins doit être vraie
document.write(2 < 5 || 2 < 1);
document.write('<br/>');
document.write(2 > 5 || 2 > 1);
document.write('<br/>');
document.write(2 > 5 || 2 < 1);
document.write('<br/>');
document.write(2 < 5 || 2 > 1);
Alors alors ? On vient pas de basculer socialement là ? Les opérateurs logiques rendent les expressions incroyablement riches en possibilités et on peut tout simplement écrire tout ce que l'on veut... à condition (humour humour quand tu nous tiens...) de se concentrer un peu !
Bon, je pense que ces deux opérateurs ne vous auront pas posé de problèmes, mais il reste le dernier opérateur... L'opérateur NON qui s'écrit tout simplement... "!". Ca ne vous dit pas quelque chose ? Eh oui, il s'agit du point d'exclamation que l'on retrouvait déjà dans l'opérateur de comparaison !=. Pour rappel, cet opérateur servait à exprimer la différence, c'est à dire la non-égalité !
Si j'ai écarté cet opérateur des deux autres, c'est parce que celui-ci s'utilise de façon plus particulière. Au lieu de lier deux conditions, il va en fait inverser la valeur d'une condition ! Si elle est censée valoir true, ajoutez-lui un opérateur NON et elle vaudra false.. et vice-versa !
Voyons les exemples suivants pour comprendre son utilisation :
Code javascript
// L'opérateur NON : il faut que la condition soit fausse
document.write(!2 > 5);
document.write('<br/>');
document.write(!2 < 5);
Vous remarquerez que l'opérateur NON se place juste avant la condition concernée. Autre remarque importante, l'opérateur NON n'agit que sur une condition et pas sur l'expression toute entière ! Pour imposer l'opérateur NON à toute une expression, il faut mettre ladite expression entre parenthèses, comme ceci :
Code javascript
// Il faut que l'expression soit fausse
document.write(!(1 < 4 && 2 > 5));
document.write('<br/>');
// Il faut que la première condition soit fausse et que la deuxième soit vraie
document.write(!1 < 4 && 2 > 5);
Et voilà, tout est dit, tout est fait ! Dans le premier cas, notre expression est évidemment fausse puisqu'une des deux comparaisons n'est pas vérifiée. Et comme notre opérateur NON est là pour inverser l'expression, le résultat qui s'affiche devant nous est bel et bien un joli true.
En revanche, dans le second cas, celui où on ne met pas de parenthèses à notre expression, l'opérateur NON n'agit que sur la première condition. Cette condition étant normalement vraie, l'opérateur NON va donner un false et cela suffit (à cause de l'opérateur ET) pour rendre la totalité de l'expression fausse.
Et voilà, les expressions, c'est presque fini... Presque, parce qu'il reste deux légers détails, pourtant extrêmement importants, à mettre en avant ! Le premier est qu'une expression peut elle même être composée de plusieurs expressions. Comme ceci :
Code javascript
// Cette expression est composée de deux expressions
document.write((2 < 5 && 'anis' < 'balise') && (!2 < 1 || 5 < 4));
Ensuite, je vous l'ai déjà dit, aux yeux de l'ordinateur, une condition est un booléen. Et bien un booléen peut agir directement comme une condition. Regardez l'exemple suivant, ça vous éclaircira :
Code javascript
var bool = false;
// On utilise directement un booléen dans l'expression
document.write(true && 2 < 5);
document.write('<br/>');
// On fait appel à un booléen depuis une variable
document.write(bool && 2 < 5);
document.write('<br/>');
// On fait appel à un booléen depuis une fonction (isNaN() retourne true ou false uniquement)
document.write(isNaN(bool) && 2 < 5);
Comme vous pouvez le constater, on utilise directement des booléens dans nos expressions et les résultats sont tout ce qu'il y a de plus logique ! En effet, la première expression est vraie puisque les deux conditions "true" et "2 < 5" valent true !
La deuxième expression est fausse car la variable "bool" vaut false. Et la dernière expression est fausse car "bool" ne vaut pas NaN.
Cette fois, les expressions, c'est bel et bien terminé ! Seulement, je suis une personne extrêmement tordue et pour terminer sur une touche joyeuse, je vous propose une expression ci-dessous qui permet de savoir si vous aurez ou non votre permis ! A vous de deviner si oui ou non, vous l'avez ce coup-ci !
Code javascript
// Quelques variables
var examen = true;
var examinateur_gentil = false;
var vitesse_limite = 90;
var vitesse = 100;
var feu_rouge_grille = true;
// Devinez le résultat de l'expression ci-dessous
document.write(examen && ((vitesse <= vitesse_limite && !feu_rouge_grille) || examinateur_gentil));
Remonter
3. Appliquer une condition
Nous avons maintenant appris à rédiger des expressions et croyez moi, le plus dur et le plus long est désormais fait !
Cependant, nous ne pouvons toujours pas résoudre le problème que je posais au début du chapitre : "quel code écrire pour que suivant la valeur d'une variable, une instruction soit exécutée, ou pas ?".
Et bien je vais vous dévoiler le grand secret ! Il existe une instruction un peu particulière dont le seul mot clé est if. Cette instruction est particulière parce qu'elle agit un peu comme une fonction dans le sens où on doit lui fournir un paramètre. Ce paramètre, c'est tout simplement une expression de conditions !
Si cette expression vaut true, alors un code désigné est exécuté ! Voici la syntaxe exacte :
Code javascript
if(expression) {
// Code à exécuter
}
Vous pouvez le voir, je ne vous avais pas menti ! De la même manière qu'une fonction, l'expression est passée comme une sorte de paramètre, et le code à exécuter si l'expression est vérifiée se situe entre des accolades !
Voici un code d'exemple :
Code javascript
if(5 > 2) {
document.write('5 est supérieur à 2 !');
}
if(5 < 2) {
document.write('5 est inférieur à 2 !');
}
Et voilà, c'est bête comme chou ! Juste une petite remarque non indispensable mais tout de même bien utile ! Lorsque vous appliquez une condition, s'il n'y a qu'une seule (et je dis bien une seule) instruction à exécuter, vous pouvez vous passer des accolades !
Regardez ça :
Code javascript
if(5 < 2)
document.write('5 est inférieur à 2');
document.write('C\'est fini !');
Vous voyez que la première instruction rattachée à la condition n'est pas exécutée et c'est normal. En revanche, la deuxième, elle, ne dépend de rien et le message s'affiche bien à l'écran !
Nous allons maintenant voir quelques outils qui vont nous permettre d'appliquer des conditions de façon plus variée. Nous venons d'utiliser la structure "if" ("si" en français) mais il est possible de la compléter par l'instruction "else" ("sinon" en français).
En bref, si l'expression passée au if est vérifiée, on exécute le bloc d'instructions du if, sinon on exécute celui du else. C'est une structure connue sous le nom de Si... Sinon... et voici sa syntaxe très simple :
Code javascript
if(5 < 2)
document.write('5 est inférieur à 2');
else
document.write('5 est supérieur à 2');
Vous remarquerez que je ne mets pas d'accolades car il n'y a à chaque fois qu'une seule instruction (s'il y en avait plus les accolades serait bien obligatoires !).
Il est possible de faire encore plus riche avec la structure "else if". En gros, si le premier "if" n'est pas vérifié, alors on applique le "if" suivant et ainsi de suite. Il est parfaitement possible d'appliquer plusieurs "else if" d'affilée.
Code javascript
var i = 3;
if(i == 1)
document.write('La variable vaut 1');
else if(i == 2)
document.write('La variable vaut 2');
else if(i == 3)
document.write('La variable vaut 3');
else
document.write('J\'abandonne !');
Ce code est assez naturel et parle de lui même. Si la variable vaut 1, on affiche le message, sinon, si la variable vaut 2, on affiche le message, sinon... etc. jusqu'au dernier else qui lui ne comporte pas de conditions et affichera toujours le message s'il est atteint.
Vous pouvez d'ailleurs modifier la valeur de la variable pour voir comment réagit cette structure suivant les cas. Et on va maintenant voir une dernière chose qui est en fait l'équivalent de cette dernière structure en "else if". Quand on a plusieurs conditions d'affilée à vérifier, au lieu d'utiliser le "else if", il peut être judicieux d'utiliser une structure pensée pour ce genre de cas.
Voici sa syntaxe :
Code javascript
var i = 3;
switch(i) {
case 1:
document.write('La variable vaut 1');
break;
case 2:
document.write('La variable vaut 2');
break;
case 3:
document.write('La variable vaut 3');
break;
default:
document.write('J\'abandonne !');
break;
}
Cette structure est le parfait équivalent de celle qu'on a vu juste avant ! Elle est juste peut-être plus claire dans le cas de nombreux possibilités. Voyons plus en détail cette syntaxe révolutionnaire.
Tout d'abord, on utilise le mot-clé switch auquel on doit "passer en paramètre" la variable que l'on veut tester. Tout le reste se passe entre accolades.
A la place de faire des "if" et "else if", il suffit de suivre la syntaxe suivante :
Code javascript
case VALEUR:
// Instructions
break;
En bref, le mot clé "case" suivi de la valeur à tester : cela revient en fait à faire "if(variable == VALEUR)". On oublie surtout pas les petits points qui suivent la valeur et après on peut placer la liste des instructions à exécuter ! On peut bien évidemment en mettre autant que l'on veut !
On finit le tout par le mot-clé "break" terminé par un point-virgule. Ce mot-clé est là pour annoncer la fin de la liste des instructions à exécuter pour ce cas.
Enfin, vous trouvez une syntaxe assez similaire avec le mot-clé "defaut" mais qui n'est pas suivi de valeur ! En fait, cette partie sert à désigner le code à exécuter si aucun cas n'a été vérifié ! Cela revient finalement à un "else" tout simple.
Allez, une dernière chose avant de m'échapper : notez bien que la partie "default" n'est évidemment pas obligatoire.
Remonter
Conclusion
Et bien voilà, nous avons bouclé cette partie sur les conditions et je suis sûr que vous commencez à voir d'un oeil nouveau les perspectives qu'offrent à vous le Noyau JavaScript !
D'ailleurs en parlant de bouclé... le prochain chapitre concernera les boucles ! Et croyez moi, elles nous seront tout autant utiles !
