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.
Je vous rappelle que le JS est exécuté côté client.
Un exemple : vous pouvez enregistrer l'âge d'un visiteur pour lui souhaiter un bon anniversaire le jour J (sur son PC, en enregistrant sa date de naissance).
En revanche, impossible de créer un livre d'or : on ne peut pas enregistrer les messages sur le serveur pour les rendre accessible à tous les visiteurs.
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
.
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
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
) : 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"
).
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 :
Code : JavaScript
C'est une instruction, vous remarquez donc le point-virgule en fin de ligne...
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).
Faites attention à ne pas déclarer deux fois la même variable.
On peut donner le nom qu'on veut à nos variables ?
Eh non, ce serait trop beau
.
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"
).
Vous pourrez retrouver la liste complète en annexe.
Heureusement, ça vous laisse quand même du choix dans le nom de vos variables
.
Le JavaScript est sensible à la casse : autrement dit, il fait la différence entre lettres majuscules et minuscules.
Ainsi, nom, Nom et NOM sont trois variables différentes !
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 :
Code : JavaScript1
2
3
4
5 | var annee;
var message;
annee = 2006;
message = "Bonjour, visiteur";
|
Il n'est pas obligatoire de déclarer les variables au début du code, mais ça peut vous éviter de déclarer deux fois une même variable.
Il est possible, lorsque l'on crée une variable, de lui affecter immédiatement une valeur. On dit qu'on
initialise cette variable.
Code : JavaScript1
2 | 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 :
Code : JavaScript1
2
3 | 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.
Code : JavaScript1
2 | 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 ?!
Je n'ai jamais dit ça : voyons plutôt quand les utiliser.
Les variables
.)
).
Eko57
)
Trouvez une formation
Suggestions
Flux RSS News
Facebook
Google+