{"id":5524,"date":"2024-08-28T13:11:24","date_gmt":"2024-08-28T13:11:24","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-3\/"},"modified":"2024-08-28T13:11:24","modified_gmt":"2024-08-28T13:11:24","slug":"qu-est-ce-qu-une-variable-en-javascript-3","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-3\/","title":{"rendered":"2.1 Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript ?"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les Variables en JavaScript<\/strong> jouent un r\u00f4le crucial dans le d\u00e9veloppement de scripts et d&rsquo;applications web. Comprendre comment d\u00e9clarer, initialiser et utiliser les <strong>variables en JavaScript<\/strong> est fondamental pour \u00e9crire du code efficace et maintenable. Apprenons ce qu&rsquo;elles sont et comment les manipuler gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Variables 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\/658877565?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 variable en JavaScript est un conteneur utilis\u00e9 pour stocker des donn\u00e9es. Ces donn\u00e9es peuvent \u00eatre de diff\u00e9rents types tels que des nombres, des cha\u00eenes de caract\u00e8res, des tableaux, des objets, etc. Les variables permettent de r\u00e9partir et de manipuler les donn\u00e9es tout au long du programme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9claration de Variables en JavaScript<\/h3>\n\n\n\n<p>En JavaScript, les variables peuvent \u00eatre d\u00e9clar\u00e9es de plusieurs mani\u00e8res. Les mots-cl\u00e9s les plus courants sont <code>var<\/code>, <code>let<\/code>, et <code>const<\/code>. Chacun a des particularit\u00e9s et des utilisations sp\u00e9cifiques. Pour plus de d\u00e9tails, vous pouvez consulter le guide complet <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">d\u00e9clarer des variables en JavaScript<\/a>. Voyons comment les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utiliser 'var' pour d\u00e9clarer une variable\nvar age = 25;\n\n\/\/ Utiliser 'let' pour d\u00e9clarer une variable\nlet name = \"Alice\";\n\n\/\/ Utiliser 'const' pour d\u00e9clarer une constante\nconst PI = 3.14159;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences Entre <code>var<\/code>, <code>let<\/code>, et <code>const<\/code><\/h3>\n\n\n\n<p>Voyons en d\u00e9tails les diff\u00e9rences entre <code>var<\/code>, <code>let<\/code>, et <code>const<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ var - port\u00e9e globale ou fonctionnelle\nif (true) {\n  var x = 5;\n}\nconsole.log(x); \/\/ Sortie: 5\n\n\/\/ let - port\u00e9e de bloc\nif (true) {\n  let y = 10;\n}\nconsole.log(y); \/\/ Erreur: y n'est pas d\u00e9fini\n\n\/\/ const - port\u00e9e de bloc et immuable\nif (true) {\n  const z = 15;\n}\nconsole.log(z); \/\/ Erreur: z n'est pas d\u00e9fini\n\nconst a = 20;\na = 25; \/\/ Erreur: assignment to constant variable\n<\/code><\/pre>\n\n\n\n<p>Pour une meilleure compr\u00e9hension de la port\u00e9e des variables, vous pouvez vous r\u00e9f\u00e9rer \u00e0 cet article d\u00e9taill\u00e9 sur <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">la port\u00e9e des variables en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialiser des Variables en JavaScript<\/h3>\n\n\n\n<p>Lorsque vous d\u00e9clarez une variable, vous pouvez l&rsquo;initialiser imm\u00e9diatement avec une valeur ou la laisser undefined (non d\u00e9finie). Initialiser une variable signifie lui attribuer une valeur au moment de sa d\u00e9claration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9claration et initialisation simultan\u00e9es\nlet car = \"Toyota\";\n\n\/\/ D\u00e9claration sans initialisation\nlet color;\nconsole.log(color); \/\/ Sortie: undefined\n\n\/\/ Initialisation apr\u00e8s d\u00e9claration\ncolor = \"Red\";\nconsole.log(color); \/\/ Sortie: Red\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Types de Donn\u00e9es des Variables<\/h3>\n\n\n\n<p>Les variables en JavaScript peuvent stocker diff\u00e9rents types de donn\u00e9es. Les principaux types de donn\u00e9es incluent :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li><code>Number<\/code> (Nombre)<\/li>\n    <li><code>String<\/code> (Cha\u00eene de caract\u00e8res)<\/li>\n    <li><code>Boolean<\/code> (Bool\u00e9en)<\/li>\n    <li><code>Array<\/code> (Tableau)<\/li>\n    <li><code>Object<\/code> (Objet)<\/li>\n    <li><code>undefined<\/code><\/li>\n    <li><code>null<\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Nombre\nlet num = 42;\n\n\/\/ Cha\u00eene de caract\u00e8res\nlet greeting = \"Bonjour\";\n\n\/\/ Bool\u00e9en\nlet isJavaScriptFun = true;\n\n\/\/ Tableau\nlet fruits = [\"Apple\", \"Banana\", \"Cherry\"];\n\n\/\/ Objet\nlet person = {\n  name: \"John\",\n  age: 30\n};\n\n\/\/ undefined\nlet notDefined;\n\n\/\/ null\nlet emptyValue = null;\n<\/code><\/pre>\n\n\n\n<p>Pour une meilleure compr\u00e9hension des types de donn\u00e9es, consultez l&rsquo;article d\u00e9taill\u00e9 sur la <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\" target=\"_blank\" rel=\"noopener\">conversion des donn\u00e9es en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Variable Scope (Port\u00e9e des Variables)<\/h3>\n\n\n\n<p>La port\u00e9e des variables d\u00e9termine leur visibilit\u00e9 et leur dur\u00e9e de vie dans le programme. La port\u00e9e peut \u00eatre globale, fonctionnelle ou de bloc :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Port\u00e9e globale\nvar globalVar = \"Je suis globale\"; \n\nfunction foo() {\n   \/\/ Port\u00e9e de fonction\n   var functionVar = \"Je suis locale \u00e0 la fonction\";\n   console.log(globalVar); \/\/ Accessible\n}\n\nfoo();\nconsole.log(functionVar); \/\/ Erreur: functionVar n'est pas d\u00e9fini hors de la fonction\n\nif (true) {\n   \/\/ Port\u00e9e de bloc\n   let blockVar = \"Je suis locale au bloc\";\n}\nconsole.log(blockVar); \/\/ Erreur: blockVar n'est pas d\u00e9fini hors du bloc<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Variables<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension, explorons quelques usages avanc\u00e9s des variables en JavaScript, comme les closures et la d\u00e9claration de variables avec la d\u00e9structuration. Vous pouvez \u00e9galement vous r\u00e9f\u00e9rer \u00e0 l&rsquo;article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/fermetures-closures-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">fermetures en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Closures<\/h4>\n\n\n\n<p>Les closures permettent aux fonctions internes de se souvenir de l&rsquo;environnement dans lequel elles ont \u00e9t\u00e9 cr\u00e9\u00e9es. Cela est particuli\u00e8rement utile pour cr\u00e9er des fonctions avec des variables priv\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function createCounter() {\n  let count = 0;\n  return function() {\n    count++;\n    return count;\n  }\n}\n\nconst counter1 = createCounter();\nconsole.log(counter1()); \/\/ Sortie: 1\nconsole.log(counter1()); \/\/ Sortie: 2\n\nconst counter2 = createCounter();\nconsole.log(counter2()); \/\/ Sortie: 1\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9structuration des Variables<\/h4>\n\n\n\n<p>La d\u00e9structuration permet d&rsquo;extraire des valeurs d&rsquo;objets ou de tableaux et de les assigner \u00e0 des variables individuelles :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9structuration de l'objet\nconst person = {\n  name: \"Alice\",\n  age: 25\n};\n\nconst { name, age } = person;\nconsole.log(name); \/\/ Sortie: Alice\nconsole.log(age); \/\/ Sortie: 25\n\n\/\/ D\u00e9structuration du tableau\nconst [firstFruit, secondFruit] = [\"Apple\", \"Banana\"];\nconsole.log(firstFruit); \/\/ Sortie: Apple\nconsole.log(secondFruit); \/\/ Sortie: Banana\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>variables en JavaScript<\/strong> sont fondamentales pour la gestion des donn\u00e9es dans vos scripts et applications. Comprendre comment les d\u00e9clarer, initialiser et utiliser efficacement vous permettra de construire des programmes plus robustes et maintenables. Continuez \u00e0 explorer JavaScript pour d\u00e9couvrir d&rsquo;autres concepts avanc\u00e9s et am\u00e9liorations continues. Pour plus de tutoriels et d&rsquo;exemples pratiques, explorez nos ressources suppl\u00e9mentaires sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a> et d\u00e9couvrez comment ma\u00eetriser ce langage puissant.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Ajout des liens internes -->\n\n<p>Pour en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">les variables en JavaScript<\/a>, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre article d\u00e9di\u00e9. Vous pouvez \u00e9galement apprendre comment <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">d\u00e9clarer des variables<\/a> de mani\u00e8re efficace pour rendre votre code plus performant. Notre guide pratique sur la <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">concat\u00e9nation en JavaScript<\/a> vous montre comment manipuler des cha\u00eenes de caract\u00e8res facilement. Les <a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">op\u00e9rations math\u00e9matiques en JavaScript<\/a> sont \u00e9galement couvertes pour vous aider \u00e0 effectuer des calculs complexes. Enfin, d\u00e9couvrez <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\" target=\"_blank\" rel=\"noopener\">comment afficher des informations<\/a> dans votre application JavaScript.<\/p>\n\n\n<!-- Liens externes -->\n\n<p>Pour approfondir vos connaissances en JavaScript, vous pouvez consulter les articles sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Values,_variables,_and_literals\" target=\"_blank\" rel=\"dofollow noopener\">MDN Web Docs<\/a>. De plus, le site <a href=\"https:\/\/www.w3schools.com\/js\/js_variables.asp\" target=\"_blank\" rel=\"dofollow noopener\">W3Schools<\/a> propose des tutoriels d\u00e9taill\u00e9s. N&rsquo;oubliez pas de visiter <a href=\"https","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les Variables en JavaScript jouent un r\u00f4le crucial dans le d\u00e9veloppement de scripts et d&rsquo;applications web. Comprendre comment d\u00e9clarer, initialiser et utiliser les variables&#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":[3,8],"tags":[18],"class_list":["post-5524","post","type-post","status-publish","format-standard","hentry","category-3-css","category-2-html","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\/5524","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=5524"}],"version-history":[{"count":0,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5524\/revisions"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}