Les variables en JavaScript

Objectif

Etre capable de déclarer et utiliser une variable en JavaScript
Déclarer des variables en utilisant les mots-clés var, let, et const.
Comprendre la portée des variables déclarées avec différents mots-clés.

Introduction

Comme la plupart des langages, JavaScript dispose de variables permettant de stocker et de manipuler des données. Ainsi, une variable pourra référencer aussi bien des nombres, des chaînes de caractères, des booléens que des objets.
Contrairement à la plupart des autres langages de programmation, JavaScript n’est que faiblement typé. En effet, il n’est pas nécessaire d’en déclarer le type (comme par exemple avec int, float, double, char de PHP) et une variable peut à tout moment changer de type.
Une variable possède un nom et sert à mémoriser une valeur
Les variables se déclarent de deux façons :

explicitement par le mot clé var. var indice
implicitement par son apparition à gauche du signe égal. b = 256

Déclaration et lecture/écriture

Une variable est une case mémoire à laquelle on a donnée un nom.
Dans les langages impératifs, (comme JavaScript, Java,C/C++) le contenu de cette case mémoire peut varier au cours de l’exécution du programme.
On peut ranger une valeur dans cette case, ou de manière synonyme, dans la variable, par une instruction nommée affectation, qu’n peut aussi lire son contenu à tout moment.
On peut par exemple indiquer que l’on utilise un variable pour compter les points d’un match. Il faut alors l’indiquer par l’instruction suivante, qu’on appelle déclaration de variable :var compteur;
Les noms de variables sont de longueur quelconques, peuvent contenir des lettres, chiffres et le caractère souligné (_) , mais doivent commencer par une lettre.
Notons que JavaScript, contrairement à HTML, distingue les majuscules des minuscules, et qu’ainsi MaVariable et mavariable désignent deux variables différentes.

Syntaxe des noms des variables

Le nom des variables en JavaScript doivent respecter la syntaxe suivant:

La variable doit commencer par la lettre ou un underscore « _ ».
La variable peut comporter un nombre indéterminé de lettres, de chiffres ainsi que des caractères underscore ‘_’ et le signe dollar ‘$’.
Les espaces ne sont pas autorisés.
La casse est importante : des variables nommées apple et APPLE sont deux variables différentes.
Le nom de variable ne peut utiliser des mots dits « réservés ». En effet, ces mots sont utilisés dans le code JavaScript même. On ne peut nommer une variable, par exemple, var, true, false, else, etc.

Déclaration et initialisation des variables

Déclarer des variables avec var, let, et const

Utilisation de var :

var age = 30; var nom = "Riadh";

La portée de la variable age est globale si elle est déclarée en dehors d’une fonction.
La portée de la variable nom est globale si elle est déclarée en dehors d’une fonction.

Utilisation de let :

let compteur = 0; let prenom = "Alice";

La portée de la variable compteur est locale au bloc où elle est déclarée.
La portée de la variable prenom est locale au bloc où elle est déclarée.

Utilisation de const :

const pi = 3.14159; const prenoms = ["Riadh", "HAJJI", "Mediouni"];

Les variables déclarées avec const sont en lecture seule. Vous ne pouvez pas réassigner de nouvelles valeurs à pi ou prenoms.
La portée des variables pi et prenoms est locale au bloc où elles sont déclarées.

Initialisation

On peut initialiser une variable en même temps que sa déclaration au moyen du signe égal (=) suivi d’une valeur numérique, d’une chaîne de caractères ou d’une valeur booléenne.
Ce qui évite que la valeur undefined soit retournée en cours d’exécution du script.

Exemples:

var pi = 3.1415926535; var code_postal = 59000; var formulairel = "Ville"; var result$ = true;

Il est possible de déclarer plusieurs variables à la fois: var prixUnitaire=5.5, quantite=20, tauxTVA=21.0, prixTTC;

Remontée des déclarations

Il est possible d’utiliser une variable avant de l’avoir déclarée
Mais attention! seule la déclaration de la variable est remontée. Si une valeur est affectée à la variable dans la déclaration, cette valeur ne sera pas « remontée » et la variable contiendra undefined tant que l’instruction qui lui donne une valeur n’est pas exécutée

<script> document.write("test: "+msg); var msg="hello !"; </script>

Portée d’une variable

La portée d’une variable (ou scope) est le contexte dans lequel cette variable pourra être utilisée

Portée des variables var :

