SELFHTML: JavaScript/DOM / Éléments du langage JavaScript / Boucles (while/for/do-while)

	Boucles (while/for/do-while)
	Boucles avec "while" Boucles avec "for" Boucles avec "do-while" Contrôle à l'intérieur de boucle - break et continue

Boucles avec "while"

À l'aide de boucles while vous pouvez répéter des instructions de programme jusqu'à ce que la condition formulée dans la boucle soit remplie. Ce genre de boucles est indiqué quand vous ne savez pas combien de boucles doivent être exécutées.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
 var saisie = "";
 var compteur = 1;
 while(saisie != "how to make love"  && compteur <= 3) {
   saisie = window.prompt(compteur + " Essai: Que signifie 'HTML'?","");
   compteur++;
 }
 if(saisie != "how to make love")
   document.write("<big>Commencez par apprendre HTML! ...<\/big>");
 else
   document.write("<big>Bien, Vous avez compris de quoi il retourne! ...<\/big>");
// -->
</script>
</body></html>

Explication:

L'exemple demande à l'utilisateur dans une boucle while d'entrer la signification de l'abréviation HTML jusqu'à trois fois dans une fenêtre de dialogue (window.prompt()). La boucle peut se terminer pour deux raisons: soit l'utilisateur donne la signification exacte de l'abréviation ou la variable compteur, qui compte le nombre de tentatives a atteint une valeur supérieure à 3. Quand la boucle est terminée, on ne sait pas laquelle de ces deux causes possibles a mis fin à la boucle. Pour le savoir, la vérification est faite dans l'exemple à la fin à l'aide d'une condition si, alors... avec "if" pour savoir si la boucle a été terminée parce que l'entrée était fausse. Selon le cas si l'entrée était correcte ou bien fausse la phrase correspondante est sortie dans la fenêtre d'affichage du navigateur avec document.write.

Une boucle while commence avec le mot while (while = aussi longtemps que). Suit entre parenthèses la condition. Pour formuler une condition, vous avez besoin d' opérateurs de comparaison. Le contenu de la boucle sera répété jusqu'à ce que la condition soit vraie. .

En règle générale une boucle while contient plusieurs instructions à l'intérieur de la boucle. Notez toutes ces instructions à l'intérieur de parenthèses accolade { et } (touches Alt 123 et Alt 125), comme dans l'exemple (voir aussi la partie traitant des blocs d'instructions).

Attention:

Veillez toujours pour de telles boucles qu'il y ait au moins une possibilité de terminer la boucle après un laps de temps raisonnable. Autrement, vous créez ce qu'on appelle une "boucle sans fin", de laquelle l'utilisateur ne peut sortir qu'en interrompant brutalement son navigateur WWW. C'est particulièrement irritant au cours de sessions en ligne sur le WWW!

Pour éviter les boucles sans fin, vous avez besoin de quelque chose qui à un moment donné permette de sortir de la boucle. Le plus souvent est défini à cette fin un "compteur" - dans notre exemple: la variable compteur. Cette variable a ici une valeur de départ de 1 et sera incrémentée de 1 à chaque passage de boucle avec l'instruction compteur++;. Quand dans l'exemple le compteur est égal ou supérieur à 3 la boucle est interrompue.

D'autres possibilités pour interrompre une boucle sont décrites ci-après.

Boucles avec "for"

La condition de boucle d'une boucle for prévoit d'emblée un compteur et une condition pour l'interruption.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
 var sortie = "";
 for(var i = 10; i <= 36; i++)
   sortie = sortie + "<span style=\"font-size:" + i + "pt\">Écriture avec " + i + " points<\/span><br>";
 document.write(sortie);
// -->
</script>
</body></html>

Explication:

