Créé le 01 Juin 2008, par Anis Safine
S'il y avait un chapitre à ne pas rater, je pense que ce serait ce chapitre sur les variables. En fait, ça ne sert à rien d'avancer dans le cours si vous ne maîtrisez pas parfaitement ce chapitre, car nous n'allons pas arrêter d'approfondir le sujet. 
Mais n'ayez pas peur de ce mot qui semble un peu technique, il ne cache rien de compliqué... juste quelque chose de fondamental qui nous poursuivra jusque dans notre tombe !
Remonter
1. Un peu de théorie
C'est sans doute la question que la plupart d'entre vous a dû se poser en voyant le titre de ce chapitre : mais qu'est-ce que c'est qu'une variable ?
Votre première réflexion a dû ressembler à : C'est une chose qui varie !
Oui, effectivement, c'est quelque chose qui varie souvent, mais c'est surtout quelque chose qui contient une donnée : un texte, un nombre.
Cette variable, c'est vous qui allez la créer et qui allez dire quelle donnée elle va contenir. Cette donnée va alors être enregistrée dans la mémoire de l'ordinateur de façon temporaire : le temps que la variable existe.
Et c'est quoi le temps de vie d'une variable ?
Et bien toutes les variables créées dans une page existeront tant que cette page restera ouverte et ne sera pas actualisée. Dès que vous quitterez la page, toutes les variables seront détruites.
L'intérêt d'une variable, c'est de pouvoir y stocker des informations que l'on peut réutiliser un peu plus tard. Une variable est donc reliée à une valeur (c'est à la dire la donnée qu'elle contient) mais également à un nom (ou identifiant) qui permet de la retrouver.
Ainsi, lorsque vous créerez une variable, vous lui donnerez un identifiant, "prenom" par exemple, et une valeur comme "Anis". Vous n'aurez ensuite plus qu'à demander la valeur de "prenom" et l'ordinateur vous répondra gentiment "Anis".
Par la suite, vous pourrez sans problème dire : tiens, j'ai changé d'avis, maintenant je veux que "prenom" contienne "Jean-Patrick" et la valeur de la variable sera changée instantanément. Du coup, si vous re-demandez la valeur de "prenom", l'ordinateur vous répondra, toujours aussi gentiment, "Jean-Patrick". 
Une dernière chose à retenir, c'est qu'un identifiant est propre à une variable, ce qui signifie qu'il est impossible d'avoir deux variables avec le même identifiant !
J'ai été très répétitif mais il faut vraiment que tout le monde comprenne bien le principe. Ne vous inquiétez pas si cela vous paraît encore un peu flou, vous allez être tout de suite plus à l'aise avec un peu de pratique !
Remonter
2. Déclarer une variable
La première étape, rappelez-vous, c'est la création, ou déclaration, de la variable. Pour cela, il faut lui trouver un nom et le faire précéder du mot réservé var :
Code javascript
// Exemple de déclaration d'une variable
var prenom;
Si vous testez ce bout de code, rien ne s'affiche mais je vous le garantie : vous venez de créer votre première variable !
Nous avons donc le mot-réservé var qui dit à l'ordinateur "attention, je vais te donner le nom d'une variable que tu dois créer", suivi du nom de notre variable et enfin notre inoubliable point-virgule qui termine l'instruction et dit à l'ordinateur "c'est bon, le nom de la variable se finit là !".
"Mais c'est quoi bon sang, un mot réservé ?"
Doucement... j'y viens ! Je vous le disais en début de chapitre, le nom d'une variable est appelé un identifiant et tout identifiant doit respecter quelques règles (sinon ce serait trop simple ) :
- un identifiant doit commencer par une lettre, un underscore "_" ou le symbole dollar "$" (et rien d'autre !)
- les caractères suivants peuvent être une lettre, un chiffre, un underscore ou le symbole dollar
- un identifiant ne peut pas être un mot réservé
Voici une liste de déclarations :
Code javascript
// Déclarations valides
var prenom;
var Prenom;
var prénom;
var _prenom;
var $prenom;
var euro2008;
var coupe_europe;
// Déclarations invalides
var 2008;
var 2dollars;
var email@;
var anis.safine;
var anis safine; // Pas d'espaces dans un identifiant !
var var;
Comme vous pouvez le constater, vous avez le droit d'utiliser des accents dans l'identifiant d'une variable mais c'est quelque chose que je vous déconseille car interdit dans d'autres langages. Une simple question d'habitude.
Une autre chose à savoir, c'est que le JavaScript est sensible à la casse. Derrière cette phrase apparemment compliquée se cache un principe très simple : le JavaScript fait la différence entre les minuscules et les majuscules.
En bref, la variable "prenom" et la variable "Prenom" sont différentes ! Attention à bien faire attention à ça à chaque fois que vous programmerez en JavaScript !
D'ailleurs, cette histoire de casse doit vous rappeler quelque chose... vous vous souvenez de ce que je disais quand nous en étions à notre première instruction ?
"Lorsque l'on utilise la fonction document.write() on doit veiller à mettre tout le nom de la fonction en minuscule !"
Eh oui, c'est à cause de la casse ! Comme quoi tout s'explique !
Venons-en aux mots-réservés. Dans beaucoup de cas comme dans celui de la déclaration d'une variable, l'ordinateur a besoin d'un mot particulier pour comprendre ce qu'on lui dit. Ici on a besoin du mot "var" pour faire comprendre à l'ordinateur que l'on veut déclarer une variable.
Et tiens... vous vous souvenez des booléens ? true et false sont des mots-réservés ! Et NaN ? Mot-réservé aussi !
Il existe un grand nombre d'autres mots-réservés entièrement listés à cette page (à ne pas retenir par cœur sous peine de mal de tête). Bien évidemment, si vous utilisez un mot-réservé comme identifiant, l'ordinateur ne va pas comprendre ce que vous voulez...
Par exemple, dans le cas de "var var", l'ordinateur lit le premier "var" et comprend qu'on veut déclarer une variable... il attend donc un identifiant mais il lit un deuxième var qui le prévient qu'on va déclarer une variable... Bon, je ne vous le cache pas mais en plus d'être un crétin, votre ordinateur est relativement susceptible et il n'aime pas que l'on se moque de lui ! 
Donc si vous utilisez un mot-réservé pour un identifiant, il y a de fortes chances (toutes les chances en fait...) pour que votre ordinateur vous fasse la gueule.
Une dernière chose avant de passer à la seconde étape : vous pouvez déclarer plusieurs variables en même temps en séparant les identifiants par des virgules :
Code javascript
// Déclarer plusieurs variables en même temps
var nom, prenom, age;
Cette instruction crée trois variables d'un coup : "nom, "prenom" et "age" ! Et comme d'habitude, n'oubliez pas le mot-réservé "var" et de finir l'instruction par un point-virgule !
Remonter
3. Assigner une valeur
Nous savons maintenant ce qu'est une variable et comment la déclarer. Reste plus qu'à voir comment assigner (donner) une valeur à une variable ! Voici des exemples d'assignation :
Code javascript
// On déclare nos variables
var entier, flottant, chaine1, chaine2, booleen;
// On leur assigne une valeur
entier = 234;
flottant = 5.5;
chaine1 = "Tu t'appelles comment ?";
chaine2 = 'Je m\'appelle anis';
booleen = true;
Conclusion, pour une assignation de valeur : on utilise l'identifiant de la variable à laquelle on veut assigner une valeur suivi du signe égal "=" et enfin la valeur que l'on veut lui assigner. Vous aurez remarqué que l'on n'utilise plus le mot réservé var mais uniquement l'identifiant !
Initialiser une variable
Il est possible en JavaScript de faire quelque chose de très utile : assigner une valeur à une variable en même temps que de la déclarer ! On parle d'initialiser une variable ! Et on fait comme ça :
Code javascript
var exemple = 'Hello world !'; // Initialiser une seule variable
var prenom = 'Anis', nom = 'Safine', age = 18; // Initialiser plusieurs variables
Vous ne voyez pas ce que ça a de particulièrement utile ? Et bien cela évite de travailler avec des variables vides et d'avoir d'éventuels problèmes dans la suite du code.
Utiliser la valeur d'une variable
Génial ! Nos variables ont des valeurs maintenant !
Mais comment peut-on utiliser ces valeurs ?
Etudions le code suivant :
Code javascript
var test = 5;
document.write(test + 2);
Vous constaterez que cela affiche le résultat de l'opération "5 + 2", c'est à dire 7. En fait c'est tout simple, dans une opération, lorsque l'ordinateur tombe sur l'identifiant d'une variable, il le remplace par la valeur contenue par cette variable.
Donc, pour utiliser la valeur d'une variable, que ce soit pour faire une opération ou pour l'afficher, il suffit simplement d'utiliser son identifiant !
Quelques questions...
1. Que se passe-t-il si on fait plusieurs assignations de valeur à la même variable ?
C'est très simple ! Lorsque l'on assigne une valeur à une variable, cela supprime définitivement son ancienne valeur par la nouvelle. Vous n'avez donc aucun moyen de récupérer l'ancienne valeur, faites attention à ça ! Testez donc le code suivant :
Code javascript
var prenom = 'Anis';
document.write(prenom);
prenom = ' Jean-Patrick';
document.write(prenom);
prenom = ' Paul';
document.write(prenom);
Vous voyez qu'on assigne trois fois de suite une valeur à la variable "prenom" et que l'on affiche entre chaque assignation la valeur de cette variable... Et bien vous constatez qu'à chaque fois, la variable change de valeur complètement.
Il s'agit peut-être là de la seule difficulté avec les variables quand on les découvre pour la première fois. Retenez bien ceci : lorsque l'on assigne une valeur à une variable, on perd définitivement son ancienne valeur.
Je vous proposerais un petit exercice en fin de chapitre pour être sûr que vous avez bien compris.
2. Tu dis que lorsqu'on assigne une valeur à une variable, cela supprime définitivement son ancienne valeur... mais si on a jamais rien assigné, elle n'en a pas !
En fait, je ne vous ai pas dit toute la vérité... Lorsque vous déclarez votre variable sans l'initialiser, elle a tout de même une valeur... une valeur particulière en fait : undefined (encore un mot réservé !).
"undefined" est tout simplement la valeur d'une variable déclarée mais qui n'a aucune valeur assignée. Essayez ceci pour voir :
Code javascript
var test;
document.write(test);
Un joli "undefined" se dresse devant vous.
3. Est-ce que j'ai le droit d'assigner un type de donnée à une variable alors qu'elle en contient déjà un autre ?
Bien évidemment, cela ne pose aucun problème !
Le code suivant est parfaitement valide :
Code javascript
var exemple = 8;
exemple = 'Anis';
Un exercice pour bien finir
Regardez ce bout de code :
Code javascript
// Déclaration des variables
var a = 5, b = 2, c;
// Affichage du contenu des variables
document.write('Valeur de a : ' + a + '<br/>Valeur de b : ' + b);
Ecrivez des instructions entre la déclaration et l'affichage du contenu des variables pour inverser le contenu de a et de b, c'est à dire pour avoir comme affichage :
Valeur de a : 2
Valeur de b : 5
La réponse au prochain chapitre !
Remonter
Conclusion
Vous voilà désormais armés de variables ! Non seulement vous savez ce que c'est, mais vous savez les déclarer, leur assigner des valeurs et les utiliser dans des opérations !
Un petit avertissement tout de même : je vous déconseille vivement d'avancer dans le cours tant que vous ne serez pas parfaitement à l'aise avec ce chapitre !
Et un avis aux intéressés ! Au chapitre prochain, nous allons découvrir une notion bien étrange : les objets !
