• Facile

Ce cours est visible gratuitement en ligne.

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

J'ai tout compris !

Mis à jour le 14/08/2017

Les variables

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

Un ordinateur sait bien faire des calculs et des opérations en tout genre.
Mais il possède également une mémoire "infaillible" pour retenir un tas d'informations (les résultats des calculs, par exemple ;) ) : vous allez voir dans ce chapitre qu'en Javascript, savoir utiliser cette mémoire est indispensable, ou presque...

Profiter de la mémoire de son ordinateur

En javascript, vous aurez rapidement besoin de demander à votre ordinateur de retenir des données.
Qu'est-ce que j'entends par données ? Aussi bien des nombres que des mots, ou des phrases (et même plus). C'est ce que nous verrons un peu plus bas.

De quelle manière sont enregistrées les données ?

Peut-être vous demandez-vous comment votre ordinateur range toutes ces informations ?
Vous vous doutez bien qu'on ne fait pas un "gros tas" de données, en vrac : imaginez la galère pour retrouver ce qui nous intéresse :waw: .
Comme vous vous en doutez, tout cela est organisé.

Illustrons un peu le fonctionnement ...

Imaginez plein de boîtes vides : c'est la mémoire de l'ordinateur.
On veut par exemple retenir le nombre 2006, mais on ne peut pas le mettre comme ça dans une boîte vide, car on ne pourra pas le retrouver !
On va donc coller une étiquette sur une boîte, pour la nommer "annee" : on pourra donc la retrouver plus tard.
On va maintenant pouvoir y ranger le nombre 2006 à l'intérieur.

Illustration

Image utilisateur

Eh bien en JS, c'est un peu ce principe :

  • la boîte porte le nom de variable.

  • L'étiquette est le nom de cette variable (dans notre cas, annee).

  • Le nombre 2006 est la valeur de cette variable.

Que faire avec ces données ?