L'exemple définit une variable nommée sortie, qui au cours d'une boucle for reçoit toujours plus de contenu pour l'écrire à la fin dans la fenêtre du navigateur avec document.write. La boucle for a été exécutée 27 fois, à savoir autant de fois que le compteur défini dans la variable i et initialisé avec la valeur 10 reste plus petit ou égal à 36, sachant qu'à chaque tour de boucle il est incrémenté de 1 (i++). À chaque boucle, la variable sortie avec sa valeur respective est insérée dans du code HTML avec la mention de CSS font-size (taille de police). La valeur qui est ici attribuée à font-size , est à chaque boucle la valeur de i. Ainsi l'impression est-elle donnée que des mentions CSS sont générées de font-size:10pt jusqu'à font-size:36pt. Le résultat est sorti à la fin. Pour la compréhension des parties constituant sortie voir aussi les opérateurs pour relier des chaînes de caractères.

Une boucle for commence par le mot for. Suit entre parenthèses la condition de la boucle. Pour la boucle for entre en vigueur une syntaxe fixe. À l'intérieur même de la condition de la boucle figurent trois instructions. Dans la première instruction est défini et initialisé le compteur de boucles. Dans l'exemple, un compteur i est défini et initialisé avec la valeur 10. La deuxième condition contient la condition à partir de laquelle la boucle se termine. Pour cela, vous avez besoin d' opérateurs de comparaison. Dans la troisième instruction, le compteur de boucles est modifié de telle façon qu'à un moment ou à un autre il remplira la deuxième condition notée. Dans l'exemple, i est incrémenté de 1 grâce à i++ à chaque tour de boucle. À cet endroit pourrait aussi figurer quelque chose comme i=i+10 (incrémenter de 10 à chaque tour de boucle).

Une variante spéciale de la boucle for est nommée boucle for-in.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
 var sortie = "";
 for (var propriete in document)
   sortie = sortie + "document." + propriete + ": " + document[propriete] + "<br>";
 document.write("<h1>Propriétés de l'objet <i> document <\/i><\/h1>")
 document.write(sortie);
// -->
</script>
</body></html>

Explication:

L'exemple montre comment à l'aide d'une boucle for-in vous pouvez en apprendre plus sur les performances JavaScript de votre navigateur. Dans l'exemple, les propriétés de l'objet document sont sorties. À chaque tour de boucle, la variable sortie est élargie d'une propriété d'objet. La valeur actuelle de la propriété d'objet peut être sortie avec nom d'objet[propriete]. La boucle tourne aussi longtemps qu'il reste des propriétés d'objet - c'est ce que signifie for in.

Attention:

Si vous voulez faire dépende plus d'une instruction de la boucle for, vous devez, comme d'habitude, enfermer ces instructions dans des parenthèses accolade.

Vous ne pouvez appliquer la boucle for in avec Opera, que sur des objets ou variables que vous avez définis. Avec les objets prédéfinis, la boucle reste sans effet.

L'explorer Internet MS ne connaît ce genre de boucle que depuis la version 4.01.

Boucles avec "do-while"

La boucle do-while est une variante de la boucle while normale. La différence entre les deux réside en ce que, pour la boucle while normale la condition de la boucle est vérifiée avant l'exécution du code tandis que pour la boucle do-while le code est d'abord exécuté et qu'après seulement la condition de la boucle est vérifiée. De cette façon il vous est possible d'imposer que les instructions de la boucle soient exécutées dans tous les cas au moins une fois, même quand la condition de la boucle s'avère fausse dés le départ.

Exemple:

une fois comme ceci:
 <script type="text/javascript">
 <!--
 var x = 10;
 do {
   document.write("<br>x * x = " + (x * x));
   x = x + 1;
 }
 while(x < 10);
// -->
</script>
et une fois comme cela:
<script type="text/javascript">
<!--
 var x = 10;
 while(x < 10) {
   document.write("<br>x * x = " + (x * x));
   x = x + 1;
 }
// -->
</script>

Explication:

