COURS JavaScript


Accueil | Eléments de base du langage JavaScript : Les répétitions ou structures répétitives

Les répétitions, ou structures répétitives


Généralités

Comme nous l'avons vu pour les tests ou structures alternatives, il existe en JavaScript (et dans tous les langages informatique) une autre structure de base de la logique informatique : la répétition de quelque chose, ou structure répétitive. Cette structure permet de répéter la même chose autant de fois que nécessaire pour arriver au résultat attendu. C'est bien pratique pour parcourir les tables indexées que nous avons vu au chapitre correspondant.
   


Principe

Le principe en est d'une simplicité extrême. D'abord, on définit combien de fois on désire faire la même chose. Disons 10 fois par exemple. Puis, on définit une variable qui va servir de compteur de répétition. En général, c'est une tradition bien ancrée dans l'inconscient collectif des informaticiens, on appelle cette variable i. Ne me demandez pas pourquoi, je n'en sais strictement rien. Vous pourriez l'appeler Compteur, ou NbDeFois, ce serait la même chose. Mais historiquement, c'est i, et c'est comme ça. Que voulez-vous... On ne se refait pas à mon âge.. :-) Alors appelons là i pour faire plaisir à l'histoire. Et puisque nous avons définit combien de fois nous voulons faire quelque chose, et que nous avons un compteur pour compter les fois, il nous faut évidemment savoir d'où nous voulons partir et où arriver pour que ça fasse 10. Alors disons que nous ferons partir le compteur de 1 et qu'on fera ce qu'on veut faire jusqu'à ce qu'il atteigne 10. Comme ça on aura ce que nous voulons. Une fois ces paramètres fixés, on n'a plus qu'à écrire la "boucle" (ou Loop en anglais) qui dira à JavaScript de faire ce que l'on veut le nombre de fois que l'on veut.

   
 
 


La syntaxe

Là, les choses sont simples aussi, mais un peu particulières. Je ne sais pas qui a inventé JavaScript, mais il n'a pas fait dans la dentelle. Il faut l'apprendre et le retenir. Sans doute un vieil héritage d'autres langages comme C++ je pense. Bref, étudions cette instruction :

var i; // compteur de boucle (0)

for (i = 1; i <= 10; i++){ // début de la boucle (1)


instruction 1 à répéter; (2)
instruction 2 à répéter;
instruction 3 à répéter;
etc....

} // fin de la boucle (3)

(0) Déclaration du compteur

Comme toute variable, lorsqu'elle est utilisée pour la première fois, il vaut mieux la déclarer. On le sait, alors on le fait. Notez bien que si ça n'est pas la première fois que vous l'utilisez, et que vous l'avez déjà déclaré en global, ça n'est pas la peine de le refaire. Jusque là ça va ? Bon, on passe au corps du délit.

(1) Début de boucle

C'est là que les Athéniens s'atteignirent (je sais, c'est pas génial). Nous entrons dans le vif du sujet. Étudions cette ligne en détail:

for (i = 1; i <= 10; i++){

D'abord le for ("pour" en anglais). C'est ce petit mot insignifiant qui va tout faire. Pour JavaScript, il signifie : "Pour autant de fois qu'on me le dit : ". Reste à voir le "autant de fois que"... On reconnaît là, entre les parenthèses ouvrantes et fermantes, des opérateurs que nous avons déjà vu dans les tests.
Nous avions dit que nous voulions faire quelque chose 10 fois. Ce qui se trouve entre les parenthèses se lit de la manière suivante :

i = 1; veut dire : en partant avec la valeur 1 au compteur i

i <= 10; veut dire : tant que le compteur aura une valeur inférieure ou égale à 10;

i++ veut dire : en incrémentant (en faisant grimper en français normal) le compteur i de 1 à chaque fois.

En réalité, ici, nous avons trois instructions "spéciales boucles".

La première, i = 1; fixe la valeur de départ du compteur de fois.
La deuxième, i <= 10; est un test qui dit : si le résultat du test est vrai, la boucle continue, si le résultat du test est faux, on s'arrête.
La troisième, i++ dit qu'il faut ajouter 1 au compteur à chaque fois qu'on a fait les instructions de la boucle.

(2) Le corps de la boucle

Ici, nous écrivons les instructions JavaScript que nous voulons voir exécuter dix fois (dans notre exemple). Notez bien que ces instructions peuvent être n'importe quelles instructions JavaScript valides. Ce sont simplement les choses que nous voulons faire dix fois de suite. C'est tout. Et comme notre programme est bien fait, ces instructions seront répétées dix fois. Pas une de plus, mais pas une de moins non plus. Ces instructions peuvent même être des appels d'autres fonctions que nous aurons écrites ailleurs.

(3) Fin de boucle

Ceci, est la fin de la boucle. Du moins, la fin de l'écriture de la boucle. Chaque fois que JavaScript (l'interpréteur) aura effectué la liste d'instructions de (2), le programme passera par cette instruction représentée simplement par une accolade fermante } . Pour l'interpréteur, rencontrer cette accolade fermante veut dire : "j'ajoute 1 au compteur i, et je retourne à l'instruction for". A ce stade, quelque soit la valeur contenue dans i, JavaScript retourne au test for et regarde si la condition est toujours respectée. Si elle est respectée (le compteur est <= à 10), il recommence la liste d'instruction à exécuter dix fois. Si la condition n'est pas respectée (le compteur i à une valeur supérieure à 10) alors, JavaScript arrête la boucle, et le programme se poursuit par ce qui est situé après cette accolade fermante qui indique la fin de boucle.



Exemple 

Les boucles comme celle-ci, sont d'une grande utilité en programmation. Citer tous les cas où on peut les utiliser serait trop long et certainement très fastidieux. Comme exemple, nous allons prendre la lecture d'une table indexée comme décrit dans le chapitre correspondant. Souvenez vous : nous avions la table suivante :

MeubleClassique

0 1 2 3 4 5 6 7 8 9
Mozart Chopin Haendel Bach Lully Gounod Schubert Brahms Verdi Wagner

L'exemple que nous allons prendre, lira et listera simplement le contenu de cette table. Notez que cette table contient 10 postes, ce qui convient parfaitement pour illustrer cette leçon. Souvenez-vous que le premier poste d'une table est d'indice 0 et le dixième est par conséquent l'indice 9, ce qui fait 10 postes. Nous aurons donc à faire une boucle sur 10 fois, pas une de plus, mais pas une de moins non plus.

Allez voir l'exemple et son code source en cliquant comme d'habitude sur :

Voir l'exemple


 


Variante utile

Nous avons vu comment incrémenter (faire grimper) le compteur de 1 en 1. Mais il peut être parfois très utile de le faire varier d'un pas de deux en deux ou de trois en trois, voire même de le faire descendre de 1 en 1 ou de 2 en 2 ou de 3 en 3 ou plus etc. En partant d'une valeur différente de 0 ou de 1.

La syntaxe est alors similaire, seule la partie concernant le compteur change. Dans notre exemple, nous faisons varier le compteur de 1 à 10 en incrémentant de 1 à chaque fois. ce qui s'écrit :

for (i = 0; i <= 10; i++){ // début de la boucle

Ce que nous aurions pu écrire aussi for (i = 0; i <= 10; i+=1){ // début de la boucle La forme i++ est un raccourci pratique pour écrire i += 1, ce qui revient exactement au même. Dans un langage plus classique comme le Basic par exemple, on aurait écrit i = i + 1, ce qui est un peu plus clair. Mais c'est strictement pareil.

Pour faire varier le compteur de 2 en 2, il suffit d'écrire : for (i = 0; i <= 10; i+=2){ // début de la boucle

Pour faire varier le compteur de 3 en 3, il suffit d'écrire : for (i = 0; i <= 10; i+=3){ // début de la boucle
et ainsi de suite.

Pour décrémenter (faire diminuer la valeur) du compteur de 1 en 1, on écrit simplement :

for (i = 10; i >= 0; i-=1){ // début de la boucle

La notation i -= 1 (i moins égal 1) veut dire enlever 1 à la valeur de i. Mais attention, si on fait diminuer la valeur du compteur, il faut modifier les valeurs de départ et d'arrivée, ainsi que le test de fin de boucle, de manière à ne pas dépasser la capacité de la table que l'on explore. Dans cet exemple, on part d'une valeur de 10 pour le compteur, et on lui enlève 1 jusqu'à ce qu'il atteigne 0. Ainsi, si on reprend l'exemple de la table des compositeurs, on les verra défiler à l'envers.
Pour faire diminuer la valeur du compteur de 2 en 2 on écrira : for (i = 10; i >= 0; i-=2){ // début de la boucle

Pour faire diminuer la valeur du compteur de 3 en 3 on écrira : for (i = 10; i >= 0; i-=3){ // début de la boucle
et ainsi de suite ...

Ce genre de manipulation de boucle peut s'avérer très utile selon les cas. Nous aurons certainement l'occasion d'y revenir dans d'autres exemples de la Boîte à outils. Nous nous en servirons aussi parfois dans le traitement des chaînes de caractères. Mais ça, c'est une autre histoire.


 


 


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.