{"id":5582,"date":"2024-08-28T23:08:42","date_gmt":"2024-08-28T23:08:42","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\/"},"modified":"2024-08-28T23:08:46","modified_gmt":"2024-08-28T23:08:46","slug":"boucles-for-en-javascript-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\/","title":{"rendered":"5.10 Boucles for en JavaScript : Utilisation"},"content":{"rendered":"\n<p><strong>Boucles for en JavaScript<\/strong> : Une des structures de contr\u00f4le les plus fondamentales et puissantes en programmation, les boucles <strong>for<\/strong> en JavaScript permettent de r\u00e9p\u00e9ter l&rsquo;ex\u00e9cution de blocs de code selon un ensemble de conditions sp\u00e9cifiques. Ma\u00eetriser l&rsquo;utilisation des boucles <strong>for<\/strong> est essentiel pour manipuler les collections de donn\u00e9es telles que les tableaux et les objets, faciliter les op\u00e9rations r\u00e9p\u00e9titives, et optimiser votre flux de travail de codage. Plongeons ensemble dans les m\u00e9canismes des boucles for et apprenons comment les impl\u00e9menter efficacement \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Boucles for 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\/658882406?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\/javascript-les-fondamentaux\/142')\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, la boucle <code>for<\/code> est utilis\u00e9e pour ex\u00e9cuter une section de code un certain nombre de fois, ou pour it\u00e9rer sur des objets tels que des tableaux. Elle se compose de trois parties principales : l&rsquo;initialisation, la condition, et l&rsquo;incr\u00e9ment. Voici un exemple simple de boucle <code>for<\/code> qui affiche les nombres de 1 \u00e0 5 dans la console :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Basique des Boucles for en JavaScript<\/h3>\n\n\n\n<p>Commen\u00e7ons par un exemple basique de boucle <code>for<\/code>. La syntaxe est la suivante : <code>for (initialisation; condition; incr\u00e9mentation) { ... }<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Boucle de 1 \u00e0 5\nfor (let i = 1; i <= 5; i++) {\n    console.log(i);\n}\n\/\/ Produira :\n\/\/ 1\n\/\/ 2\n\/\/ 3\n\/\/ 4\n\/\/ 5\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Boucles for pour It\u00e9rer sur des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\" target=\"_blank\" rel=\"noopener\">Tableaux en JavaScript<\/a><\/h3>\n\n\n\n<p>Une utilisation courante des boucles <code>for<\/code> en JavaScript est l'it\u00e9ration sur les \u00e9l\u00e9ments d'un tableau. Voyons comment parcourir les \u00e9l\u00e9ments d'un tableau de fruits et les afficher :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Tableau de fruits\nconst fruits = [\"Pomme\", \"Banane\", \"Cerise\", \"Mangue\"];\n\n\/\/ It\u00e9rer sur le tableau et afficher chaque fruit\nfor (let i = 0; i < fruits.length; i++) {\n    console.log(fruits[i]);\n}\n\/\/ Produira :\n\/\/ Pomme\n\/\/ Banane\n\/\/ Cerise\n\/\/ Mangue\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Boucles for avec des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\" target=\"_blank\" rel=\"noopener\">Objets en JavaScript<\/a><\/h3>\n\n\n\n<p>Pour it\u00e9rer sur les propri\u00e9t\u00e9s d'un objet, on utilise g\u00e9n\u00e9ralement la boucle <code>for...in<\/code>. Voici un exemple de son utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Objet\nconst utilisateur = {\n    nom: \"Alice\",\n    age: 30,\n    profession: \"D\u00e9veloppeur\"\n};\n\n\/\/ It\u00e9rer sur les propri\u00e9t\u00e9s de l'objet\nfor (let cle in utilisateur) {\n    console.log(`${cle}: ${utilisateur[cle]}`);\n}\n\/\/ Produira :\n\/\/ nom: Alice\n\/\/ age: 30\n\/\/ profession: D\u00e9veloppeur\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Boucles for avec d'autres Structures de Contr\u00f4le<\/h3>\n\n\n\n<p>Les boucles <code>for<\/code> peuvent \u00eatre combin\u00e9es avec d'autres structures de contr\u00f4le telles que les conditions <code>if<\/code>. Par exemple, v\u00e9rifions si un nombre est pair ou impair lors de l'it\u00e9ration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ V\u00e9rifier si les nombres de 1 \u00e0 10 sont pairs ou impairs\nfor (let i = 1; i <= 10; i++) {\n    if (i % 2 === 0) {\n        console.log(`${i} est pair`);\n    } else {\n        console.log(`${i} est impair`);\n    }\n}\n\/\/ Produira :\n\/\/ 1 est impair\n\/\/ 2 est pair\n\/\/ 3 est impair\n\/\/ 4 est pair\n\/\/ 5 est impair\n\/\/ 6 est pair\n\/\/ 7 est impair\n\/\/ 8 est pair\n\/\/ 9 est impair\n\/\/ 10 est pair\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Boucles for avec des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\" target=\"_blank\" rel=\"noopener\">Fonctions en JavaScript<\/a><\/h3>\n\n\n\n<p>Les boucles <code>for<\/code> peuvent \u00eatre utilis\u00e9es pour ex\u00e9cuter des fonctions de mani\u00e8re r\u00e9p\u00e9t\u00e9e. Par exemple, nous pouvons cr\u00e9er une fonction pour doubler un nombre, puis utiliser une boucle <code>for<\/code> pour appliquer cette fonction \u00e0 chaque \u00e9l\u00e9ment d'un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction pour doubler un nombre\nfunction doubler(nombre) {\n    return nombre * 2;\n}\n\n\/\/ Tableau de nombres\nconst nombres = [1, 2, 3, 4, 5];\n\n\/\/ Utiliser une boucle for pour doubler chaque nombre dans le tableau\nfor (let i = 0; i < nombres.length; i++) {\n    console.log(doubler(nombres[i]));\n}\n\/\/ Produira :\n\/\/ 2\n\/\/ 4\n\/\/ 6\n\/\/ 8\n\/\/ 10\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Boucles for avec des Boucles Imbriqu\u00e9es<\/h3>\n\n\n\n<p>Les boucles imbriqu\u00e9es sont des boucles <code>for<\/code> \u00e0 l'int\u00e9rieur d'une autre boucle <code>for<\/code>. Cela est utile pour traiter des structures de donn\u00e9es multidimensionnelles comme les matrices. Par exemple, parcourons une matrice 2D :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Matrice 2D\nconst matrice = [\n    [1, 2, 3],\n    [4, 5, 6],\n    [7, 8, 9]\n];\n\n\/\/ Boucle imbriqu\u00e9e pour parcourir la matrice\nfor (let i = 0; i < matrice.length; i++) {\n    for (let j = 0; j < matrice[i].length; j++) {\n        console.log(`Matrice[${i}][${j}] = ${matrice[i][j]}`);\n    }\n}\n\/\/ Produira :\n\/\/ Matrice[0][0] = 1\n\/\/ Matrice[0][1] = 2\n\/\/ Matrice[0][2] = 3\n\/\/ Matrice[1][0] = 4\n\/\/ Matrice[1][1] = 5\n\/\/ Matrice[1][2] = 6\n\/\/ Matrice[2][0] = 7\n\/\/ Matrice[2][1] = 8\n\/\/ Matrice[2][2] = 9\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Boucles for et le <a href=\"https:\/\/wikiform.fr\/codespace\/debogage-en-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">D\u00e9bogage<\/a><\/h3>\n\n\n\n<p>Lorsqu'on travaille avec des boucles <code>for<\/code>, il est crucial de ma\u00eetriser <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\" target=\"_blank\" rel=\"noopener\">l'utilisation du d\u00e9bogueur en JavaScript<\/a>. Le d\u00e9bogage permet de suivre l'ex\u00e9cution du code it\u00e9ratif \u00e9tape par \u00e9tape, facilitant ainsi l'identification des erreurs et am\u00e9liorant la compr\u00e9hension des flux de donn\u00e9es. Vous pouvez utiliser des instructions telles que <code>console.log<\/code> pour afficher les valeurs des variables durant les it\u00e9rations.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation du d\u00e9bogueur\nfor (let i = 0; i < 5; i++) {\n    console.log(`i = ${i}`);\n    debugger; \/\/ Place un point d'arr\u00eat pour v\u00e9rifier les variables\n}\n\/\/ Vous pouvez analyser le comportement \u00e0 chaque it\u00e9ration\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>boucles for en JavaScript<\/strong> sont une technique indispensable pour optimiser vos scripts et manipuler des donn\u00e9es de mani\u00e8re efficace. Que ce soit pour it\u00e9rer sur des tableaux, des objets, ou des matrices, les boucles <code>for<\/code> offrent une flexibilit\u00e9 et une puissance exceptionnelle. Continuez \u00e0 explorer les boucles for et d'autres structures de contr\u00f4le pour parfaire vos comp\u00e9tences en JavaScript. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Il peut aussi \u00eatre b\u00e9n\u00e9fique d'examiner les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-in-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">boucles for...in en JavaScript<\/a> et les comparaisons avec les <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-foreach-en-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">boucles forEach<\/a>. D\u00e9couvrez \u00e9galement notre <a href=\"https:\/\/wikiform.fr\/codespace\/guide-complet-pour-apprendre-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">guide complet pour apprendre 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-WEB-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Web Offre 50%\" title=\"\"><\/a>\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---\n\nCe tutoriel devrait fournir \u00e0 vos lecteurs un bon point de d\u00e9part pour comprendre et utiliser les boucles for en JavaScript. N'h\u00e9sitez pas \u00e0 ajouter plus de contenus pratiques selon les retours et les besoins de votre audience pour am\u00e9liorer leur exp\u00e9rience d'apprentissage. Pour","protected":false},"excerpt":{"rendered":"<p>Boucles for en JavaScript : Une des structures de contr\u00f4le les plus fondamentales et puissantes en programmation, les boucles for en JavaScript permettent de r\u00e9p\u00e9ter&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5582","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\/5582","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=5582"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5582\/revisions"}],"predecessor-version":[{"id":5583,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5582\/revisions\/5583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2850"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}