JavaScript – Les boucles
- JavaScript – Introduction au JavaScript
- JavaScript – Inclusion dans une page
- JavaScript – Un langage orienté objet
- JavaScript – Les commentaires
- JavaScript – Ecrire dans le document
- JavaScript – Les variables
- JavaScript – Opérateurs
- JavaScript – La structure conditionnelle
- JavaScript – Les cas
- JavaScript – Les boucles
- JavaScript – Les tableaux
- JavaScript – Les fonctions
- JavaScript – Les objets
- JavaScript – L’objet String
- JavaScript – L’objet Number
- JavaScript – L’objet Math
- JavaScript – L’objet Date
- JavaScript – Les expressions régulières
- JavaScript – L’objet navigator
L’utilisation de boucles est un bon moyen pour répeter des instructions plusieurs fois. Dans JavaScript, il
en existe 4 sortes : while, do…while, for et for…in.
La boucle while
La boucle while execute une instruction ou un bloc d’instructions TANT QUE une instruction est
vrai, c’est à dire qu’elle est évaluée à true.
Voici un exemple :
var i=0;
document.writeln("<pre>");
document.writeln("Apprenons la table de 8");
while(i < 10){// TANT QUE i < 10, on execute les instructions suivantes :
document.writeln(i + " fois 8 = " + i * 8);
i++;
}
document.writeln("</pre>");
On peut également executer une seule instruction :
var i=0;
document.write("Avant, i vaut " + i + "<br>");
while(i < 10)i++;
document.write("Après, i vaut " + i);
La boucle do..while
La boucle do...while est en tout points identique à la boucle while, à ceci près que la condition
est évaluée à la fin de la boucle, alors que la boucle while l'évalue au début de
la boucle.
Pour bien comprendre, observons le code suivant :
var EstMineur=false;
while(EstMineur){
var age=prompt("Quel est votre âge ?");
EstMineur = age < 18;// si age inférieur à 18, EstMineur = true
}
document.write("C'est bon, vous êtes majeur");
Faisons l'impasse sur l'instruction prompt. Nous l'étudierons par la suite.
Ici, la variable EstMineur est initialisée à false. La condition n'est donc plus
vrai, ce qui fait que la boucle while n'est pas executée, vu que l'expression est testée avant
de débuter la boucle.
Avec une boucle do...while, l'execution du script aurait été différente :
var EstMineur=false;
do{
var age=prompt("Quel est votre âge ?");
EstMineur = age < 18;// si age inférieur à 18, EstMineur = true
while(EstMineur);
document.write("C'est bon, vous êtes majeur");
Ici, la variable EstMineur est testée en fin de boucle. Les instructions sont donc executées au
moins une fois.
La boucle for
La boucle for permet d'executer une instruction ou un bloc d'instructions pendant un certain nombre de
fois.
Voici la syntaxe de cette boucle :
for(initialisation; condition; incrementation){
[Instructions]
}
Remarquez que les arguments sont séparés par des points-virgules et non pas des virgules.
Reprenons notre exemple de départ, où il s'agissait de calculer la table de 8.
Dans ce cas là, l'utilisation de la boucle for est plus astucieux :
document.writeln("<pre>");
document.writeln("Apprenons la table de 8");
for(var i=0; i < 10; i++)document.writeln(i + " fois 8 = " + i * 8);
document.writeln("</pre>");
Si vous connaissez un autre langage tel que le Basic ou le Pascal, vous observerez que la boucle for
du JavaScript est beaucoup plus souple.
En effet, tout les arguments (initialisation, condition et incrementation) peuvent être optionnels. Bien que l'interet
sous discutable, c'est tout de même possible.
Ensuite, vous pouvez très bien spécifier plusieurs variables :
document.writeln("<pre>");
document.writeln("Apprenons la table de 8");
for(var i=0, j=10; i < 10; i++, j--){
document.write(i + " fois 8 = " + i * 8 + "\t");
document.writeln(j + " fois 8 = " + j * 8);
}
document.writeln("</pre>");
La boucle for...in
La boucle for...in est spécifique aux objets. Elle permet de passer en revue toutes les propriétés d'un
objet.
Cette boucle est rarement utilisée dans un script, mais elle est très utile au moment du développement pour
parcourir les objets intégrés.
Par exemple, l'objet document est plus ou moins différent selon le navigateur : l'objet document
de Netscape Navigator a des propriétés et méthode que l'objet document de Microsoft Internet Explorer n'a
pas et vice-versa.
On peut alors parcourir cette objet et afficher toutes ces propriétés à l'aide de la boucle for...in.
La boucle for...in s'utilise ainsi :
for(variable in objet){
[Instructions]
}
Ainsi, pour parcourir l'objet document, on écrira :
for(var Maprop in document){
document.write(Maprop + '<br>');
}
La boucle for...in n'a pas de condition. Elle s'arrête lorsque toutes les propriétés ont été parcourues.
Il est egalement possible de savoir la valeur d'une propriété en utilisant l'objet examiné comme sorte de tableau
associatif (nous les étudierons par la suite) :
for(var Maprop in document){
document.write(Maprop + ' = ' + document[Maprop] + '<br>');
}
break et continue
continue permet d'ignorer les instructions placées entre lui et la fin de la boucle. La boucle reprend alors
son chemin sans les avoir executées.
Reprenons nos tables de multiplication. Si on avait voulu afficher tout les produits, sauf celui du chiffre 5,
ont aurait pu écrire :
document.writeln("<pre>");
document.writeln("Apprenons la table de 8");
for(var i=0; i < 10; i++){
if(i==5)continue;// on repart au début de la boucle
// si i == 5
document.writeln(i + " fois 8 = " + i * 8);
}
document.writeln("</pre>");
break à la même utilisation que dans les cas. Il permet de sortir de la structure. Si on avait voulu
afficher tout les produits jusqu'à 5, on aurait pu écrire :
document.writeln("<pre>");
document.writeln("Apprenons la table de 8");
for(var i=0; i < 10; i++){
if(i==5)break;// on sort de la boucle
// si i == 5
document.writeln(i + " fois 8 = " + i * 8);
}
document.writeln("</pre>");
C'est deux instructions peuvent recevoir le nom d'un label.
Un label est défini comme suit :
indentificateur :
Un label peut se trouver n'importe où dans le code.
L'utilisation d'un nom de label avec break et continue peut être utile lors de l'imbrication
de boucles.
L'exemple suivant calcul toutes les tables de multiplication :
document.writeln("<pre>");
for(var j=0; j < 10; j++){
for(var i=0; i < 10; i++){
document.writeln(i + " fois " + j + " = " + i * j);
}
document.writeln();
}
document.writeln("</pre>");
Nous allons maintenant affecter un label à chacune de ces boucles :
document.writeln("<pre>");
boucleun :// premier label
for(var j=0; j < 10; j++){
boucledeux :// deuxième label
for(var i=0; i < 10; i++){
document.writeln(i + " fois " + j + " = " + i * j);
}
document.writeln();
}
document.writeln("</pre>");
Ainsi, si lorsque i est égal à 5, on veut sortir des deux boucles, on pourra écrire :
document.writeln("<pre>");
boucleun :
for(var j=0; j < 10; j++){
boucledeux :
for(var i=0; i < 10; i++){
if(i==5)break boucleun;// on sort de la première boucle
document.writeln(i + " fois " + j + " = " + i * j);
}
document.writeln();
}
document.writeln("</pre>");
Si nous n'avions pas préciser de label, seul la 2ème boucle aurait été stopée.
Cette remarque est également valable pour continue. Si on ne veut retourner à la première boucle
lorsque i est égale à 5, on écrira :
document.writeln("<pre>");
boucleun :
for(var j=0; j < 10; j++){
boucledeux :
for(var i=0; i < 10; i++){
if(i==5)continue boucleun;// retour à la première boucle
document.writeln(i + " fois " + j + " = " + i * j);
}
document.writeln();
}
document.writeln("</pre>");