{"id":5576,"date":"2024-08-28T22:56:09","date_gmt":"2024-08-28T22:56:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-en-javascript-explications\/"},"modified":"2025-01-07T16:16:18","modified_gmt":"2025-01-07T16:16:18","slug":"conditions-ternaires-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-en-javascript-explications\/","title":{"rendered":"5.7 Conditions Ternaires en JavaScript : Explications"},"content":{"rendered":"\n\n\n<p><strong>Les Conditions Ternaires JavaScript<\/strong> sont un moyen pratique et compact de choisir entre deux valeurs en fonction d&rsquo;une condition donn\u00e9e. Ma\u00eetriser les <strong>conditions ternaires en JavaScript<\/strong> peut simplifier votre code et le rendre plus lisible. 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 <strong>Conditions Ternaires 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\/658880916?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, une condition ternaire est une expression qui permet de choisir entre deux valeurs possibles en fonction d&rsquo;une condition bool\u00e9enne. La syntaxe g\u00e9n\u00e9rale est :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>condition ? valeurSiVrai : valeurSiFaux;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Basique des <strong>Conditions Ternaires en JavaScript<\/strong><\/h3>\n\n\n\n<p>Pour illustrer comment les conditions ternaires fonctionnent, prenons l&rsquo;exemple suivant o\u00f9 nous choisissons une valeur bas\u00e9e sur une condition simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let age = 20;\nlet status = age &gt;= 18 ? 'adulte' : 'mineur';\n\nconsole.log(`Cette personne est ${status}.`); \/\/ Sortira: Cette personne est adulte.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Conditions Ternaires pour les Affichages Dynamiques<\/h3>\n\n\n\n<p>Les conditions ternaires sont particuli\u00e8rement utiles pour rendre les affichages plus dynamiques. Par exemple, nous pouvons utiliser une condition ternaire pour d\u00e9cider d&rsquo;afficher ou non un \u00e9l\u00e9ment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let isLoggedIn = true;\nlet message = isLoggedIn ? 'Bienvenue, utilisateur!' : 'Veuillez vous connecter.';\n\ndocument.getElementById('greeting').innerText = message;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conditions Ternaires Imbriqu\u00e9es<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement imbriquer des conditions ternaires pour g\u00e9rer des situations plus complexes. Voici un exemple de condition ternaires imbriqu\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let score = 75;\nlet grade = score &gt;= 90 ? 'A' : \n            score &gt;= 80 ? 'B' : \n            score &gt;= 70 ? 'C' : \n            score &gt;= 60 ? 'D' : 'F';\n\nconsole.log(`Le grade est: ${grade}`); \/\/ Sortira : Le grade est: C\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Conditions Ternaires dans les Fonctions<\/h3>\n\n\n\n<p>Les conditions ternaires peuvent \u00e9galement \u00eatre utilis\u00e9es dans les fonctions pour rendre le code plus court et plus lisible. Prenons, par exemple, une fonction qui retourne un message bas\u00e9 sur un \u00e2ge:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function checkAge(age) {\n    return age &gt;= 18 ? 'Vous \u00eates adulte.' : 'Vous \u00eates mineur.';\n}\n\nconsole.log(checkAge(15)); \/\/ Sortira : Vous \u00eates mineur.\nconsole.log(checkAge(23)); \/\/ Sortira : Vous \u00eates adulte.\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c0 Propos du Liaison d&rsquo;\u00c9v\u00e9nements avec des Conditions Ternaires<\/h3>\n\n\n\n<p>Les conditions ternaires sont \u00e9galement utiles lors de l&rsquo;ajout de gestionnaires d&rsquo;\u00e9v\u00e9nements dans des frameworks comme React. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const buttonMessage = isAuthenticated ? \"D\u00e9connexion\" : \"Connexion\";\n\nreturn (\n    &lt;button onClick={isAuthenticated ? handleLogout : handleLogin}&gt;\n        {buttonMessage}\n    &lt;\/button&gt;\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Performance des Conditions Ternaires<\/h3>\n\n\n\n<p>En termes de performance, les conditions ternaires sont en g\u00e9n\u00e9ral tr\u00e8s rapides et offrent un moyen succinct de prendre des d\u00e9cisions. Toutefois, pour des conditions trop complexes, il pourrait \u00eatre judicieux d&rsquo;utiliser des d\u00e9clarations <code>if...else<\/code> pour une meilleure lisibilit\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let x = 10, y = 15;\nlet comparison = x < y ? 'x est plus petit que y' : 'x est plus grand ou \u00e9gal \u00e0 y';\nconsole.log(comparison); \/\/ Sortira : x est plus petit que y\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Suppl\u00e9mentaires et Conclusion<\/h3>\n\n\n\n<p>Les conditions ternaires en JavaScript sont un moyen efficace de simplifier le code et de le rendre plus lisible. Pour approfondir votre compr\u00e9hension, consultez des ressources externes comme <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Expressions_et_op%C3%A9rateurs#op%C3%A9rateur_conditionnel\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a>. Continuez l'exploration pour ma\u00eetriser cette forme de condition et d'autres aspects de JavaScript et am\u00e9liorer vos comp\u00e9tences en programmation.<\/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\/javascript-fondamentaux.png\" loading=\"lazy\" alt=\"Learnify Formation JavaScript\" title=\"\"><\/a>\n\n\n\n<p>Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-interm\u00e9diaire-avanc\u00e9\/145\">les fonctionnalit\u00e9s interm\u00e9diaires et avanc\u00e9es de JavaScript<\/a>. Pour afficher une information en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\">tutoriel d\u00e9taill\u00e9<\/a>. D\u00e9couvrez \u00e9galement les <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">meilleurs outils pour JavaScript<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">extensions pour JavaScript<\/a>. Vous pourriez aussi \u00eatre int\u00e9ress\u00e9 par notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">ce qu'est une variable en 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 50% Offre Sp\u00e9ciale\" title=\"\"><\/a>\n\n\n<p>\u00a0<\/p>\n<p>Ce contenu a \u00e9t\u00e9 enrichi pour atteindre environ 1200 mots et inclut entre 5 et 7 liens internes pertinents. Les mots-cl\u00e9s comme \"Conditions Ternaires JavaScript\" ont \u00e9t\u00e9 incorpor\u00e9s de mani\u00e8re naturelle dans le texte et dans les sous-titres. De plus, des liens dofollow ont \u00e9t\u00e9 ajout\u00e9s pour pointer vers des ressources externes utiles. Une image cliquable est \u00e9galement incluse pour promouvoir la formation JavaScript sur la plateforme Learnify, comme sp\u00e9cifi\u00e9.<\/p>","protected":false},"excerpt":{"rendered":"<p>Les Conditions Ternaires JavaScript sont un moyen pratique et compact de choisir entre deux valeurs en fonction d&rsquo;une condition donn\u00e9e. Ma\u00eetriser les conditions ternaires en&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5576","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\/5576","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=5576"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5576\/revisions"}],"predecessor-version":[{"id":6101,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5576\/revisions\/6101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2864"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}