{"id":5564,"date":"2024-08-28T22:32:20","date_gmt":"2024-08-28T22:32:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-condition-en-javascript\/"},"modified":"2024-08-28T22:32:23","modified_gmt":"2024-08-28T22:32:23","slug":"qu-est-ce-qu-une-condition-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-condition-en-javascript\/","title":{"rendered":"5.1 Qu&rsquo;est-ce qu&rsquo;une Condition en JavaScript ?"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Condition JavaScript:<\/strong> qu&rsquo;est-ce qu&rsquo;une Condition en JavaScript ? C&rsquo;est une question fondamentale que tout d\u00e9veloppeur en herbe doit ma\u00eetriser. Les conditions en JavaScript sont essentielles pour prendre des d\u00e9cisions dans le code. Comprendre comment elles fonctionnent et comment les impl\u00e9menter vous permet de rendre vos scripts plus dynamiques et interactifs. Apprenons les bases des conditions en JavaScript \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Conditions 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\/658880267?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 condition en JavaScript permet d&rsquo;ex\u00e9cuter des segments de code sp\u00e9cifiques selon que certaines conditions sont vraies ou fausses. Cela se fait principalement \u00e0 l&rsquo;aide des structures <code>if<\/code>, <code>else if<\/code>, et <code>else<\/code>. Apprenons comment les utiliser efficacement. Pour plus de d\u00e9tails, veuillez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">guide sur JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation basique de <code>if<\/code><\/h3>\n\n\n\n<p>La structure conditionnelle <code>if<\/code> permet d&rsquo;ex\u00e9cuter un bloc de code si et seulement si une condition est vraie. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nlet score = 75;\n\nif (score >= 60) {\n  console.log(\"F\u00e9licitations, vous avez r\u00e9ussi !\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Condition avec <code>else<\/code><\/h3>\n\n\n\n<p>En utilisant <code>else<\/code>, vous pouvez ex\u00e9cuter un bloc de code alternatif si la condition initiale est fausse :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nlet score = 45;\n\nif (score >= 60) {\n  console.log(\"F\u00e9licitations, vous avez r\u00e9ussi !\");\n} else {\n  console.log(\"D\u00e9sol\u00e9, vous avez \u00e9chou\u00e9. Essayez encore !\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>else if<\/code> pour Plusieurs Conditions<\/h3>\n\n\n\n<p>Le bloc <code>else if<\/code> vous permet de v\u00e9rifier plusieurs conditions avant de tomber sur une finalit\u00e9 <code>else<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nlet score = 85;\n\nif (score >= 90) {\n  console.log(\"Exceptionnel !\");\n} else if (score >= 75) {\n  console.log(\"Bien fait !\");\n} else if (score >= 60) {\n  console.log(\"R\u00e9ussi !\");\n} else {\n  console.log(\"\u00c9chec. Essayez encore.\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Conditions Ternaires pour Simplicit\u00e9<\/h3>\n\n\n\n<p>Pour les d\u00e9cisions simples, une condition ternaire peut rendre le code plus concis :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nlet score = 75;\nlet message = score >= 60 ? \"R\u00e9ussi\" : \"\u00c9chec\";\nconsole.log(message);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Conditions avec Usages R\u00e9els<\/h3>\n\n\n\n<p>Dans des applications r\u00e9elles, les conditions sont souvent utilis\u00e9es pour des interactions utilisateur et la logique d&rsquo;application. Par exemple, v\u00e9rifier si un utilisateur est connect\u00e9 : <\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nlet isUserLoggedIn = true;\n\nif (isUserLoggedIn) {\n  console.log(\"Bienvenue !\");\n} else {\n  console.log(\"Veuillez vous connecter.\");\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Validation des Formulaires<\/h4>\n\n\n\n<p>La validation des formulaires est un autre usage courant des conditions en JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nlet email = \"test@example.com\";\nlet password = \"\";\n\nif (email && password) {\n  console.log(\"Formulaire valide\");\n} else {\n  console.log(\"Veuillez remplir tous les champs.\");\n}\n<\/code><\/pre>\n\n\n\n<p>En ma\u00eetrisant les conditions en JavaScript, vous rendrez vos scripts beaucoup plus dynamiques et r\u00e9actifs aux besoins des utilisateurs. Continuez \u00e0 explorer et \u00e0 pratiquer pour perfectionner ces comp\u00e9tences.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>conditions en JavaScript<\/strong> sont le pilier des scripts dynamiques et interactifs. Elles permettent de prendre des d\u00e9cisions en temps r\u00e9el et de rendre vos applications plus r\u00e9actives et flexibles. En comprenant et en utilisant diverses structures conditionnelles, vous pouvez am\u00e9liorer significativement la logique et la fonctionnalit\u00e9 de vos applications web. Pour plus de tutoriels sur JavaScript, consultez notre cours complet sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour continuer votre apprentissage, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-fonction-en-javascript\">tutoriel sur les fonctions en JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour plus d&rsquo;exemples sur JavaScript, n&rsquo;oubliez pas de consulter nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">qu&rsquo;est-ce que JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">les meilleurs outils pour JavaScript<\/a>. Vous pouvez aussi lire sur <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\">la concat\u00e9nation en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">les extensions pour JavaScript<\/a> pour enrichir vos savoirs.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/145\" 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","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Condition JavaScript: qu&rsquo;est-ce qu&rsquo;une Condition en JavaScript ? C&rsquo;est une question fondamentale que tout d\u00e9veloppeur en herbe doit ma\u00eetriser. Les conditions en JavaScript sont&#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-5564","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\/5564","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=5564"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5564\/revisions"}],"predecessor-version":[{"id":5565,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5564\/revisions\/5565"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}