Premiers pas en JavaScript
boucle FOR
cuy copyleft
  See You Why?  

 


test relatif au SWITCH... (18.9) | | la boucle FOR... IN... (19.2)

Contenu

 

 

I. Les boucles FOR

Nous avons déjà rencontré des boucles involontaires en abordant les fonctions qui peuvent s'appeler l'une l'autre. Approche souvent non souhaitée du serpent qui se mange la queue.

Dans les langages informatiques, il est cependant souvent fait appel aux boucles. Mais qu'est-ce qu'une boucle ? En informatique, on dira qu'elles permettent de répéter une séquence du programme un nombre spécifique et controlé de fois.

En JS, quelques méthodes de création de boucles sont utilisées fréquemment : avec les instructions FOR abordées dans ce chapitre et particulièrement utilisées lorsqu'on sait d'avance le nombre de fois que la liste des instructions doit être exécutée, les instructions WHILE abordées dans le chapitre suivant et les autres DO WHILE, etc.

La syntaxe de la boucle FOR est :

for (i=1; i<=10; i++){
        document.write("Ligne " + i + "<br>" + i + " dont le carré est " + i*i ="<br>");
}

La liste des instructions à exécuter est notée entre les accolades (avec un point-virgule entre chaque instruction, c'est habituel). [Ces accolades ne sont pas indispensables s'il n'y a qu'une seule instruction, mais nous conseillons de les noter même dans ce cas.]

La boucle FOR nécessite donc trois paramètres séparés par des points-virgules (et pas des virgules, ce qui est inhabituel) :

  1. la variable du compteur et sa valeur initiale,
    cette valeur sera lue avant l'entrée dans la boucle
       ici i=1;
  2. la condition de poursuite du passage dans la boucle,
    cette condition sera vérifiée avant chaque passage dans la boucle
       ici i<=10;
  3. la valeur d'incrémentation du compteur,
    cette incrémentation (ou décrémentation) ne se fait qu'après chaque passage dans la boucle
       ici i++.

L'exemple ci-dessus pourrait se lire :

Cet exemple définit une boucle for qui commence par i = 1. La boucle FOR continuera à fonctionner tant que i est inférieur ou égale à 10, qu'on augmenterait de 1 chaque fois que la boucle a été parcourue une nouvelle fois, et donc la boucle FOR va s’exécuter 10 fois.

Notes :
Le paramètre d'incrément pourrait être différent de 1, et également être négatif ;
et le <= pourrait être n'importe quel autre opérateur de comparaison.

Cette curieuse écriture pourrait en étonner plus d'un. L'usage des boucles est très fréquent et employé dans divers langages informatiques, avec une syntaxe légèrement différente... mais tous notent les 3 éléments sur une même ligne de code : valeur de départ de la variable compteur, condition et incrémentation. Tout programmeur qui se respecte doit maîtriser cette boucle.

Nous aborderons aussi la boucle FOR... IN... qui permet de boucler à travers tous les éléments d'un objet, comme par exemple les propriétés d'un élément ou les valeurs d'un tableau.

 

A. la variable compteur

Nous lui avons donné comme nom i, et ce n'est pas un hasard : depuis les débuts de l'informatique, et dans quasi tous les langages informatiques, la lettre i est considérée comme la variable de compteur.

Rien ne vous empêche d'employer un autre nom de variable, mais vous vous écarterez des habitudes informatiques...

Nous avons initialisé sa valeur à 1, pour compter plus facilement le nombre de fois que la boucle sera exécutée... Nombreux sont les informaticiens qui commencent à 0 ; en effet, les ordinateurs démarrent toujours avec le plus petit entier, qui n'est pas 1, mais 0. À vous de choisir à l'avenir.

Si plusieurs variables compteurs sont nécessaires, on emploiera successivement i, j, k, etc. C'est une convention de programmation. Ce sera le cas si on fait usage de boucles imbriquées.

B. l'instruction conditionnelle

La condition de poursuite de la boucle est parfois appelée à tort, condition d'arrêt de la boucle... Puisque nous souhaitons voir la boucle s'exécuter 10 fois, une condition d'arrêt serait que i soit supérieur à 10... or la boucle doit se poursuivre tant que i est inférieur ou égal à 10.

i<=10 est la condition qui décide si la boucle continue à s'exécuter ou non. Cette vérification comprend généralement la variable compteur d'une certaine façon... mais il est possible que la condition soit d'une autre nature.

Le bouclage va continuer jusqu’à ce que i devienne égal à 11, ce qui n'est plus inférieur ni égal à 10, conduisant ainsi le code de la boucle à cesser l'exécution. Veiller à ce que la valeur initiale de la variable compteur permette au moins une fois l'exécution du code... sinon votre boucle est inutile.

 

C. l'incrémentation de la variable compteur

La valeur initiale du compteur et la condition de poursuite permettent une première exécution du code de la boucle. Après cette exécution, la variable compteur s'incrémente (généralement de 1). Cette incrémentation se note i++ qui ne signifie rien d'autre que i=i+1, c-à-d que la nouvelle valeur de i est l'ancienne augmentée de 1.

Après cette incrémentation, JS va exécuter la boucle puis JS va vérifier si la condition i<=10 est toujours remplie et si oui, un nouveau passage dans le code de la boucle se fera... ainsi de suite, jusqu'au moment ou la condition, après incrémentation, n'est plus remplie.

