Les Boucles

Présentation

Les boucles permettent d'exécuter un bloc de code de manière répétée en fonction d'une condition ou d'un ensemble de conditions spécifiées. Elles sont essentielles pour automatiser des tâches répétitives et pour parcourir des collections de données, comme les tableaux.

Voici les principaux types de boucles :

La boucle while (tant que) : La boucle while vous permet de répéter un bloc de code tant qu'une condition spécifiée reste vraie. Elle est utile lorsque le nombre d'itérations dépend de la condition et n'est pas connu à l'avance.
La boucle do... while (faire... tant que) : La boucle do...while est similaire à la boucle while, mais elle garantit qu'au moins une itération du bloc de code sera exécutée avant que la condition soit évaluée. Cela la rend appropriée pour des situations où vous souhaitez que le bloc de code s'exécute au moins une fois, quelle que soit la condition.
La boucle for (pour) : La boucle for est un outil puissant pour répéter un bloc de code un nombre spécifique de fois. Elle est idéale lorsque vous connaissez à l'avance le nombre d'itérations nécessaire.
La boucle for... of : La boucle for...of est une structure de contrôle qui permet de parcourir de manière simple et lisible les éléments d'une structure de données itérable, tels que les tableaux, les chaînes de caractères, et d'autres objets itérables.
La boucle for... in : La boucle for...in est un moyen pratique de parcourir les propriétés d'un objet ou les indices d'une structure de données, ce qui en fait un choix idéal pour inspecter et travailler avec les éléments de ces ensembles de données.

Soyez vigilant lors de l'utilisation des 3 premiers types de boucles évoquées plus haut, car une mauvaise gestion des conditions peut entraîner des boucles infinies. Les boucles infinies sont des situations où une boucle continue d'exécuter son bloc de code sans jamais s'arrêter, ce qui peut geler ou ralentir votre programme et causer des problèmes.

La Boucle while

La boucle while permet d'exécuter un bloc de code tant qu'une condition spécifiée reste vraie. Voici comment fonctionne une boucle while avec un exemple :


                    // Initialisation du compteur à 1 :
                    let compteur = 1;

                    // Tant que la valeur du compteur est inférieure à 6 exécute les instructions situées dans le bloc entre accolades :
                    while (compteur < 6) {
                        console.log('compteur vaut : ' + compteur);
                        // Incrémentation du compteur :
                        compteur++; // équivalent à compteur = compteur + 1;
                    }

                    /* Affiche :
                        compteur vaut: 1
                        compteur vaut: 2
                        compteur vaut: 3
                        compteur vaut: 4
                        compteur vaut: 5
                    */

L'objectif d'une boucle est d'éviter les répétitions tout en permettant l'exécution répétée d'une action un certain nombre de fois. Si nous avions cherché à obtenir le même résultat sans utiliser de boucle, notre code aurait ressemblé à ceci :


                    let compteur = 1;

                    console.log('compteur vaut : ' + compteur);
                    compteur++;
                    console.log('compteur vaut : ' + compteur);
                    compteur++;
                    console.log('compteur vaut : ' + compteur);
                    compteur++;
                    console.log('compteur vaut : ' + compteur);
                    compteur++;
                    console.log('compteur vaut : ' + compteur);
                    compteur++;

Exercices - Part 1

Exo-boucles-01

Objectif : Réaliser un compte à rebours simple avec une boucle while.
Instructions :
1. Créez un fichier nommé exo-boucles-01.js.
2. Initialisez une variable de départ contenant la valeur 5.
3. Mettez en place une boucle while qui affiche cette valeur dans la console puis la décrémente.
4. La boucle doit s'arrêter lorsque la valeur atteint 1.
5. Exécutez votre code et vérifiez que chaque étape du compte à rebours s'affiche correctement.

Exo-boucles-02

Objectif : Créer un compteur contrôlé avec une boucle while.
Instructions :
1. Créez un fichier nommé exo-boucles-02.js.
2. Déclarez une variable valDebut et une constante valFin, toutes deux contenant des valeurs numériques. Assurez-vous que valDebut soit inférieure à valFin.
3. Mettez en place une boucle while qui affiche la valeur courante de valDebut puis l'incrémente.
4. La boucle doit s'arrêter lorsque valDebut atteint valFin.
5. Exécutez votre code pour vérifier que toutes les étapes du compteur sont correctement affichées.

Exo-boucles-03

Objectif : Utiliser une boucle while infinie pour valider une saisie utilisateur.
Instructions :
1. Créez un fichier nommé exo-boucles-03.js.
2. Mettez en place une boucle while infinie qui demande à l'utilisateur d'entrer une valeur via prompt().
3. Lorsque l'utilisateur entre une valeur numérique, faites sortir la boucle en utilisant break.
4. Après la boucle, affichez un message de félicitations dans la console.
5. Pour vérifier si la saisie est numérique, utilisez la fonction isNaN() (voir documentation MDN si nécessaire).

Exo-boucles-04

Objectif : Utiliser une boucle while infinie et sortir lorsque l'utilisateur saisit un nombre impair.
Instructions :
1. Créez un fichier nommé exo-boucles-04.js.
2. Mettez en place une boucle while infinie qui demande à l'utilisateur d'entrer un nombre via prompt().
3. Si la valeur entrée est un nombre impair, utilisez break pour sortir de la boucle.
4. Après la boucle, affichez un message de félicitations dans la console.
5. Pour tester si un nombre est impair, utilisez l'opérateur du reste % (voir documentation MDN si nécessaire).

Exo-boucles-05

Objectif : Créer un mini-jeu dans lequel l'utilisateur doit deviner un nombre mystère à l'aide d'une boucle while.
Instructions :
1. Créez un fichier nommé exo-boucles-05.js.
2. Activez le mode strict en ajoutant la directive 'use strict' au début du fichier.
3. Déclarez une constante nommée nombreMystere contenant un nombre entier compris entre 1 et 20. Pour générer un nombre pseudo-aléatoire, utilisez la méthode Math.random().
4. Déclarez une variable nommée compteur initialisée à 0. Elle servira à compter le nombre de tentatives effectuées.
5. Mettez en place une boucle while qui demandera à l'utilisateur de proposer un nombre via prompt().
6. À chaque tentative
  - augmentez le compteur,
  - comparez la proposition au nombre mystère.
7. Si la valeur proposée n'est pas correcte, affichez dans la console
  - "Le nombre mystère est plus petit!" si la proposition est trop grande,
  - "Le nombre mystère est plus grand!" si la proposition est trop petite.
  La boucle doit ensuite continuer jusqu'à ce que l'utilisateur trouve la bonne valeur.
8. Lorsque le nombre mystère est trouvé, affichez dans la console
```
Félicitations, vous avez découvert le nombre mystère : X en Y tentatives.
```
  où X est la valeur trouvée et Y le nombre de tentatives.

Comme nous n'avons pas encore vu la méthode Math.random(), je vais vous fournir le début de la solution :


                    const nombreMystere = Math.floor(Math.random() * 20) + 1;

