{"id":5568,"date":"2024-08-28T22:40:11","date_gmt":"2024-08-28T22:40:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/operateurs-de-comparaison-en-javascript\/"},"modified":"2024-08-28T22:40:14","modified_gmt":"2024-08-28T22:40:14","slug":"operateurs-de-comparaison-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/operateurs-de-comparaison-en-javascript\/","title":{"rendered":"5.3 Op\u00e9rateurs de Comparaison en JavaScript"},"content":{"rendered":"\n<p><strong>Les op\u00e9rateurs de comparaison en JavaScript<\/strong> sont des outils essentiels pour la prise de d\u00e9cision dans vos programmes. Comprendre comment utiliser les <strong>op\u00e9rateurs de comparaison en JavaScript<\/strong> de mani\u00e8re efficace peut consid\u00e9rablement am\u00e9liorer la logique et l&rsquo;efficacit\u00e9 de votre code. D\u00e9couvrons leur fonctionnement ainsi que leur impl\u00e9mentation \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Op\u00e9rateurs de Comparaison 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\/658880423?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>Les op\u00e9rateurs de comparaison en JavaScript permettent de comparer deux valeurs. Ils retournent un <code>boolean<\/code>, c&rsquo;est-\u00e0-dire <code>true<\/code> ou <code>false<\/code>. Voici un aper\u00e7u des op\u00e9rateurs de comparaison que vous utiliserez le plus souvent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Principaux Op\u00e9rateurs de Comparaison<\/h3>\n\n\n\n<p>Voici les op\u00e9rateurs de comparaison de base en JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Egalit\u00e9\nconsole.log(5 == '5'); \/\/ true\nconsole.log(5 === '5'); \/\/ false\n\n\/\/ In\u00e9galit\u00e9\nconsole.log(5 != '5'); \/\/ false\nconsole.log(5 !== '5'); \/\/ true\n\n\/\/ Sup\u00e9rieur \u00e0\nconsole.log(6 > 5); \/\/ true\n\n\/\/ Inf\u00e9rieur \u00e0\nconsole.log(6 < 5); \/\/ false\n\n\/\/ Sup\u00e9rieur ou \u00e9gal \u00e0\nconsole.log(6 >= 5); \/\/ true\n\n\/\/ Inf\u00e9rieur ou \u00e9gal \u00e0\nconsole.log(6 <= 5); \/\/ false\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Egalit\u00e9 et In\u00e9galit\u00e9 (== et !=)<\/h3>\n\n\n\n<p>Les op\u00e9rateurs <code>==<\/code> et <code>!=<\/code> comparent deux valeurs apr\u00e8s avoir converti leur type si n\u00e9cessaire. Cela peut conduire \u00e0 des r\u00e9sultats inattendus :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log(0 == false);  \/\/ true\nconsole.log('' == false);  \/\/ true\nconsole.log(null == undefined);  \/\/ true\n\nconsole.log(0 != false);  \/\/ false\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Identit\u00e9 stricte et In\u00e9galit\u00e9 stricte (=== et !==)<\/h3>\n\n\n\n<p>Les op\u00e9rateurs <code>===<\/code> et <code>!==<\/code> comparent \u00e9galement le type des valeurs, ainsi que leur contenu, garantissant une comparaison plus stricte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log(0 === false);  \/\/ false\nconsole.log('' === false);  \/\/ false\nconsole.log(null === undefined);  \/\/ false\n\nconsole.log(0 !== false);  \/\/ true\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comparaison de Grandeur (> < >= <=)<\/h3>\n\n\n\n<p>Les op\u00e9rateurs de comparaison de grandeur sont utilis\u00e9s pour comparer des valeurs num\u00e9riques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log(10 > 5);  \/\/ true\nconsole.log(10 < 5);  \/\/ false\nconsole.log(10 >= 10);  \/\/ true\nconsole.log(10 <= 5);  \/\/ false\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comparaison de Cha\u00eenes de Caract\u00e8res<\/h3>\n\n\n\n<p>Les op\u00e9rateurs de comparaison fonctionnent \u00e9galement sur les cha\u00eenes de caract\u00e8res, en comparant leur ordre lexicographique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log('apple' > 'banana'); \/\/ false\nconsole.log('apple' < 'banana'); \/\/ true\nconsole.log('apple' >= 'apple'); \/\/ true\nconsole.log('apple' <= 'banana'); \/\/ true\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comparaison de Variables Objet<\/h3>\n\n\n\n<p>En JavaScript, la comparaison d'objets se fait par r\u00e9f\u00e9rence et non par valeur. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let obj1 = { name: \"Alice\" };\nlet obj2 = { name: \"Alice\" };\nlet obj3 = obj1;\n\nconsole.log(obj1 == obj2); \/\/ false\nconsole.log(obj1 === obj2); \/\/ false\nconsole.log(obj1 === obj3); \/\/ true\n<\/code><\/pre>\n\n\n\n<p>Les op\u00e9rateurs de comparaison en JavaScript offrent une flexibilit\u00e9 consid\u00e9rable pour la manipulation des donn\u00e9es dans votre code. Ils permettent de comparer des valeurs et des variables de mani\u00e8re efficace et pr\u00e9cise, am\u00e9liorant ainsi la logique et la robustesse de vos applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>op\u00e9rateurs de comparaison en JavaScript<\/strong> sont essentiels pour la prise de d\u00e9cision et le contr\u00f4le de flux dans vos programmes. En comprenant et en utilisant correctement ces op\u00e9rateurs, vous pouvez \u00e9crire du code plus pr\u00e9cis et moins sujet aux erreurs. Continuez \u00e0 explorer les diff\u00e9rentes facettes de JavaScript pour ma\u00eetriser enti\u00e8rement ses capacit\u00e9s. Pour apprendre plus en d\u00e9tail, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de 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 Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Les op\u00e9rateurs de comparaison en JavaScript sont des outils essentiels pour la prise de d\u00e9cision dans vos programmes. Comprendre comment utiliser les op\u00e9rateurs de comparaison&#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-5568","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\/5568","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=5568"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5568\/revisions"}],"predecessor-version":[{"id":5569,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5568\/revisions\/5569"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}