{"id":5570,"date":"2024-08-28T22:44:18","date_gmt":"2024-08-28T22:44:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/conditions-switch-en-javascript-tutoriel\/"},"modified":"2024-08-28T22:44:22","modified_gmt":"2024-08-28T22:44:22","slug":"conditions-switch-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/conditions-switch-en-javascript-tutoriel\/","title":{"rendered":"5.4 Conditions switch en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>Les Conditions Switch en JavaScript<\/strong> sont essentielles pour g\u00e9rer des conditions multiples et rendre votre code plus lisible et organis\u00e9. Ma\u00eetriser l&rsquo;utilisation des <strong>conditions switch<\/strong> vous permet de structurer vos scripts de mani\u00e8re plus efficace. 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 Switch 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\/658880496?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>Un switch statement en JavaScript est un outil puissant pour ex\u00e9cuter un bloc de code parmi plusieurs en fonction de la valeur d&rsquo;une expression. Voici la syntaxe de base :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base des Conditions Switch en JavaScript<\/h3>\n\n\n\n<p>Pour commencer, voyons la structure d&rsquo;un switch statement en JavaScript. La syntaxe est assez simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>switch (expression) {\n  case valeur1:\n    \/\/ instructions \u00e0 ex\u00e9cuter si expression === valeur1\n    break;\n  case valeur2:\n    \/\/ instructions \u00e0 ex\u00e9cuter si expression === valeur2\n    break;\n  \/\/ plus de cases...\n  default:\n    \/\/ instructions \u00e0 ex\u00e9cuter si aucune des valeurs ne correspond\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple de Base : Conditions Switch pour les Jours de la Semaine<\/h3>\n\n\n\n<p>Voici un exemple simplifi\u00e9 qui utilise un switch pour afficher le jour de la semaine en fonction d&rsquo;un indice :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const jour = 3;\nlet nomDuJour;\n\nswitch (jour) {\n  case 1:\n    nomDuJour = 'Lundi';\n    break;\n  case 2:\n    nomDuJour = 'Mardi';\n    break;\n  case 3:\n    nomDuJour = 'Mercredi';\n    break;\n  case 4:\n    nomDuJour = 'Jeudi';\n    break;\n  case 5:\n    nomDuJour = 'Vendredi';\n    break;\n  case 6:\n    nomDuJour = 'Samedi';\n    break;\n  case 7:\n    nomDuJour = 'Dimanche';\n    break;\n  default:\n    nomDuJour = 'Jour invalide';\n}\n\nconsole.log(nomDuJour);  \/\/ Mercredi\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Conditions Switch avec des Cha\u00eenes de Caract\u00e8res<\/h3>\n\n\n\n<p>Les switch statements peuvent \u00e9galement \u00eatre utilis\u00e9s avec des valeurs de type cha\u00eene de caract\u00e8res. Voici un exemple utilisant des mois :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const mois = 'mars';\nlet saison;\n\nswitch (mois) {\n  case 'd\u00e9cembre':\n  case 'janvier':\n  case 'f\u00e9vrier':\n    saison = 'Hiver';\n    break;\n  case 'mars':\n  case 'avril':\n  case 'mai':\n    saison = 'Printemps';\n    break;\n  case 'juin':\n  case 'juillet':\n  case 'ao\u00fbt':\n    saison = '\u00c9t\u00e9';\n    break;\n  case 'septembre':\n  case 'octobre':\n  case 'novembre':\n    saison = 'Automne';\n    break;\n  default:\n    saison = 'Mois invalide';\n}\n\nconsole.log(saison);  \/\/ Printemps\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Conditions Switch avec des Instructions Complexes<\/h3>\n\n\n\n<p>Un cas d&rsquo;utilisation plus avanc\u00e9 des switch statements consiste \u00e0 ex\u00e9cuter des ensembles de lignes de code plus complexes au lieu de simples affectations :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const action = 'enregistrer';\n\nswitch (action) {\n  case 'd\u00e9marrer':\n    console.log('Syst\u00e8me d\u00e9marr\u00e9');\n    \/\/ Plus de code pour d\u00e9marrer le syst\u00e8me\n    break;\n  case 'arr\u00eater':\n    console.log('Syst\u00e8me arr\u00eat\u00e9');\n    \/\/ Plus de code pour arr\u00eater le syst\u00e8me\n    break;\n  case 'enregistrer':\n    console.log('Donn\u00e9es enregistr\u00e9es');\n    \/\/ Plus de code pour enregistrer les donn\u00e9es\n    break;\n  default:\n    console.log('Action inconnue');\n    \/\/ Code pour g\u00e9rer les actions inconnues\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Avantages des Conditions Switch par Rapport aux If-Else<\/h3>\n\n\n\n<p>Les switch statements sont particuli\u00e8rement utiles lorsque vous devez comparer une seule variable \u00e0 de nombreuses valeurs possibles. Utiliser un switch peut rendre votre code plus lisible et simplifier la gestion des cas complexes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation d'un switch statement\nswitch (expression) {\n  case valeur1:\n    \/\/ code\n    break;\n  case valeur2:\n    \/\/ code\n    break;\n  \/\/ ...\n}\n\n\/\/ Utilisation de if-else\nif (expression === valeur1) {\n  \/\/ code\n} else if (expression === valeur2) {\n  \/\/ code\n} else if (expression === valeur3) {\n  \/\/ code\n} else {\n  \/\/ code si aucune condition n'est remplie\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Switch Statements pour G\u00e9rer les Menus<\/h3>\n\n\n\n<p>Les structures switch sont souvent utilis\u00e9es dans des sc\u00e9narios de menus o\u00f9 chaque option du menu n\u00e9cessite une action sp\u00e9cifique. Voici un exemple pour un menu d&rsquo;une application console :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const choix = '3';\n\nswitch (choix) {\n  case '1':\n    console.log('Option 1 : Voir le profil');\n    afficherProfil();\n    break;\n  case '2':\n    console.log('Option 2 : Modifier le profil');\n    modifierProfil();\n    break;\n  case '3':\n    console.log('Option 3 : D\u00e9connexion');\n    deconnexion();\n    break;\n  default:\n    console.log('Choix invalide');\n}\n\nfunction afficherProfil() {\n  console.log('Profil affich\u00e9');\n}\n\nfunction modifierProfil() {\n  console.log('Profil modifi\u00e9');\n}\n\nfunction deconnexion() {\n  console.log('D\u00e9connect\u00e9');\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Applications Avanc\u00e9es des Switch Statements<\/h3>\n\n\n\n<p>Les switch statements en JavaScript peuvent \u00eatre utilis\u00e9s dans des applications plus complexes, y compris la gestion des exceptions et la configuration des diff\u00e9rents modes de fonctionnement d&rsquo;une application. Par exemple, vous pouvez utiliser des switch statements pour configurer un syst\u00e8me de gestion des erreurs ou pour basculer entre diff\u00e9rents modes d&rsquo;affichage dans une application Web.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const mode = 'mode_fonc\u00e9';\n\nswitch (mode) {\n  case 'mode_clair':\n    activerModeClair();\n    break;\n  case 'mode_fonc\u00e9':\n    activerModeFonc\u00e9();\n    break;\n  case 'automatique':\n    activerModeAutomatique();\n    break;\n  default:\n    console.log('Mode inconnu');\n}\n\nfunction activerModeClair() {\n  document.body.classList.remove('mode_fonc\u00e9');\n  document.body.classList.add('mode_clair');\n}\n\nfunction activerModeFonc\u00e9() {\n  document.body.classList.remove('mode_clair');\n  document.body.classList.add('mode_fonc\u00e9');\n}\n\nfunction activerModeAutomatique() {\n  const heure = new Date().getHours();\n  if (heure < 6 || heure >= 18) {\n    activerModeFonc\u00e9();\n  } else {\n    activerModeClair();\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Les switch statements rendent ce type de logique plus facile \u00e0 g\u00e9rer et plus concise par rapport \u00e0 l&rsquo;utilisation de multiples if-else.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Autres Utilisations des Switch en JavaScript<\/h3>\n\n\n\n<p>En plus des exemples pr\u00e9c\u00e9dents, les switch statements peuvent \u00eatre utilis\u00e9s pour simplifier la gestion des r\u00e9ponses des APIs, structurer les logiques de navigation ou configurer des comportements complexes en fonction de diff\u00e9rentes variables. Pour une compr\u00e9hension plus approfondie de la gestion des conditions en JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-switch-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">guide complet sur les conditions switch en JavaScript<\/a> ou explorez <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-condition-en-javascript\" target=\"_blank\" rel=\"noopener\">les autres types de conditions en JavaScript<\/a>.<\/p>\n\n\n\n<p>Pour ceux qui veulent approfondir la gestion des variables, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/porter-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">la port\u00e9e des variables en JavaScript<\/a>. Si vous \u00eates int\u00e9ress\u00e9s par les fonctions, notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">comment ajouter des param\u00e8tres \u00e0 une fonction en JavaScript<\/a> est un excellent point de d\u00e9part.<\/p>\n\n\n\n<p>Pour en savoir plus sur la manipulation du DOM avec JavaScript, rendez-vous sur notre guide pratique sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">comment ajouter des \u00e9l\u00e9ments au DOM avec JavaScript<\/a>. De plus, d\u00e9couvrez les meilleures pratiques pour <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-break-et-continue-en-javascript\" target=\"_blank\" rel=\"noopener\">utiliser break et continue en JavaScript<\/a> afin de contr\u00f4ler le flux de vos boucles de mani\u00e8re plus efficace.<\/p>\n\n\n\n<p>Les switch statements sont un \u00e9l\u00e9ment essentiel du d\u00e9veloppement en JavaScript qui simplifie la gestion des conditions complexes en rendant le code plus lisible et maintenable. En ma\u00eetrisant les switch statements, vous pouvez rendre vos scripts plus efficaces et am\u00e9liorer la gestion logique de vos programmes. Pour continuer \u00e0 explorer les conditions en programmation, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-objets-avanc%C3%A9s\/142\">les objets avanc\u00e9s en JavaScript<\/a>. Pour approfondir vos connaissances, notre <a href=\"https:\/\/wikiform.fr\/codespace\/guide-complet-sur-ecma-script\/\">guide complet sur ECMAScript<\/a> peut \u00e9galement \u00eatre tr\u00e8s utile.<\/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.","protected":false},"excerpt":{"rendered":"<p>Les Conditions Switch en JavaScript sont essentielles pour g\u00e9rer des conditions multiples et rendre votre code plus lisible et organis\u00e9. Ma\u00eetriser l&rsquo;utilisation des conditions switch&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2863,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5570","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\/5570","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=5570"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5570\/revisions"}],"predecessor-version":[{"id":5571,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5570\/revisions\/5571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2863"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}