La ligne de code const nombreMystere = Math.floor(Math.random() * 20) + 1; génère un nombre entier aléatoire compris entre 1 (inclus) et 20 (inclus) :

La fonctionMath.random() génère un nombre décimal aléatoire entre 0 (inclus) et 1 (exclus) par défaut.
En multipliant le résultat de Math.random() par 20 Math.random() * 20, nous obtenons un nombre décimal aléatoire entre 0 (inclus) et 20 (exclus).
En utilisant Math.floor(Math.random() * 20), nous arrondissons ce nombre décimal à l'entier inférieur le plus proche, ce qui nous donne un nombre entier entre 0 (inclus) et 19 (inclus).
En ajoutant 1 au résultat Math.floor(Math.random() * 20) + 1, nous décalons la plage pour obtenir un nombre entier entre 1 (inclus) et 20 (inclus).

Imaginons que nous voulions générer un nombre aléatoire dont la valeur minimale soit supérieure à 1 (inclus), par exemple 10 (inclus) et que la valeur maximale reste configurée à 20 (inclus). On pourrait être tenté de simplement ajuster la formule en remplaçant la valeur minimale par 10, comme ceci : Math.floor(Math.random() * 20) + 10. Cette approche donnerait bien une valeur minimale de 10. Cependant, cela affecterait également la valeur maximale. En effet, supposons que le nombre aléatoire généré soit proche de 1 (par exemple, 0.9999). Cette valeur serait multipliée par 20, puis arrondie vers l'entier inférieur par Math.floor(), ce qui donnerait 19. Ensuite, en ajoutant 10, le résultat final serait 29, une valeur supérieure à la plage souhaitée.

Pour résoudre ce problème, il suffit de modifier la formule pour que la valeur multipliée par le résultat de la méthode Math.random() soit ajustée en fonction de la différence entre la valeur maximale et minimale. Par exemple, la formule correcte serait : Math.floor(Math.random() * (20 - 10)) + 10 ou encore Math.floor(Math.random() * 10) + 10. Cela garantit que la valeur générée est bien comprise entre 10 et 19.

Si l'on souhaite inclure la valeur maximale dans le résultat possible, il suffit d'ajouter 1 à la différence entre la valeur maximale et minimale. Par exemple : Math.floor(Math.random() * 11) + 10 permet d'obtenir un nombre aléatoire entre 10 et 20, inclus.

Pour résumer, si vous souhaitez générer un nombre entier aléatoire compris entre une valeur minimale incluse (min) et une valeur maximale exclue (max), utilisez la formule suivante : Math.floor(Math.random() * (max - min)) + min.

Si vous souhaitez inclure la valeur maximale dans la plage des résultats, il suffit d'ajouter 1 à la différence entre max et min. La formule devient alors : Math.floor(Math.random() * (max - min + 1)) + min. Cela garantit que le résultat est compris entre min et max, inclus.

C'est une méthode courante pour obtenir un nombre entier aléatoire dans une plage donnée. Si vous souhaitez en savoir plus sur les différentes méthodes de l'objet Math, vous pouvez consulter la documentation MDN Web Docs.

La Boucle do...while

Contrairement à la boucle while, la boucle do...while garantit que le bloc de code sera exécuté au moins une fois, même si la condition de boucle est initialement fausse.

Le fonctionnement de la boucle do...while est le suivant : le bloc de code est exécuté une première fois, puis la condition est évaluée. Si la condition est vraie, le bloc de code est ré-exécuté, et cela continue tant que la condition reste vraie :


                    // Initialisation du compteur à 6 :
                    let compteur = 6;

                    // Exécute une première fois le bloc situé après l'instruction do et ensuite, fais de même tant que la valeur du compteur est inférieure à 6.
                    do {
                        console.log('compteur vaut : ' + compteur);
                        // Incrémentation du compteur :
                        compteur++;
                    } while (compteur < 6);

                    // Affiche : compteur vaut : 6

Bien que la condition n'est pas respectée dès sa première interrogation, les instructions du bloc do sont bien exécutées une première fois. Si nous avions utilisé la boucle while ça n'aurait pas été le cas.

La Boucle for

