Les variables en JavaScript

Les variables en JavaScript

  1. Objectif

    • Etre capable de déclarer et utiliser une variable en JavaScript



  2. 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 :
      1. explicitement par le mot clé var. var indice
      2. implicitement par son apparition à gauche du signe égal. b = 256
  3. 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.
  4. 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 souligné “_”.
      • La variable peut comporter un nombre indéterminé de lettres, de chiffres ainsi que des caractères _ et $.
      • Les espaces ne sont pas autorisés.
      • 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.
  5. Déclaration et initialisation des variables

    1. Exemple
      • var pi;
        var code_postal;
        var formulairel;
        var result$;
    2. 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;
    3. 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>

  6. Portée d’une variable

    • La portée d’une variable (ou scope) est le contexte dans lequel cette variable pourra être utilisée
    • 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>

  7. Exemples

    1. 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> 
    2. 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>
  8. Activités

    • Déclarez une variable de deux méthodes différentes et assignez-lui une valeur numérique, c’est-à-dire un nombre, par exemple, 18.
    • var myVariable = 18;
    • Déclarez deux variables et assignez leurs des valeurs numériques, en n’utilisant qu’un seul mot-clé var.
    • //Il suffit de séparer les deux variables par une virgule :
      var myVariable_1 = 18, myVariable_2 = 1337;
      //Il est également possible d'aller à la ligne après la virgule :
      var myVariable_1 = 18,
          myVariable_2 = 1337;
    • Déclarez trois variables var1, var2 et var3 comme “1”, “2” et var1+var2. Afficher le type et la valeur de chaque variable. Ensuite, forcez le type de var1 et var2 à entier et exécuter à nouveau var1+var2. Afficher le type et la valeur de chaque variable.

    Source: Livre AJAX développez pour le web2.0 Luc van lancker



Abonnez vous à notre chaîne YouTube gratuitement