Dans l'exemple, deux petits passages JavaScript sont définis. Dans les deux passages une variable x et définie et la valeur 10 lui est affectée. Dans le premier passage, le carré de x (incrémenté de 1 à chaque boucle) est écrit aussi longtemps que x est plus petit que 10. Étant donné que x a déjà dès le début la valeur 10, la condition d'interruption est déjà remplie en somme, dès le départ. Malgré tout, le carré de x est sorti une fois, puisque la vérification ne se fait qu'après l'exécution des instructions placées dans la boucle.
Dans le deuxième passage script sont posées les mêmes conditions, mais c'est pourtant une boucle while normale qui y est notée. Comme x n'est pas plus petit que 10 dès le départ, les instructions de la boucle ne seront pas exécutées une seule fois. La vérification de la condition de la boucle qui a lieu au début, l'empêche.

Contrôle à l'intérieur de boucle - break et continue

Les boucles sont des "facteurs critiques" dans un script. Pour certaines tâches plus compliquées, il n'est quelquefois pas simple de programmer une boucle de façon à ce qu'elle soit dans chaque cas à un moment donné interrompue. C'est pourquoi il existe des commandes complémentaires pour contrôler ce qui se passe dans une boucle.

Exemple 1:

<script type="text/javascript">
<!--
 var i = 0;
 while (i < 6) {
  if (i == 3) break;
  i++;
 }
 alert("i = " + i);
// -->
</script>

Explication:

Avec break vous pouvez arrêter une boucle immédiatement. Pour cela, il vous faut noter dans le corps de la boucle une demande if de laquelle dépend le mot break comme instruction. Dans l'exemple la boucle va s'interrompre dés que i aura comme valeur 3, bien que d'après l'instruction de la boucle, i puisse atteindre la valeur 6.

Exemple 2:

<script type="text/javascript">
<!--
 var i = 0;
 while (i < 6) {
  fin:
  if (i == 3) {
    alert("Et voila, car i a atteint la valeur de  " + i);
        break fin;
   }
  i++;
 }
// -->
</script>

Explication:

Ceci est une variante particulière de break. Vous pouvez noter, avant la question (if) dont vous faites dépendre une instruction break, une "étiquette". C'est un nom que vous donnez vous même suivi de deux points, dans l'exemple fin:. Derrière le mot break vous pouvez alors mentionner le nom de l'étiquette. Ainsi vous vous assurez dans l'exemple que l'instruction break se rapporte à chaque fois à la demande if dans laquelle il est demandé si i est égal à 3. Dans des cas simples comme dans l'exemple ci-dessus, c'est à vrai dire superflu. Mais conservez cette possibilité dans l'esprit au cas où il vous arriverait de programmer des demande if imbriquées dans des boucles et que vous utilisiez là aussi des instructions break. Pensez aussi que cette variante de l'instruction break fait partie de JavaScript 1.2 et qu'elle mène à des messages d'erreur pour des navigateurs plus anciens.

Exemple 3:

<script type="text/javascript">
<!--
 var i = 0, j = 0;
 while (i < 6) {
  i++;
  if (i == 3) continue;
  j++;
 }
 alert("i est égal à " + i + " et  j est égal à " + j);
</script>

Explication:

Avec continue vous imposez la poursuite immédiate du prochain tour de boucle. i et j sont incrémentés de 1 à chaque tour de boucle. Quand i est égal à 6 la boucle est interrompue. Entre temps i a aussi la valeur 3. Ce cas de figure est traité par la demande if. Quand i est égal à 3, le tour de boucle suivant est démarré aussitôt. L'instruction j++; n'est donc pas exécutée dans le tour de boucle où i a la valeur 3. Pour cette raison, i aura à la fin la valeur 6 alors que j n'aura que la valeur 5.


	Mots réservés
	Instructions conditionnelles (if-else/switch)

SELFHTML/Aides à la navigation

JavaScript/DOM

Éléments du langage JavaScript