L'essentiel de JavaScript

Travailler avec les boucles

Testez gratuitement nos 1333 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez les différentes techniques et syntaxes pour répéter plusieurs fois un bout de code. Ces syntaxes de bouclage s'avèrent souvent très pratiques.

Transcription

Dans votre parcours d'initiation au JavaScript vous allez rapidement vous retrouvez dans des situations où vous aurez besoin de répéter un bloc de code plusieurs fois. Alors plutôt que d'écrire ce code plusieurs fois, on va l'écrire une fois et on va s'arranger pour le répéter. Vous voyez qu'ici, j'ai une variable « a », qui est initialisée à la valeur « 1 » et pour créer une boucle, je vais utiliser le mot-clé « while ». C'est comme pour le « if », le mot-clé « while » a besoin d'une paire de parenthèses et puis d'une paire d'accolades. « while » en anglais ça veut dire « tant que » donc dans les parenthèses, je vais écrire une condition par exemple, « a » est inférieur à « 10 ». Ceci signifie : « tant que « a » est inférieur à 10 ». Dans le blog de code délimité par les accolades, je vais écrire une instruction JavaScript, qui devra s'exécuter tant que « a » est inférieur à dix, tant que la condition est remplie. Je vais faire un « console.log » de cette variable « a ». Si je m'arrête ici et que je rafraîchis ma page, je vais avoir un gros problème, puisque je vais créer cette variable « a », l'initialiser à « 1 », je vais demander au JavaScript, si « a est inférieur à 10 », oui, « a » est égal à « 1 », donc c'est inférieur à « 10 » et je vais faire un « console. log » de « a ». Je vais donc écrire « 1 » dans la console et puis je vais recommencer. Je vais voir si « a » est toujours inférieur à « 10 ». Oui, c'est toujours égal à « 1 », la valeur de « a » n'a pas changé, donc je refais un deuxième « console.log » de cette valeur « 1 ». Puis je recommence : « a » est-il toujours inférieur à « 10 » ? Oui, « a » est toujours égal à « 1 » donc je refais un troisième « console.log », puis un cinquième, un huitième, un dixième, un millième, un millionième, bref, je suis dans une boucle infinie et ça, vous avez envie de l'éviter à tout prix. Vous allez planter les navigateurs si vous faites ça. Il est donc très important de modifier la valeur de la variable qui contrôle la boucle, à l’intérieur de la boucle. C'est pour ça que je vais écrire ici un « a++ », c'est-à-dire je vais incrémenter la variable « a » de « 1 » donc je vais modifier la valeur de cette variable, chaque fois je vais augmenter de « 1 ». et, à un moment donné, « a » atteindra la valeur « 10 » donc cette condition ne sera plus vraie. Que se passera-t-il à ce moment-là ? Je vais sortir de la boucle, et exécuter ce qui se trouve après l'accolade qui ferme ici le bloc de code du « while ». Je vais faire un « console.log » d'une chaîne de caractères, je vais mettre ici : boucle, terminée. Voilà. Si je sauvegarde et que je rafraîchis ma page, vous voyez, j'ai «1, 2, 3, 4, 5, 6, 7, 8, 9 » et puis, boucle terminée. Donc j'ai bien le « a++ » qui incrémente cette valeur. Faire une boucle en JavaScript ce n'est pas très compliqué mais il ne faut pas oublier non plus d'expliquer au JavaScript quand est-ce qu'il faut sortir de la boucle, c'est ce que fait ce « a++ » : on modifie la valeur de « a » pour, à un moment donné, sortir de cette boucle. Voilà donc la syntaxe de base, une première boucle en JavaScript, le « while ». Il y a une petite variante, c'est le « do while ». Dans le « do while » voilà ce qu'on fait : on met le « while » à la fin et puis on écrit le mot-clé « do ». « do » en anglais ça veut dire « fais », donc « fais un console.log » et une incrémentation de la variable « a », tant que « a » est inférieur à dix. Comment ça va se passer ici ? Si je rafraîchis ma page, c'est exactement la même chose. «1, 2, 3, 4, 5, 6, 7, 8, 9 » et boucle terminée. Quelle est la différence entre « while » et « do while » ? On va faire une expérience et on va partir d'une situation où « a » est égal à « 10 », c'est-à-dire que la situation de départ est que cette condition est fausse, dès le départ. Maintenant quand je rafraîchis ma page, regardez, j'ai quand même « 10 » qui s'écrit une fois dans ma console et puis j'ai boucle terminée. C'est la différence principale entre « while » et « do while ». Ici, avec un « do while », la condition est vérifiée après avoir fait le bloc de code. Quelle que soit la valeur de départ de « a », les lignes 4 et 5 de mon code seront exécutées toujours au moins une fois, puisque la condition sera vérifiée après avoir fait ce bloc de code. Pour être honnête, le « do while » est beaucoup moins fréquent que « while ». Ça arrive de temps en temps et vous avez envie de savoir comment ça fonctionne. mais ce n'est pas quelque chose d'extrêmement fréquent. Je ne sais pas si vous remarquez, il y a un modèle qui est en train d'émerger ici. Pour pouvoir faire des boucles, puis pour pouvoir contrôler ces boucles et savoir quand on doit les arrêter, j'ai besoin de trois ingrédients. J'ai besoin d'une variable qui va compter le nombre de fois que je boucle. J'ai ensuite besoin d'une condition. Je veux vérifier qu'une condition est vraie. Et tant que la condition est vraie, je vais répéter un bloc de code. Puis, j'ai besoin également de modifier la valeur de la variable qui contrôle cette boucle, sinon je rentre dans une boucle infinie. Voilà les trois ingrédients, qui me permettent de contrôler les boucles en JavaScript. C'est pour cela qu'on a une troisième syntaxe en JavaScript pour créer des boucles, c'est la syntaxe For. Cette syntaxe For, on l'aime beaucoup, parce que les trois ingrédients, qui me permettent de contrôler ma boucle, sont réunis dans les parenthèses du For. Ici je vais créer une variable, « var i = 1», par exemple. Souvent cette variable, on appelle « i » pour « index », mais vous pouvez lui donner le nom que vous voulez. Vous devez respecter les règles dont on a parlé plus tôt, cette variable peut s'appeler autrement que « i », c'est simplement une convention qu'on a entre développeurs, « i » pour « index ». Le premier ingrédient, c'est la variable qui va me permettre de contrôler cette boucle. Deuxième ingrédient, la condition : « i doit être inférieur à dix ». Tant que « i est inférieur à dix » je vais boucler. Troisième ingrédient, je dois modifier la valeur de « i ». C'est là que je vais écrire « i++ » pour incrémenter « i » de « 1 ». Vous pourriez très bien écrire : « i + = 2 », pour avoir une variable qui s'incrémente de « 2 » en « 2 », plutôt que de « 1 » en« 1 ». Ici je vais mettre « i++ » parce que j'ai envie d'avoir une variable qui s’incrémente de « 1 » en« 1 ». A l'intérieur du bloc de code je vais faire « un console.log » de cette variable « i », voilà ce que ça va donner. 1, 2, 3, 4, 5, 6, 7, 8, 9 boucle terminée. C'est exactement la même chose dans la console, sauf que la syntaxe est différente et que les trois ingrédients, qui me permettent de contrôler ma boucle, sont ici réunis dans une seule et même parenthèse, ce qui rend les choses beaucoup plus lisibles. Deux mots-clés pour terminer, qui vont vous aider à contrôler vos boucles : Je vais faire « if ( i ) » est égal à 5, par exemple, et puis je vais créer un bloc de code. Remarquez que c'est la première fois dans ce cours qu'on a un bloc de code intégré dans un autre, j'ai ici l'accolade qui termine le « if », donc le bloc du « if » qui est intégré dans le bloc du «For ». Dans ce cas-là, pour bien savoir quelle accolade ferme quoi, n'hésitez pas à mettre quelques commentaires : fin du « if » et puis : fin du « For », comme ça on sait exactement quelle accolade de fermeture correspond à quoi. Je vais exécuter un bout de code quand « i » sera égal à « 5 ». Ce bout de code sera un mot-clé, qui est « break ». Voyons ce que cela donne. J'ai 1, 2, 3, 4 et puis boucle terminée. C'est-à-dire que quand « i » était égal à « 5 », j'ai exécuté le mot-clé « break » et « break » m'a fait complètement sortir de la boucle. Je n'ai même pas continué les itérations qui restaient à faire, je suis sorti de la boucle et j'ai directement exécuté le code qui se trouvait ici, après l'accolade de fermeture du bloc « For ». C'est un premier mot-clé. Le deuxième mot-clé c'est « continue ». C'est un petit peu différent, donc je sauvegarde et je rafraîchis. Voyez que j'ai été jusqu'à « 9 » mais si vous regardez bien la console, j'ai 1, 2, 3, 4, 6, 7, 8, 9, j'ai passé mon tour pour le 5, le 5 n'est pas intégré ici, dans la console. « continue » ça veut dire que l'on sort de la boucle mais que l'on ne sort que de l'itération en cours de la boucle. Quand « i » était égal à « 5 », je suis directement sorti, j'ai recommencé la boucle, j'ai revérifié si cette condition était toujours remplie, donc le « console.log » n'a pas été exécuté, mais uniquement quand « i » était égal à « 5 ». Après j'ai repris les choses normalement et quand « i » était égal à 6, 7, 8, 9 le « console.log » s'est exécuté de manière tout à fait classique. Voilà deux mot-clés, « break » et « continue », qui ne sont pas hyper fréquents en JavaScript mais vous allez les rencontrer de temps en temps et cela fait du bien de savoir que ça existe et puis surtout, ça fait du bien de savoir comment ça marche.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !