{"id":5566,"date":"2024-08-28T22:36:24","date_gmt":"2024-08-28T22:36:24","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\/"},"modified":"2024-08-28T22:36:27","modified_gmt":"2024-08-28T22:36:27","slug":"conditions-if-else-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\/","title":{"rendered":"5.2 Conditions if else en JavaScript : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>If else JavaScript<\/strong> joue un r\u00f4le crucial dans la gestion du flux logique de vos applications. Comprendre comment mettre en place et utiliser les <strong>conditions if else en JavaScript<\/strong> peut consid\u00e9rablement am\u00e9liorer la logique et la fonctionnalit\u00e9 de votre code. Apprenons comment elles fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>conditions if else 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\/658880333?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>Les conditions if else en JavaScript permettent de contr\u00f4ler le flux d&rsquo;ex\u00e9cution du code en testant si une condition est vraie ou fausse. Ces conditions jouent un r\u00f4le crucial pour prendre des d\u00e9cisions logiques dans votre programme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La Construction de Base : if<\/h3>\n\n\n\n<p>La construction la plus basique de la conditionnelle en JavaScript est l&rsquo;instruction <code>if<\/code>. Elle permet d&rsquo;ex\u00e9cuter un bloc de code si une condition sp\u00e9cifi\u00e9e est vraie. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (condition) {\n    \/\/ code \u00e0 ex\u00e9cuter si la condition est vraie\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Alternative : else<\/h3>\n\n\n\n<p>Parfois, vous voudrez d\u00e9finir une alternative au cas o\u00f9 la condition est fausse. Vous pouvez utiliser l&rsquo;instruction <code>else<\/code> pour g\u00e9rer cette logique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (condition) {\n    \/\/ code \u00e0 ex\u00e9cuter si la condition est vraie\n} else {\n    \/\/ code \u00e0 ex\u00e9cuter si la condition est fausse\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Empiler des Conditions : else if<\/h3>\n\n\n\n<p>Pour tester plusieurs conditions, vous pouvez utiliser l&rsquo;instruction <code>else if<\/code>. Elle permet de v\u00e9rifier d&rsquo;autres conditions si les pr\u00e9c\u00e9dentes sont fausses :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>if (condition1) {\n    \/\/ code \u00e0 ex\u00e9cuter si condition1 est vraie\n} else if (condition2) {\n    \/\/ code \u00e0 ex\u00e9cuter si condition2 est vraie\n} else {\n    \/\/ code \u00e0 ex\u00e9cuter si aucune des conditions n'est vraie\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Conditions If Else dans des Fonctions<\/h3>\n\n\n\n<p>Les conditions if else sont souvent utilis\u00e9es dans les fonctions pour ex\u00e9cuter diff\u00e9rentes logiques bas\u00e9es sur les arguments ou les retours des fonctions. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function checkAge(age) {\n    if (age < 18) {\n        return \"Mineur\";\n    } else if (age >= 18 && age < 65) {\n        return \"Adulte\";\n    } else {\n        return \"S\u00e9nior\";\n    }\n}\n\nconsole.log(checkAge(20)); \/\/ \"Adulte\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d'Utilisation des Conditions If Else<\/h3>\n\n\n\n<p>Voyons maintenant quelques exemples avanc\u00e9s qui illustrent la flexibilit\u00e9 et la puissance des conditions if else en JavaScript.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans les Boucles<\/h4>\n\n\n\n<p>Les conditions if else peuvent \u00eatre tr\u00e8s utiles dans les boucles pour contr\u00f4ler l'ex\u00e9cution bas\u00e9e sur des variables de boucle :<\/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        console.log(i + \" est pair.\");\n    } else {\n        console.log(i + \" est impair.\");\n    }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">V\u00e9rification de l'\u00c9tat d'Objet<\/h4>\n\n\n\n<p>En JavaScript, les conditions if else peuvent analyser les \u00e9tats des objets, en v\u00e9rifiant les propri\u00e9t\u00e9s et en prenant des d\u00e9cisions bas\u00e9es sur ces propri\u00e9t\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let user = {\n    name: \"Alice\",\n    age: 25,\n    isMember: true\n};\n\nif (user.isMember) {\n    console.log(user.name + \" est un membre.\");\n} else {\n    console.log(user.name + \" n'est pas un membre.\");\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des Erreurs en Temps R\u00e9el<\/h4>\n\n\n\n<p>Vous pouvez aussi utiliser des conditions if else pour g\u00e9rer les erreurs en temps r\u00e9el, en proposant des messages ou des actions correctives appropri\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function processOrder(order) {\n    if (!order.valid) {\n        console.log(\"La commande n'est pas valide.\");\n    } else if (order.stock <= 0) {\n        console.log(\"Le produit est en rupture de stock.\");\n    } else {\n        console.log(\"Commande trait\u00e9e pour \" + order.product);\n    }\n}\n\nlet order = {\n    valid: true,\n    stock: 3,\n    product: \"Livre\"\n};\n\nprocessOrder(order); \/\/ \"Commande trait\u00e9e pour Livre\"<\/code><\/pre>\n\n\n\n<p>Pour approfondir votre compr\u00e9hension des conditions if else, vous pouvez consulter des ressources externes comme le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Expressions_et_Op%C3%A9rateurs\" rel=\"dofollow noopener\" target=\"_blank\">Guide des expressions et op\u00e9rateurs de MDN<\/a> ou suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\/\" rel=\"dofollow noopener\" target=\"_blank\">Coursera<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>conditions if else en JavaScript<\/strong> sont essentielles pour cr\u00e9er des programmes logiquement robustes et dynamiques. Elles permettent de d\u00e9cider du flux d'ex\u00e9cution bas\u00e9 sur diff\u00e9rentes conditions, rendant votre code plus flexible et interactif. Continuez \u00e0 explorer JavaScript et \u00e0 pratiquer l'utilisation des conditions if else dans vos projets pour ma\u00eetriser cette fonctionnalit\u00e9. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-interm\u00e9diaire-avanc\u00e9\/150\" target=\"_blank\" rel=\"noopener\">les fonctionnalit\u00e9s interm\u00e9diaires et avanc\u00e9es de JavaScript<\/a>. Pour apprendre \u00e0 cr\u00e9er des fonctions en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-des-fonctions-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel d\u00e9taill\u00e9<\/a>. De plus, vous pouvez en savoir plus sur l'<a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">utilisation des conditions ternaires<\/a> ou consulter notre guide pratique pour <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">comprendre les boucles for en JavaScript<\/a>. N'oubliez pas de d\u00e9couvrir plus d'informations sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">ce qu'est JavaScript<\/a> et son utilisation g\u00e9n\u00e9rale.<\/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```","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html If else JavaScript joue un r\u00f4le crucial dans la gestion du flux logique de vos applications. Comprendre comment mettre en place et utiliser les&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5566","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\/5566","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=5566"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5566\/revisions"}],"predecessor-version":[{"id":5567,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5566\/revisions\/5567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2862"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}