La boucle for permet de répéter un bloc d'instructions un nombre déterminé de fois. On l'utilise lorsqu'on connaît à l'avance le nombre d'itérations nécessaire. Sa déclaration comporte trois parties placées entre parenthèses et séparées par des points-virgules l'initialisation, la condition et la mise à jour du compteur.


                    for (initialisation; condition; mise à jour) { bloc d'instructions }


                    // La variable compteur démarre à 1.
                    // Tant que compteur reste strictement inférieur à 6,
                    // le bloc d'instructions s'exécute puis compteur est incrémenté.
                    for (let compteur = 1; compteur < 6; compteur++)
                    {
                        console.log('compteur vaut ' + compteur);
                    }

                    /*
                        Affiche :
                            compteur vaut 1
                            compteur vaut 2
                            compteur vaut 3
                            compteur vaut 4
                            compteur vaut 5
                    */

Une utilisation fréquente consiste à parcourir un tableau en utilisant la propriété length qui indique le nombre d'éléments présents. La boucle avance ainsi de l'index zéro jusqu'au dernier index disponible.


                    const laFineEquipe = ['Claudy', 'Jean-Claude', 'Laurence'];

                    // La boucle parcourt les positions du tableau une par une.
                    // index prend les valeurs 0, 1, 2
                    // laFineEquipe.length vaut 3 ce qui évite les dépassements d'index.
                    for (let index = 0; index < laFineEquipe.length; index++)
                    {
                        // À chaque tour, on affiche la position et la valeur correspondante.
                        console.log('index ' + index + ' : ' + laFineEquipe[index]);
                    }

                    /*
                        Affiche :
                            index 0 : Claudy
                            index 1 : Jean-Claude
                            index 2 : Laurence
                    */

Cette forme de boucle est adaptée lorsqu'on doit parcourir une collection en contrôlant précisément les positions utilisées. Dans les situations où seule la valeur courante est utile, la structure for...of offre une écriture plus simple et plus lisible.

La Boucle for...of

La boucle for...of permet de parcourir les éléments d'une structure de données itérable. Les tableaux, les chaînes de caractères et les collections comme Set ou Map en font partie. D'autres objets sont également itérables, par exemple certains tableaux typés utilisés pour manipuler des données numériques. À chaque itération, la boucle fournit directement la valeur courante, ce qui évite de gérer des index.

La syntaxe de base de la boucle for...of est la suivante.


                    for (const element of iterable)
                    {
                        // Code à exécuter pour chaque élément...
                    }

element est une variable qui reçoit, à chaque itération, la valeur de l'élément courant.
iterable est la structure de données parcourue par la boucle (par exemple un tableau).

Dans l'exemple suivant, on parcourt un tableau de prénoms. À chaque tour de boucle, la variable prenom contient directement la valeur courante sans que l'on ait à gérer d'index.


                    const laFineEquipe = ['Claudy', 'Jean-Luc', 'Laurence'];

                    // À chaque itération, prenom reçoit la valeur courante du tableau.
                    // On ne réassigne pas prenom dans la boucle, const convient donc parfaitement ici.
                    for (const prenom of laFineEquipe)
                    {
                        console.log(prenom);
                    }

                    /*
                        Affiche :
                            Claudy
                            Jean-Luc
                            Laurence
                    */

La Boucle for...in

La boucle for...in sert à parcourir les propriétés énumérables d'un objet. À chaque itération, elle fournit la clé actuelle, ce qui permet ensuite d'accéder à la valeur correspondante. Ce mécanisme est pratique lorsqu'il faut examiner ou manipuler toutes les propriétés d'un même objet.

La syntaxe de base de la boucle for...in est la suivante.


                    for (const nomPropriete in objetAAparcourir) 
                    {
                        // Code à exécuter pour chaque propriété...
                    }

nomPropriete est une variable qui prend le nom de la propriété à chaque itération.
objetAAparcourir est l'objet dont on veut parcourir les propriétés.


                    // Définition d'un objet "personne" avec des propriétés telles que nom, âge et profession.
                    const personne = {
                        nom: 'Claudy',
                        age: 52,
                        profession: 'Photographe'
                    };

                    // La boucle "for...in" parcourt les clés de l'objet "personne".
                    // À chaque itération, la variable "nomPropriete" récupère le nom de la propriété courante.
                    // On utilise ensuite cette clé entre crochets pour accéder à la valeur correspondante.
                    for (const nomPropriete in personne)
                    {
                        console.log(nomPropriete + " : " + personne[nomPropriete]);
                    }

                    /*
                        Affiche : 
                            nom : Claudy
                            age : 52
                            profession : Photographe
                    */

Dans le cas des objets littéraux, cette forme permet d'inspecter rapidement les propriétés présentes par exemple pour afficher un résumé ou vérifier que certaines clés attendues existent bien.

Il faut garder en tête que for...in parcourt les clés, tandis que for...of parcourt directement les valeurs d'une structure itérable comme un tableau. En pratique, on privilégie souvent for...in pour les objets et for...of pour les tableaux, ce qui évite les confusions.

La boucle for...in peut aussi parcourir les indices d'un tableau, car celui-ci reste un objet dont les index sont des clés. Toutefois, ce comportement n'est pas adapté au traitement des tableaux en JavaScript. Cette boucle énumère toutes les clés existantes, y compris les propriétés ajoutées manuellement, et ne garantit pas l'ordre des éléments. Pour parcourir un tableau, il est donc préférable d'utiliser une boucle for ou for...of, selon que l'on a besoin des indices, des valeurs ou des deux.

Parcourir les chaînes de caractères avec les boucles.

Une chaîne de caractères peut être parcourue caractère par caractère avec une boucle for ou avec une boucle for...of. Ce principe est utilisé très souvent en front-end pour analyser ou nettoyer un texte comme un libellé de bouton, un message d'erreur ou un identifiant saisi par un utilisateur.

La boucle for parcourt les positions de la chaîne tandis que for...of parcourt directement les caractères. On choisit donc en fonction du besoin indices précis ou simple traitement de chaque caractère.

Exemple d'utilisation avec for

Dans certaines interfaces, un pseudo saisi par l'utilisateur doit être nettoyé avant d'être affiché. On peut vouloir repérer des caractères interdits ou bloquer un pseudo dont certains symboles risquent de casser la mise en forme. Une boucle for permet d'analyser chaque caractère tout en conservant sa position dans la chaîne.


                    // Chaîne a nettoyer.
                    const pseudoSaisi = "Seb@dev2025";

                    // Caractères interdits dans le pseudo.
                    const caracteresInterdits = "@#*?";

                    // Version nettoyée construite progressivement.
                    let pseudoNettoye = "";

                    // Parcours caractère par caractère.
                    for (let i = 0; i < pseudoSaisi.length; i++)
                    {
                        // Stocker le caractère de l'itération courante dans la variable caractere.
                        /*
                            Si i = 0, alors le caractère stockée est "S".
                            Si i = 1, alors le caractère stockée est "e".
                            Si i = 2, alors le caractère stockée est "b".
                            ...
                        */
                        const caractere = pseudoSaisi[i];

                        // On ignorer les caractères explicitement interdits.
                        // La fonction includes permet de vérifier si le caractères courant (caractere)
                        // se trouve dans le tableau des caractères interdits (caracteresInterdits).
                        // Si il ne se trouve pas dans ce tableau, on l'ajoute à la chaine stockée dans pseudoNettoye.
                        if (!caracteresInterdits.includes(caractere))
                        {
                            pseudoNettoye += caractere;
                        }
                    }

                    console.log("Pseudo nettoyé :", pseudoNettoye);

Exemple d'utilisation avec for...of

La boucle for...of est adaptée lorsque l'on souhaite parcourir directement les caractères d'une chaîne sans se soucier des indices. Chaque caractère peut alors être analysé avant d'être conservé ou non.


                    // Chaîne a nettoyer.
                    const identifiant = "Seb@dev#2025";

                    // Caractères interdits dans le pseudo.
                    const caracteresInterdits = "@#*?";

                    // Version nettoyée construite progressivement.
                    let pseudoNettoye = "";

                    // Parcours direct de chaque caractère avec for...of.
                    for (const caractere of identifiant)
                    {
                        // On ignorer les caractères explicitement interdits.
                        // La fonction includes permet de vérifier si le caractères courant (caractere)
                        // se trouve dans le tableau des caractères interdits (caracteresInterdits).
                        // Si il ne se trouve pas dans ce tableau, on l'ajoute à la chaine stockée dans pseudoNettoye.
                        if (!caracteresInterdits.includes(caractere))
                        {
                            pseudoNettoye += caractere;
                        }
                    }

                    console.log("Identifiant nettoyé :", pseudoNettoye);

Comme on vient de le voir avec ces deux exemples écrits de manière identique, une boucle for...of est souvent plus agréable à utiliser lorsqu'on parcourt une chaîne caractère par caractère. Elle fournit directement chaque caractère sans se soucier des indices, ce qui allège le code et améliore la lisibilité. La boucle for reste toutefois utile dès que la position exacte d'un caractère joue un rôle dans le traitement.

Les Boucles imbriquées

Une boucle imbriquée est une boucle placée à l'intérieur d'une autre. Ce schéma apparaît fréquemment en JavaScript côté front-end lorsqu'il faut parcourir des structures comportant plusieurs niveaux comme des listes de catégories contenant des éléments, des tableaux de cartes, des grilles ou des menus à plusieurs niveaux.

La boucle externe parcourt le premier niveau de données et pour chaque élément rencontré la boucle interne parcourt le niveau suivant. Il suffit de garder en tête le principe suivant pour chaque élément du niveau 1 on traite tout le niveau 2.

Exemple : Parcourir une grille d'éléments dans une interface

Imaginons un cas courant côté front-end une grille d'éléments affichée sur une page où chaque ligne contient un nombre variable de cartes. Le tableau suivant représente une grille composée de lignes qui contiennent elles-mêmes des cartes.


                    // Tableau représentant une grille composée de lignes.
                    // Chaque ligne contient un nombre variable de cartes.
                    const grille = [
                        ['Carte A1', 'Carte A2'],
                        ['Carte B1', 'Carte B2', 'Carte B3'],
                        ['Carte C1', 'Carte C2']
                    ];

                    // Première boucle : Elle parcourt les lignes de la grille une par une.
                    for (let indexLigne = 0; indexLigne < grille.length; indexLigne++)
                    {
                        // Affiche le numéro de la ligne courante.
                        console.log('Ligne ' + indexLigne);

                        // Deuxième boucle : Elle parcourt toutes les cartes contenues dans la ligne courante.
                        for (let indexCarte = 0; indexCarte < grille[indexLigne].length; indexCarte++)
                        {
                            // Affiche la carte située à cette position.
                            console.log('  ' + grille[indexLigne][indexCarte]);
                        }
                    }

                    /*
                        Affiche :
                            Ligne 0
                              Carte A1
                              Carte A2
                            Ligne 1
                              Carte B1
                              Carte B2
                              Carte B3
                            Ligne 2
                              Carte C1
                              Carte C2
                    */

Ce type de boucle peut servir pour générer dynamiquement du contenu HTML, produire des composants graphiques ou organiser une mise en page en fonction de données reçues.

Exemple : Filtrer des valeurs dans une grille

Dans une interface il est fréquent de devoir filtrer des données avant de les afficher. Dans cet exemple seules les cartes dont le nom contient la lettre « B » seront affichées. L'instruction continue permet de passer à l'élément suivant si une carte ne correspond pas au filtre.


                    // Tableau représentant une grille composée de lignes.
                    // Chaque ligne contient un nombre variable de cartes.
                    const grille = [
                        ['Carte A1', 'Carte A2'],
                        ['Carte B1', 'Carte B2', 'Carte B3'],
                        ['Carte C1', 'Carte C2']
                    ];

                    // Première boucle : Elle parcourt chaque ligne de la grille.
                    for (let indexLigne = 0; indexLigne < grille.length; indexLigne++)
                    {
                        console.log('Ligne ' + indexLigne);

                        // Deuxième boucle : Elle parcourt les cartes présentes dans la ligne courante.
                        for (let indexCarte = 0; indexCarte < grille[indexLigne].length; indexCarte++)
                        {
                            const carte = grille[indexLigne][indexCarte];

                            // Si la carte ne contient pas "B", on saute cette carte.
                            // "continue" passe directement à l'itération suivante de la boucle interne.
                            if (!carte.includes('B'))
                            {
                                continue;
                            }

                            // Si la condition précédente n'a pas été déclenchée,
                            // la carte correspond au filtre. On l'affiche.
                            console.log('  Carte filtrée ' + carte);
                        }
                    }

                    /*
                        Affiche :
                            Ligne 0
                            Ligne 1
                              Carte filtrée B1
                              Carte filtrée B2
                              Carte filtrée B3
                            Ligne 2
                    */

Cette structure est utile lorsqu'une interface doit afficher des éléments filtrés en direct par exemple lors d'une recherche ou d'un tri dynamique.

Exemple : Générer du HTML avec des boucles imbriquées

Voici un exemple courant générer un menu à plusieurs niveaux. Le tableau suivant contient des catégories contenant elles-mêmes des sous-options. Les boucles imbriquées permettent de générer un HTML structuré en fonction de la profondeur des données.


                    // Données simulant des catégories de menu et leurs sous-options.
                    // Chaque élément du tableau "menu" représente une catégorie avec un titre
                    // et un tableau "options" qui contient les libellés des entrées de cette catégorie.
                    const menu = [
                        {
                            titre: 'Produits',
                            options: ['Nouveautés', 'Promotions', 'Meilleurs ventes']
                        },
                        {
                            titre: 'Compte',
                            options: ['Profil', 'Commandes', 'Paramètres']
                        },
                        {
                            titre: 'Aide',
                            options: ['FAQ', 'Contact']
                        }
                    ];

                    // Variable qui contiendra progressivement le HTML à générer.
                    // On part d'une chaîne vide et on ajoute du texte à chaque itération.
                    let html = '';

                    // Première boucle : Elle parcourt le tableau "menu" catégorie par catégorie.
                    for (let indexCat = 0; indexCat < menu.length; indexCat++)
                    {
                        // À chaque tour, on récupère l'objet représentant la catégorie courante.
                        const categorie = menu[indexCat];

                        // On ajoute un titre de niveau 3 pour la catégorie.
                        html += '<h3>' + categorie.titre + '</h3>\n';

                        // On ouvre une liste non ordonnée pour y placer les options de la catégorie.
                        html += '<ul>\n';

                        // Deuxième boucle : Elle parcourt le tableau "options" de la catégorie courante.
                        for (let indexOpt = 0; indexOpt < categorie.options.length; indexOpt++)
                        {
                            // On ajoute un élément de liste pour chaque option du menu.
                            html += '  <li>' + categorie.options[indexOpt] + '</li>\n';
                        }

                        // On ferme la liste après avoir ajouté toutes les options.
                        html += '</ul>\n';
                    }

                    // Pour l'instant, on se contente d'afficher le HTML généré dans la console.
                    // Dans une page web, ce HTML pourrait être injecté dans le DOM avec innerHTML.
                    console.log(html);

                    /*
                        Affiche :
                        <h3>Produits</h3>
                        <ul>
                            <li>Nouveautés</li>
                            <li>Promotions</li>
                            <li>Meilleurs ventes</li>
                        </ul>
                        <h3>Compte</h3>
                        <ul>
                            <li>Profil</li>
                            <li>Commandes</li>
                            <li>Paramètres</li>
                        </ul>
                        <h3>Aide</h3>
                        <ul>
                            <li>FAQ</li>
                            <li>Contact</li>
                        </ul>
                    */

Cette technique se retrouve dans de nombreux scénarios front-end menus, listes, grilles d'images, formulaires dynamiques, pages générées à partir d'un fichier JSON et d'autres structures similaires.

Nature des boucles imbriquées

Les boucles imbriquées ne sont pas limitées à la boucle for. Toutes les structures de boucles vues dans ce chapitre peuvent être imbriquées while, do...while, for, for...of et for...in. Une boucle interne peut donc être de nature différente de la boucle externe. Ce principe se retrouve souvent lorsqu'il faut parcourir une structure de données sur plusieurs niveaux générer du HTML en fonction d'un tableau complexe ou manipuler des éléments organisés en lignes et colonnes.

Dans une interface dynamique les boucles imbriquées servent par exemple à générer des listes hiérarchiques organiser des composants parcourir un tableau en lignes et colonnes ou traiter des sous-groupes de données dans une structure JSON.

Exercices - Part 2

Exo-boucles-06

Objectif : Demander une valeur à l'utilisateur et la valider à l'aide d'une boucle do...while.
Instructions :
1. Créez un fichier nommé exo-boucles-06.js.
2. Déclarez une variable nommée age au-dessus de la future boucle do...while.
3. Mettez en place une boucle do...while pour demander à l'utilisateur d'entrer son âge avec prompt().
4. À l'intérieur de la boucle, convertissez la saisie en nombre avec Number() afin de pouvoir la valider correctement.
5. Configurez la condition du while pour que la boucle recommence si la valeur entrée est invalide. La saisie doit être refusée si elle n'est pas un nombre, si elle est négative ou si elle vaut 0.
6. Après la boucle, affichez dans la console le message Âge enregistré : suivi de la valeur correcte fournie par l'utilisateur.
7. Essayez plusieurs valeurs incorrectes, puis une valeur valide, afin de vérifier que la boucle fonctionne comme prévu.

Exo-boucles-07

Objectif : Générer un planning hebdomadaire en utilisant une boucle for.
Instructions :
1. Créez un fichier nommé exo-boucles-07.js.
2. Créez un tableau contenant les cinq jours ouvrables de la semaine (du lundi au vendredi). Indiquez dans un commentaire que chaque élément du tableau représente un jour.
```
                                    const jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi"];
                                
```
3. Mettez en place une boucle for permettant de parcourir l'ensemble des jours du tableau.
4. À l'intérieur de la boucle, construisez une phrase du type "Lundi : cours de 9h à 12h" en utilisant l'élément du tableau correspondant.
5. Affichez cette phrase dans la console à chaque itération.
6. Exécutez votre code et vérifiez que les cinq lignes du planning apparaissent correctement dans la console.

Exo-boucles-08

Objectif : Nettoyer un tableau de prix et calculer un total à l'aide d'une boucle for.
Instructions :
1. Créez un fichier nommé exo-boucles-08.js.
2. Activez le mode strict en ajoutant la directive 'use strict' au début du fichier.
3. Ajoutez le tableau suivant dans votre fichier, il servira de données brutes à nettoyer
```
                                    const prixBruts = ["12", " 8 ", "15.5", ""];
                                
```
4. Créez un tableau vide nommé prixNettoyes. Il contiendra uniquement les prix valides une fois nettoyés.
5. Déclarez une variable nommée total et initialisez-la à 0. Elle servira à additionner les montants valides.
6. Mettez en place une boucle for permettant de parcourir chaque élément du tableau prixBruts.
7. À chaque itération :
  - récupérez la valeur brute,
  - supprimez les espaces superflus en début et fin de chaîne avec trim(),
  - ignorez l'entrée si elle devient vide,
  - convertissez la valeur restante en nombre avec Number(),
  - ignorez-la si la conversion échoue (résultat NaN),
  - ajoutez la valeur valide au tableau prixNettoyes,
  - ajoutez-la également au total.
8. Affichez dans la console :
  - le tableau final des prix valides,
  - le total des montants valides.
9. Exécutez votre code et vérifiez que les valeurs incorrectes sont ignorées et que le total correspond uniquement aux montants valides.

Exo-boucles-09

Objectif : Parcourir un tableau avec une boucle for...of et mettre à jour son contenu.
Instructions :
1. Créez un fichier nommé exo-boucles-09.js.
2. Ajoutez le tableau suivant dans votre fichier
```
                                    const utilisateurs = ["alice", "bob", "chris"];
                                
```
3. Mettez en place une première boucle for...of qui parcourt le tableau et affiche dans la console le message "Bienvenue, X" pour chaque utilisateur.
4. Ajoutez un nouvel élément au tableau en utilisant la méthode push().
5. Affichez dans la console le message "Liste des inscrits mise à jour".
6. Mettez en place une deuxième boucle for...of qui parcourt le tableau mis à jour et affiche chaque utilisateur dans la console.
7. Exécutez votre code et vérifiez que les deux boucles affichent bien les utilisateurs avant et après l'ajout du nouvel élément.

Exo-boucles-10

Objectif : Parcourir les propriétés d'un objet à l'aide d'une boucle for...in et détecter les champs non remplis.
Instructions :
1. Créez un fichier nommé exo-boucles-10.js.
2. Ajoutez l'objet suivant dans votre fichier
```
                                    const data = {
                                        nom: "Alice",
                                        email: "",
                                        age: 22
                                    };
                                
```
3. Mettez en place une boucle for...in qui parcourt chaque propriété de l'objet.
4. À chaque itération, récupérez la valeur associée à la clé en utilisant la syntaxe data[clé].
5. Considérez qu'un champ est vide si sa valeur est :
  - une chaîne vide,
  - null,
  - undefined.
6. Affichez dans la console un message pour chaque champ non rempli.
7. Exécutez votre code et vérifiez que seul le champ email est signalé comme non rempli.

Exo-boucles-11

Objectif : Transformer un objet en chaîne de paramètres GET à l'aide d'une boucle for...in.
Instructions :
1. Créez un fichier nommé exo-boucles-11.js.
2. Ajoutez l'objet suivant dans votre fichier
```
                                    const params = {
                                        page: 2,
                                        limit: 10,
                                        tri: "desc"
                                    };
                                
```
3. Créez un tableau vide nommé morceaux. Il servira à stocker les fragments de texte construits à partir de chaque propriété.
4. Mettez en place une boucle for...in qui parcourt toutes les propriétés de l'objet params.
5. À chaque itération :
  - récupérez la valeur associée à la clé,
  - construisez une chaîne de la forme clé=valeur,
  - ajoutez cette chaîne au tableau morceaux.
6. À la fin de la boucle, assemblez toutes les chaînes du tableau en utilisant morceaux.join("&").
7. Affichez la chaîne finale dans la console. Le résultat attendu est : "page=2&limit=10&tri=desc".
8. Exécutez votre code et vérifiez que la chaîne générée correspond bien aux valeurs de l'objet.

Exo-boucles-12

Objectif : Parcourir un tableau d'objets avec for...of et calculer un total.
Instructions :
1. Créez un fichier nommé exo-boucles-12.js.
2. Ajoutez le tableau suivant dans votre fichier
```
                                    const panier = [
                                        { nom: "Clavier", qte: 1, prix: 40 },
                                        { nom: "Souris",  qte: 2, prix: 15 },
                                        { nom: "Tapis",   qte: 1, prix: 10 }
                                    ];
                                
```
3. Créez une variable nommée total initialisée à 0. Elle servira à cumuler le montant global du panier.
4. Mettez en place une boucle for...of qui parcourt chaque objet du tableau panier.
5. Pour chaque produit :
  - calculez le sous-total en multipliant la quantité par le prix,
  - affichez dans la console une phrase du type "Clavier : 40 €",
  - ajoutez le sous-total au total global.
6. Après la boucle, affichez dans la console la valeur totale du panier.
7. Exécutez votre ficcodehier et vérifiez que le total affiché correspond à la somme des sous-totaux.

Exo-boucles-13

Objectif : Nettoyer un tableau contenant des données hétérogènes à l'aide d'une boucle for.
Instructions :
1. Créez un fichier nommé exo-boucles-13.js.
2. Ajoutez le tableau suivant dans votre fichier
```
                                    const donneesBrutes = ["17", null, "22", undefined, "test", "9"];
                                
```
3. Créez un tableau vide nommé donneesNettoyees. Il contiendra uniquement les valeurs valides une fois analysées.
4. Mettez en place une boucle for qui parcourt toutes les valeurs du tableau donneesBrutes.
5. À chaque itération :
  - récupérez la valeur brute,
  - ignorez-la si elle vaut null ou undefined,
  - convertissez la valeur en nombre avec Number(),
  - ignorez-la si la conversion échoue (résultat NaN),
  - ajoutez la valeur numérique obtenue dans le tableau donneesNettoyees.
6. Affichez dans la console le tableau final contenant uniquement les valeurs numériques valides.
7. Exécutez votre code et vérifiez que seules les valeurs convertibles en nombre ont été conservées.

Exo-boucles-14

Objectif : Parcourir une chaîne avec for...of pour compter certains types de caractères.
Instructions :
1. Créez un fichier nommé exo-boucles-14.js.
2. Ajoutez la constante suivante dans votre fichier. Elle représente le texte d'un titre affiché sur une carte dans une interface
```
                                    const titreCarte = "Confirmer mon inscription en ligne";
                                
```
3. Créez deux variables nommées nbVoyelles et nbAutres, initialisées à 0. Elles serviront à compter respectivement le nombre de voyelles et le nombre des autres caractères.
4. Ajoutez une constante nommée voyelles contenant toutes les voyelles à tester (en minuscules et majuscules). Par exemple :
```
                                    const voyelles = "aeiouyAEIOUY";
                                
```
5. Mettez en place une boucle for...of qui parcourt chaque caractère de la chaîne titreCarte.
6. À chaque itération :
  - récupérez le caractère courant dans une variable,
  - ignorez totalement l'espace (ne l'ajoutez dans aucun compteur),
  - si le caractère est présent dans la chaîne voyelles (vous pouvez utiliser la méthode includes()), augmentez le compteur nbVoyelles de 1,
  - sinon, augmentez le compteur nbAutres de 1.
7. Après la boucle, affichez dans la console deux phrases indiquant :
  - le nombre de voyelles trouvées,
  - le nombre d'autres caractères (sans compter les espaces).
  Par exemple : "Voyelles trouvées : X" "Autres caractères : Y".
8. Exécutez votre fichier et vérifiez que les valeurs affichées correspondent bien au texte du titre.

Exo-boucles-15

Objectif : Utiliser une boucle for pour parcourir une chaîne et repérer des positions précises.
Instructions :
1. Créez un fichier nommé exo-boucles-15.js.
2. Ajoutez la constante suivante dans votre fichier. Elle représente un message qui pourrait s'afficher sous un champ de formulaire
```
                                    const messageAide = "Votre mot de passe doit contenir au moins 1 majuscule et 1 chiffre.";
                                
```
3. Créez une variable nommée nbMajuscules initialisée à 0. Elle servira à compter le nombre de lettres majuscules présentes dans le message.
4. Mettez en place une boucle for classique qui parcourt la chaîne messageAide grâce à un index. La variable d'index pourra s'appeler par exemple i.
5. À chaque itération :
  - récupérez le caractère courant avec messageAide[i],
  - vérifiez s'il s'agit d'une lettre majuscule. Pour rester simple, vous pouvez considérer qu'une lettre majuscule est un caractère compris entre "A" et "Z".
6. Si le caractère courant est une majuscule :
  - affichez dans la console une phrase indiquant sa position et sa valeur, par exemple "Majuscule trouvée à la position i : X",
  - augmentez le compteur nbMajuscules de 1.
7. Après la boucle, affichez dans la console une phrase récapitulative indiquant le nombre total de majuscules trouvées dans le message.
8. Exécutez votre fichier et vérifiez que les majuscules signalées et le total correspondent bien au contenu de messageAide.

Exo-boucles-16

Objectif : Parcourir une structure à deux niveaux avec des boucles imbriquées et analyser les données d'un mini-jeu.
Instructions :
1. Créez un fichier nommé exo-boucles-16.js.
2. Ajoutez le tableau suivant dans votre fichier. Il représente trois niveaux de jeu, chacun contenant une liste d'ennemis
```
                                    const niveaux = [
                                        ["slime", "slime", "dragon"],
                                        ["slime"],
                                        ["fantôme", "slime", "mage"]
                                    ];
                                
```
3. Créez une variable nommée totalEnnemis initialisée à 0. Elle servira à additionner le nombre total d'ennemis rencontrés dans tous les niveaux.
4. Créez un tableau vide nommé ennemisRencontres. Il contiendra la liste des ennemis rencontrés au moins une fois, sans doublons.
5. Mettez en place une boucle for qui parcourt chaque niveau du tableau.
6. À chaque niveau :
  - récupérez la liste d'ennemis du niveau,
  - calculez combien d'ennemis sont présents dans ce niveau,
  - ajoutez ce nombre au total global,
  - affichez dans la console une phrase indiquant le numéro du niveau et le nombre d'ennemis qu'il contient.