Premièrement (c'est la raison pour laquelle vous les avez enregistrées :) ), vous allez pouvoir les lire quand vous en aurez besoin.
Cela consiste à ouvrir la boîte, prendre l'information, l'utiliser et la remettre dans sa boîte.
Par exemple, on fait un calcul, on enregistre le résultat dans une variable, et lorsque l'utilisateur clique sur un bouton spécial, on affiche le résultat.

Pouvoir lire ces données, c'est déjà pas mal.
Mais vous aurez vite besoin de les modifier.
Dans ce cas, on ouvre la boîte, et on remplace l'ancienne valeur par la nouvelle.
Une application (certes stupide :D ) : un bouton qui, à chaque clic, augmente de 1 la valeur d'une variable. Vous pouvez alors afficher le nombre de fois que le visiteur a cliqué sur ce bouton (ou "comment occuper son petit frère pendant quelques heures" :p ).

Créer, lire et modifier une variable

Maintenant que vous avez compris (du moins je l'espère ;) ) ce que c'était, voyons le fonctionnement en JavaScript.

Créer la variable

Pour créer une variable, rien de compliqué. Voici comment ça fonctionne :

var nom;

nom est le nom de la variable (si vous avez aimé mon illustration, c'est ce qui est écrit sur l'étiquette collée sur la boîte).
Le terme exact n'est pas "créer" , mais déclarer une variable.
Pour ceux qui aiment les maths, si on prend la phrase "soit x l'âge de Toto, en années", le var correspondrait au soit.

(Note : nous verrons un peu plus loin qu'il y a des cas pour lesquels on ne déclare pas une variable.
Mais retenez pour l'instant qu'il ne faut pas oublier la déclaration).

On peut donner le nom qu'on veut à nos variables ?

Eh non, ce serait trop beau :euh: .
Le nom peut contenir les 26 lettres de l'alphabet, en majuscules et en minuscules, les 10 chiffres ainsi que le underscore (le tiret du bas, touche 8 sur les claviers français).
Mais il ne doit pas commencer par un chiffre.

Il y a également des mots "interdits" : ils existent déjà en JS, mais pour autre chose. Si on les utilise comme nom de variable, l'ordinateur ne saura plus de quoi il s'agit.
Parmi cette liste de mots, les plus courants (pour un français) seraient "break", "case", "char", "continue", "delete", "double", "final", "long", "new", "public" et "super". Les autres sont des noms anglais moins courants (je ne pense pas que vous ayez l'idée d'appeler une variable "throws" :p ).
Vous pourrez retrouver la liste complète en annexe.

Heureusement, ça vous laisse quand même du choix dans le nom de vos variables :) .

Préférez aussi un nom relativement court et explicite pour vos variables.
N'allez pas créer la variable taratata, hEUrE ou bien laDateDeNaissanceDuMonsieurQuiVisiteMonNouveauSiteWeb ;) .
Dans le premier cas, on ne sait pas ce que c'est, dans le second, vous risquez de vous tromper entre majuscules et minuscules, et le dernier... un peu lourd et pas très pratique à écrire !
Préférez les noms heure et dateDeNaissance (ou date_de_naissance (avec des tirets) : à vous de trouver la meilleure écriture).

Notez que nous utilisons une mémoire temporaire : les variables sont détruites lorsque le visiteur quitte la page (lorsqu'il change de page, entre autres).

Modifier la valeur d'une variable

Pour modifier la valeur d'une variable, rien de plus simple : on utilise pour cela le symbole d'affectation = de cette manière :

var annee;
var message;

annee = 2006;
message = "Bonjour, visiteur";

Il est possible, lorsque l'on crée une variable, de lui affecter immédiatement une valeur. On dit qu'on initialise cette variable.

var annee = 2006;
var message = "Bonjour, visiteur";

Pourquoi met-on des guillemets dans la variable message ?

Car ils délimitent du texte. Je n'en dis pas plus, j'y reviendrai un peu plus bas.

On peut modifier une variable autant de fois qu'on veut :

var annee = 2004; // on declare et initialise la variable
annee = 2005; // on modifie une premiere fois
annee = 2006; // puis une deuxieme fois
Lire une variable

Lorsque l'ordinateur trouve un nom de variable, il fait directement référence à son contenu.
Autrement dit, si j'ai une boîte nommée annee contenant la valeur 2006, si je parle à l'ordinateur de annee (sans guillemets), il ira chercher la valeur contenue par cette boîte.

Un exemple sera plus simple : reprenons nos alertes.

var annee = 2006;
alert(annee);

ce qui affichera "2006"...
Remarquez l'absence de guillemets : en effet, on ne veut pas afficher le texte "annee", mais le contenu de cette variable.

Alors maintenant, on ne doit pas mettre de guillemets lors des alertes ?! o_O

Je n'ai jamais dit ça : voyons plutôt quand les utiliser.

Les chaînes de caractères

"Chaîne de caractères", un nom au premier abord un peu barbare ...
Ce n'est en fait pas bien méchant.

En anglais : string (je ne le dis pas pour le "jeu de mot" d'une finesse sans égale, mais parce que, tôt ou tard, vous en entendrez parler).
C'est une suite de caractères (un caractère est une lettre, un chiffre, un espace, un tiret...) qui a un ordre précis.
Dit autrement, ce sont des caractères mis bout-à-bout.
Cela forme donc... du texte ! (Dit comme ça, c'est tout de suite plus simple ^^ .)

C'est un type de donnée, au même titre qu'un nombre.

Une sous-partie entière pour nous parler du texte ? o_O

Eh oui, vous verrez qu'il y a des choses à dire...

Délimiter une chaîne de caractères

Vous vous dites peut-être : "c'est facile, il suffit d'écrire le texte après le signe = pour enregistrer du texte dans une variable".

Que nenni !
Et cela pour plusieurs raisons : tout d'abord, comment l'ordinateur saurait où se trouve le début et la fin de votre texte ? (Le point virgule en fait-il partie, ...)
Deuxièmement, l'ordinateur analysera le type de données : est-ce que ce sont des variables ? Des chiffres ?

Il va donc falloir dire à l'ordinateur : "ceci est une chaîne de caractères, n'essaie pas de comprendre".
Et pour cela, on utilise indifféremment les guillemets " (dits "double quotes") ou les apostrophes ' (dites "simple quotes") : ils délimitent la chaîne de caractères, un peu comme une citation.

Pourquoi deux types de guillemets ?

Car le JavaScript peut être placé directement dans une balise (x)HTML (rappelez-vous du onclick) : dans ce cas, on ne peut pas mettre de double quotes (ils sont déjà utilisés en (x)HTML pour délimiter le script). On utilise donc les simple quotes.

Un exemple :

<img src="monImage.png" alt="" onclick="alert('Bonjour');" />

Voyons quelques exemples (avec les variables) :

// deux chaines de caracteres
var message1 = 'Une autre chaine de caracteres';
var message2 = "C'est une chaine de caracteres ...";

// maintenant, on les affiche
alert(message1);
alert(message2);
Caractères spéciaux et d'échappement

Et si je veux mettre des guillemets à l'intérieur de ma chaîne, qui est délimitée par des guillemets ?
Et comment je fait un saut de ligne ?

Tout d'abord, les guillemets.

Il faut dire à l'ordinateur que les guillemets du milieu sont des caractères normaux, et non pas les délimiteurs.
Pour cela, on utilise ce qu'on appelle un caractère d'échappement : on fait précéder le guillemet à afficher d'un \ (antislash, touches Alt Gr + 8 pour les claviers français, Alt Gr + < pour les belges).
Et pour afficher un antislash... on le fait précéder d'un antislash aussi ^^ .

var message1 = "Ceci est un \"petit\" test. Mais pas besoin d'antislash \\ devant les apostrophes.";
var message2 = 'Un autre "petit" test. Cette fois, il faut penser à l\'antislash devant les apostrophes';

alert(message1);
alert(message2);

Les caractères spéciaux

On peut également insérer des retours à la ligne (qu'on ne peut pas insérer simplement en appuyant sur la touche Enter), ainsi que des tabulations ou autres.

Voici les caractères spéciaux les plus courants :

  • qui insère un retour à la ligne.

  • pour insérer une tabulation (ne marche pas dans tous les cas)

  • \b pour insérer un backspace (comme si vous appuyez sur la touche "retour arrière", celle au-dessus de Enter qui permet d'effacer le dernier caractère).

  • \uXXXX pour insérer le caractère donc la valeur unicode est XXXX (cette valeur est un nombre en hexadécimales).
    Vous pouvez trouver la liste de ces caractères avec leur valeur sur cette page wikipédia.

Un exemple (cela signifie "Bonjour ! - Comment vous appelez-vous ?" en allemand. Je l'ai pris pour le caractère spécial) :

alert("Guten Tag !\nWie hei\u00DFen Sie ?");

La concaténation

Concaquoi ?! o_O

Pas de panique, encore un mot compliqué pour quelque chose de simple.
Partons d'un "exercice" : on a une variable age qui contient ... l'âge du visiteur (si, si !).
On veut afficher un message annonçant : "Vous avez XX ans" (XX est l'âge).

Immédiatement, vous m'écrivez ceci :

alert("Vous avez age ans");

Et, ô déception, vous voyez s'afficher "Vous avez age ans". :'(

Pour faire cela, on va en fait mettre bout-à-bout nos 3 morceaux de chaîne (le premier morceau est "Vous avez ", ensuite la variable age, et enfin " ans", sans oublier les espaces après "avez" et avant "ans").
Concaténer, c'est en fait "mettre bout-à-bout" plusieurs chaînes de caractères pour n'en former qu'une seule.

Comment faire ? On utilise simplement le symbole de concaténation + entre chaque morceau (pour ceux qui connaissent, en php, c'est le point qui est utilisé), comme ceci :

var age = 18; // on cree la variable pour pouvoir tester
alert("Vous avez " + age + " ans"); // on affiche les chaines mises bout-à-bout

(On aurait aussi pu créer une variable message contenant la chaîne concaténée, et l'afficher ensuite.)

Demander une chaîne de caractère au visiteur

Vous avez peut-être envie de tester ce code, mais avec une variable age contenant l'âge qu'on aura demandé au visiteur ?
Voyons une première façon de le lui demander.

Vous vous souvenez sûrement de nos alert("message"); affichant un message dans une boîte de dialogue.
Eh bien il existe un moyen très proche (encore une boîte de dialogue) pour demander au visiteur de saisir son âge.

Une boîte de dialogue demandant au visiteur de saisir un texte

Image utilisateur
var age = prompt("Texte d'invite");

Entre les parenthèses, on met une chaîne de caractères (comme pour alert) qui sera affichée au-dessus du champ pour saisir son texte.
On récupère la chaîne de caractères dans la variable age (notez que si elle a déjà été déclarée, on ne met pas le var devant).

Voici un exemple complet (que je vous conseille de réaliser) : on demande l'âge du visiteur pour le lui afficher ensuite (dans une phrase).
Ce qui nous donne ceci :

var age = prompt("Quel âge avez-vous ? (en années)"); // on demande l'age
alert("Vous avez " + age + " ans");          // on affiche la phrase

Vous savez maintenant écrire... apprenons donc à compter ;) .
C'est vrai, après tout, un ordinateur n'est rien d'autre qu'une espèce de grosse machine à calculer.

Les nombres

Un autre type de variable

Les nombres, au même titre que les chaînes de caractères, sont un type de variable.
Comme ce sont des nombres (l'ordinateur sait compter), on ne met pas de guillemets : l'ordinateur va "comprendre" qu'il s'agit d'un nombre, et va l'enregistrer à sa manière (et non pas bêtement chiffre par chiffre, comme il l'aurait fait avec une chaîne de caractères).

Ils se classent en deux catégories :

  • les nombres entiers : ce sont des valeurs exactes ;

  • les nombres à virgule (les entiers très grands - beaucoup plus qu'un milliard - rentrent dans cette catégorie) : il faut garder à l'esprit que ces valeurs ne sont pas toujours exactes !
    Pourquoi ? Car il se peut que certains nombres décimaux (avec un nombre fini de chiffres, comme 0,2) ne se "terminent pas" pour l'ordinateur (un peu comme 1/3 ne se termine pas).
    D'où cette imprécision.

Un petit exemple :

var nombre = 1.234;
alert(nombre);

Des nombres pour calculer

Comme vous le savez, avec des nombres... on peut faire des calculs. Eh oui, le JavaScript, c'est parfois aussi des maths ^^ .
L'ordinateur est particulièrement doué pour ces calculs...
Voici les opérateurs de base :

  • + (addition), exemple : 52 + 19 = 71

  • - (soustraction), exemple : 52 - 19 = 33

  • * (multiplication), exemple : 5 * 19 = 95

  • / (division), exemple : 5 / 3 = 1,666...667 (une petite vingtaine de "6")

  • % (modulo) : ici, quelques explications s'impose.
    a % b (si b est positif, ce qui est le cas dans presque toutes les applications) est le reste de la division de a par b.
    Exemple : 52 % 19 = 14 (car 52 = 19*2 + 14)

Allons faire quelques exercices d'application...
Un programme qui demande deux nombres et qui en affiche le quotient (qui effectue une division, si vous préférez).
A vos claviers ;) .

Correction...

// on demande les nombres
var nombre1 = prompt('Premier nombre ?');
var nombre2 = prompt('Deuxieme nombre ?');

// on calcule le quotient et on l'affiche
var resultat = nombre1 / nombre2;
alert("Le quotient de ces deux nombres est " + resultat);

Notez qu'on aurait pu afficher directement le résultat, sans créer une variable pour celui-ci. On aurait alors mis le calcul à la place du nom de la variable dans le message à afficher.

Cas particuliers

Peut-être avez-vous essayé de faire planter le truc (le genre de truc que j'adore m'amuser à faire :p ).
Voici les messages que vous avez pu obtenir :

  • si vous entrez "0" en deuxième nombre (division par 0 impossible...) : le résultat sera "Infinity" ou "-Infinity" (l'infini, positif ou négatif).

  • Si vous avez entré du texte, vous obtenez un joli "NaN".
    Ça ne veut pas dire "Nan, fais pas ça !" (bah quoi, ça aurait pu ? :ange: ).
    NaN signifie Not aNumber ("Pas un nombre") : c'est un message que vous serez sûrement amenés à rencontrer ...

Nombres et chaînes de caractères

Vous vous demandez comment convertir un nombre en chaîne de caractères, ou inversement ?

Chaîne --> nombre

Sachez que dans la plupart des cas, la conversion est faite au-to-ma-ti-que-ment.
Un exemple ? Dans votre script de division (quelques lignes plus haut), on demande en fait au visiteur non pas un nombre, mais une chaîne de caractères. Mais lorsque vous demandez à diviser, l'ordinateur sait qu'il ne peut pas les diviser. Il va donc essayer de les convertir en nombre (c'est là qu'il vous sort le fameux "NaN" s'il n'arrive pas à effectuer cette conversion).

Une preuve ? Essayez le même script, mais avec une addition...
L'ordinateur va croire qu'il doit concaténer ces deux chaînes.
Résultat : en tapant "8" et "12", on obtient... 812 !

Mais comment je fais pour mon script de calculatrice, alors ?!

Rassurez-vous, il est fort heureusement possible d'effectuer "manuellement" cette conversion, grâce à parseInt(chaine_a_convertir) (convertir en un nombre entier) et à parseFloat(chaine_a_convertir) (convertir en un nombre décimal).

Quelques exemples vous montrant la souplesse de ces fonctions :

  • parseInt("12.9 Euros") vaudra 12 (on convertit en entiers, les chiffres après la virgule sont ignorés)

  • parseInt(" 12 Frs ") vaudra également 12 (l'espace en début de chaîne est ignoré)

  • parseInt("J'ai 12 Euros") vaudra Nan (la chaîne commence par une lettre)

  • parseFloat(" 12.9 Frs ") vaudra 12.9

  • parseFloat("3,14") vaudra... 3 : il faut utiliser le point et non la virgule. La conversion va donc s'arrêter après le "3".

Voici le script de division transformé en script d'addition :

var nombre1 = prompt('Premier nombre ?');
var nombre2 = prompt('Deuxieme nombre ?');

// on convertit en nombres decimaux et on calcule
var resultat = parseFloat(nombre1) + parseFloat(nombre2);
alert("La somme de ces deux nombres est " + resultat);
Nombre --> chaîne

Idem, cette conversion se fait automatiquement (lorsque l'on affiche un nombre au milieu de texte, il le convertit pour le concaténer ensuite).

Si vraiment vous avez besoin d'effectuer manuellement cette conversion (par exemple en voulant afficher deux nombres les uns derrière les autres), vous pouvez ajouter des '' (deux apostrophes).
En ajoutant une chaîne entre ces nombres, l'ordinateur sera forcé de les concaténer.
Exemple :

var nombre1 = 8;
var nombre2 = 12;
alert(nombre1 + '' + nombre2);

Priorités de calcul

Ces opérateurs se rangent en deux catégories :

  • la première est composée des multiplications (*), division (/) et modulo (%)

  • la seconde regroupe addition (+) et soustraction (-).

- Tout d'abord, les opérations de la première catégorie sont effectuées de gauche à droite.
- Ensuite (il ne reste donc que des additions et soustractions, les autres calculs sont déjà effectués), le calcul se fait de gauche à droite.

S'il y a des parenthèses, on effectue le calcul entre celles-ci en priorité, suivant ces règles.

Un exemple : calcul étape par étape (en bleu, le calcul à effectuer ; en gras, le résultat du calcul précédent) :

  • 15 - 7 * 6 % 2 + 3 (catégorie 1, de gauche à droite)

  • 15 - 42 % 2 + 3 (idem)

  • 15 - 0 + 3 (ne reste que la catégorie 2 : de gauche à droite)

  • 15 + 3 (idem)

  • 18.

D'autres opérateurs pour simplifier l'écriture

Certains calculs reviennent régulièrement.
Parmi ceux-ci, on peut citer ceux du genre :

resultat = resultat + X;     // on ajoute X à la variable resultat

Il existe l'opérateur += s'utilisant comme ceci :

resultat += X;     // on augmente la valeur de resultat de X

Ces deux lignes sont strictement équivalentes.

Il existe, de la même manière, les opérateurs -= (on retranche la valeur de la deuxième variable à celle de la première), *= (on multiplie la valeur de la première variable par celle de la deuxième), /= (idem mais avec une division) et %=.

Incrémentation / décrémentation

Lorsque l'on veut augmenter de 1 la valeur d'une variable (on dit incrémenter), par exemple pour un compteur, on utilise la notation :

variable++;

De même, pour décrémenter (diminuer la valeur de 1) une variable, le code est le suivant :

variable--;
Pour résumer...

Voici plusieurs lignes de codes qui sont parfaitement équivalentes.

variable += X;
variable = variable + X;
variable -= X;
variable = variable - X;
variable *= X;
variable = variable * X;
variable /= X;
variable = variable / X;
variable %= X;
variable = variable % X;

Les opérateurs pour incrémenter / décrémenter :

variable++;
variable += 1;
variable = variable + 1;
variable--;
variable -= 1;
variable = variable - 1;

Maintenant que vous savez manier les variables, direction le prochain chapitre pour en tester le contenu !

Exemple de certificat de réussite
Exemple de certificat de réussite