{"id":5580,"date":"2024-08-28T23:04:28","date_gmt":"2024-08-28T23:04:28","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boucles-do-while-en-javascript-tutoriel\/"},"modified":"2025-01-07T16:12:29","modified_gmt":"2025-01-07T16:12:29","slug":"boucles-do-while-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boucles-do-while-en-javascript-tutoriel\/","title":{"rendered":"5.9 Boucles do while en JavaScript : Tutoriel"},"content":{"rendered":"\n\n\n<p><strong>Les boucles do while en JavaScript<\/strong> sont un outil essentiel pour ex\u00e9cuter du code de mani\u00e8re r\u00e9p\u00e9titive tout en garantissant qu&rsquo;au moins une ex\u00e9cution a lieu, ind\u00e9pendamment de la condition de boucle. Comprendre comment utiliser les <strong>boucles do while en JavaScript<\/strong> peut am\u00e9liorer la logique de vos scripts et optimiser vos programmes. Apprenons comment elles fonctionnent et comment les impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux Boucles do while en JavaScript<\/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\/658882372?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>do while<\/code> en JavaScript est une structure de contr\u00f4le qui ex\u00e9cute un code une premi\u00e8re fois, puis continue \u00e0 l&rsquo;ex\u00e9cuter tant que la condition sp\u00e9cifi\u00e9e reste vraie. Cette boucle est utile dans les sc\u00e9narios o\u00f9 vous devez garantir qu&rsquo;au moins une it\u00e9ration a lieu, quelle que soit la condition initiale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base de la Boucle <code>do while<\/code><\/h3>\n\n\n\n<p>La syntaxe de la boucle <code>do while<\/code> est simple \u00e0 retenir. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let i = 0;\ndo {\n  console.log(i);\n  i++;\n} while (i < 5);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cas d'Utilisation Classiques<\/h3>\n\n\n\n<p>Les boucles <code>do while<\/code> sont souvent utilis\u00e9es dans des cas o\u00f9 l'on souhaite effectuer une action au moins une fois, puis r\u00e9p\u00e9ter cette action tant qu'une condition est remplie. Par exemple, pour \u00e9crire un programme qui demande \u00e0 l'utilisateur de saisir un nombre jusqu'\u00e0 ce qu'un nombre valide soit donn\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let number;\ndo {\n  number = prompt(\"Entrez un nombre sup\u00e9rieur \u00e0 10:\");\n} while (number <= 10);\nalert(`Vous avez entr\u00e9: ${number}`);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles <code>do while<\/code> avec Tableaux<\/h3>\n\n\n\n<p>Les boucles <code>do while<\/code> peuvent \u00e9galement \u00eatre utilis\u00e9es pour parcourir des \u00e9l\u00e9ments d'un tableau. Prenons un exemple o\u00f9 nous voulons afficher tous les \u00e9l\u00e9ments d'un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = [\"pomme\", \"banane\", \"orange\"];\nlet index = 0;\ndo {\n  console.log(fruits[index]);\n  index++;\n} while (index < fruits.length);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles <code>do while<\/code> et Les Conditions Complexes<\/h3>\n\n\n\n<p>Les conditions utilis\u00e9es dans une boucle <code>do while<\/code> peuvent \u00eatre aussi complexes que n\u00e9cessaire. Par exemple, vous pouvez combiner plusieurs conditions en utilisant des op\u00e9rateurs logiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let count = 0;\nconst maxTries = 3;\ndo {\n  userInput = prompt(\"Entrez 'oui' pour continuer:\");\n  count++;\n} while (userInput !== 'oui' && count < maxTries);\nif (count === maxTries) {\n  alert(\"Nombre maximum de tentatives atteint.\");\n} else {\n  alert(\"Merci pour votre confirmation.\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Boucles <code>do while<\/code> pour le Traitement des Donn\u00e9es<\/h3>\n\n\n\n<p>Ces boucles sont \u00e9galement id\u00e9ales pour le traitement de donn\u00e9es, notamment lorsqu'il s'agit de lire ou manipuler des fichiers ligne par ligne ou d'it\u00e9rer des op\u00e9rations jusqu'\u00e0 l'obtention d'un r\u00e9sultat sp\u00e9cifique.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let results = [];\nlet value;\ndo {\n  value = Math.random();\n  results.push(value);\n} while(value < 0.9);\nconsole.log(\"Les valeurs g\u00e9n\u00e9r\u00e9es sont:\", results);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Boucles <code>do while<\/code><\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des boucles <code>do while<\/code>, voici quelques exemples avanc\u00e9s qui illustrent leur application dans des contextes plus complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des Jeux Vid\u00e9os<\/h4>\n\n\n\n<p>Imaginons un jeu o\u00f9 l'utilisateur doit deviner un nombre. La boucle <code>do while<\/code> peut \u00eatre utilis\u00e9e pour garantir que le jeu se poursuit jusqu'\u00e0 ce que l'utilisateur devine correctement le nombre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const secretNumber = 7;\nlet guess;\n\ndo {\n  guess = parseInt(prompt(\"Devinez le nombre entre 1 et 10:\"));\n} while (guess !== secretNumber);\n\nalert(\"Bravo, vous avez devin\u00e9 le nombre!\");\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Robot de Conversation<\/h4>\n\n\n\n<p>Les boucles <code>do while<\/code> peuvent \u00e9galement \u00eatre utilis\u00e9es pour cr\u00e9er un robot de conversation basique qui continue de r\u00e9pondre \u00e0 certaines commandes jusqu'\u00e0 ce que l'utilisateur d\u00e9cide de quitter :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let message;\n\ndo {\n  message = prompt(\"Dites quelque chose au robot (tapez 'au revoir' pour quitter):\");\n  if (message !== 'au revoir') {\n    alert(`Le robot a r\u00e9pondu : Vous avez dit '${message}'`);\n  }\n} while (message !== 'au revoir');\n\nalert(\"Conversation termin\u00e9e.\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles do while JavaScript: Ressources Externes<\/h3>\n\n\n\n<p>Pour poursuivre votre apprentissage sur les boucles <code>do while<\/code> et autres structures de contr\u00f4le en JavaScript, vous pouvez consulter des ressources externes telles que le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Boucles_et_it\u00e9rations\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a>. Des plateformes comme <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> et <a href=\"https:\/\/www.udacity.com\/\" target=\"_blank\" rel=\"noopener\">Udacity<\/a> offrent des cours en ligne structur\u00e9s qui approfondissent l'utilisation des boucles et autres fonctionnalit\u00e9s de JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les boucles <strong><code>do while<\/code> en JavaScript<\/strong> sont une technique puissante pour ex\u00e9cuter une section de code plusieurs fois avec l'assurance d'une premi\u00e8re ex\u00e9cution. Elles sont particuli\u00e8rement utiles pour les sc\u00e9narios n\u00e9cessitant une action initiale avant les v\u00e9rifications de condition. Continuez \u00e0 explorer les boucles <code>do while<\/code> et d'autres structures de contr\u00f4le pour ma\u00eetriser pleinement JavaScript et optimiser vos programmes. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/example.com\/advanced-javascript\" target=\"_blank\" rel=\"noopener\">les fonctionnalit\u00e9s avanc\u00e9es de JavaScript<\/a>. Pour apprendre \u00e0 cr\u00e9er une application web compl\u00e8te avec JavaScript, lisez notre <a href=\"https:\/\/example.com\/web-app-tutorial\" target=\"_blank\" rel=\"noopener\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<p>Pour ceux qui cherchent \u00e0 en savoir plus sur les bases de JavaScript, consultez nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu'est-ce que JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/declaration-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">D\u00e9claration des variables en JavaScript<\/a>. D'autres sujets avanc\u00e9s tels que <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">la concat\u00e9nation en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">l'utilisation du d\u00e9bogueur en JavaScript<\/a> sont aussi disponibles. Pour une utilisation optimale de votre \u00e9diteur de code, explorez <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\" target=\"_blank\" rel=\"noopener\">VS Code pour JavaScript<\/a>.<\/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=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les boucles do while en JavaScript sont un outil essentiel pour ex\u00e9cuter du code de mani\u00e8re r\u00e9p\u00e9titive tout en garantissant qu&rsquo;au moins une ex\u00e9cution a&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5580","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\/5580","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=5580"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5580\/revisions"}],"predecessor-version":[{"id":6100,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5580\/revisions\/6100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2848"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}