Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > Apprenez le Javascript ! > Les bases du Javascript > Les conditions > 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)
Avatar
 Auteur : ZoZor
Note : 18 / 20 (6 votes)
Visualisations : 30 464

Plus d'informations Plus d'informations
Maintenant que vous maîtrisez les variables ainsi que les fonctions, on va apprendre les conditions. Car c'est bien beau de pouvoir afficher des variables ou encore de créer des fonctions, mais à la fin on s'ennuie !

D'ailleurs, vous vous ennuyez car vous êtes assez limités dans vos programmes. Vous pouvez changer la valeur d'une variable, l'afficher et enfin créer une fonction. Avec les conditions, ça va être beaucoup plus marrant ! Qui m'aime me suive, je vais tout vous révéler sur ces fameuses conditions. ;)
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

if et else

Pour commencer, je vais vous apprendre deux mots anglais : if et else. Bien évidemment, la question est "qu'est-ce qu'ils peuvent bien signifier" ? If veut dire "si", et else "sinon". Driiiing, la cloche sonne, on a fini le cours d'anglais : on va en français à présent. Les mots "si" et "sinon" sont utilisés pour fixer une condition. En Javascript, c'est pareil ! Regardez bien l'exemple que je vous ai mis plus bas.

Image utilisateur

Vous voyez, en anglais et en javascript, on retrouve bien le if et le else. Bon, maintenant on va passer à la pratique pour pouvoir se servir des conditions. Ne paniquez pas : c'est très simple :) . Voici comment se présente une condition.
Code : JavaScript
1
2
3
4
5
6
7
8
if(conditon) /* Si la condition est remplie */
{
/* Alors faire ce qu'il y a entre les accolades après le if */
}
else
{
/* Sinon, faire ce qu'il y a entre les accolades après le else */
}

Seulement voilà, vous avez besoin de plusieurs signes pour faire vos conditions. Prenons l'exemple de tout à l'heure. Il faut que l'âge soit supérieur ou égal à 18 pour que le visiteur soit majeur. Or, vous n'allez pas trouver ces signes au plafond, ou encore sur la copie du voisin. Il n'y a pas de secret, il faut les apprendre par coeur. Pour vous donner un peu plus envie de les apprendre, je vous ai fait un petit tableau très joli.

SigneSignificationÀ retenir ?
<= inférieur ou égal à OUI
>= supérieur ou égal à OUI
< inférieur à OUI
> supérieur à OUI
!== strictement différent de NON
!= différent de OUI
=== strictement égal à NON
== égal à OUI


Tous ces signes sont à retenir, sauf les "strictement ... à", car ils sont très rarement utilisés, et ne vous serviront que quand vous maîtriserez le javascript sur le bout des doigts.

Nous allons maintenant tester tous ces signes, histoire de regarder si je ne vous ai pas menti, et aussi de les tester pour voir ce qu'ils font. Pour ce faire, je vous ai préparé un petit script que vous n'avez plus qu'à essayer.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var chiffre = 3;
document.write('<h2>Caractéristiques du chiffre '+chiffre+'</h2>');

if(chiffre == 2)
{
document.write(chiffre+' est égal à 2<br/>');
}
else
{
document.write(chiffre+' n\'est égal à 2<br/>');
}

if(chiffre != 2)
{
document.write(chiffre+' n\'est égal à 2<br/>');
}
else
{
document.write(chiffre+' est égal à 2<br/>');
}

if(chiffre > 4)
{
document.write(chiffre+' est plus grand que 4<br/>');
}
else
{
document.write(chiffre+' n\'est pas plus grand que 4<br/>');
}

if(chiffre >= 4)
{
document.write(chiffre+' est plus grand ou égal à 4<br/>');
}
else
{
document.write(chiffre+' n\'est pas plus grand ou égal à 4<br/>');
}

if(chiffre < 9)
{
document.write(chiffre+' est plus petit que 9<br/>');
}
else
{
document.write(chiffre+' n\'est pas plus petit que 9<br/>');
}

if(chiffre <= 9)
{
document.write(chiffre+' est plus petit ou égal à 9<br/>');
}
else
{
document.write(chiffre+' n\'est pas plus petit ou égal à 9<br/>');
}
Essayer !

