{"id":5526,"date":"2024-08-28T13:18:15","date_gmt":"2024-08-28T13:18:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-5\/"},"modified":"2024-08-28T13:18:18","modified_gmt":"2024-08-28T13:18:18","slug":"qu-est-ce-qu-une-variable-en-javascript-5","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript-5\/","title":{"rendered":"2.1 Qu&rsquo;est-ce qu&rsquo;une Variable en JavaScript ?"},"content":{"rendered":"\n<p><strong>Les variables en JavaScript<\/strong> sont fondamentales pour la gestion de donn\u00e9es au sein d&rsquo;un script. Comprendre comment d\u00e9clarer et manipuler des <strong>variables en JavaScript<\/strong> est essentiel pour tout d\u00e9veloppeur, qu&rsquo;il soit d\u00e9butant ou exp\u00e9riment\u00e9. Apprenons ce qu&rsquo;est une variable en JavaScript et d\u00e9couvrons comment les utiliser efficacement avec 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 pour stocker des donn\u00e9es. En d\u00e9clarant une variable, vous allouez un espace en m\u00e9moire pour ranger une valeur que vous pouvez utiliser et manipuler dans vos scripts. Les variables sont essentielles pour cr\u00e9er des programmes dynamiques et interactifs.<\/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 en utilisant les mots-cl\u00e9s <code>var<\/code>, <code>let<\/code>, ou <code>const<\/code>. Voici comment chacun de ces mots-cl\u00e9s fonctionne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9clarer une variable avec var\nvar myVar = 10;\n\n\/\/ D\u00e9clarer une variable avec let\nlet myLet = 20;\n\n\/\/ D\u00e9clarer une variable avec const\nconst myConst = 30;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Port\u00e9e des Variables<\/h3>\n\n\n\n<p>La port\u00e9e d&rsquo;une variable fait r\u00e9f\u00e9rence \u00e0 l&rsquo;endroit o\u00f9 cette variable est accessible \u00e0 l&rsquo;int\u00e9rieur du code. Les variables <code>var<\/code> sont fonctionnelles, tandis que celles d\u00e9clar\u00e9es avec <code>let<\/code> et <code>const<\/code> sont block-scoped. Pour en savoir plus sur ce th\u00e8me, consultez la <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\">port\u00e9e des variables en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function testVar() {\n    if (true) {\n        var varVariable = 'Je suis une var';\n    }\n    console.log(varVariable); \/\/ Fonctionne car var est fonctionnel\n}\ntestVar();\n\nfunction testLet() {\n    if (true) {\n        let letVariable = 'Je suis une let';\n    }\n    \/\/console.log(letVariable); \/\/ Erreur car let est block-scoped\n}\ntestLet();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Changer la Valeur d&rsquo;une Variable<\/h3>\n\n\n\n<p>Changer la valeur d&rsquo;une variable en JavaScript est simple. Pour les variables d\u00e9clar\u00e9es avec <code>var<\/code> et <code>let<\/code>, vous pouvez r\u00e9affecter de nouvelles valeurs. Cependant, pour les variables <code>const<\/code>, leur r\u00e9affectation est interdite. Promenez-vous sur <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">d\u00e9clarer variables en JavaScript let const var<\/a> pour plus d&rsquo;informations.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utilisation de var\nvar myVar = 10;\nmyVar = 15; \/\/ Valide\n\n\/\/ Utilisation de let\nlet myLet = 20;\nmyLet = 25; \/\/ Valide\n\n\/\/ Utilisation de const\nconst myConst = 30;\nmyConst = 35; \/\/ Invalide, va g\u00e9n\u00e9rer une erreur\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Variables dans des Fonctions<\/h3>\n\n\n\n<p>Les variables sont souvent utilis\u00e9es dans les fonctions pour manipuler et retourner des valeurs. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function add(a, b) {\n    let sum = a + b;\n    return sum;\n}\n\nlet result = add(5, 10);\nconsole.log(result); \/\/ Affiche 15\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Variables et le Scope<\/h3>\n\n\n\n<p>Comprendre le scope est crucial pour \u00e9viter les erreurs et les comportements inattendus dans votre code. Le scope d\u00e9termine la visibilit\u00e9 d&rsquo;une variable dans diff\u00e9rentes parties du code. Vous pouvez explorer <a href=\"https:\/\/wikiform.fr\/codespace\/variables-globales-et-locales-en-javascript\">variables globales et locales en JavaScript<\/a> pour comprendre en profondeur ces concepts.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Scope global\nlet globalVar = 'Je suis global';\n\nfunction checkScope() {\n    \/\/ Scope local\n    let localVar = 'Je suis local';\n    console.log(globalVar); \/\/ Accessible\n    console.log(localVar); \/\/ Accessible\n}\n\ncheckScope();\nconsole.log(globalVar); \/\/ Accessible\n\/\/console.log(localVar); \/\/ Erreur, non accessible\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes Pratiques pour les Variables en JavaScript<\/h3>\n\n\n\n<p>Pour \u00e9viter les erreurs et optimiser votre code, voici quelques bonnes pratiques \u00e0 suivre :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez <code>let<\/code> ou <code>const<\/code> plut\u00f4t que <code>var<\/code> pour d\u00e9clarer des variables.<\/li>\n<li>Donnez des noms de variables clairs et pertinents.<\/li>\n<li>Limiter le scope des variables autant que possible pour \u00e9viter les conflits de noms.<\/li>\n<li>Utiliser <code>const<\/code> pour les variables dont les valeurs ne changent pas.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet avec des Variables<\/h3>\n\n\n\n<p>Voici un exemple complet o\u00f9 les variables sont utilis\u00e9es dans un programme JavaScript pour g\u00e9rer les donn\u00e9es utilisateur dans une application simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Variables globales\nlet userName = 'Alice';\nconst maxAttempts = 3;\n\nfunction greetUser() {\n    let greeting = 'Bonjour, ' + userName + '!';\n    console.log(greeting);\n}\n\nfunction checkAttempts(attempts) {\n    if (attempts > maxAttempts) {\n        console.log('Nombre maximal de tentatives d\u00e9pass\u00e9.');\n    } else {\n        console.log('Vous avez encore des tentatives disponibles.');\n    }\n}\n\n\/\/ Utilisation des fonctions\ngreetUser();\ncheckAttempts(2);\ncheckAttempts(4);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Manipulation de Tableaux avec des Variables<\/h4>\n\n\n\n<p>Les variables peuvent \u00e9galement \u00eatre utilis\u00e9es pour manipuler des tableaux en JavaScript, ce qui permet de cr\u00e9er des listes dynamiques de donn\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = ['Pomme', 'Banane', 'Poire'];\nconst favoriteFruit = 'Mangue';\n\n\/\/ Ajouter un fruit\nfruits.push(favoriteFruit);\n\nconsole.log(fruits); \/\/ Affiche ['Pomme', 'Banane', 'Poire', 'Mangue']\n\n\/\/ Retirer le dernier fruit\nlet lastFruit = fruits.pop();\n\nconsole.log(lastFruit); \/\/ Affiche 'Mangue'\nconsole.log(fruits); \/\/ Affiche ['Pomme', 'Banane', 'Poire']\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation des Variables dans des Boucles<\/h4>\n\n\n\n<p>Les variables sont souvent utilis\u00e9es dans les boucles pour manipuler des ensembles de donn\u00e9es de mani\u00e8re r\u00e9p\u00e9titive :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5];\nlet total = 0;\n\n\/\/ Utiliser let dans une boucle for\nfor (let i = 0; i < numbers.length; i++) {\n    total += numbers[i];\n}\n\nconsole.log('Total : ' + total); \/\/ Affiche 'Total : 15'\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h4>\n\n\n\n<p>Consid\u00e9rons un projet plus complet o\u00f9 les variables JavaScript sont utilis\u00e9es pour cr\u00e9er une petite application de gestion de t\u00e2ches. L'application permet d'ajouter, de lister et de marquer les t\u00e2ches comme termin\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tasks = [];\n\nfunction addTask(task) {\n    tasks.push({ task: task, completed: false });\n}\n\nfunction completeTask(index) {\n    if (index < tasks.length) {\n        tasks[index].completed = true;\n    }\n}\n\nfunction listTasks() {\n    tasks.forEach((task, index) => {\n        console.log(index + 1 + '. ' + task.task + ' [' + (task.completed ? 'Termin\u00e9' : 'Pas termin\u00e9') + ']');\n    });\n}\n\n\/\/ Ajouter des t\u00e2ches\naddTask('Acheter du lait');\naddTask('Appeler le m\u00e9decin');\naddTask('Envoyer un mail');\n\n\/\/ Marquer la premi\u00e8re t\u00e2che comme termin\u00e9e\ncompleteTask(0);\n\n\/\/ Lister toutes les t\u00e2ches\nlistTasks();\n<\/code><\/pre>\n\n\n\n<p>En poursuivant votre exploration de JavaScript et de la gestion des variables, vous pouvez \u00e9galement consulter des ressources externes pour enrichir vos connaissances. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s sur la programmation avec JavaScript, et le <a href=\"https:\/\/www.javascript.info\/\" target=\"_blank\" rel=\"noopener\">site JavaScript.info<\/a> offre une couverture exhaustive des concepts de JavaScript. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux propos\u00e9s sur <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>variables en JavaScript<\/strong> sont une base incontournable pour tout d\u00e9veloppeur d\u00e9sireux de cr\u00e9er des scripts interactifs et dynamiques. En apprenant \u00e0 d\u00e9clarer et \u00e0 manipuler des variables, vous pourrez \u00e9crire des programmes plus efficaces et mieux structur\u00e9s. Continuez \u00e0 explorer JavaScript pour ma\u00eetriser davantage les variables et autres fonctionnalit\u00e9s avanc\u00e9es. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour apprendre \u00e0 cr\u00e9er des fonctions en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/cr\u00e9er-des-fonctions-en-javascript-tutoriel\">tutoriel d\u00e9taill\u00e9<\/a>. D\u00e9couvrez \u00e9galement <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-une-variable","protected":false},"excerpt":{"rendered":"<p>Les variables en JavaScript sont fondamentales pour la gestion de donn\u00e9es au sein d&rsquo;un script. Comprendre comment d\u00e9clarer et manipuler des variables en JavaScript est&#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-5526","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\/5526","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=5526"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5526\/revisions"}],"predecessor-version":[{"id":5527,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5526\/revisions\/5527"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}