Apprenez à programmer avec JavaScript

Dans le chapitre précédent, nous avons défini et rédigé un algorithme qui permet de tester si l’utilisateur a bien tapé le mot proposé par l’application. Mais il arrive régulièrement d’avoir envie de répéter du code. C’est le cas pour notre application : nous voulons maintenant demander à l’utilisateur de tester un mot trois fois de suite.

Alors, comment demander à JavaScript de réaliser ces répétitions à notre place dans le code ? La réponse est dans ce chapitre : en utilisant des boucles !

Découvrez les boucles

En tant que développeur, vous aurez parfois besoin de faire plusieurs fois la même action sur une variable ou sur une partie de votre code. Dans cette situation, vous devrez utiliser des boucles.

Rappelez-vous, dans l’exercice du chapitre précédent, nous avons déclaré un tableau qui contient trois mots : Cachalot, Pétunia et Serviette.

Pour afficher chacun de ces mots, on peut donc écrire :

const listeMots = ['Cachalot', 'Pétunia', 'Serviette']
console.log(listeMots[0])
console.log(listeMots[1])
console.log(listeMots[2])

Mais imaginez maintenant que le tableau contienne tout un dictionnaire… Ça va faire beaucoup de console.log ! 😱 D’autant qu’à chaque ligne, une seule chose change : l’indice du tableau (0, 1, 2…). Je vous propose donc de rédiger une boucle qui va nous permettre de répéter du code, et de résoudre ce problème.

Rédigez une boucle

Comme toujours, je vous propose de découper notre problème en petites étapes. 😉

Utilisez l’instruction for pour répéter du code un certain nombre de fois

Commençons par écrire une boucle qui affiche 0, puis 1, puis 2. Dans ce cas, nous savons à l’avance combien de tours de boucle nous voulons faire, un for est donc tout à fait indiqué ici.

Voici comment la rédiger :

for (let compteur = 0; compteur < 3; compteur = compteur + 1) {
    console.log(compteur)
}

Aucun souci, voyons en détail ce qui est écrit.

• Nous avons d’abord notre for, suivi de trois instructions séparées par un point virgule “;”.

• Ensuite, un bloc de code entre accolades : le console.log. 

• Ce bloc de code sera exécuté à chaque tour de boucle. 

Première instruction :

let compteur = 0

Ici nous définissons une nouvelle variable appelée “compteur”, et qui contient 0.

Deuxième instruction :

compteur < 3

Ceci est la condition d’arrêt.

La boucle continuera tant que compteur est plus petit que 3.

Troisième instruction :

compteur = compteur + 1

À chaque tour de boucle, on fait évoluer la valeur de compteur. Ici, on dit que compteur vaut la valeur précédente de compteur, plus 1.

Au premier tour de boucle, compteur vaut 0, puis 1, puis 2, jusqu’à ce que compteur arrive à 3 (la condition d'arrêt) et là, on sort de la boucle. 

Le bloc de code entre accolades aura donc été exécuté 3 fois avec compteur ayant la valeur 0, puis 1, puis 2.

Cela donne :

for (let i = 0; i < 3; i++) {
    console.log(i)
}

Le résultat est exactement le même.

Grâce à la boucle for, nous avons donc répété du code, de manière à ne pas écrire plusieurs fois la ligne de codeconsole.log() .

Je vous invite à revoir ces opérations dans la vidéo ci-dessous :

Utilisez l’instruction while pour répéter du code

La boucle for est utilisée lorsque l'on connaît en amont le nombre de tours à effectuer. Mais cela n’est pas toujours possible ! Dans ce cas, nous utiliserons la boucle while, qui peut s’adapter à tous les cas.

Reprenons notre exemple de compteur avec un algorithme différent :

Tant que le compteur n’est pas égal à 3, on augmente le compteur de 1.

Nous allons donc écrire :

let i = 0
while (i < 3) {
    console.log(i)
    i++
}

Dans le code ci-dessus :

• on déclare la variable i, que l’on initialise à zéro, avant la boucle ;

• le while ne contient que la condition d’arrêt : tant que i est plus petit que 3 ;

• on incrémente i (i va gagner +1 à chaque tour de boucle). 

Je vous invite à revoir ces opérations dans la vidéo ci-dessous :

À vous de jouer !

Jusqu’à maintenant, nous avons répété trois fois les mêmes instructions dans notre projet :

• 3 “prompts”, qui nous ont permis de demander des mots à l’utilisateur ;

• 3 fois le test pour vérifier que le mot tapé par l’utilisateur est correct.

Je vous propose de factoriser ce code, c'est-à-dire de mettre en commun les parties répétées à l’aide d'une boucle.

Étape 1 : répétez votre code avec une boucle

Dans ce dossier GitHub, le tableau listeMots contient 3 mots : “Cachalot”, “Pétunia” et “Serviette”. Pour chacun de ces mots, à l’aide d’une boucle for : 

• demandez à l’utilisateur de le retaper avec prompt ;

• comptez un point par mot correctement tapé ;

• affichez le score à la fin avec un console.log. 

Étape 2 : proposez deux types de listes de mots

Pour rendre le jeu plus engageant, nous voulons que l’utilisateur puisse avoir le choix entre deux listes de mots différentes : une liste avec des mots et une liste avec des phrases.

• Déclarez un tableau listePhrases qui contient 3 courtes phrases : “Pas de panique !”, “La vie, l’univers et le reste”, “Merci pour le poisson”.

• Demandez à l’utilisateur s’il veut la liste de mots ou la liste de phrases. Répétez la question tant que l’utilisateur n’a pas écrit “mots” ou “phrases”.

• Lancez votre boucle for, avec la liste que l’utilisateur a choisie. 

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous : 

En résumé

• Une boucle est une structure conditionnelle qui permet de répéter du code plusieurs fois.

• La boucle for permet de répéter du code pour un nombre défini de fois.

• La boucle while permet de répéter du code jusqu’à ce qu’une condition ne soit plus remplie.

Vous savez désormais répéter du code grâce aux boucles ! Suivez-moi dans le chapitre suivant pour utiliser des fonctions !