Liste des cours Liste des chapitres
Chapitre précédent - Liste des chapitres

Les boucles

Créé le 10 Septembre 2009, par Anis Safine

Bonjour à tous !

Je vous l'annonce enfin, ce chapitre est le dernier chapitre théorique de cette large partie qui était consacrée au Noyau JavaScript ! Cela vaut donc le coup de faire un dernier petit effort pour assimiler une dernière notion extrêmement importante : les boucles.

Et c'est parti !

Remonter

1. La boucle while

Il existe trois types de boucles en JavaScript, que l'on peut diviser en deux grandes catégories : la catégorie while et la catégorie for. Nous allons donc commencer par étudier les boucles de la catégorie while.

Avant toute chose, nous devons répondre à la première question qui nous vient à l'esprit en ce début de chapitre : bon sang de bon Dieu, c'est quoi une boucle ?

En fait, le terme de boucle est très bien choisi pour ce dont on parle parce qu'il évoque l'idée de répétition. Et effectivement, une boucle n'est rien d'autre qu'une instruction qui sert à répéter un certain nombre de fois, une ou plusieurs instructions.

Cela s'avère très souvent utile pour traiter un grand nombre de données de la même manière, pour parcourir toutes les valeurs d'un grand tableau et bien d'autres choses encore !

Voyons maintenant comment créer une boucle avec "while" !

Une boucle while simple

Déjà, il faut bien garder à l'esprit que toutes les boucles ont besoin qu'on leur indique quand il faut arrêter de répéter le bloc d'instructions qui leur est associé.

