JavaScript : les conditions

La condition if

Exemple

Le 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 :
== (égal)
!= (différent de )
>= (supérieur ou égal à )
<= (inférieur ou égal à )

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 !

Remarquez que la chaine 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.

Les opérateurs logiques sont :
&& (sens : et)
|| (sens : ou )
! (sens : non)

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

Exemple

Reprenons le thème de l'âge. 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) ; } ...

L'instruction après le else est exécutée si la condition retourne FALSE.

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.

Opérateur ternaire

Reprenons le thème de l'âge. Le script peut s'écrire de la façon suivante : var vage = prompt('tapez un votre âge sous forme d\'un entier') ; vage = parseInt(vage) ; // conversion en entier var vstatut = vage >=60 ? "senior" :"encore jeune" ; alert (vage + " " + vstatut);

Observons la troisième instruction. Elle est basée sur l'opérateur ternaire.
Si le test est VRAI la variable vstatut reçoit "senior" sinon elle récupère "encore jeune".
Syntaxe : test ? code si vrai : code si faux

Testez ce script !

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 !

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.

Sorties dans la console du navigateur

Les sorties peuvent être affichées dans la console du navigateur.
Il suffit de remplacer "alert()" par "console.log()".
Donc le script devient : 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 : console.log('Aisne'); break ; case 59 : console.log('Nord'); break ; case 60 : console.log('Oise'); break ; case 62 : console.log('Pas de calais'); break ; case 80 : console.log('Somme'); break ; default : console.log('erreur de saisie') ; } // fin switch

Comment ouvrir la console du navigateur sous Chrome ?

Pour ouvrir la console sur Chrome, utilisez le raccourci clavier suivant :Ctrl + Maj + J (sous Windows).
Vous pouvez également ouvrir la console en cliquant avec le bouton droit de la souris sur la page, puis en sélectionnant "Inspecter" puis sélectionnez (dans la fenêtre de développement) l'onglet "console".

Première application web

Dans le cadre d'un programme JS définitif, les boites de dialogue prompt(), alert(), console.log(), confirm() doivent être bannies.
Les entrées-sorties doivent se faire dans le cadre d'un formulaire HTML (avec certains champs en lecture seule).
On peut alors parler d'une "application web en ligne" : une page web qui interagit avec le visiteur.

Reprenons la thématique "affichage du nom d'un département en fonction de son code".
Les entrées/sorties se font désormais dans le cadre d'un formulaire HTML.

Le code HTML de la page

<h1>Les départements de la région Hauts de France</h1>
<form>
	<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>
	<input type ="text"  id ="dpt" readonly />
</form>

La saisie du code minéralogique se fait dans une liste déroulante. Donc aucun risque d'erreur de saisie.
Le nom du département correspondant s'affiche dans une zone de texte en lecture seule.
Notez que chaque élément du formulaire est affecté d'un ID. C'est indispensable dans le cadre du traitement des données par le script !
A chaque changement de valeur dans la liste déroulante il y a appel d'un fonction JS : ftrait().

Le script

function ftrait()
{
	var vdpt =""; // déclaration d'une variable
	var vcodepostal  = document.getElementById("liste").value ; // lire dans la liste la valeur retenue
	vcodepostal = parseInt(vcodepostal) ; // conversion en entier de la chaine numérique
	switch(vcodepostal)
	{
		case 2 : vdpt ="Aisne"; break ; 
		case 59 : vdpt ="Nord"; break ; 
		case 60 : vdpt ="Oise"; break ; 
		case 62 : vdpt ='Pas de calais'; break ; 
		case 80 : vdpt ='Somme'; break ; 
	} // fin switch 
	document.getElementById("dpt").value =vdpt; // écrire dans le champ du formulaire
} // fin fonction

On manipule dans le script un élément du formulaire via son ID avec la méthode document.getElementById(nomId)
Comme on manipule plus précisément le contenu d'un élément (en lecture ou écriture) il faut rajouter ".value" !

Testez cette application !

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

JavaScript : les conditions

La condition if

Exemple

Le script

Commentaire du code

Les opérateurs de comparaison

Opérateurs logiques

Le script de l'exemple

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

Exemple

Opérateur ternaire

Les "if... else" imbriqués

La condition switch

Le script

Fonctionnement du code

Sorties dans la console du navigateur

Comment ouvrir la console du navigateur sous Chrome ?

Première application web

Le code HTML de la page

Le script