Mis à jour le 19/11/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Jouez avec les variables

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous savez maintenant utiliser JavaScript pour afficher des valeurs.  Mais pour qu'un programme soit véritablement utile, il faut qu'il puisse mémoriser des données, par exemple des informations saisies par un utilisateur. C'est l'objet de ce chapitre.

TL;DR

  • * Une variable est une zone de stockage d'information. Chaque variable possède un nom, une valeur et un type. En JavaScript, le type d'une variable est déduit implicitement de sa valeur, et non pas défini explicitement. Il s'agit d'un langage à typage dynamique.

  • On déclare une variable JavaScript avec le mot-cléletsuivi du nom de la variable. Si la valeur initiale d'une variable n'est pas destinée à changer, on utilise de préférence le mot-cléconst  pour déclarer une variable constante.

  • L'opérateur d'affectation  =  permet de donner une valeur à une variable. Dans le cas d'une variable de type nombre, on peut utiliser l'opérateur +=  pour augmenter et l'opérateur ++  pour incrémenter (augmenter de 1) sa valeur.

  • La portée (scope) d'une variable représente la portion du code source dans laquelle cette variable est utilisable. Les variables définies avec  let  et  const  ont une portée de type bloc : elles ne sont utilisables qu'à l'intérieur du bloc de code dans lequel elles sont définies. Un bloc de code est délimité par une paire d'accolades ouvrante et fermante.

  • Une expression est un morceau de code combinant des variables, des valeurs et des opérateurs. L'évaluation d'une expression produit une valeur et correspond à un certain type.

  • On peut inclure des expressions dans une chaîne de caractères délimitée par une paire d'accents graves seuls (  `...`  ). Ces chaînes sont appelées modèles de libellés (template literals).

  • Des conversions de type peuvent avoir lieu implicitement lors de l'évaluation d'une expression, ou bien explicitement avec les instructions  Number()  et  String()  qui convertissement respectivement une expression en un nombre et en une chaîne.

  • Les instructions  prompt()  et  alert()  permettent respectivement de faire saisir et d'afficher une information sous la forme d'une boîte de dialogue. Elles ne fonctionnent que dans le contexte d'un navigateur web.

  • Il est essentiel de bien nommer ses variables et d'adopter une convention de nommage, comme par exemple camelCase.

La notion de variable

Rôle des variables

Un programme informatique mémorise des données en utilisant des variables. Une variable est une zone de stockage d'information. On peut l'imaginer comme une boîte dans laquelle on range des choses. 

Propriétés d'une variable

Une variable possède trois grandes propriétés :

  • Son nom, qui permet de l'identifier. Un nom de variable peut contenir des lettres majuscules ou minuscules, des chiffres (sauf en première position) et certains caractères comme le dollar ($)  ou le tiret bas, appelé underscore (_).

  • Sa valeur, qui est la donnée actuellement mémorisée dans cette variable.

  • Son type, qui détermine le rôle et les opérations applicables à cette variable. 

Déclarer une variable

Avant de pouvoir stocker des informations dans une variable, il faut la créer. Cette opération s'appelle la déclaration de la variable. Au niveau de l'ordinateur, déclarer une variable déclenche la réservation d'une zone de la mémoire attribuée à cette variable. Le programme peut ensuite lire ou écrire des données dans cette zone mémoire en manipulant la variable.

Voici un exemple de code qui déclare une variable puis affiche sa valeur.

let a;
console.log(a);

En JavaScript, on déclare une variable à l'aide du mot-cléletsuivi du nom de la variable. Dans cet exemple, la variable créée se nommea.

Vous pouvez tester interactivement ce code, ainsi que les prochains exemples, dans cet éditeur interactif.

C2-1

On constate que le résultat affiché estundefined. Il s'agit d'un type JavaScript qui indique l'absence de valeur. Immédiatement après sa déclaration, une variable JavaScript n'a pas de valeur, ce qui est logique. 

Affecter une valeur à une variable

Au cours du déroulement du programme, la valeur stockée dans une variable peut changer. Pour donner une nouvelle valeur à une variable, on utilise l'opérateur=, appelé opérateur d'affectation.

let a;
a = 3.14;
console.log(a);

La valeur de la variable a été modifiée par l'opération d'affectation. La ligne  a = 3.14  se lit "a reçoit la valeur 3,14".

On peut également combiner déclaration et affectation d'une valeur en une seule ligne. Il est cependant important de bien distinguer leurs rôles respectifs. Le programme ci-dessous est équivalent au précédent.

let a = 3.14;
console.log(a);