Nous pourrions aussi avoir une décrémentation : i-- qui ne signifie rien d'autre que i=i-1, c-à-d que la nouvelle valeur de i est l'ancienne diminuée de 1. Et rien n'empêche d'avoir d'autres incrémentations et/ou décrémentations, même si les deux mentionnées ci-avant sont les plus fréquentes. On pourrait avoir i=i+10, c-à-d que la nouvelle valeur de i est l'ancienne augmentée de 10, ou i=i-97, c-à-d que la nouvelle valeur de i est l'ancienne diminuée de 97... mais quel en est l'avantage ?

 

Rappelons donc :
for (i=1; i<=10; i++){
        // liste d'instructions terminées par ;
}

ou

for (variable_compteur=valeur_initiale; condition de poursuite; incrémentation){
        // liste d'instructions terminées par ;
}

Il s'agit dès lors de bien connaitre le nombre de fois que sera exécutée la boucle :

Rappelons donc que dans la boucle suivante :
for (i=1; i<=10; i++){
        // liste d'instructions terminées par ;
}

au premier passage, i étant initialisé à 1, la variable compteur vaut évidemment 1,
elle est bien inférieure ou égale à 10, donc la condition est vérifiée,
elle sera augmentée de 1 après le premier passage dans la boucle;

à la fin de son premier passage dans la boucle,
la variable compteur prend donc la valeur 2 (son ancienne valeur incrémentée de 1),
elle vaut 2 et est bien inférieure ou égale à 10, donc la condition est vérifiée,
elle sera augmentée de 1 après ce deuxième passage dans la boucle;

etc.

à la fin de son neuvième passage dans la boucle,
la variable compteur i est incrémentée de 1 et prend la valeur 10,
elle vaut donc 10 et est bien inférieure ou égale à 10, donc la condition est toujours vérifiée,
elle sera augmentée de 1 après le premier passage dans la boucle;

à la fin de son dixième passage dans la boucle,
la variable compteur i est incrémentée de 1 et prend la valeur 11,
elle vaut donc 11 et n'est plus inférieure ou égale à 10,
donc la condition n'est plus vérifiée,
la boucle s'interrompt et le programme se poursuit à la ligne qui suit le crochet fermant de la boucle;

 

 

 

D. quelques conseils...

Nous croyons utile de rappeler ici quelques conseils particuliers :

      1. Évitez de modifier la variable qui sert de compteur à l'extérieur des parenthèses du for, qui sont prévues pour ça... aioli dans notre exemple ;
      2. Inversement, évitez de mettre entre ces parenthèses du code qui ne concerne pas directement cette variable ;
      3. Pour rappel, donnez des noms explicites et pas trop longs à vos variables (i ou j, parfois cpt, étant des noms classiques pour des compteurs) ;
      4. Pensez également à bien indenter votre code, et à mettre quelques commentaires, (uniquement) s'ils s'avèrent nécessaires.

Un exemple de code qui ne respecte pas ces conseils :

var pizzaiolo,aioli,alio="",aolio,ailoa,aile=" ",elio="<br>"; for(aioli=1;aioli<=15;aioli++) { aolio=aioli*aioli; ailoa=aolio*aioli; pizzaiolo=aioli; pizzaiolo=pizzaiolo+2;
aioli=pizzaiolo-2; alio=alio+aioli+aile+aolio+aile+ailoa+elio;}
document.write(alio);

Vous avez compris ? Non ? Et pourtant il marche... cependant, voici le même code qui suit ces conseils :

var i,affiche="",carre,cube,esp=" ",nl="<br>";
for (i=1;i<=15;i++) {
     carre=i*i;
     cube=carre*i;
     affiche=affiche+i+esp+carre+esp+cube+nl;
}
document.write(affiche);

Tout le monde comprendra que c'est une boucle parcourue 15 fois et qui donne le carré et le cube des 15 premiers entiers positifs... et pour preuve

 

Exemple

<html>
<body>

<h1>Bon et mauvais exemples de codes</h1>

<script type="text/javascript">

document.write("MAUVAIS<br>");
var pizzaiolo,aioli,alio="",aolio,ailoa,aile=" ",elio="<br>"; for(aioli=1;aioli<=15;aioli++) { aolio=aioli*aioli;
ailoa=aolio*aioli; pizzaiolo=aioli; pizzaiolo=pizzaiolo+2;
aioli=pizzaiolo-2; alio=alio+aioli+aile+aolio+aile+ailoa+elio;}
document.write(alio);
</script>

<script type="text/javascript">
    document.write("MIEUX<br>");
    var i,affiche="",carre,cube,esp=" ",nl="<br>";
    for (i=1;i<=15;i++) {
          carre=i*i;
          cube=carre*i;
          affiche=affiche+i+esp+carre+esp+cube+nl;
    }
    document.write(affiche);
</script>


</body>
</html>


 

 

 

II. La boucle FOR... IN...

voir suite >>>

 

 

VIII. Exercices relatifs aux boucles FOR...

voir suite >>>

 

IX. Test relatif aux boucles FOR...

voir suite >>>

 

 


test : la boucle SWITCH (18.9) | | La boucle FOR... IN... (19.2)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_190_boucle_for.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).