{"id":5578,"date":"2024-08-28T23:00:02","date_gmt":"2024-08-28T23:00:02","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boucles-while-en-javascript-guide-pratique\/"},"modified":"2024-08-28T23:00:07","modified_gmt":"2024-08-28T23:00:07","slug":"boucles-while-en-javascript-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boucles-while-en-javascript-guide-pratique\/","title":{"rendered":"5.8 Boucles while en JavaScript : Guide Pratique"},"content":{"rendered":"\n<p><strong>Boucles while JavaScript<\/strong> sont essentielles pour cr\u00e9er des it\u00e9rations dans votre code afin de r\u00e9p\u00e9ter des actions jusqu&rsquo;\u00e0 ce qu&rsquo;une certaine condition soit remplie. Ma\u00eetriser les <strong>boucles while en JavaScript<\/strong> vous permet de contr\u00f4ler le flux de votre programme de mani\u00e8re plus pr\u00e9cise et dynamique. Apprenons ensemble comment utiliser ces boucles efficacement gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Boucles while en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658882233?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Une boucle <code>while<\/code> en JavaScript ex\u00e9cute un bloc de code tant que la condition sp\u00e9cifi\u00e9e est vraie. Voici la syntaxe de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Syntaxe de base d'une boucle while\nwhile (condition) {\n    \/\/ Code \u00e0 ex\u00e9cuter tant que la condition est vraie\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Simple d&rsquo;une Boucle while<\/h3>\n\n\n\n<p>Commen\u00e7ons par un exemple simple qui affiche les nombres de 0 \u00e0 4 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let i = 0;\n\nwhile (i < 5) {\n    console.log(i);\n    i++;\n}\n\n\/\/ Sortie:\n\/\/ 0\n\/\/ 1\n\/\/ 2\n\/\/ 3\n\/\/ 4\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles while et Conditions Complexes<\/h3>\n\n\n\n<p>Les boucles <code>while<\/code> peuvent \u00e9galement g\u00e9rer des conditions plus complexes. Imaginons que vous vouliez emp\u00eacher certains utilisateurs d'entrer un mot de passe vide :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let password = '';\n\nwhile (password === '') {\n    password = prompt('Entrez votre mot de passe (ne peut pas \u00eatre vide) :');\n}\n\nconsole.log('Mot de passe accept\u00e9 : ', password);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Boucles while avec les Tableaux<\/h3>\n\n\n\n<p>Les boucles <code>while<\/code> peuvent \u00eatre particuli\u00e8rement efficaces lorsqu'elles sont utilis\u00e9es avec des structures de donn\u00e9es comme les tableaux. Par exemple, voici comment traverser un tableau jusqu'\u00e0 trouver un certain \u00e9l\u00e9ment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const fruits = ['pomme', 'banane', 'cerise', 'orange'];\nlet index = 0;\n\nwhile (index < fruits.length) {\n    console.log(fruits[index]);\n    if (fruits[index] === 'cerise') {\n        console.log('Cerise trouv\u00e9e \u00e0 l\\'index', index);\n        break; \/\/ Sort de la boucle lorsque 'cerise' est trouv\u00e9e\n    }\n    index++;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Boucles while pour Impl\u00e9menter des Algorithmes de Jeu<\/h3>\n\n\n\n<p>Les boucles <code>while<\/code> sont \u00e9galement utilis\u00e9es dans le d\u00e9veloppement de jeux pour g\u00e9rer les cycles de vie des jeux, comme dans un simple jeu de devinettes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const secretNumber = 7;\nlet guess = null;\n\nwhile (guess !== secretNumber) {\n    guess = parseInt(prompt('Devinez le nombre secret (entre 1 et 10) :'), 10);\n    \n    if (guess < secretNumber) {\n        console.log('Trop bas !');\n    } else if (guess > secretNumber) {\n        console.log('Trop haut !');\n    } else {\n        console.log('F\u00e9licitations ! Vous avez devin\u00e9 le nombre secret.');\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser l'Utilisation des Boucles while avec des Variables de Contr\u00f4le<\/h3>\n\n\n\n<p>Pour optimiser les boucles <code>while<\/code>, il est essentiel de bien g\u00e9rer les variables de contr\u00f4le afin d'\u00e9viter des boucles infinies. Voici un exemple o\u00f9 nous utilisons une variable de contr\u00f4le pour garantir la terminaison de la boucle :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let attempts = 0;\nconst maxAttempts = 5;\n\nwhile (attempts < maxAttempts) {\n    let userInput = prompt('Essayez de deviner le mot de passe (Tentative ' + (attempts + 1) + ' de ' + maxAttempts + ') :');\n    \n    if (userInput === 'monMotDePasse') {\n        console.log('Acc\u00e8s accord\u00e9.');\n        break;\n    } else {\n        console.log('Mot de passe incorrect.');\n    }\n    \n    attempts++;\n}\n\nif (attempts === maxAttempts) {\n    console.log('Trop de tentatives. Acc\u00e8s refus\u00e9.');\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Aller plus loin avec les <strong>Boucles while en JavaScript<\/strong><\/h2>\n\n\n\n<p>Pour une compr\u00e9hension plus approfondie de JavaScript, il est important de comprendre d'autres types de boucles disponibles dans ce langage. Par exemple, <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-do-while-en-javascript-tutoriel\" rel=\"noopener\" target=\"_blank\">les boucles do-while<\/a> offrent une flexibilit\u00e9 diff\u00e9rente, car le code est ex\u00e9cut\u00e9 au moins une fois avant que la condition ne soit \u00e9valu\u00e9e.<\/p>\n\n\n\n<p>De plus, en combinant <a href=\"https:\/\/wikiform.fr\/codespace\/demander-confirmation-en-javascript-tutoriel\" rel=\"noopener\" target=\"_blank\">les bo\u00eetes de dialogue<\/a> avec les boucles, vous pouvez cr\u00e9er des scripts interactifs et engageants. Il est \u00e9galement int\u00e9ressant de comprendre comment utiliser des <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-flechees-en-javascript-guide\" rel=\"noopener\" target=\"_blank\">fonctions fl\u00e9ch\u00e9es<\/a> dans le cadre de vos it\u00e9rations pour rendre votre code plus concis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exercices Pratiques avec les Boucles while<\/h3>\n\n\n\n<p>Pour consolider vos connaissances, il est utile de faire des exercices pratiques. Essayez d'impl\u00e9menter diff\u00e9rentes <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-en-javascript-explications\" rel=\"noopener\" target=\"_blank\">conditions ternaires<\/a> au sein de vos boucles pour voir comment elles affectent le flux de votre programme. Vous pouvez \u00e9galement explorer les nuances des <a href=\"https:\/\/wikiform.fr\/codespace\/declaration-des-variables-en-javascript-let-const-var\" rel=\"noopener\" target=\"_blank\">d\u00e9clarations de variables<\/a> avec <code>let<\/code>, <code>const<\/code> et <code>var<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Boucles while en Production<\/h3>\n\n\n\n<p>Dans un contexte de production, les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-of-en-javascript-explications\" rel=\"noopener\" target=\"_blank\">boucles for...of<\/a> sont souvent utilis\u00e9es pour parcourir des objets et parcourir des \u00e9l\u00e9ments dans des collections. Pour des applications plus complexes, les boucles while peuvent \u00eatre combin\u00e9es avec la gestion de <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\" rel=\"noopener\" target=\"_blank\">la gestion des exceptions<\/a> pour garantir que votre code se comporte comme pr\u00e9vu m\u00eame en cas d'erreurs inattendues.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>boucles while JavaScript<\/strong> sont un outil puissant pour ex\u00e9cuter des it\u00e9rations dans votre code de mani\u00e8re contr\u00f4l\u00e9e et efficace. En combinant les boucles while avec des conditions complexes et des structures de donn\u00e9es, vous pouvez cr\u00e9er des scripts flexibles et dynamiques. Pour plus d'apprentissage sur JavaScript, consultez notre <a href=\"https:\/\/example.com\" target=\"_blank\" rel=\"noopener\">cours complet sur JavaScript<\/a>. Continuez \u00e0 explorer et tester pour ma\u00eetriser pleinement cette fonctionnalit\u00e9.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Formation JavaScript avec Learnify\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Boucles while JavaScript sont essentielles pour cr\u00e9er des it\u00e9rations dans votre code afin de r\u00e9p\u00e9ter des actions jusqu&rsquo;\u00e0 ce qu&rsquo;une certaine condition soit remplie. Ma\u00eetriser&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2853,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5578"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5578\/revisions"}],"predecessor-version":[{"id":5579,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5578\/revisions\/5579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2853"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}