Déclarer une variable constante

Si la valeur initiale d'une variable ne changera jamais au cours de l'exécution du programme, cette variable est ce qu'on appelle une constante. Il vaut alors mieux la déclarer avec le mot-clé  const  plutôt qu'avec  let. Cela rend le programme plus facile à comprendre, et cela permet aussi de détecter des erreurs.

const a = 3.14; // Création d'une variable constante
a = 6.28;       // Impossible : a ne peut pas changer de valeur !

Incrémenter une variable de type nombre

Il est également possible d'augmenter ou de diminuer la valeur d'un nombre avec les opérateurs+= et++. Ce dernier est appelé opérateur d'incrémentation, car il permet d'incrémenter (augmenter de 1) la valeur d'une variable.

let b = 0;      // b contient 0
b += 1;         // b contient 1
b++;            // b contient 2
console.log(b); // 2

Portée d'une variable

On appelle portée (scope) d'une variable la portion du code source dans laquelle cette variable est visible et donc utilisable. Les variables déclarées avec  let  et  const  ont une portée de type bloc : elles ne sont visibles qu'au sein du bloc de code dans lequel elles sont déclarées (ainsi que dans tous les sous-blocs éventuels).

En JavaScript et dans de nombreux autres langages, un bloc de code est délimité par une paire d'accolades ouvrante et fermante. Un programme JavaScript correspond par défaut à un unique bloc de code.

let num1 = 0;
{
  num1 = 1; // OK : num1 est déclarée dans le bloc parent
  const num2 = 0;
}
console.log(num1); // 1
console.log(num2); // Erreur : num2 n'est pas visible ici !

La notion d'expression

Une expression est un morceau de code qui produit une valeur. On crée une expression en combinant des variables, des valeurs et des opérateurs. Toute expression produit une valeur et correspond à un certain type. Le calcul de la valeur d'une expression s'appelle l'évaluation. Lors de l'évaluation d'une expression, les variables sont remplacées par leur valeur.

const c = 3; // 3 est une expression dont la valeur est 3
let d = c; // c est une expression dont la valeur est celle de c (3 ici)
d = d + 1; // (d + 1) est une expression dont la valeur est celle de d + 1 (4 ici)
console.log(d); // 4

Une expression peut comporter des parenthèses qui modifient la priorité des opérations lors de l'évaluation. En l'absence de parenthèses, la priorité des opérateurs est la même qu'en mathématiques.

let e = 3 + 2 * 4; // e contient 11 (3 + 8)
e = (3 + 2) * 4;   // e contient 20 (5 * 4)

Le langage JavaScript permet d'inclure des expressions dans une chaîne de caractères lorsque cette chaîne est délimitée par une paire d'accents graves seuls ou backticks (  `...`  ). Une telle chaîne est appelée un modèle de libellé ou template literal. A l'intérieur, les expressions sont indiquées par la syntaxe  ${expression}.

On utilise souvent cette possibilité pour créer des chaînes intégrant des valeurs de variables.

const country = "France";
console.log(`Je vis en ${country}`); // "Je vis en France"

const x = 3;
const y = 7;
console.log(`${x} + ${y} = ${x + y}`); // "3 + 7 = 10"

Conversions de type

L'évaluation d'une expression peut entraîner des conversions de type. Ces conversions sont dites implicites : elles sont faites automatiquement, sans intervention du programmeur. Par exemple, l'utilisation de l'opérateur+ entre une valeur de type chaîne et une valeur de type nombre provoque la concaténation des deux valeurs dans un résultat de type chaîne.

const f = 100;
console.log("f contient " + f); // "f contient 100"

Le langage JavaScript est extrêmement tolérant au niveau des conversions de type. Cependant, il arrive qu'aucune conversion ne soit possible. En cas d'échec de la conversion d'un nombre, la valeur du résultat est NaN (Not a Number).

const g = "cinq" * 2;
console.log(g); // NaN

Il arrive parfois que l'on souhaite forcer la conversion d'une valeur dans un autre type. On parle alors de conversion explicite. Pour cela, JavaScript dispose des instructionsNumber() etString() qui convertissent respectivement en un nombre et une chaîne la valeur placée entre parenthèses.

const h = "5";
console.log(h + 1); // Concaténation : affiche "51"

const i = Number("5");
console.log(i + 1); // Addition numérique : affiche 6

Interactions avec l'utilisateur

Saisie et affichage d'informations

Maintenant que nous savons utiliser des variables, nous pouvons écrire des programmes qui échangent des informations avec l'utilisateur.

