Les conditions en JavaScript

La condition if

Exemple

Le script (sans le conteneur SCRIPT) :

		var vage = prompt('tapez un votre âge sous forme d\'un entier') ; 
		vage = parseInt(vage) ; // conversion en entier 
		if(vage >= 60) {alert(vage + " ans  donc vous êtes senior") ; }
		if(vage < 60) {alert(vage + " ans donc vous êtes encore jeune"); }

Testez ce script !

Commentaire du code

Il y a deux conditions.
Une condition est entre parenthèse après le mot réservé if.
Une condition est une expression logique qui retourne une valeur logique (un booleen : true ou false).
Si la première condition retourne true alors il y a affichage du message : "vous êtes sénior".
Si la deuxième condition retourne true alors il y a affichage du message : "vous êtes encore jeune".
Ici les accolades sont facultatives puisqu'il n'y a qu'une instruction en cas de test vérifié.

Syntaxes :

	if (condition) 
		{ bloc d'instructions 	}
	OU 
		if (condition) instruction unique ; 

Les opérateurs de comparaison

Dans chacune des trois conditions l'expression logique est basée sur un opérateur de comparaison.
Nous avons utilisé : >= (supérieur ou égal) et < (inférieur à ) mais il existe aussi :

Opérateurs logiques

Le script de l'exemple

		var vmoyenne  = prompt('tapez la moyenne à l\'examen') ; 
		vmoyenne = parseInt(vmoyenne) ; // conversion en entier 
		if(vmoyenne >= 12) alert ("Moyenne supérieure ou égale à 12 donc vous êtes admis"); 
		if(vmoyenne >= 10 && vmoyenne < 12) alert("oral de rattrapage !"); 
		if(vmoyenne < 10) alert("refusé !"); 

Testez ce script !

Commentaire du code

Remarquez que la chaîne qui est l'argument de la fonction prompt contient une apostrophe . Donc il faut la délimiter la chaîne soit par des doubles quotes (") soit par des simples quotes (') mais à condition d'échapper alors l'apostrophe (\')

Examinons la deuxième condition. Traduisons l'expression de condition : "si vmoyenne supérieure ou égale à 10 et inférieure à 12" . Nous avons utilisé un opérateur logique dans l'expression.

La condition if ... else (en français :si ... sinon)

Exemple

Reprenons le thème précédent. Nous aurions pu écrire plus simplement :

...
	if (vage >= 60) { alert(vage + ' ans donc vous êtes senior') ; }
	else { alert(vage + ' ans donc vous êtes encore jeune) ; }
...

Que ce soit dans le si ou dans le sinon les accolades sont ici facultatives puisqu'il n'y a à chaque fois qu'une instruction.
Elles deviennent obligatoires en cas de bloc d'instructions.

Les "if... else" imbriqués

Thème : affichage du nom du département à partir de son code minéralogique.
On limite à la nouvelle région "Hauts de France".

Le script :

	var vcodepostal  = prompt('tapez votre code postal :  59 ou 60 ou 62 ou 80 ou 02') ; 
		vcodepostal = parseInt(vcodepostal) ; // conversion en entier 
		if(vcodepostal == 2) alert ("Vous résidez dans l'Aisne"); 
			else if ( vcodepostal == 59) alert("Vous résidez dans le Nord") ;
				else if ( vcodepostal == 60) alert("Vous résidez dans l'Oise") ;
					else if (vcodepostal == 62) alert("Vous résidez dans le Pas de calais") ; 
						else if (vcodepostal == 80) alert("Vous résidez dans la Somme") ;
							else alert("erreur de saisie"); 

Testez ce script !

Commentaire

Mais comment fonctionne cette structure ?
Si la première condition retourne false alors il y a examen du deuxième test. Si le deuxième test retourne false alors examen du troisième test et ainsi de suite ...

La condition switch

Reprenons le thème précédent (affichage du nom du département en fonction du code minéralogique). Il y a une autre solution avec la structure switch (cas de)

Le script :

		var vcodepostal  = prompt('tapez le code du département :  02 ou 59 ou 60 ou 62 ou 80') ; 
		vcodepostal = parseInt(vcodepostal) ; // conversion en entier 
		switch(vcodepostal)
		{
			case 2 : alert('Aisne'); break ; 
			case 59 : alert('Nord'); break ; 
			case 60 : alert('Oise'); break ; 
			case 62 : alert('Pas de calais'); break ; 
			case 80 : alert('Somme'); break ; 
			default : alert('erreur de saisie') ; 
		} // fin switch 

Testez ce script !

Fonctionnement du code

Reconnaissez que c'est beaucoup plus clair ...

Si vcodepostal est égal à 2 alors affichage de "Aisne" puis sortie du "switch" (grâce à l'instruction break) sinon examen du case suivant.
L'instruction associée à default est exécutée si aucun des cas n'est vérifié.

Attention la structure switch souffre cependant d'un gros inconvénient ...
L'opérateur de comparaison (implicite d'ailleurs) est forcément égal. Impossible d'écrire, par exemple : case >=60.

Solution plus réaliste

Le risque d'erreur de saisie avec l'instruction prompt est très très élevé.
Il faut mieux utiliser une liste déroulante (donc un contrôle de formulaire) pour la saisie du code minéralogique.

Le code correspondant (extraits) devient alors :

<body> <h1>Les départements de la région Hauts de France</h1> <select id ="liste" onchange ="ftrait()" > <option value ="2">code 02</option> <option value ="59">code 59</option> <option value ="60">code 60</option> <option value ="62">code 62</option> <option value ="80">code 80</option> </select> <script> function ftrait() { var vcodepostal = document.getElementById("liste").value ; vcodepostal = parseInt(vcodepostal) ; // conversion en entier switch(vcodepostal) { case 2 : alert('Aisne'); break ; case 59 : alert('Nord'); break ; case 60 : alert('Oise'); break ; case 62 : alert('Pas de calais'); break ; case 80 : alert('Somme'); break ; } // fin switch } // fin fonction </script> </body>

La saisie du code minéralogique se fait avec une liste déroulante (donc un outil HTML). Aucun risque d'erreur de saisie.
Remarquez que la liste a un identifiant : (id ="liste").
A chaque fois que la valeur de ce contrôle change il y a appel d'une fonction JavaScript ftrait().

Dans la fonction la variable vcodepostal récupère la dernière valeur de la liste grâce à l'instruction : var vcodepostal = document.getElementById("liste").value ;

Peut-être avez vous du mal à bien comprendre toutes les subtilités de ce code. Mais rassurez vous un peu plus loin dans ce chapitre j'aborde la création de fonctions en JavaScript.
Après on retrouve la structure switch.
Testez la version améliorée !
Retour menu