Pour ce faire, on va indiquer une expression de conditions (souvenez-vous le chapitre précédent !) qui sera testée à chaque tour de boucle (on parle d'itération). Tant que cette expression est vraie, la boucle continuera de fonctionner. Voilà la syntaxe :

Code javascript

while(EXPRESSION) {
  // Instructions à exécuter
}


Vous voyez que la syntaxe est assez simple ! On utilise le mot-clé while puis on "passe en paramètre" l'expression à vérifier. Enfin, les instructions à exécuter sont mises entre accolades.

?
Mais attend y a un problème ! Si l'expression est vraie la première fois, alors elle le sera toujours et la boucle ne s'arrêtera jamais !


Bien vu, et cette question soulève un point très important dans la création de boucles : il faut toujours s'assurer que la boucle s'arrêtera à un moment ! En effet, une expression qui serait toujours vraie provoquerait ce que l'on appelle une boucle infinie et alors là je vous dis pas la gueule que tire votre ordinateur...

Heureusement, il est tout à fait possible de mettre en place des expressions qui impliquent des variables dont les valeurs changent au sein des instructions de la boucle. Ainsi, après une ou plusieurs itérations, il est parfaitement possible, si les variables changent, que la valeur de l'expression change également !

En voici un exemple très simple et très classique :

Code javascript

var i = 0;
while(i < 2) {
  document.write('Itération n°'+i+'<br/>');
  i++;
}


Dans ce code, vous devez normalement tout comprendre sauf une instruction : le "i++" qui traîne à la fin du bloc d'instructions de la boucle. Et je crois qu'il est grand temps de faire une petite pause "variables".

Il se trouve que quand je vous ai appris à utiliser les variables, je ne vous ai pas tout dit sur la façon de modifier leur valeur. En effet, supposons qu'il existe une variable "nombre" qui contient un nombre quelconque. A un moment donné, on veut que cette variable contienne sa valeur plus 2. Lorsque l'on fait ce genre d'opération d'addition, on parle d'incrémentation.

Facile, me direz vous ! On peut écrire :

Code javascript

var nombre = 4;
nombre = nombre + 2;
document.write(nombre);


Effectivement, cette façon de faire est très bien et fonctionnera sans problème. Seulement il se trouve qu'il existe en programmation des raccourcis permettant d'incrémenter plus facilement une variable ! Une façon exactement pareille de faire serait :

Code javascript

var nombre = 4;
nombre += 2;
document.write(nombre);


Et voilà ! Simple non ?

Seulement, les développeurs aiment vraiment les raccourcis ! C'est pourquoi il existe un raccourci tout particulier pour incrémenter une variable de 1. Ce raccourci nous venons de le voir et c'est tout simplement :

Code javascript

var nombre = 4;
nombre++;
document.write(nombre);


Eh oui, mettez deux "plus" devant l'identifiant d'une variable, et elle sera tout bêtement incrémentée de 1 !

Toutes ces opérations raccourcis fonctionnent également très bien pour la soustraction. On parle alors de décrémentation :

Code javascript

var nombre = 4;
nombre -= 2;
nombre--;
document.write(nombre);


Comme vous le voyez, la syntaxe est exactement la même, et au final, on aura enlevé 3 à "nombre" qui vaut 1 à la fin du script !

Enfin, il est possible d'utiliser les même types de raccourcis pour la multiplication et la division :

Code javascript

var nombre = 4;
nombre *= 3;
nombre /= 2;
document.write(nombre);


Pratique tout cela n'est-ce pas ? Mais attention, il n'existe pas de raccourcis du type "nombre**" ou "nombre//" qui n'auraient d'ailleurs aucun sens puisque multiplier ou diviser par 1 mène au même résultat !

Maintenant que nous avons comblé notre léger retard sur les opérations d'incrémentation, nous pouvons retourner à nos amies les boucles. Pour rappel, je vous avais présenté notre première boucle fonctionnelle :

Code javascript

var i = 0;
while(i < 2) {
  document.write('Itération n°'+i+'<br/>');
  i++;
}


Vous êtes maintenant parfaitement capables de comprendre ce que cette boucle doit afficher ! Voici comment l'ordinateur va raisonner sur ce type de code :

- initialisation de "i" à 0
- 0 est-il inférieur à 2 ?
- oui, donc on affiche 'Itération n°0<br/>'
- on ajoute 1 à "i" qui vaut désormais 1
- 1 est-il inférieur à 2 ?
- oui, donc on affiche 'Itération n°1<br/>'
- on ajoute 1 à "i" qui vaut désormais 2
- 2 est-il inférieur à 2 ?
- Non, on passe à la suite

C'est un peu ennuyeux de devoir effectuer ce raisonnement mais il permet de mieux comprendre comment l'ordinateur comprend et exécute notre boucle ! Et nous en avons fini avec la boucle while simple !

La boucle do/while

Vous l'aurez remarqué dans l'exemple précédent, dès que l'ordinateur tombe sur notre boucle while, il teste l'expression de condition. Cela signifie que si elle est fausse au premier test, la boucle ne s'exécutera jamais, et l'ordinateur ira voir ailleurs.

Et bien la boucle do/while permet de tout faire exactement comme la boucle while, sauf que le bloc d'instruction sera exécuté au moins une fois car l'expression est testée après l'itération et non pas avant ! La syntaxe est la suivante :

Code javascript

do {
  // Instructions à exécuter
} while(EXPRESSION);


On remarque une chose importante dans cette syntaxe, c'est que la boucle do/while se termine par un point-virgule contrairement à while ! Pour le reste, tout est assez explicite il me semble !

Maintenant un petit code de test pour mieux comprendre la différence :

Code javascript

var i = 1;

// Boucle while simple
while(i < 1) {
  document.write('Itération while n°'+i+'<br/>');
  i++;
}

// Boucle do/while
do {
  document.write('Itération do/while n°'+i+'<br/>');
  i++;
} while(i < 1);


Comme vous pourrez le constater après test, il n'y a aucune itération de la boucle while mais il y a une itération de la boucle do/while, comme prévu !

En effet, l'ordinateur va raisonner comme ceci :

- initialisation de "i" à 1
- 1 est-il inférieur à 1 ?
- non, donc on passe à la suite
- on écrit 'Itération do/while n°1<br/>'
- on incrémente "i" de 1 qui vaut désormais 2
- 2 est-il inférieur à 1 ?
- non, donc on passe à la suite

Et voilà, nous en avons fini avec les boucles de type while !

Remonter

2. La boucle for

Les boucles de type for sont légèrement différentes à celles de type while et parfois préférées par les programmeurs parce qu'elles sont plus "sûres". C'est une idée très relative et qui est tout à fait discutable mais le fait est que l'utilisation des boucles for est pensée de façon à éviter au mieux les fameuses boucles infinies.

En effet, pour lancer une boucle for, il faut lui fournir trois paramètres qui sont dans l'ordre :
- le paramètre d'initialisation, qui consiste tout simplement à l'initialisation d'une ou plusieurs variables
- l'expression de condition de la boucle
- le paramètre d'incrémentation/décrémentation, c'est la liste des opérations à effectuer après chaque itération de la boucle sur les variables initialisées dans le premier paramètre

Voici la syntaxe :

Code javascript

for(i = 0, j = 4; i < 1 && j > 2; i++, j--) {
  // Bloc d'instructions
}


Donc je vous le rappelle, le premier paramètre est celui d'initialisation. Dans ce cas, on initialise la variable "i" à 0 et la variable "j" à 4. Soit dit en passant, dans la boucle for, l'initialisation d'une boucle for ne nécessite pas le mot-clé var, ce qui est assez particulier !

Le second paramètre est l'expression de condition et là, il n'y a aucun piège. Le troisième et dernier paramètre est celui d'incrémentation, et notez bien que chaque instruction d'incrémentation est séparée par des virgules !

Une dernière chose étonnante à remarquer dans cet exemple, c'est que les "paramètres" (je met ce terme entre guillemets car il n'est pas tout à fait juste) sont séparés par des points-virgules.

