web:javascript:fondamentaux:variables [WebGEPEM]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]

===== JavaScript - Variables et constantes =====

[Mise à jour le 19/6/2021]

  * **Sources** et compléments sur MDN Web Docs
    * <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire" title="Types et grammaire : les variables" target="_blank">Types et grammaire</a></html>
    * <html><a href="https://developer.mozilla.org/fr/docs/Tools/Browser_Console" target="_blank">Console JavaScript</a></html>

  * ** Lectures connexes**
    * Wikis WebPEM : [[:outils:vscode:web|"Préparer un projet de site Web avec l'IDE VSCode"]]

----

==== 1. Variables ====
  * **Sources** et compléments : <html><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Variables" target="_blank">MDN web docs Mozilla</a></html>

Dans tous les langages de programmation, les variables permettent de **mémoriser des informations** dans le but de leur appliquer un traitement. 

<note>Une variable est identifiée par un **nom** et un **type**. Elle contient une **valeur**.</note>

En JavaScript le nom d’une variable commence par une **lettre** ou par **$**. Une variable est déclarée explicitement par le mot-clé **var** (ou **let** : voir le pour aller plus loin). \\
Il est possible, mais pas obligatoire d’initialiser une variable (lui attribuer une valeur) lors de sa déclaration.

=== 1.1 Nommer une variable ===
<note>Le nom d’une variable doit être représentatif de son contenu. Il ne doit pas contenir d’espaces ou de caractères accentués.</note>
{{ :web:javascript:fondamentaux:camelcase.png?nolink&100|}}

__Exemple__

<code javascript *.js>
var maMoyenneEnTsin ;
</code>

<note tip>Dans la notation <html><a href="https://fr.wikipedia.org/wiki/Camel_case#:~:text=Le%20camel%20case%20(de%20l,de%20casse%2C%20selon%20la%20convention." target="_blank">camel case</a></html>, très utilisée en informatique, les mots constituant le nom d’une variable commencent par une majuscule, généralement à l’exception du premier.</note>

=== 1.2 Déclarer (créer) une variable ===
<note warning>La déclaration des variables est **INDISPENSABLE**. Une variable est déclarée avec le mot-clé **var**. Utiliser une variable non déclarée entraîne une erreur à l'exécution.</note>

__Exemples__

<code javascript *.js>
var i ; // variable non initialisée
var etat = true : // type booléen
var $Somme = 400; // type entier
var maMoyenneEnTsin = 12.5 ; // type nombre réel
var monPrenom = "Lucas" ; // type chaîne de caractères
</code>

<note tip>Pour déclarer **plusieurs** variables, les séparer par une virgule.</note>

=== 1.3 Les types de variables ===
Le JavaScript dispose actuellement de 7 types de données dont 6 sont dits primitifs: \\ 
  * **Number** (les nombres), 
  * **String** (les chaines de caractères), 
  * **Boolean** (les booléens), 
  * **Null** (rien, attribué à une variable pour qu'elle ne soit pas undefined), 
  * **undefined** (pas défini) et 
  * <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol" target="_blank">Symbol</a></html> (disponible depuis ES6, est un type de données unique et immuable), 
  * plus le type **Object** (Objet, peut contenir plusieurs variables de types differents).

<note important>Le langage JavaScript est faiblement typé, c'est-à-dire qu'il autorise une variable à contenir n'importe quel type et à en changer en cours d'exécution.</note>

  * **Tester l'existence d'une variable avec typeof**
<note>**typeof** est utilisé pour vérifier l'existence d'une variable ou en vérifier le type.</note>

__Exemple__

<code javascript *.js>
var nombre = 20;
console.log(typeof nombre); // résultat dans la console : "number"

var texte = 'Mon texte';
console.log (typeof texte); // résultat dans la console : "string"

var booleen = false;
console.log (typeof booleen); // résultat dans la console : "boolean"

var test = null;
console.log (typeof test); // résultat dans la console : "object"

console.log (typeof nothing); // résultat dans la console : "undefined"
</code>

=== 1.4 Les blocs d'instruction ===
<note important>En JavaScript, une instruction se termine par un **point-virgule** ou un **saut de ligne**. Un bloc d'instructions commence par **{** et se termine par **}**.</note>

__Exemple__

<code javascript .js>
if (a >= 5) { // Exécuté si a>=5
    b -= 1;
    c += 2;
} else { // Exécuté si a<5
    b += 1;
    c -= 2;
}
</code>

=== 1.5 La portée d'une variable ===
<note>La portée d'une variable est l'ensemble des éléments du code source où la variable existe et est manipulable.</note>

    * **Variable locale** : une variable locale se déclare à l'intérieur d'une fonction et n'est accessible que dans la fonction.
    * **Variable globale** : une variable globale se déclare en début de script et est accessible par toutes les fonctions du script. Dans une fonction, une variable globale peut être appelée en utilisant le mot-clé **this** (this.mavariable ).
 
__Exemple__ 

<code html *.html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Portée des variables</title>
</head>

<body>
    <script type="text/javascript">
        var a = 2; // variable globale

        function testvar() {
            var b = 4; // variable locale
            a = 1; // ou this.a
            console.log("a= " + a); // renvoie a=1
        }
        testvar();
        console.log("b= " + b) // renvoie Uncaught ReferenceError: b is not defined
    </script>
</body>

</html>
</code>

=== 1.6 Pour aller plus loin ... ===
Utilisation de **let** : <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#D%C3%A9clarations" target="_blank">MDN web docs - Les variables</a></html>

==== 2. Constante ====
  * **Sources** et compléments : <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/const" target="_blank">MDN web docs Mozilla</a></html>

<note>Une constante est comparable à une variable qui ne peut pas être modifiée une fois créée. Elle est déclarée par le mot-clé **const** et doit être obligatoirement initialisée.</note>

<code js *.js>
const PI = 3.1415927;
</code>