Mis à jour le 16/01/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.

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.

var a;
console.log(a);

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

Dans votre répertoire intro-javascript, créez un répertoire chapitre_2 contenant deux sous-répertoires js et html. Avec Brackets, créez un fichier cours.js dans le répertoire js et un fichier cours.html pointant vers cours.js dans le répertoire html. Enfin, ajoutez le contenu ci-dessus dans cours.js et ouvrez cours.html avec Firefox. Vous obtenez le résultat suivant.

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.

Complétez le programme d'exemple comme indiqué ci-dessous.

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

Le résultat de son exécution est le suivant.

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.

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

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.

Dans l'exemple suivant, les lignes 2 et 3 permettent chacune d'augmenter la valeur de la variableb de 1.

var b = 0; // b contient la valeur 0
b += 1; // b contient la valeur 1
b++; // b contient la valeur 2
console.log(b); // Affiche 2

Espionner la valeur d'une variable pendant le débogage

Dans le chapitre précédent, vous avez appris comment observer de l'intérieur l'exécution d'un programme en le déboguant. Pendant le débogage, il est possible de surveiller l'évolution de la valeur contenue dans une variable en demandant au navigateur d'ajouter un espion

Regardez la vidéo suivante pour découvrir comment espionner la valeur d'une variable avec Firefox.

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.

// c est une expression dont la valeur est le nombre 3
var c = 3;
// d est une expression dont la valeur est celle de c (ici 3)
var d = c;
// (d + 1) est une expression
// Sa valeur est celle de d augmentée de 1 (ici 4)
d = d + 1; // d contient la valeur 4
console.log(d); // Affiche 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.

var e = 3 + 2 * 4; // e contient la valeur 11
e = (3 + 2) * 4; // e contient la valeur 20

Conversions de types

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.

var f = 100;
console.log("La variable f contient la valeur " + f);

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).

var g = "cinq" * 2;
console.log(g); // Affiche 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 ordresNumber() etString() qui convertissent respectivement en un nombre et une chaîne la valeur placée entre parenthèses.

var h = "5";
console.log(h + 1); // Concaténation : affiche la chaîne "51"
h = Number("5");
console.log(h + 1); // Addition numérique : affiche le nombre 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.

Dans le répertoire chapitre_2/js, créez un fichier nommébonjour.js ayant le contenu ci-dessous.

var prenom = prompt("Entrez votre prénom :");
alert("Bonjour, " + prenom);

Dans le répertoire chapitre_2/html, créez un fichier bonjour.html et faites-le pointer vers bonjour.js. Ouvrez cette page Web dans Firefox : une première boîte de dialogue apparaît pour demander la saisie du prénom.

Saisie du prénom de l'utilisateur

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

Tapez votre prénom dans la boîte de dialogue, puis cliquez sur le bouton OK. Une seconde boîte affiche un "bonjour" personnalisé. 

Affichage du

La valeur saisie dans la première boîte de dialogue a été stockée dans une variable de type chaîne nomméeprenom. Ensuite, l'ordre JavaScriptalert() a 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.

Saisie d'un nombre

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

var saisie = prompt("Entrez un nombre : "); // saisie est de type chaîne
var 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 :

var 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'ordreNumber() et affecté à la variablenb.

Nous utiliserons cette technique dans la suite de ce cours pour faire saisir des nombres à l'utilisateur.

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.

var nb1 = 5.5;
var nb2 = 3.14;
var nb3 = 2 * nb2 * nb1;
console.log(nb3);
var rayon = 5.5;
var pi = 3.14;
var 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 !

Créez les programmes associés à ces exercices dans le répertoire chapitre_2. Faites l'effort de bien nommer toutes vos variables et essayez d'obtenir exactement le résultat attendu, y compris dans le format des messages affichés.

Bonjour amélioré (résultat à obtenir)

Modifiez le programme bonjour.js créé précédemment pour afficher le nom et le prénom de l'utilisateur. Attention à bien respecter les espaces entre les mots dans le message final.

Affichage du

Valeurs finales

Observez le programmevaleurs.js et tentez de prévoir les valeurs finales de chaque variable.

var a = 2;
a = a - 1;
a++;
var b = 8;
b += 2;
var c = a + b * b;
var d = a * b + b;
var e = a * (b + b);
var f = a * b / a;
var g = b / a * a;

Vérifiez vos prévisions en créant ce programme puis en le déboguant pour observer les valeurs des variables.

Calcul de TVA (résultat à obtenir)

Ecrivez un programmetva.js qui fait saisir un prix hors taxes à l'utilisateur, puis qui affiche le prix TTC correspondant en se basant sur un taux de TVA à 19,6%.

Affichage du prix TTC pour un prix HT de 100 euros
Affichage du prix TTC pour un prix HT de 100 euros

Conversion Celsius/Fahrenheit (résultat à obtenir)

Ecrivez un programmeconversion.js qui fait saisir une température en degrés celsius, puis affiche le résultat de sa conversion en degrés fahrenheit. Rappel : en informatique, la virgule s'écrit avec un point.

"C'est à Daniel Gabriel Fahrenheit que l'on doit l'invention des thermomètres en graduation Fahrenheit. Au début, ses thermomètres sont à l'alcool (1709), mais il remplace rapidement l'alcool par du mercure (1715), permettant à ses outils de mesure de fournir des données comparables. En 1742, un autre scientifique, Anders Celsius, propose une nouvelle graduation au thermomètre. La conversion entre les échelles est donnée par [°F] = [°C] x 9/5 + 32."

Affichage du résultat pour une température saisie de 37,1°C
Affichage du résultat pour une température saisie de 37,1°C

Permutation de deux variables

Ecrivez un programmepermutation.js ayant initialement le contenu suivant.

var nombre1 = 5;
var nombre2 = 3;

// Tapez votre code ici (sans rien modifier d'autre !)

console.log(nombre1); // Doit afficher 3
console.log(nombre2); // Doit afficher 5

A l'endroit indiqué par un commentaire, ajoutez le code nécessaire pour inverser les valeurs des deux variables.

Solutions des exercices

Le code source des solutions est consultable en ligne.

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