De la même manière que la boucle while, la boucle for teste l'expression avant la moindre itération. Ce qui signifie qu'il peut très bien n'y avoir aucune itération. Attention, il est également parfaitement possible de faire des boucles infinies avec la boucle for et il faut rester tout aussi prudent !

Regardez mais ne testez SURTOUT PAS ce code :

Code javascript

for(i = 0; i < 2; i--) {
  document.write('Itération n°'+i);
}


En réfléchissant un peu, vous voyez bien que l'expression de condition sera toujours vraie car la valeur de "i" ne fera que descendre après chaque itération, et elle restera donc toujours inférieure à 2 !

Et voilà, vous savez désormais tout sur la boucle for !

Remonter

3. Les instructions break et continue

Pour terminer ce chapitre, nous allons étudier deux instructions très pratiques et utilisables dans toutes les boucles (et uniquement dans les boucles !) !

L'instruction continue

Il n'y a pas plus simple que l'utilisation de l'instruction continue ! Regardez un peu cet exemple :

Code javascript

while(EXPRESSION) {
  continue;
}


Franchement, comment faire plus simple ?... Il suffit d'utiliser le mot-clé continue suivit d'un point-virgule... car c'est une instruction !

Mais tout cela ne répond pas à la question la plus intéressante : à quoi elle sert ?
La réponse est très simple et tient en une phrase : continue permet de passer directement à l'itération suivante de la boucle, sans exécuter le reste des instructions.

Bien évidemment, vous vous doutez que l'utilisation de ce genre d'instructions nous expose encore un peu plus au risque des boucles infinies. Donc plus que jamais, soyez vigilants quand vous rédigez vos boucles ! Voici un exemple concret de l'utilisation de continue :

Code javascript

var i = 0;
while(i < 6) {
  i++;
 
  if(i % 2 == 0)
    continue;

  document.write(i + ' est impair !<br/>');
}


Cette boucle affiche tous les chiffres impairs compris entre 1 et 5 inclus. Et là, vous pouvez constater que nous réinvestissons presque toutes les connaissances que nous avons pu accumuler depuis le début de ce cours ! Allez, étudions ça plus en détail.

Lorsque la boucle démarre, "i" vaut 0. Naturellement, on exécute le bloc d'instructions de la boucle car 0 est inférieur à 6. On incrémente donc "i" de 1 et on test si le reste de la division de "i" par 2 vaut 0. Mathématiquement parlant, cela revient tout simplement à vérifier si "i" est pair.

Si effectivement, "i" est pair, alors on passe à l'itération suivante directement à l'aide de continue, et l'instruction document.write() est totalement zappée. Sinon, et bien on affiche que la valeur de "i" est impaire et puis on repart sur l'itération suivante et ainsi de suite.

Bien évidemment, on est pas obligés de faire aussi compliqué pour un travail aussi simple mais j'ai trouvé que c'était un bon exemple qui permettait de remettre un peu en avant tout ce que l'on a appris !

L'instruction break

Je vous ai dit qu'il n'y avait pas plus simple d'utilisation que l'instruction continue ? Et bien j'ai menti, break, c'est encore mieux !

Code javascript

while(EXPRESSION) {
  break;
}


Comme vous le voyez, c'est le même principe que continue sauf que c'est encore plus court à écrire !

Cette instruction est encore plus simple à comprendre que continue. En effet, break sert tout simplement à stopper complétement la boucle ! On arrête l'itération là où elle était sans exécuter la suite des instructions, comme continue, et puis on passe à la suite.

Là, je n'ai pas d'exemple pratique en tête pour vous montrer son utilisation dans un cas concret mais bon voyez l'exemple suivant (qui, soit dit en passant, est totalement sans intérêt...) :

Code javascript

var i = 0;
while(i < 10) {
  if(i == 3)
    break;

  document.write('Itération n°'+i+'<br/>');
  i++;
}


Je pense que le résultat de ce code est assez explicite, la boucle affiche les itérations jusqu'à la 3ème. Nous en avons donc fini définitivement avec les boucles !

Remonter

Conclusion

Voilà, comme je vous l'avais promis, ce chapitre fût très light mais nous a permis d'apprendre à utiliser ces outils extrêmement utiles que sont les boucles.

Le prochain chapitre sera donc la conclusion à cette partie sur le Noyau JavaScript et sera constitué d'une série d'exercices qui permettront enfin de passer un peu à la pratique !

Chapitre précédent - Liste des chapitres