Les variables déclarées avec le mot-clé var ont une portée de fonction ou de contexte global. Cela signifie qu’une variable var est accessible partout dans la fonction ou dans le contexte global (c’est-à-dire en dehors de toutes les fonctions).
Si une variable var est déclarée à l’intérieur d’une fonction, elle sera également accessible en dehors de cette fonction.

function exempleVar() { var x = 10; if (true) { var y = 20; console.log(x); // 10 console.log(y); // 20 } console.log(x); // 10 console.log(y); // 20 }

Dans cet exemple, x et y sont toutes deux accessibles dans toute la fonction exempleVar.

Portée des variables let :

Les variables déclarées avec le mot-clé let ont une portée de bloc. Cela signifie qu’elles sont limitées à la portée du bloc dans lequel elles sont déclarées, que ce soit à l’intérieur d’une fonction, d’une boucle ou d’une structure conditionnelle.

function exempleLet() { let a = 10; if (true) { let b = 20; console.log(a); // 10 console.log(b); // 20 } console.log(a); // 10 console.log(b); // Erreur : b n'est pas défini ici }

Dans cet exemple, a est accessible partout dans la fonction exempleLet, mais b est limitée à la portée du bloc if.

Portée des variables const :

Les variables déclarées avec le mot-clé const ont également une portée de bloc, comme les variables let. Cependant, les variables const sont en lecture seule, ce qui signifie que leur valeur ne peut pas être réassignée après leur déclaration.

function exempleConst() { const c = 10; if (true) { const d = 20; console.log(c); // 10 console.log(d); // 20 } console.log(c); // 10 console.log(d); // Erreur : d n'est pas défini ici }

Dans cet exemple, c est accessible partout dans la fonction exempleConst, mais d est limitée à la portée du bloc if, et vous ne pouvez pas réassigner une nouvelle valeur à c ou d.

En résumé, les variables var ont une portée de fonction ou de contexte global, les variables let et const ont une portée de bloc, et les variables const sont en lecture seule. Le choix entre var, let et const dépend de la portée et de la mutabilité souhaitées pour vos variables dans votre code JavaScript.

Variable globale

Si la variable est créé en dehors d’une fonction, ou si on lui assigne une valeur sans l’avoir définie au préalable au sein d’une fonction, la portée sera globale

<script> function definirLePrenom(){ prenom = "HAJJI";} function afficherMessageBienvenue(){ alert("Bonjour "+prenom+" "+nom+" !");} var nom="Riadh"; definirLePrenom(); afficherMessageBienvenue(); </script>

Variable locale

Si la variable est définie au sein d’une fonction, la portée sera locale: la variable ne sera disponible qu’au sein de la fonction

<script> function definirLePrenom(){ prenom = "HAJJI"; var nom="Riadh"; alert("Bonjour "+prenom+" "+nom+" !");} definirLePrenom(); if (typeof nom==='undefined') alert("La variable nom n'existe pas"); if (typeof prenom==='undefined') alert("La variable prenom n'existe pas"); </script>

Exemples

Exemple01

<!DOCTYPE html >
<html lang="fr">
<head>
<title>JavaScript</title>
<meta ="UTF-8">
</head>
<body>
<script>
 var texte = "Mon chiffre préféré est le ";
 var variable = 7;
document.write(texte + variable);
</script>
</body>
</html>

Exemple02

<html>
  <head>
    <title>Exemple 6.3.1</title>
    <meta charset="UTF-8"></meta>
  </head>
  <body>
    <script>
      var prixUnitaire=5.5;
      var quantité=12;
      var tauxTVA=21.0;

      var prixTotalHT  = prixUnitaire * quantité;
      var montantTVA = prixTotalHT * tauxTVA / 100;
      var prixTotalTTC = prixTotalHT + montantTVA;

      document.write("<p>Votre commande: "+quantité+" 
x "+prixUnitaire+"DT = "+prixTotalHT+"DT HTVA</p>");
      document.write("<p>Montant de la TVA ("+tauxTVA+"%):
 "+montantTVA+"DT</p>");
      document.write("<p>Prix total: "+prixTotalTTC+"DT TTC</p>");
    </script>
  </body>
</html>

Exercices d’application

Eexercice 01

Enoncé

Question 1 : Créez un fichier HTML qui contient un bouton avec un identifiant et un conteneur pour afficher les résultats. Ajoutez également un titre à la page.
Question 2 : Utilisez CSS pour styliser la page. Assurez-vous que le titre, le bouton et le conteneur ont un aspect agréable. Ajoutez également une couleur de fond à la page.
Question 3 : Écrivez un script JavaScript qui réagit au clic sur le bouton. Dans ce script, déclarez trois variables : une avec var, une avec let et une avec const. Assurez-vous d’attribuer des valeurs aux variables et d’afficher leur contenu dans le conteneur résultat.
Question 4 : Ajoutez des commentaires dans le script JavaScript pour expliquer la portée des variables déclarées avec var, let, et const.
Question 5 : Exécutez l’application en ouvrant le fichier HTML dans un navigateur et cliquez sur le bouton « Tester » pour voir les résultats. Assurez-vous de bien comprendre comment la portée des variables fonctionne en JavaScript.
Question 6 : Regardez l’image du résultat ci-dessous, qui représente le contenu affiché après avoir cliqué sur le bouton « Tester » dans un exemple de code JavaScript.

Solution

Solution

Fichier HTML

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="style.css"> <title>Variables JavaScript</title> </head> <body> <h1>Test des variables var, let et const</h1> <div id="container"> <button id="btnTest">Tester</button> <p id="resultat"></p> </div> <script src="script.js"></script> </body> </html>

Fichier CSS

body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { color: #333; } #container { background-color: #fff; border: 1px solid #ccc; padding: 20px; margin: 20px; } button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } p { margin-top: 20px; }

Fichier JS

Eexercice 02

Enoncé

Objectif : Créez une page web interactive avec trois variables (var, let et const) en JavaScript et respectez l’image de résultat donnée à la fin.
Instructions :

Créez un fichier HTML nommé index.html et ajoutez la structure de base d’une page web. Assurez-vous d’inclure des balises <script> pour lier votre fichier JavaScript.
Créez un fichier CSS nommé style.css pour styliser la page selon les spécifications données ci-dessous.
Créez un fichier JavaScript nommé script.js pour déclarer et manipuler trois variables : une avec var, une avec let, et une avec const.
Utilisez les trois variables pour afficher du contenu dans un élément HTML, comme indiqué dans l’image de résultat ci-dessous.

Spécifications de l’image de résultat :

Un titre de page centré avec une police de caractères de votre choix.
Trois paragraphes (éléments <p>) disposés horizontalement, chacun affichant le contenu de l’une des variables : varVariable, letVariable, et constVariable.
Le texte dans les paragraphes doit être centré et avoir une couleur différente pour chaque variable.
Appliquez un style CSS pour améliorer l’apparence de la page en utilisant des couleurs, des marges, des polices, etc.

Consignes supplémentaires :

Utilisez les variables varVariable, letVariable, et constVariable pour stocker des chaînes de caractères de votre choix.
Respectez la portée appropriée pour chaque variable en fonction du mot-clé utilisé.
Assurez-vous que le contenu affiché dans les paragraphes correspond à ce qui est stocké dans les variables.

Image de résultat

Note : L’image de résultat est fournie à titre d’exemple. Vous pouvez personnaliser le contenu et le style pour correspondre à vos préférences, tant que les spécifications générales sont respectées. Cette activité permettra aux étudiants de créer une page web interactive en utilisant var, let, et const, tout en renforçant leur compréhension de la portée des variables en JavaScript.

Solution

Solution

Fichier HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Variables JavaScript</title> </head> <body> <h1>Exercice JavaScript avec var, let et const</h1> <p id="varVariable"></p> <p id="letVariable"></p> <p id="constVariable"></p> <script src="script.js"></script> </body> </html>

Fichier css

body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { color: #333; } p { display: inline-block; width: 30%; margin: 20px; padding: 10px; text-align: center; border: 1px solid #ccc; font-size: 18px; } #varVariable { background-color: #ff9900; color: #fff; } #letVariable { background-color: #0099cc; color: #fff; } #constVariable { background-color: #99cc00; color: #fff; }

Fichier js

// Déclaration des variables var varVariable = "Je suis une variable var"; let letVariable = "Je suis une variable let"; const constVariable = "Je suis une variable const"; // Affichage des variables dans les paragraphes HTML document.getElementById("varVariable").textContent = varVariable; document.getElementById("letVariable").textContent = letVariable; document.getElementById("constVariable").textContent = constVariable;

La syntaxe de base de Javascript

Les opérateurs en JavaScript

Sommaire du cours JavaScript

JavaScript

Les variables en JavaScript