Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les Variables.

Prérequis : Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif : Se familiariser avec les variables de base du JavaScript.

Outils nécessaires

Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension de leur contenu. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez Les outils de développement du navigateur pour plus d'informations sur la manière d'accéder à ces outils).

Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou estimeriez qu'une console incorporée est plus confortable.

Qu'est ce qu'une variable ?

Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :

<button>Pressez moi</button>
var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('Quel est votre nom ?');
  alert('Salut ' + name + ', sympa de vous voir !');
}

Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant le lecteur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue qui contient le nom, pris dans la valeur de la variable.

Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?

var name = prompt('Quel est votre nom ?');

if (name === 'Adam') {
  alert('Salut Adam, sympa de vous voir !');
} else if (name === 'Alan') {
  alert('Salut Alan, sympa de vous voir !');
} else if (name === 'Bella') {
  alert('Salut Bella, sympa de vous voir !');
} else if (name === 'Bianca') {
  alert('Salut Bianca, sympa de vous voir !');
} else if (name === 'Chris') {
  alert('Salut Chris, sympa de vous voir !');
}

// ... etc.

Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.

Les variables simplement font sens, et au fur et à mesure que vous en saurez plus sur le JavaScript elles deviendront une deuxième nature.

Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombre. Elles peuvent aussi contenir des données complexes et même des fonctions entières, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.

Notez bien que nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.

 

 

Déclaration d'une variable

Avant de se servir d'un variable, il faut d'abord la créer — plus précisément, nous disons déclarer la variable. Pour ce faire, nous saisissons le mot‑clé var suivi du nom que vous voulez donner à la variable :

var myName;
var myAge;

Dans ces lignes, nous venons de créer deux variables nommées respectivement myName et myAge. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous ouvrez cette console soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.

Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.

Vous pouvez maintenant tester si ces valeur existent maintenant dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple

myName;
myAge;

Actuellement elle ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur undefined en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant

scoobyDoo;

Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes.

Initialisation d'une variable

Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (=), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :

myName = 'Chris';
myAge = 37;

Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :

myName;
myAge;

Il est possible de déclarer et initialiser une variable en même temps, comme ceci :

var myName = 'Chris';

C'est probablement ce que vous ferez la plupart du temps, car plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.

Note : Si vous écrivez un programme JavaScript multiligne qui déclare et initialise une variable, il est possible d'initialiser (ex: Prenom = 'michel'et ensuite déclarer (ex: var Prenom); cela est possible, car les déclarations de variables sont enregistrées avant l'exécution du reste du code.  Ce processus se nomme «hoisting » (en français, "hissage") — lisez var hoisting pour plus de précisions sur ce sujet.

Mise à jour d'une variable

Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :

myName = 'Bob';
myAge = 40;

Aparté concernant les règles de nommage des variables

Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du souligné.

  • N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international.
  • N'utilisez pas de soulignés comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion.
  • Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur.
  • Une convention sure, nommée "lower camel case" (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules suivi des autres en majuscules. Nous avons utilisé ce système pour les noms de variables dans le présent article plus loin.
  • Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez l'emploi de lettres ou nombres isolés, ou de trop longues phrases.
  • Les variables sont sensibles à la casse — donc myage est une variable différente de myAge.
  • Enfin — vous devez éviter l'emploi des mots réservés du JavaScript comme noms de variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript ! Donc, vous ne pouvez pas utiliser des mots comme var, function, let ou for comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs.

Note : Vous trouverez une liste pratiquement complète des mots réservés à Lexical grammar — keywords.

Exemples de noms corrects :

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Exemples de noms incorrects :

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

Exemples de noms déclenchant des erreurs :

var
Document

Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.

Types de variables

 

Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.

Jusqu' à présent, nous en avons vu les deux suivantes, mais il y en a d'autres.

Nombres

Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.

var myAge = 17;

Chaînes

Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.

var dolphinGoodbye = 'So long and thanks for all the fish';

Booléens

Les booléens sont des valeurs true/false (vrai/faux) — elle ne peuvent prendre que deux valeurs, true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas  simple pourrait être :

var iAmAlive = true;

Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :

var test = 6 < 3;

Cette expression utilise l'opérateur  « inférieur à » (<) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra false, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.

Tableaux

Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];

Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :

myNameArray[0]; // renverra 'Chris'
myNumberArray[2]; // renverra 40

La valeur entre crochet précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.

Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.

Objets

En programmation, un objet est une structure de code qui modèlise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.

Entrez la ligne suivant dans la console de votre explorateur :

var dog = { name : 'Spot', breed : 'Dalmatian' };

Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :

dog.name

Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.

Typage faible

JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).

Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :

var myString = 'Hello';

Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :

var myNumber = '500'; // oops, c'est toujours une chaîne
typeof(myNumber);
myNumber = 500; // mieux — maintenant c'est un nombre
typeof(myNumber);

Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale typeof() — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra string, car à ce stade la variable myNumber contient la chaîne '500'. Observez bien et voyez ce que la fonction renvoie au second appel.

Résumé

Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier  comment  les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Eric-ciccotti, grandoc, Dralyab, tonybengue
Dernière mise à jour par : Eric-ciccotti,