Les boucles en JavaScript

Définition

Une boucle est un bloc d'instructions qui est exécutée N fois. Chaque passage dans la boucle est appelée itération.
Le bloc d'instructions est exécuté tant qu'une condition est vraie. Souvent la condition est basée sur une variable qui fait fonction de compteur ou de compte à rebours. C'est à dire que la variable doit être incrémentée (sa valeur augmente de 1) ou être décrémentée (sa valeur diminue de 1) à chaque itération.

La dernière solution est la plus répandue.

La boucle while

Syntaxe

	while (condition)
	{
		instruction1 ; 	instruction2: ...   	instructionN; 
	}

Fonctionnement

Le bloc d'instructions est exécuté tant que la condition retourne true. Il y a sortie de la boucle dès que la condition retourne false.
Le bloc d'instructions peut très bien ne jamais être exécuté ; il suffit que la condition retourne toujours false !
Si la condition est toujours vraie alors la boucle va se répéter à l'infini ... Ce qui est gênant.

Attention même si le bloc d'instructions ne comprend qu'un instruction la paire d'accolades est obligatoire.

Contrôle de saisie d'un réel

Le script

		var vnote ='aaa'; 
		alert('attention le séparateur décimal est le point et non pas la virgule !) ; 
		while (isNaN(vnote))
		{ 
			vnote = prompt('tapez une note entière ou décimale') ; 
		}
		alert('saisie correcte'); 

Testez ce script !

La saisie d'un nombre réel est délicate pour un francophone. Il risque, par exemple, de saisir 10,5 et non pas 10.5 ce qui provoquera une erreur (voir boucle for). Donc tant que le contenu de la variable vnote n'est pas au format numérique (caractères : chiffres et un point) alors il faut recommencer la saisie.
Nous avons utilisé la fonction isNaN argumenté avec la variable vnote. isNaN est fonction JS qui est l'acronyme de "is Not a Numéric". Donc l'expression isNaN(vnote) retourne true si vnote contient, par exemple, 'aaa' (valeur initale) ou 10,5.

Il faut qu'il y ait au moins une itération (pour pouvoir effectuer la saisie). Il faut donc initialiser la variable vnote avec une valeur non numérique afin la condition du while retourne true.

La boucle do ... while

Syntaxe

	do 
		{ 
			instruction1 ; instruction2; ....		; instructionN  ; 
		}
	while (condition) ; 

Il y a forcément au moins une itération puisque le test se fait en fin de boucle !

La boucle "do ... while"

Le script

		var vnote  ; 
		alert('attention le séparateur décimal est le point et non pas la virgule !') ; 
		do  
			{ vnote = prompt('tapez une note entière ou décimale') ; 	}
		while (isNaN(vnote)) ; 
		alert('saisie correcte'); 
Testez ce script !

Ce programme fait exactement la même chose que le précédent : forcer l'utilisateur à répéter la saisie tant que le format n'est pas numérique. Mais la structure do ... while est mieux adaptée puisqu'il y a forcément une itération et c'est bien ce que nous voulons.

La structure for

Syntaxe

	for (initialisation ; condition ; incrémentation )
		{ instruction1 ; instruction2; ....	; instructionN  ; }

Exemple : moyenne de trois notes

Le script correspondant

		var note ; vsomme = 0 ; 
		for(var vcompteur = 0; vcompteur < 3 ; vcompteur++)
		{
			vnote= prompt('tapez une note entière ou décimale') ; 
			vsomme += parseFloat(vnote) ; 
		// nouveau cumul de points après conversion de la chaîne en réel
		} // fin for 
		var vmoyenne = vsomme / vcompteur ; 
		alert('points : ' + vsomme); 
		alert('moyenne : ' + vmoyenne) ; 

Testez ce script !

Ce programme permet de calculer la moyenne de trois notes qui peuvent être décimales.

Observons attentivement ce qui se trouve entre parenthèses après le mot réservé for. On gère le compteur de notes (variable vcompteur) et qui permet de contrôler le nombre d'itérations.

Il n'y a pas de quatrième itération puisque vcompteur n'est plus inférieur à 3 mais égal à 3 !
Dans la boucle il faut saisir une note et calculer le nouveau cumul de points. Comme on veut pouvoir saisir un réel, il faut convertir la chaîne au format numérique en un réel avec la fonction parseFloat.

En effet malgré un format numérique incorrect il n'y a pas plantage car la fonction parseFloat convertit la chaîne à l'entier inférieur. Donc dans ce cas le script fait la moyenne de trois entiers 10.

Les instructions BREAK et CONTINUE dans les boucles

Une boucle peut contenir les instructions break et continue.
Mais quel est l'intérêt d'utiliser ces instructions. En fait elles simplifient la programmation JS !
En particulier elles sont très utiles pour gérer les erreurs de saisie.

Je rappelle que JavaScript est sensible à la casse : il faut écrire ces deux instructions en minuscules dans les scripts !!!

Instruction BREAK dans une boucle

L'instruction break permet une sortie anticipée d'une boucle.
Cette instruction est toujours dans un test.

Exemple : trois tentatives maximales pour saisie le mot de passe. Possibilité de sortir de la boucle dès la première saisie si cette dernière est correcte.

Le script correspondant

var valide =false; var vcompteur =0; alert('pour la saisie du mot de passe vous avez droit à trois essais') ; while (vcompteur < 3) { var vmot = prompt('saisir le mot de passe') ; if(vmot=="sesame") {valide =true ; break;} vcompteur++; } if (valide) alert("vous êtes connecté!"); else alert("connexion impossible");

Commentaire

Une boucle est normalement exécutable 3 fois pour saisir le mot de passe.
Mais dès que le mot de passe saisi est valide ("sesame") valide passe à vrai et sortie de la boucle (commande break).
Testez ce code !

L'instruction break existe aussi dans la structure switch pour sortir du test multiple après exécution d'un case.

Instruction CONTINUE dans une boucle

L'instruction continue dans une boucle permet l'arrêt de l'itération en cours et le passage à la suivante.
Comme break l'instruction continue est exécutée si un test est vérifié.

Exemple : le programme doit afficher les N premiers nombres pairs.
Donc si le reste de la division entière du nombre par 2 ne donne pas zéro il ne faut pas afficher ce nombre et passer à l'itération suivante.

Le script correspondant

var maxi =prompt("saisir un entier inférieur ou égal à 60"); maxi = parseInt(maxi); if (maxi >60) maxi =60; // la limite ne peut dépasser 60 for (var compteur = 0 ; compteur <= maxi; compteur++) { if(compteur%2 != 0) continue; document.write(compteur + " est un nombre pair ! <br>"); }

Commentaire

Notez le test : si le reste de la division entière est différent de zéro alors passage à l'itération suivante (commande continue)
Testez ce code !
Retour menu