7. À l'intérieur de cette boucle, ajoutez une deuxième boucle for...of pour parcourir les ennemis du niveau courant.
8. Pour chaque ennemi rencontré :
  - vérifiez s'il n'est pas déjà présent dans ennemisRencontres,
  - si ce n'est pas le cas, ajoutez-le au tableau.
9. Après les deux boucles :
  - affichez dans la console le total d'ennemis rencontrés sur l'ensemble des niveaux,
  - affichez également la liste des ennemis rencontrés au moins une fois.
10. Exécutez votre code et vérifiez que les résultats affichés correspondent bien aux données de départ.

Les instructions break et continue

Dans une boucle, on utilise souvent des structures conditionnelles pour décider quelles instructions exécuter à chaque tour. On place alors des if autour de certaines parties du code pour ne traiter que des cas bien précis. Quand ces cas se multiplient, les conditions finissent par s'imbriquer ou par s'enchaîner les unes après les autres, ce qui rend le bloc plus difficile à lire et à maintenir.

Les instructions break et continue offrent une autre manière de contrôler le déroulement d'une boucle depuis l'intérieur de son bloc. Elles ne remplacent pas les structures conditionnelles, elles les complètent. break sert lorsque l'on décide qu'il n'est plus nécessaire de poursuivre la boucle dès qu'une condition est remplie. continue sert lorsque l'on souhaite ignorer le reste des instructions du bloc pour un cas précis et passer directement à l'itération suivante. Utilisées avec des if simples, elles permettent de garder des blocs plus linéaires et d'éviter les enchaînements de if...else trop profonds.

En JavaScript, break et continue fonctionnent avec les boucles for, for...of, for...in, while et do...while. Dans les exemples qui suivent, on utilise seulement for et la console.

Arrêter une boucle avec break

L'instruction break met fin immédiatement à la boucle courante. Le programme passe à l'instruction située juste après la boucle. Cela évite de parcourir inutilement le reste des données lorsqu'on a déjà trouvé ce que l'on cherchait.

