Les boucles sont omniprésentes avec le langage JavaScript. Vous allez forcément les utiliser un jour et peut être même dès voter première application.
Vous vous devez de les maîtriser !
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser la puissance des boucles for, while, do while avec JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Encore un cours consacré pour vous, pour que vous puissiez découvrir le langage JavaScript et surtout l’utiliser dans votre développement.
Dans ce cours vous allez apprendre à utiliser les boucles avec JavaScript, donc les boucles while, do while et for.
Les boucles for
On commence ensemble par la boucle for, la boucle for souvent on l’utilise pour parcourir le contenu d’un tableau, parcourir un objet, parcourir plusieurs objets, vous avez for la valeur initiale du compteur point-virgule la condition, vous pouvez mettre une condition ou plusieurs conditions, je vous invite à regarder le cours précédent, ou vous avez appris à utiliser les conditions, et juste encore le cours d’avant, ou vous avez appris les valeurs de comparaison, donc supérieur ou égal, inférieur, égal, strictement égal, etc., et donc la boucle for, le dernier paramètre c’est l’incrémentation ou la décrémentation.
Un exemple JavaScript, for i=0 on définis une variable i à 0 donc l’autre compteur, tant que i est inférieur à 10, on boucle, on exécute l’instruction de documents par while, boucle numéro i tant, on tourne en boucle tant que i est inférieur à 10 et on incrémente i++, à chaque boucle, la valeur de i prend + 1, + 1, à un moment donné elle va être égale à 10 dès que la condition n’est plus vraie, on sort de la boucle, très facile une boucle for à utiliser, je vous rappelle, pensez toujours à une valeur d’initialisation de votre compteur, une condition, et une valeur qui modifie votre compteur donc i ++ ça peut être i–, et tant que la condition est vraie vous faites document.write, vous passez dans votre boucle, et dès que la condition devient false, vous sortez de votre boucle.
Ensuite vous avez les boucles for… in, là ça permet de parcourir les propriétés d’un objet, un tableau également, donc for le nom de la propriété et in dans l’objet dans votre bloc d’instructions. Par exemple vous pouvez afficher toutes les propriétés de l’objet, et de documents donc vous faites un for, vous définissez var sProperty, donc ça va récupérer la propriété de l’objet documents et in, dans votre objet documents, et vous faites un document.write, ça va écrire dans votre page HTML, toutes les propriétés de l’objet document tout simplement.
Les boucles while, do… while
Ensuite vous avez les boucles while, et do… while c’est la même chose, une différence que while, ça exécute d’abord, ça vérifie la condition, ça exécute l’instruction, que do ça exécute d’abord l’instruction et après ça vérifie la condition. C’est juste cette petite subtilité, donc attention aux boucles infinies, while, do…while, moi le premier et ça m’arrive encore de temps en temps, de partir en boucle infinie, vous avez votre condition dans votre bloc d’instruction, pensez à sortir de la boucle à un moment ou un autre, très important.
Donc un exemple de code source, vous mettez une valeur, définissez une variable de type numbers à -1, tant que la variable est inférieure à zéro, vous demandez à l’utilisateur de saisir un nombre positif, renseignez votre valeur. L’internaute à une boite de dialogue qui lui demande de saisir un nombre positif de renseigner une valeur, à chaque fois qu’il va saisir un nombre négatif, ça va réafficher la boite de dialogue, est dès qu’il va saisir un nombre positif, donc soit égal à zéro ou > 0, ça va afficher une boîte de dialogue, votre nombre positif est la valeur du nombre.
Un exemple de boucle while, on aurait pu, ça peut être un bon exercice, faites la même chose avec une boucle do… while, voilà ça peut vous faire un très bon exercice.
Les boucles break
Vous avez des instructions très pratiques, que vous connaissez, l’instruction break que vous avez vue dans un cours précédent sur des switch if, donc les conditions, l’instruction break peut être utilisée également à l’intérieur d’une boucle for, d’une boucle while et break ça permet de quitter une boucle. Donc ça vous permet d’optimiser votre code, on dit que vous parcourez un tableau, vous incrémentez une valeur, donc for i égal zéro et tant que i est inférieur à 8, vous faites une incrémentation de la valeur de i. Donc la valeur de i est égale à tant. Donc tant que j est inférieur à zéro, donc vous pouvez faire des boucles for à l’intérieur de votre boucle for tant que vous voulez. j est inférieur à 69, vous incrémentez j. La valeur de j est égale, donc en théorie, ça va faire 8 fois la boucle for i inférieur à 8 et dans la boucle for, j inférieur à 69, ça va la faire 69 fois. Ca va s’exécuter, ça prend du temps. Par contre, remarquez, vous avez un if j = 5, dès que la valeur de j est égal à 5, on sort de la première boucle. Au lieu de faire 69 fois la boucle, on n’en fera que 5 fois. On fera 8 fois la boucle, 5 fois la boucle. 8 fois, 5 fois. Une fois, on boucle 5 fois, une fois on boucle 5 fois… donc break très utile pour sortir prématurément d’une boucle for, d’une boucle while, pensez à l’utiliser. Return, ça fait exactement la même chose, au lieu de break dans une fonction, vous pouvez mettre return votre valeur, vous sortez de la boucle et même de la fonction.
Les boucles continue
Vous avez continue également, donc continue ça me permet de ne pas prendre en compte certaines valeurs, au lieu de sortir de la boucle, vous forcez à aller au tour suivant, vous faites un port j = 0 et tant que j et tant que j est inférieur à 15, vous incrémentez j.
En théorie vous allez faire 15 fois la boucle, si vous regardez la boucle, la valeur de j est égal à, vous allez afficher 15 valeur de zéro, et bien non. Vous avez if j == 3, au lieu d’afficher 3, vous faites un continue ça fait que il ne va pas effectuer la boîte de dialogue alerte la valeur de j est = à 3, non, il va passer directement au tour suivant de la boucle, donc continue ça peut vous permettre de sauter des valeurs si vous le voulez pensez-y et de forcer le passage au tour suivant de la boucle et donc d’éviter l’exécution d’instruction que vous ne souhaitez pas. Pensez-y, continue c’est une autre technique pour optimiser votre code JavaScript.
Votre plan d’actions !
Les conditions avec switch, case, les boucles, while, for, do…while, c’est vraiment très pratique pour lancer différentes instructions en fonction des actions de l’utilisateur, de son navigateur. Retrouvez comme d’habitude, un exemple code source directement sous ce cours vidéo, si vous avez des questions, posez-les également cours vidéo et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source JavaScript
Voici un exemple de code source avec les boucles for et while.
Téléchargement du code source Exemple de boucles JavaScript
