{"id":5525,"date":"2024-08-28T13:16:10","date_gmt":"2024-08-28T13:16:10","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-4\/"},"modified":"2024-12-12T20:37:47","modified_gmt":"2024-12-12T20:37:47","slug":"qu-est-ce-qu-une-variable-en-javascript-4","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-4\/","title":{"rendered":"2.1 Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript ?"},"content":{"rendered":"\n\n\n<p><strong>Comprendre les Variables JavaScript<\/strong> est essentiel pour tout d\u00e9veloppeur souhaitant ma\u00eetriser ce langage puissant et omnipr\u00e9sent dans le d\u00e9veloppement web. Les variables permettent de stocker et manipuler des donn\u00e9es, constituant ainsi les fondations de toute application JavaScript. Apprenons en d\u00e9tail ce que sont les variables, comment les d\u00e9clarer et comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets de code JavaScript.<\/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-special\">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>\n  document.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            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>Une variable en JavaScript est un conteneur de donn\u00e9es qu&rsquo;il est possible de manipuler tout au long du programme. Elle se distingue par un nom unique et permet d&rsquo;y stocker plusieurs types de valeurs, telles que des nombres, des cha\u00eenes de caract\u00e8res, des objets, des fonctions, etc. Passons en revue les diff\u00e9rentes mani\u00e8res de d\u00e9clarer des variables en JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9clarer des Variables en JavaScript<\/h3>\n\n\n\n<p>En JavaScript, il existe trois mots-cl\u00e9s principaux pour d\u00e9clarer une variable : <code>var<\/code>, <code>let<\/code>, et <code>const<\/code>. Chacun de ces mots-cl\u00e9s poss\u00e8de des comportements sp\u00e9cifiques. Voici comment les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ D\u00e9claration d'une variable avec var\nvar name = 'Alice';\nconsole.log(name); \/\/ Affiche \"Alice\"\n\n\/\/ D\u00e9claration d'une variable avec let\nlet age = 30;\nconsole.log(age); \/\/ Affiche 30\n\n\/\/ D\u00e9claration d'une constante avec const\nconst birthYear = 1993;\nconsole.log(birthYear); \/\/ Affiche 1993\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><p>Bien que ces trois mots-cl\u00e9s servent \u00e0 d\u00e9clarer des variables, ils ont des diff\u00e9rences importantes en termes de port\u00e9e et de r\u00e9affectation :<\/p>\n<ul>\n  <li><strong>var :<\/strong> Les variables d\u00e9clar\u00e9es avec <code>var<\/code> ont une port\u00e9e fonctionnelle ou globale, et elles peuvent \u00eatre red\u00e9clar\u00e9es et r\u00e9assign\u00e9es.<\/li>\n  <li><strong>let :<\/strong> Les variables d\u00e9clar\u00e9es avec <code>let<\/code> ont une port\u00e9e de bloc, ce qui signifie qu&rsquo;elles sont limit\u00e9es au bloc o\u00f9 elles ont \u00e9t\u00e9 d\u00e9clar\u00e9es (p. ex. dans une boucle ou une condition). Elles peuvent \u00eatre r\u00e9assign\u00e9es mais pas red\u00e9clar\u00e9es dans le m\u00eame bloc.<\/li>\n  <li><strong>const :<\/strong> Les variables d\u00e9clar\u00e9es avec <code>const<\/code> ont \u00e9galement une port\u00e9e de bloc et doivent \u00eatre initialis\u00e9es lors de la d\u00e9claration. Elles ne peuvent ni \u00eatre red\u00e9clar\u00e9es ni r\u00e9assign\u00e9es.<\/li>\n<\/ul><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e des Variables en JavaScript<\/h3>\n\n\n\n<p>La port\u00e9e d&rsquo;une variable d\u00e9termine o\u00f9 elle est accessible dans le code. En JavaScript, il existe des port\u00e9es globales et locales.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Port\u00e9e Globale<\/h4>\n\n\n\n<p>Une variable d\u00e9clar\u00e9e en dehors de toute fonction ou bloc a une port\u00e9e globale, ce qui signifie qu&rsquo;elle est accessible de n&rsquo;importe o\u00f9 dans le script.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var globalVar = 'Global';\n\nfunction testScope() {\n  console.log(globalVar); \/\/ Peut acc\u00e9der \u00e0 globalVar\n}\n\ntestScope(); \/\/ Affiche \"Global\"\nconsole.log(globalVar); \/\/ Affiche \"Global\"\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Port\u00e9e Locale<\/h4>\n\n\n\n<p>Une variable d\u00e9clar\u00e9e \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une fonction a une port\u00e9e locale et n&rsquo;est accessible que dans cette fonction.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function testScope() {\n  var localVar = 'Local';\n  console.log(localVar); \/\/ Affiche \"Local\"\n}\n\ntestScope();\nconsole.log(localVar); \/\/ Erreur : localVar n'est pas d\u00e9fini en dehors de la fonction\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Port\u00e9e de Bloc<\/h4>\n\n\n\n<p>Les variables d\u00e9clar\u00e9es avec <code>let<\/code> ou <code>const<\/code> ont une port\u00e9e de bloc, c&rsquo;est-\u00e0-dire qu&rsquo;elles ne sont accessibles qu&rsquo;\u00e0 l&rsquo;int\u00e9rieur du bloc ({}) o\u00f9 elles sont d\u00e9clar\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (true) {\n    let blockVar = 'Block Scope';\n    console.log(blockVar); \/\/ Affiche \"Block Scope\"\n}\n\nconsole.log(blockVar); \/\/ Erreur : blockVar n'est pas d\u00e9fini en dehors du bloc\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes Pratiques pour Utiliser les Variables en JavaScript<\/h3>\n\n\n\n<p><p>Voici quelques conseils pour travailler efficacement avec les variables en JavaScript :<\/p>\n<ul>\n  <li><strong>Utilisez <code>let<\/code> et <code>const<\/code><\/strong> plut\u00f4t que <code>var<\/code> pour \u00e9viter les erreurs de port\u00e9e.<\/li>\n  <li><strong>Choisissez des noms de variables clairs et significatifs<\/strong> pour am\u00e9liorer la lisibilit\u00e9 de votre code.<\/li>\n  <li><strong>Initialisez toujours vos variables<\/strong> pour \u00e9viter les comportements impr\u00e9visibles.<\/li>\n  <li><strong>Utilisez <code>const<\/code> autant que possible<\/strong> pour indiquer que la variable ne doit pas \u00eatre r\u00e9assign\u00e9e.<\/li>\n  <li><strong>Gardez votre port\u00e9e de variable aussi petite que possible<\/strong> pour \u00e9viter les conflits de nom de variable et rendre le bloc de code plus facile \u00e0 maintenir.<\/li>\n<\/ul><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Manipulation de Variables<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des variables en JavaScript, examinons quelques exemples avanc\u00e9s et des cas d&rsquo;utilisation pratiques.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de Variables pour Manipuler le DOM<\/h4>\n\n\n\n<p>Les variables sont couramment utilis\u00e9es pour manipuler le Document Object Model (DOM) en JavaScript. Voici un exemple simple o\u00f9 nous utilisons une variable pour changer le texte d&rsquo;un \u00e9l\u00e9ment HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Supposons que nous avons un \u00e9l\u00e9ment HTML avec l'ID 'myElement'\nvar myElement = document.getElementById('myElement');\nmyElement.textContent = 'Texte mis \u00e0 jour avec JavaScript';\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Variables dans les Boucles<\/h4>\n\n\n\n<p>Les variables sont \u00e9galement cruciales dans les boucles pour it\u00e9rer sur des ensembles de donn\u00e9es. Voici un exemple de boucle <code>for<\/code> utilisant une variable pour parcourir un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var fruits = &#91;'Pomme', 'Banane', 'Orange'];\nfor (let i = 0; i &lt; fruits.length; i++) {\n    console.log(fruits&#91;i]);\n}\n\/\/ Affiche \"Pomme\", \"Banane\", \"Orange\"\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Variables et Fonctions<\/h4>\n\n\n\n<p>Les variables peuvent \u00eatre utilis\u00e9es pour stocker des fonctions, ce qui permet de les passer en tant qu&rsquo;arguments ou de les retourner \u00e0 partir d&rsquo;autres fonctions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let greet = function(name) {\n    return `Bonjour, ${name}!`;\n};\n\nconsole.log(greet('Alice')); \/\/ Affiche \"Bonjour, Alice!\"\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Manipulation de Variables Complexes<\/h4>\n\n\n\n<p>Les variables en JavaScript peuvent contenir des objets complexes et des structures de donn\u00e9es telles que des tableaux et des objets litt\u00e9raux :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let person = {\n    name: 'Alice',\n    age: 30,\n    greet: function() {\n        console.log(`Bonjour, je suis ${this.name} et j'ai ${this.age} ans.`);\n    }\n};\n\nperson.greet(); \/\/ Affiche \"Bonjour, je suis Alice et j'ai 30 ans.\"\n<\/code><\/pre>\n\n\n\n<p><p>En poursuivant votre exploration de JavaScript et des variables, vous pouvez \u00e9galement consulter des ressources externes pour \u00e9largir votre compr\u00e9hension. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s sur JavaScript, et le <a href=\"https:\/\/www.w3schools.com\/js\/\" target=\"_blank\" rel=\"noopener\">site W3Schools<\/a> offre des tutoriels interactifs pour pratiquer. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour un apprentissage structur\u00e9. N&rsquo;oubliez pas de visiter notre page sur les <a href=\"https:\/\/wikiform.fr\/codespace\/demander-confirmation-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">bo\u00eetes de dialogue en JavaScript<\/a>.<\/p>\n<p>Pour encore plus de ressources, consultez ces articles sur notre site : <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\/qu-est-ce-qu-une-variable-en-javascript\">Qu&rsquo;est-ce qu&rsquo;une variable en JavaScript<\/a>.<\/p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Variables JavaScript dans Diff\u00e9rents Sc\u00e9narios<\/h3>\n\n\n\n<p>Les variables JavaScript sont utilis\u00e9es dans de nombreux sc\u00e9narios. Il est crucial de bien comprendre comment elles fonctionnent pour les utiliser efficacement. Vous pouvez \u00e9galement consulter notre guide pour <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">d\u00e9clarer des variables en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Travailler avec des Variables Globales et Locales<\/h4>\n\n\n\n<p>Les variables globales et locales ont des r\u00f4les sp\u00e9cifiques dans un script JavaScript. Une variable globale est accessible dans tout le script, tandis qu&rsquo;une variable locale est limit\u00e9e \u00e0 la fonction ou au bloc dans lequel elle est d\u00e9clar\u00e9e. Pour plus\n","protected":false},"excerpt":{"rendered":"<p>Comprendre les Variables JavaScript est essentiel pour tout d\u00e9veloppeur souhaitant ma\u00eetriser ce langage puissant et omnipr\u00e9sent dans le d\u00e9veloppement web. Les variables permettent de stocker&#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-5525","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\/5525","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=5525"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5525\/revisions"}],"predecessor-version":[{"id":6088,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5525\/revisions\/6088"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}