Dans l'exemple suivant, on simule la recherche du premier bouton "actif" dans un menu avant d'afficher son libellé dans l'interface.


                    // Id du bouton que l'on souhaite activer en priorité.
                    const boutonRecherche = "btn-connexion";

                    // Liste des boutons présents dans un menu (on simule des ids CSS).
                    const boutons = [
                        "btn-accueil",
                        "btn-produits",
                        "btn-connexion",
                        "btn-contact"
                    ];

                    // Variable qui indiquera si le bouton a été trouvé ou non.
                    let trouve = false;

                    // Parcourir la liste de tous les boutons du menu.
                    for (let i = 0; i < boutons.length; i++) 
                    {
                        const idBouton = boutons[i];
                        console.log("Vérification du bouton " + idBouton);

                        // Vérifier si le bouton courant est celui recherché.
                        if (idBouton === boutonRecherche) 
                        {
                            console.log("Bouton " + idBouton + " trouvé, préparation de l'affichage de sa section.");
                            trouve = true;

                            // Inutile de continuer à parcourir le reste du tableau.
                            // Dès que le bouton recherché est trouvé, on interrompt la boucle.
                            break;
                        }
                    }

                    // Après la boucle, on vérifie si un bouton correspondant a été trouvé.
                    if (trouve === false) 
                    {
                        console.log("Bouton non trouvé dans la liste du menu.");
                    }

Sans break, la boucle continuerait à vérifier tous les boutons même après la découverte de btn-connexion. Dans une vraie interface, une telle optimisation devient intéressante lorsque les listes de composants sont longues ou construites à partir de données distantes.

Passer à l'itération suivante avec continue

L'instruction continue permet de sauter directement à l'itération suivante de la boucle courante. Tout le code situé après continue dans le bloc n'est pas exécuté pour l'itération en cours.

Cela est utile lorsqu'une partie des données ne doit pas être traitée par la suite du bloc, comme lorsque seuls certains types de messages d'événements demandent une action. Dans l'exemple suivant, les messages d'information sont ignorés et seuls les autres messages sont réellement traités.


                    const journalEvenements = [
                        "INFO Survol du bouton Accueil",
                        "INFO Survol du bouton Connexion",
                        "CLICK Clic sur Connexion",
                        "WARNING Champ mot de passe vide",
                        "ERROR Échec de connexion au compte"
                    ];

                    // Parcourir chaque message du journal.
                    for (let i = 0; i < journalEvenements.length; i++)
                    {
                        const message = journalEvenements[i];

                        // La méthode message.startsWith("INFO") vérifie si la chaîne message
                        // commence par le texte "INFO". Elle renvoie true si c'est le cas, false sinon.

                        // Les messages "INFO" ne demandent aucune action.
                        // "continue" saute le reste du bloc et passe directement
                        // à l'itération suivante de la boucle.
                        if (message.startsWith("INFO")) 
                        {
                            continue;
                        }

                        // Tous les autres messages atteignent cette partie du code,
                        // où ils peuvent être analysés ou affichés dans la console.
                        console.log("Traitement du message :", message);
                    }

Dans cet exemple, les messages commençant par INFO ne passent jamais dans la partie traitement du bloc. Ici, il n'y a qu'un simple console.log() pour la démonstration, mais dans une situation réelle, cette zone pourrait rassembler plusieurs étapes de traitement. Utiliser continue permet de filtrer rapidement les messages qui ne doivent pas être traités et de garder le bloc principal clair et linéaire, sans devoir englober tout le traitement dans un grand if.

Utilisation dans des boucles imbriquées

En front-end, les données sont souvent organisées sur plusieurs niveaux comme des pages contenant des sections ou des sections contenant des boutons. Les boucles imbriquées sont donc fréquentes.

Par défaut, break et continue agissent uniquement sur la boucle dont ils dépendent directement c'est-à-dire la boucle qui les englobe immédiatement. Même s'ils sont placés dans plusieurs niveaux d'imbrication, ils n'affectent pas automatiquement les boucles parentes. En JavaScript, on peut toutefois utiliser des labels pour demander à break ou continue de viser une boucle parente précise.

Quitter plusieurs niveaux avec un label et break

Exemple tiré d'une simulation d'écran d'administration. On parcourt des sections, puis pour chaque section une liste de widgets. Dès qu'un widget "CRITIQUE" apparaît, il n'est plus utile de lire les autres widgets ni d'analyser les sections suivantes. Un label sur la boucle externe permet d'interrompre immédiatement les deux niveaux.


                    const sections = [
                        ["INFO Widget météo", "WARNING Widget notifications lent"],
                        ["INFO Widget profil", "CRITIQUE Widget paiement en erreur", "DEBUG Widget debug"],
                        ["INFO Widget aide"]
                    ];

                    // Label posé sur la boucle externe.
                    sectionsLoop:
                    for (let i = 0; i < sections.length; i++) 
                    {

                        const widgets = sections[i];

                        for (let j = 0; j < widgets.length; j++) 
                        {
                            const widget = widgets[j];

                            // Détection d'un widget critique qui commence par "CRITIQUE".
                            if (widget.startsWith("CRITIQUE")) 
                            {
                                console.log("Alerte critique détectée dans la section " + i);

                                // Quitter les deux niveaux de boucles :
                                // - boucle interne sur les widgets
                                // - boucle externe sur les sections
                                break sectionsLoop;
                            }
                        }
                    }

                    console.log("Fin de l'analyse des sections.");

Ici, break sectionsLoop arrête la boucle interne qui parcourait les widgets de la section courante et la boucle externe qui parcourait les sections.

Ignorer des données sur plusieurs niveaux avec un label et continue

On peut utiliser continue avec un label pour demander à plusieurs niveaux de boucles de passer immédiatement à leur prochaine itération. Ce comportement est utile lorsque certains cas rendent inutile l'analyse du reste d'un groupe complet comme une section entière d'interface.

Dans l'exemple suivant, on parcourt une liste de sections, chacune composée de plusieurs éléments d'interface. Une section est considérée comme "cassée" lorsqu'un de ses éléments contient le mot "BUG". Dans ce cas, il n'est pas pertinent de continuer à analyser les autres éléments, et il vaut mieux passer directement à la section suivante.


                    const planEcran = [
                        ["header", "menu-principal", "BUG-bouton-deconnexion"],
                        ["banniere", "carousel", "bloc-promotions"],
                        ["formulaire-contact", "BUG-champ-email", "bouton-envoyer"]
                    ];

                    sectionsUI:
                    for (let i = 0; i < planEcran.length; i++) 
                    {
                        const section = planEcran[i];

                        for (let j = 0; j < section.length; j++) 
                        {
                            const element = section[j];

                            // Un élément est considéré comme cassé si son nom contient "BUG".
                            if (element.includes("BUG")) 
                            {
                                console.log("Section " + i + " ignorée car élément cassé (" + element + ")");
                                // On passe directement à la section suivante.
                                continue sectionsUI;
                            }

                            // Traitement normal d'un élément valide.
                            console.log("Section " + i + ", élément :", element);
                        }

                        // Si l'exécution arrive ici, tous les éléments de la section sont valides.
                        console.log("Section " + i + " traitée complètement.");
                    }