const prenom = prompt("Entrez votre prénom :");
alert(`Bonjour, ${prenom}`);

La première ligne affiche une boîte de dialogue permettant de saisir un message.

Saisie du prénom de l'utilisateur

Cette boîte est le résultat de l'exécution de l'instructionprompt("Entrez votre prénom :")

La valeur saisie dans la première boîte de dialogue est stockée dans une variable de type chaîne nomméeprenom. Ensuite, l'instructionalert()déclenché l'affichage de la seconde boîte, contenant le résultat de la concaténation de la chaîne"Bonjour" avec la valeur de la variableprenom

Bla

Saisie d'un nombre

Quel que soit le texte saisi, l'instructionprompt() renvoie toujours une valeur de type chaîne. Il faudra penser à convertir cette valeur avec l'instructionNumber() si vous souhaitez ensuite la comparer à d'autres nombres ou l'utiliser dans des expressions mathématiques.

const saisie = prompt("Entrez un nombre : "); // saisie est de type chaîne
const nb = Number(saisie); // nb est de type nombre
// ...

Il est possible de combiner les deux opérations (saisie et conversion) en une seule ligne de code, pour un résultat identique :

const nb = Number(prompt("Entrez un nombre : ")); // nb est de type nombre
// ...

Ici, le résultat de la saisie utilisateur est directement converti en une valeur de type nombre par l'instructionNumber() et affecté à la variablenb.

Affichage de plusieurs informations

Nous avons vu dans le précédent chapitre que l'instruction JavaScript  console.log()  permet d'afficher une information. Il est possible de l'utiliser pour afficher plusieurs valeurs simultanément, en les séparant par des virgules.

const temp1 = 36.9;
const temp2 = 37.6;
const temp3 = 37.1;
console.log(temp1, temp2, temp3); // "36.9 37.6 37.1"

Importance du nommage des variables

Pour clore ce chapitre, j'aimerais insister sur un aspect parfois négligé par les développeurs débutants : le nommage des variables. Le nom choisi pour une variable n'a pour la machine aucune importance, et le programme fonctionnera de manière identique. Rien n'empêche de nommer toutes ses variablesa,b,c...,  voire de choisir des noms absurdes commesteackhache oujesuisuncodeurfou.

Et pourtant, la manière dont sont nommées les variables affecte grandement la facilité de compréhension d'un programme. Observez ces deux versions du même exemple.

const nb1 = 5.5;
const nb2 = 3.14;
const nb3 = 2 * nb2 * nb1;
console.log(nb3);
const rayon = 5.5;
const pi = 3.14;
const perimetre = 2 * pi * rayon;
console.log(perimetre);

Leur fonctionnement est strictement identique, et pourtant la compréhension du second est beaucoup plus rapide grâce aux noms choisis pour ses variables.

Comment faire pour bien nommer les variables de ses programmes ?

Choisir des noms significatifs

La règle la plus importante est de donner à toute variable un nom qui reflète son rôle. C'est bien le cas dans le second exemple ci-dessus : les variablesrayon,pi etperimetre stockent respectivement le rayon d'un cercle, la valeur du nombre PI et le périmètre calculé.‌

Bannir les caractères accentués

Les caractères accentués comme é ou è sont mal supportés dans certains environnements et sont inconnus du monde anglophone. Mieux vaut les éviter : on nommera une variableperimetre plutôt quepérimètre.

Ne pas utiliser les noms réservés du langage

Les mots-clés du langage JavaScript sont des noms réservés. Ils ne doivent pas être utilisés comme noms de variables. Vous trouverez sur cette page la liste des noms réservés de JavaScript.

Adopter une convention de nommage

Il faut parfois plusieurs mots pour décrire le rôle de certaines variables. Dans ce cas, on a intérêt à adopter une convention de nommage, c'est-à-dire une manière uniforme d'écrire les noms de toutes les variables. Il en existe plusieurs. Dans ce cours, nous allons adopter la plus fréquemment utilisée : la norme camelCase (appelée parfois lowerCamelCase). Elle repose sur deux grands principes :

  • Tout nom de variable commence par une lettre minuscule.

  • Si le nom d'une variable se compose de plusieurs mots, la première lettre de chaque mot (sauf le premier) s'écrit en majuscule.

Par exemple, les nomsmontantTravauxMaison oucodeClientSuivant respectent la norme camelCase.

À vous de jouer !

Valeurs finales

C2-E1

Conversion Celsius/Fahrenheit

C2-E2

Permutation de deux variables

C2-E3

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite