{"id":5586,"date":"2024-08-28T23:16:04","date_gmt":"2024-08-28T23:16:04","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-break-et-continue-en-javascript\/"},"modified":"2024-08-28T23:16:07","modified_gmt":"2024-08-28T23:16:07","slug":"utiliser-break-et-continue-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-break-et-continue-en-javascript\/","title":{"rendered":"5.12 Utiliser break et continue en JavaScript"},"content":{"rendered":"\n<p><strong>Utiliser break et continue en JavaScript<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur souhaitant ma\u00eetriser le contr\u00f4le de flux dans ses scripts. Apprendre comment et quand utiliser ces instructions peut am\u00e9liorer consid\u00e9rablement l&rsquo;efficacit\u00e9 et la clart\u00e9 de votre code. Explorons ensemble le fonctionnement de <strong>break<\/strong> et <strong>continue<\/strong> en JavaScript, \u00e0 travers des exemples pratiques et clairs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>instructions break et continue 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\/658882580?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>En JavaScript, les instructions <strong>break<\/strong> et <strong>continue<\/strong> sont utilis\u00e9es pour contr\u00f4ler le flux des boucles <code>for<\/code>, <code>while<\/code>, et <code>do...while<\/code>. L&rsquo;instruction <strong>break<\/strong> permet de quitter pr\u00e9matur\u00e9ment une boucle, tandis que <strong>continue<\/strong> saute \u00e0 l&rsquo;it\u00e9ration suivante de la boucle en cours. Comprendre comment les utiliser peut rendre votre code plus efficace et lisible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <strong>break<\/strong> pour interrompre une boucle<\/h3>\n\n\n\n<p>Break continue JavaScript est souvent utilis\u00e9 pour arr\u00eater une boucle lorsqu&rsquo;une condition particuli\u00e8re est rencontr\u00e9e. Cela peut \u00eatre utile pour \u00e9viter des it\u00e9rations inutiles et optimiser les performances. Voici un exemple concret :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>for (let i = 0; i < 10; i++) {\n    if (i === 5) {\n        break; \/\/ Interrompt la boucle quand i vaut 5\n    }\n    console.log(i);\n}\n\/\/ Sortie: 0, 1, 2, 3, 4\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <strong>continue<\/strong> pour sauter une it\u00e9ration<\/h3>\n\n\n\n<p>Break continue JavaScript permet de sauter l'it\u00e9ration en cours d'une boucle et de passer imm\u00e9diatement \u00e0 la suivante. Cela peut \u00eatre utile pour ignorer certaines conditions sp\u00e9cifi\u00e9es sans interrompre compl\u00e8tement la boucle. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>for (let i = 0; i < 10; i++) {\n    if (i % 2 === 0) {\n        continue; \/\/ Saute l'it\u00e9ration si i est pair\n    }\n    console.log(i);\n}\n\/\/ Sortie: 1, 3, 5, 7, 9\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner <strong>break<\/strong> et <strong>continue<\/strong> dans les boucles imbriqu\u00e9es<\/h3>\n\n\n\n<p>Dans les boucles imbriqu\u00e9es, il est souvent n\u00e9cessaire d'utiliser <code>break<\/code> et <code>continue<\/code> pour contr\u00f4ler la boucle interne \u00e0 des moments sp\u00e9cifiques. Voici un exemple o\u00f9 nous utilisons les deux instructions dans une boucle imbriqu\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>for (let i = 0; i < 3; i++) {\n    console.log('Boucle externe:', i);\n    for (let j = 0; j < 3; j++) {\n        if (j === 1) {\n            continue; \/\/ Saute le reste de la boucle interne quand j vaut 1\n        }\n        if (j === 2) {\n            break; \/\/ Interrompt la boucle interne quand j vaut 2\n        }\n        console.log('Boucle interne:', j);\n    }\n}\n\/\/ Sortie: \n\/\/ Boucle externe: 0\n\/\/ Boucle interne: 0\n\/\/ Boucle externe: 1\n\/\/ Boucle interne: 0\n\/\/ Boucle externe: 2\n\/\/ Boucle interne: 0\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <strong>break<\/strong> et <strong>continue<\/strong> dans les autres structures de contr\u00f4le<\/h3>\n\n\n\n<p>Bien que <strong>break<\/strong> et <strong>continue<\/strong> soient principalement utilis\u00e9s dans les boucles, <code>break<\/code> peut \u00e9galement \u00eatre utilis\u00e9 dans une instruction <code>switch<\/code> pour sortir d'un <code>case<\/code>. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let day = 2;\nswitch (day) {\n    case 1:\n        console.log('Lundi');\n        break;\n    case 2:\n        console.log('Mardi');\n        break;\n    case 3:\n        console.log('Mercredi');\n        break;\n    default:\n        console.log('Jour inconnu');\n}\n\/\/ Sortie: Mardi\n<\/code><\/pre>\n\n\n\n<p>Le mot-cl\u00e9 <code>continue<\/code> ne peut \u00eatre utilis\u00e9 que dans des boucles et non dans une instruction <code>switch<\/code> ou toute autre structure de contr\u00f4le.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes pratiques et conseils<\/h3>\n\n\n\n<p>Bien que l'utilisation de <strong>break<\/strong> et <strong>continue<\/strong> puisse simplifier le contr\u00f4le du flux, il est important de les utiliser avec parcimonie pour maintenir un code propre et lisible. Voici quelques conseils :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Utilisez <code>break<\/code> et <code>continue<\/code> quand cela am\u00e9liore r\u00e9ellement la clart\u00e9 et l'efficacit\u00e9 de votre code.<\/li>\n<li>\u00c9vitez d'utiliser ces instructions de mani\u00e8re excessive, car elles peuvent rendre le d\u00e9bogage et la maintenance plus difficiles.<\/li>\n<li>Documentez l'utilisation de <code>break<\/code> et <code>continue<\/code> dans votre code pour aider les autres d\u00e9veloppeurs \u00e0 comprendre votre logique.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les instructions <strong>break<\/strong> et <strong>continue<\/strong> en JavaScript sont des outils puissants pour contr\u00f4ler le flux d'ex\u00e9cution des boucles. En les utilisant de mani\u00e8re judicieuse, vous pouvez optimiser vos boucles, \u00e9viter des it\u00e9rations inutiles et rendre votre code plus clair et efficace. Pour continuer \u00e0 am\u00e9liorer vos comp\u00e9tences en JavaScript, n'h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a> et \u00e0 explorer d'autres tutoriels avanc\u00e9s.<\/p>\n\n\n\n<p>Pour en savoir plus sur les concepts de base du JavaScript, vous pouvez consulter d'autres articles int\u00e9ressants comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu'est-ce que JavaScript ? Explications & D\u00e9finition<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">D\u00e9clarer Des Variables en JavaScript : let, const, var<\/a>. Vous pourriez aussi \u00eatre int\u00e9ress\u00e9 par notre tutoriel complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">Boucles for en JavaScript<\/a>, les <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-flechees-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">Fonctions fl\u00e9ch\u00e9es en JavaScript<\/a> ou la section sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">G\u00e9rer Les Exceptions en JavaScript<\/a>.<\/p>\n\n\n\n<p>En utilisant break et continue de mani\u00e8re efficace, vous serez en mesure d'\u00e9crire du code optimis\u00e9 et facile \u00e0 comprendre, m\u00eame pour des projets complexes. Apprendre \u00e0 exploiter ces outils est une \u00e9tape essentielle dans le parcours de tout <a href=\"https:\/\/www.w3schools.com\/js\/js_loop_for.asp\" target=\"_blank\" rel=\"noopener\">d\u00e9veloppeur JavaScript<\/a> comp\u00e9tent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\">\n  <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">\n    <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=\"\">\n  <\/a>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Utiliser break et continue en JavaScript est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur souhaitant ma\u00eetriser le contr\u00f4le de flux dans ses scripts. Apprendre comment et&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5586","post","type-post","status-publish","format-standard","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\/5586","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=5586"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5586\/revisions"}],"predecessor-version":[{"id":5587,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5586\/revisions\/5587"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}