Dans cet exemple, continue sectionsUI permet d'ignorer une section entière dès qu'un élément cassé est détecté. La boucle interne s'interrompt immédiatement et la boucle externe passe directement à la prochaine section. Une structure conditionnelle seule ne pourrait pas modifier le déroulement de deux niveaux de boucles en une seule instruction aussi lisible.

Exercices - Part 3

Exo-boucles-17

Objectif : Utiliser break pour arrêter une boucle for dès qu'une valeur dépasse une limite.
Instructions :
1. Créez un fichier nommé exo-boucles-17.js.
2. Ajoutez dans ce fichier le tableau suivant
```
                                    const largeursColonnes = [120, 80, 95, 130, 90];
                                    const limiteMax = 100;
                                
```
3. Mettez en place une boucle for qui parcourt toutes les valeurs du tableau largeursColonnes.
4. À chaque itération
  - affichez dans la console "Test de la colonne X px" où X représente la valeur courante,
  - vérifiez si la largeur courante est strictement supérieure à la limite stockée dans limiteMax.
5. Dès qu'une largeur dépasse la limite
  - affichez dans la console "La colonne de X px dépasse la limite.",
  - utilisez break pour arrêter la boucle immédiatement.
6. Pour aller plus loin
  - ajoutez une variable booléenne initialisée à false avant la boucle,
  - passez cette variable à true lorsque vous rencontrez une largeur trop grande,
  - après la boucle, affichez dans la console un message différent selon que toutes les colonnes respectent la limite ou non.
    - Si au moins une colonne dépasse la limite, affichez : "Au moins une colonne dépasse la limite de X px."
    - Si aucune colonne ne dépasse la limite, affichez : "Toutes les colonnes respectent la limite de X px."
    où X correspond à la valeur de la limite stockée dans la variable limiteMax.

Exo-boucles-18

Objectif : Utiliser continue pour ignorer certains messages dans une boucle for.
Instructions :
1. Créez un fichier nommé exo-boucles-18.js.
2. Ajoutez le tableau suivant dans votre fichier
```
                                    const actions = [
                                        "SCROLL page d'accueil",
                                        "CLICK bouton Connexion",
                                        "HOVER image produit",
                                        "SCROLL page produits",
                                        "CLICK bouton Ajouter au panier"
                                    ];
                                
```
3. Mettez en place une boucle for qui parcourt toutes les entrées du tableau actions.
4. À chaque itération
  - récupérez l'action courante dans une variable,
  - vérifiez si cette action commence par "SCROLL" en utilisant la méthode startsWith(). Cette méthode permet de tester si une chaîne commence par un texte donné et renvoie true ou false. Pour en savoir plus, vous pouvez consulter la documentation MDN.
5. Si l'action commence par "SCROLL"
  - n'affichez rien dans la console pour cette action,
  - utilisez continue pour passer directement à l'action suivante.
6. Pour toutes les autres actions
  - affichez dans la console "Action à analyser : X" où X représente l'action courante.
7. Exécutez votre fichier et vérifiez que seules les actions de type CLICK ou HOVER apparaissent dans la console.

Exo-boucles-19

Objectif : Utiliser un label et break pour arrêter deux boucles imbriquées.
Instructions :
1. Créez un fichier nommé exo-boucles-19.js.
2. Ajoutez le tableau suivant dans votre fichier. Il représente un clavier virtuel organisé en lignes
```
                                    const clavierVirtuel = [
                                        ["ESC", "F1", "F2", "F3"],
                                        ["CTRL", "ALT", "SUPPR"],
                                        ["SHIFT", "ENTER", "ESPACE"]
                                    ];
                                
```
3. Mettez en place
  - une première boucle for, précédée du label clavierLoop:, qui parcourt les lignes du clavier. Ce label permettra à break d'arrêter directement cette boucle extérieure,
  - à l'intérieur, une seconde boucle for qui parcourt les touches de la ligne courante. (Deux boucles sont nécessaires car chaque ligne contient plusieurs touches.)
4. À chaque touche rencontrée
  - affichez dans la console "Test de la touche X" où X correspond au nom de la touche rencontrée,
  - vérifiez si la touche vaut exactement "ENTER".
5. Dès que la touche "ENTER" est trouvée
  - calculez son numéro de ligne et de colonne en ajoutant 1 aux index (les tableaux commencent à 0 mais l'affichage commence à 1),
  - affichez dans la console "Touche ENTER trouvée à la ligne L, colonne C" où L et C représentent les numéros calculés,
  - utilisez break avec le label clavierLoop pour quitter les deux boucles en une seule instruction.
6. Après les deux boucles, affichez dans la console "Recherche de la touche terminée."

Exo-boucles-20

Objectif : Utiliser un label et continue pour ignorer totalement certains groupes de données.
Instructions :
1. Créez un fichier nommé exo-boucles-20.js.
2. Ajoutez le tableau suivant dans votre fichier. Chaque sous-tableau représente une page d'interface avec ses blocs
```
                                    const pages = [
                                        ["header", "section-accueil", "footer"],
                                        ["header", "section-profil-desactivee", "bloc-suggestions", "footer"],
                                        ["header", "section-contact", "footer"]
                                    ];
                                
```
3. Placez un label pagesLoop: au-dessus de la boucle externe qui parcourra les pages. Ce label permettra à continue de revenir directement à la boucle qui parcourt les pages.
4. Mettez en place
  - une première boucle for sur le tableau pages (cette boucle parcourt les pages une par une),
  - à l'intérieur, une deuxième boucle for qui parcourt les blocs de la page courante (chaque page contient plusieurs blocs).
5. À l'intérieur de la boucle interne, pour chaque bloc
  - calculez son numéro de page en ajoutant 1 aux index du tableau parent,
  - affichez dans la console "Page X, bloc Y" où X représente le numéro de la page et Y le texte du bloc courant,
  - vérifiez si le nom du bloc contient le texte "desactivee" en utilisant la méthode includes(). Cette méthode permet de tester si une chaîne contient un certain texte et renvoie true si le texte est trouvé, false sinon. Pour en savoir plus, vous pouvez consulter la documentation MDN : Méthode String.prototype.includes() sur MDN .
6. Si un bloc contient le mot "desactivee"
  - affichez dans la console le message "Page X ignorée car le bloc "Y" est désactivé." où X correspond au numéro de la page et Y au nom du bloc désactivé,
  - utilisez continue avec le label pagesLoop pour passer immédiatement à la page suivante sans traiter les autres blocs de la page actuelle.
7. Si la boucle interne se termine sans rencontrer de bloc désactivé
  - affichez dans la console "Page X traitée entièrement." où X représente le numéro de la page.
8. Exécutez votre code et vérifiez dans la console que
  - tous les blocs de la première et de la troisième page sont affichés,
  - pour la deuxième page, les blocs après "section-profil-desactivee" ne sont pas traités et un message indique que la page a été ignorée à cause de ce bloc désactivé.