Alors, c'est pas mal hein ? Et ce qui est bien dans tout ça, c'est que vous n'avez même pas eu besoin de voir si les conditions étaient remplies ou non, javascript l'a fait pour vous ! Grâce à ce petit script, vous pouvez désormais connaître quelques informations sur un nombre : il vous suffit de changer la variable chiffre puis d'admirer les résultats.

Si vous m'avez suivi jusque là, on va faire des conditions un peu plus compliquées. Par exemple, je veux créer une fonction qui calcule si le nombre entré est un multiple de 5. Cela peut paraître vraiment compliqué, mais en réalité c'est très simple. Il faut savoir si le nombre appartient aux critères de divisions de 5, qui sont les suivants :
Essayons avec le premier critère. Pour nous, humains, il nous est très facile de regarder si le nombre se termine par un zéro ou un cinq. Mais pour le javascript, c'est un autre problème. Il vaut mieux laisser tomber cette méthode.
Essayons maintenant avec le deuxième critère. Il faut savoir si le reste du nombre divisé par 5 vaut zéro. Pour nous, si on le fait c'est une perte de temps. En revanche, c'est avec cette méthode que javascript va pouvoir déterminer si le nombre est divisible par cinq. Je vous laisse réfléchir, puis quand vous avez terminé, vous n'avez plus qu'a lire la correction, juste en dessous.

Secret (cliquez pour afficher)
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function multiple_cinq(nombre)
{
  if(nombre%5 == 0) /* Si nombre divisé par 5 reste 0 */
  {
   return nombre+' est un multiple de 5 !';
  }
  else /* Sinon */
  {
  return nombre+' n\'est pas un multiple de 5 !';
  }
}

/* Et on oublie pas de tester voir si ça fonctionne */

document.write(multiple_cinq(9832)+'<br/>');
document.write(multiple_cinq(198321)+'<br/>');
document.write(multiple_cinq(88230)+'<br/>');
Essayer !

Je vous conseille de faire une pause ici, et de reprendre plus tard, le temps que votre cerveau assimile bien toutes ces nouvelles données. Pensez aussi à relire le tuto si un point du cours vous parait flou, sinon vous pouvez toujours aller poser vos questions sur le forum.

else if



Vous croyez tout savoir sur les conditions ? Pas du tout ! Il y a encore quelques astuces à apprendre, et croyez-moi (ou pas) elles sont très utiles... comme par exemple else if. C'est encore un mot anglais, et il signifie "ou si". Voici un petit exemple pour comprendre à quoi il sert.
Code : Autre
1
2
3
4
5

Si tu as 5 doigts sur la main gauche, tu es normal.

OU SI tu as plus de 5 doigts sur la main gauche, tu as une malformation.

Sinon, tu t'es coupé un doigt.

Maintenant, je vous traduis ces phrases en javascript. Normalement, vous ne devriez pas avoir trop de mal à comprendre le script, il suffit de parler en français en traduisant if, else if et else, puis ça devrait aller tout seul.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var doigts_michel = 4;
var doigts_gertrude = 5;
var doigts_mathias = 6;

if(doigts_michel == 5)
{
document.write('Michel est normal<br/>');
}
else if(doigts_michel > 5)
{
document.write('Michel a une malformation<br/>');
}
else
{
document.write('Michel s\'est coupé un doigt');
}

if(doigts_gertrude == 5)
{
document.write('Gertrude est normale<br/>');
}
else if(doigts_gertrude > 5)
{
document.write('Gertrude a une malformation<br/>');
}
else
{
document.write('Gertrude s\'est coupé un doigt');
}

if(doigts_mathias == 5)
{
document.write('Mathias est normal<br/>');
}
else if(doigts_mathias > 5)
{
document.write('Mathias a une malformation<br/>');
}
else
{
document.write('Mathias s\'est coupé un doigt');
}
Essayer !

C'était un peu répétitif, mais c'était pour vous montrer tous les cas de figures, et pour que vous voyez que else if fonctionne bien. Au passage, j'espère pour vous que vous avez bien 5 doigts à chacune de vos mains, sinon cela risque d'être plus long pour programmer ^^ .
Si "else if" veut dire "ou si", alors on peut en mettre autant qu'on veut dans une condition ?

Effectivement, vous pouvez parfaitement dire : "si la note que tu as eu vaut 0, tu n'as pas réfléchi. Ou si la note que tu as eu est 1 alors tu as un tout petit peu révisé. Ou si la note ... est 2 alors ... Ou si la note ... est 3 alors ... etc." Jugez par vous-mêmes avec ce script.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var note = 3;
if(note == 0)
{
document.write('Tu n\as pas réfléchi !');
}
else if(note == 1)
{
document.write('Tu as à peine révisé !');
}
else if(note == 2)
{
document.write('Tu as un peu révisé !');
}
else if(note == 3)
{
document.write('Bien, continue comme ça !');
}
else if(note == 4)
{
document.write('Plus qu\'un point et tu es le top du top !');
}
else
{
document.write('Tu es Dieu incarné ! Alleluia, le messie est parmi nous !');
}
Essayer !

N'hésitez surtout pas à modifier les variables pour voir si le script fonctionne en intégralité. De plus, ça vous aide à manipuler le script : vous serez plus à l'aise et vous progresserez plus facilement.


Les booléens



Les booléens sont des valeurs spécifiques aux variables. Ce n'est ni un nombre, ni une chaîne de caractères. C'est juste vrai ou faux. Encore une fois, ces valeurs ont étés traduites en anglais, ce qui nous donne true pour vrai et false pour faux.
Je vais vous donner un petit exemple. Admettons qu'un agent secret a été arrêté et questionné sur des sujets du domaine du nucléaire militaire. Pendant l'interrogatoire, une machine reliée à son cerveau retourne une valeur qui nous dit s'il a menti ou non. Voici ce que ça donnerait en javascript.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var reponse = false;

if(reponse == true)
{
document.write('L\'agent secret a été sincère, il a dit toute la vérité.');
}
else
{
document.write('L\'agent secret a menti sur toute la ligne !');
}
Essayer !

Faites bien attention, la valeur booléene false est différente du mot false. Et il en va de même pour true.

Je vous vois venir : vous allez me dire que vous pouvez très bien faire reponse = 'faux';, puis vérifier si reponse vaut 'vrai' ou 'faux' au lieu de true ou false. Oui, sauf que les programmeurs sont de grosses feignasses, et si vous utilisez true et false, vous pourrez alors économiser un tout petit peu de place dans votre script. Je vous montre comment fonctionne ce raccourci avec l'exemple du haut.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var reponse = false;

if(reponse) /* c'est comme si on faisait if(reponse == true) */
{
document.write('L\'agent secret a été sincère, il a dit toute la vérité.');
}
else
{
document.write('L\'agent secret a menti sur toute la ligne !');
}
Essayer !

Effectivement, c'est un vrai truc de feignasse, mais je ne vous apprends pas ça juste pour que vous gagniez un petit de peu de place dans votre script. Surtout si plus tard vous lisez quelques scripts qui ne sont pas de vous, et que vous rencontrez ce type de condition, vous comprenez bien ce que cela veut dire.

Inverser une condition



Voici encore un autre raccourci qui cette fois-ci va vous être très utile : il sert à inverser une condition. Imaginons que vous devez faire une vérification du genre "si variable est différent de variable2", mais que vous ne vous souvenez plus du signe qui signifie "différent de". Il vous suffit juste de faire : "si variable est égale à variable2", puis d'inverser la condition. Regardez, c'est très simple.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var variable1 = true;
var variable2 = false;

if(!variable1 == variable2)
{
document.write('Variable1 est différente de variable2');
}

else
{
document.write('Variable1 est égale à variable2');
}
Essayer !

Le signe que j'ai rajouté pour dire que la condition doit être inversée est un point d'exclamation. Il faut le mettre juste après l'ouverture de la parenthèse du if, comme ceci.
Code : JavaScript
1
2
3
4
5
6
7
8
if(!condition) /* La condition est inversée */
{
/* action 1 */
} 
else
{
/* action 2 */
}

Retenez bien ça, car cela pourra vous éviter de chercher le signe pendant des heures, ou encore de vous énerver sur le script et de frapper votre pauvre ordinateur innocent.

Et et ou



Une dernière chose avant que vous puissiez vous vanter de presque tout connaître sur les conditions en if ... else : il faut que vous soyez capables de dire "et" et "ou" en javascript. Et bonne nouvelle, ce n'est pas difficile ! Voici comment javascript prononce ces deux mots.
En françaisEn javascript
OU ||
ET &&

Les deux petites barres qui signifient "ou" en javascript ne sont pas des L. Vous pouvez les faire en appuyant sur Alt + 6.

En prime, une petite info que Thunderseb m'a passé en corrigeant le tuto.Citation : Thunderseb
Le signe | s'appelle « pipe ». Sur un clavier belge, c'est Alt + 1. ;)

Et comme d'habitude, un petit exemple pour vous montrer comment cela fonctionne. Vous allez voir : c'est très simple, traduisez en français et ça ira tout seul.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
var chiffre_porte_bonheur = 7;
var chiffre_porte_malheur = 13;

if(chiffre_porte_bonheur == 7 || chiffre_porte_bonheur == 777)
{
document.write('Chanceux !');
}
else
{
document.write('Malchanceux !');
}

if(chiffre_porte_bonheur == 7 && chiffre_porte_malheur == 13)
{
document.write('<br/>Tu crois aux malheurs que les vendredis 13 apportent ?');
}
else
{
document.write('<br/>As-tu peur des vendredis 13 ?');
}
Essayer !

Une condition pratique : switch

Ceux d'entre vous qui testent toujours quelques scripts pour s'amuser avant de passer au chapitre / sous-chapitre suivant l'auront remarqué, il est très long de faire une série de else if pour vérifier une même variable / valeur. C'est d'ailleurs pour cela que switch a été créé.

Son principe est de placer la variable que l'on veut vérifier entre parenthèses, puis de mettre quelques mots clés entre accolades pour vérifier les valeurs de la variable. Ceci étant assez complexe à expliquer, je préfère vous donner un exemple.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var note = 6;

switch(note)
{
case 0 :
document.write('0/10 ? Catastrophe !');
break;

case 1 :
document.write('Avec cette note-là, tu devrais aller réviser tes cours...');
break;

case 2 :
document.write('J\'espère pour toi que ce n\'était qu\'un accident !');
break;

case 3 :
document.write('3/10 = 6/20  Tu penses que c\'est une bonne note ?');
break;

case 4 :
document.write('Juste en dessous de la moyenne, aïe !');
break;

case 5 :
document.write('De justesse ! Tu as pile la moyenne !');
break;

case 6 :
document.write('Pas mal, continue comme ça !');
break;

case 7 :
document.write('Oho, tu commences à devenir fort !');
break;

case 8 :
document.write('Très bien ! Encore quelques points et tu sera la perfection incarnée !');
break;

case 9 :
document.write('Extraordinaire, tu vas bientôt me dépasser !');
break;

case 10 :
document.write('Comment as-tu fait, mon maître ? Puis-je être ton disciple ?');
break;

default :
document.write('La note n\'existe pas !');
}
Essayer !

Explications :
  1. Au début, j'ai déclaré ma variable, ça, vous connaissez. Donc, note vaut 6.
  2. Ensuite j'ai placé le mot switch et deux parenthèses. Entre celles-ci, j'ai placé la variable note.
  3. Puis des accolades se suivent. Entre elles, il y a le plus important, ce qui va remplacer les else if.
  4. Pour finir, un default est placé tout en bas, juste avant la fermeture des accolades du switch.
À présent, je vais vous montrer la syntaxe du switch. Au premier abord, c'est compliqué, mais vous allez voir que c'est très pratique dans certains cas ;) .
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
switch(variable)
{
case valeur1 :
action1;
action2;
/* etc */
break; /* On a terminé de vérifier la première valeur */

case valeur2 :
action3;
action4;
action5;
break; /* On a terminé de vérifier la deuxième valeur */

/* Une fois toutes les valeurs vérifiées, il faut placer une valeur par défaut. 
C'est-à-dire que si la variable n'était égale à aucune des valeurs que 
l'on a vérifiées, switch fera les actions ci-dessous 
On peut dire de default qu'il est l'équivalent de else */

default :
action6;
}

Faites très très attention, il n'y a pas de break après le default ! On en met juste après les case. C'est une erreur très courante, alors souvenez-vous en bien.
Maintenant que vous connaissez switch, vous allez faire un petit exercice avant que l'on se quitte. Le principe est simple, je vous donne un script avec des if, else if, ... et vous vous le transformez avec switch. Mais attention, il faut que le résultat soit le même ! Voici le script, puis sa correction juste en dessous.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var nombre_enfants = 3;

if(nombre_enfants == 0)
{
document.write('Vous n\'avez pas d\'enfant, la belle vie :p');
}
else if(nombre_enfants == 1)
{
document.write('Vous avez un enfant. Faites-lui un petit frère ou une petite soeur, il doit s\'ennuyer.');
}
else if(nombre_enfants == 2)
{
document.write('Vous avez deux enfants. Selon moi, vous en avez juste fait le bon nombre ;)');
}
else if(nombre_enfants == 3)
{
document.write('Vous avez gagné une carte famille nombreuse !');
}
else
{
document.write('Euh... Vous avez un nombre d\'enfants trop élevé ou trop bas...');
}
Essayer !

Secret (cliquez pour afficher)
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var nombre_enfants = 3;

switch(nombre_enfants)
{
case 0 :
document.write('Vous n\'avez pas d\'enfant, la belle vie :p');
break;

case 1 :
document.write('Vous avez un enfant. Faites-lui un petit frère ou une petite soeur, il doit s\'ennuyer.');
break;

case 2 :
document.write('Vous avez deux enfants. Selon moi, vous en avez juste fait le bon nombre ;)');
break;

case 3 :
document.write('Vous avez gagné une carte famille nombreuse !');
break;

default :
document.write('Euh... Vous avez un nombre d\'enfants trop élevé ou trop bas...');
}
Essayer !

Q.C.M.

Quel est le signe qui signifie "plus grand ou égal à" ?
Parmi toutes ces propositions, une seule fait la même chose que if(variable == 5), laquelle ?
Que vaut animal à la fin de ce script ?

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var chiffre = 5 / 5 * 5 + 5 - 5;

if(!chiffre > 4)
{
var animal = 'Panda';
}
else if(chiffre == 10)
{
var animal = 'Tatoo';
}
else
{
var animal = 'Wombat';
}
Que vaut vainqueur à la fin de ce script ?

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var kilometres = 27;
var points = 451;
var energie = 33;

if(kilometres >= 25 && points != 325 && energie > 33)
{
var vainqueur = true;
}
else
{
var vainqueur = false;
}

Statistiques de réponses au QCM

Vous en avez maintenant fini avec les conditions, ce qui n'était pas une mince affaire, croyez-moi !
Désormais, vous êtes en train de découvrir la vraie richesse de la programmation. Votre cerveau commence à assimiler les fondements du javascript, ce qui est très important.

Dans ce chapitre, nous avons vu plusieurs types de conditions, mais surtout à quoi servent les variables ! C'est à partir de là que tous les engrenages dans votre cerveau vont commencer à s'activer, et que vous allez de plus en plus aimer la programmation (en tout cas, c'est comme ça que cela m'est arrivé).

Les ternaires



Pour terminer ce chapitre, je voudrais vous apprendre une dernière chose sur les conditions : il en existe encore un autre type ! Je vous rassure tout de suite, je ne l'utiliserai pas dans mes cours, car son fonctionnement est tout simplement compliqué. :)
Ces conditions ternaires ont été créées dans le but d'aller plus vite quand ont veut vérifier la valeur d'une variable. Seulement voilà, je préfère que vous n'utilisiez pas cette technique, et que vous perdiez une minute grand maximum à écrire une condition simple, plutôt que dix minutes à essayer de lire une condition ternaire. Je vais vous en présenter une, mais vous aurez été prévenus, c'est presque incompréhensible !
Code : JavaScript
1
2
3
4
var i = 8;
var j;

j = (i==5) ? 'blabla' : 'blublu';

Alors, ça vous en bouche un coin ? Je vous explique comment ça marche.
  1. Les variables i et j sont créées, mais seule i à une valeur. C'est le chiffre 8.
  2. Ensuite, on change la valeur de la variable j. On met : si i est égale à 5, alors j vaut 'blabla', sinon j vaut 'blublu'.
Voilà, c'était la dernière chose à savoir (mais pas à retenir) sur les conditions. Pour ma part, ça ne m'a servi que 2 ou 3 fois quand je lisais des scripts. Leurs auteurs ne voulaient pas que l'on puisse les lire facilement, car ils avaient mis un droit d'auteur dessus ; mais sachant que cette règle est souvent enfreinte, ils ne mettaient que des conditions ternaires. Résultat, on mettait trois quarts d'heure à lire leur script au lieu d'une demi-heure. :p

Sur ce, on se rejoint au prochain chapitre !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut Retour en haut


Créé : le 28/06/2006 à 21:30:15
Modifié : le 22/08/2008 à 15:52:25
Avancement : 0%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 629 Zéros connectés | Requêtes SQL 10 requêtes | Temps de génération de la page : Total (SQL) 0.2491s (0.2352s)