[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > Apprenez le Javascript ! > Les bases du Javascript > Les variables > Lecture du tutoriel

Les variables

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Aujourd'hui, nous allons parler variables. Mais que sont les variables ?
Ceci étant long à expliquer, ce chapitre est fait pour cela.

Les variables sont des éléments indispensables dans tous les langages de programmation, aussi, il faut que vous ayez parfaitement acquis ce cours ! On les utilise pratiquement tout le temps, alors soyez attentifs.

Ah oui, bonne chance et bonne lecture.

Sommaire du chapitre :

Qu'est-ce qu'une variable ?
Afficher une variable
Modifier une variable
Q.C.M.

Qu'est-ce qu'une variable ?

Déjà, vous pouvez déduire une partie de la définition d'une variable dans son nom. C'est un truc qui change tout le temps.
En fait, une variable est une mémoire. Mais elle ne peut retenir qu'une seule chose. Elle est composée de deux éléments :

Une valeur : c'est la mémoire de la variable. Par exemple, si je veux retenir le nom du visiteur qui a gagné un jeu, je dis : "Hey toi là, la variable, retiens le nom du visiteur qui a gagné ce jeu".
Un nom : il va nous servir pour les distinguer entre elles. Par exemple : si la variable qui contient le nombre de visiteurs connectés sur le site s'appelle nombre_visiteurs, eh bien on dira : "Hep toi là, la variable nombre_visiteurs, dis-moi quel nombre tu as en mémoire !".

Si vous n'arrivez pas trop à vous imaginer ce qu'est une variable, je vous ai fait un schéma disponible ci-dessous.

On donne un nom à la variable. Ici c'est nom_du_visiteur. J'ai choisi ce nom car on comprend tout de suite ce qu'elle contient.
On donne une valeur à la variable. Ici c'est la chaîne de caractères Patrick. La variable la retient, et n'attend plus qu'on la lui demande.
Et là, il n'y a plus qu'à lui demander ce qu'elle a retenu.

Souvenez-vous, une chaîne de caractères, c'est-à-dire du texte, est toujours entre guillemets ou entre apostrophes ! Ne faites pas ceux qui ne savent pas ce que c'est, car dans le chapitre précédent avec document.write(), nous avions écrit une chaîne de caractères

Ok, mais ça va nous servir à quoi de dire à une variable de retenir un truc qu'on sait déjà, pour qu'au final elle nous le redise ?

C'est bientôt là que vous allez découvrir à quoi sert elle sert. À première vue, ça ne sert strictement à rien. Détrompez-vous ! La variable peut calculer, ouais, ouais. Si par exemple, vous lui dites de retenir 5 + 5, lorsque vous allez lui demander ce qu'elle a retenu, elle va vous répondre 10 !
Et encore, ce n'est qu'un avant-goût. Elles sont magiques, les variables !

Afficher une variable

Enfin, nous n'en sommes pas encore là. Il faut déjà créer une variable pour pouvoir l'utiliser.

Et comment on crée une variable ?

Il faut utiliser le mot var pour dire que ce qui va suivre après ce mot sera le nom d'une variable. C'est-à-dire que la syntaxe à respecter est var nom_de_la_variable;

Dernier rappel à ce sujet : n'oubliez pas le point-virgule, essentiel au bon fonctionnement du script. Votre script de 300 lignes peut ne pas fonctionner juste parce que vous avez oublié un point-virgule ! Je considère maintenant cette notion comme acquise.

Nous pouvons essayer cela tout de suite, il vous suffit de tester ce code.
Code : JavaScript

1	var nom_du_visiteur;

Essayer !

Là, rien ne se passe. Pourquoi ? Simplement parce que nous n'avons fait qu'un tiers du travail. Nous n'avons fait que nommer la variable, elle s'appelle nom_du_visiteur.

Passons à l'étape suivante qui consiste à donner une valeur à une variable. C'est là encore très simple, il suffit de dire ceci : "Toi la variable, tu vaux ça". Puisque notre variable se nomme nom_du_visiteur, nous allons lui affecter comme valeur "Patrick".
Code : JavaScript

1	var nom_du_visiteur = 'Patrick';

Si vous avez testé ce script, vous l'avez vu, il ne se passe toujours rien. C'est encore normal, car nous n'avons pas demandé à la variable de s'afficher. En revanche, elle existe !

La concaténation

Maintenant, on va attaquer la partie la plus difficile du chapitre : afficher la variable. À vrai dire, une fois que l'on a compris, c'est super facile à faire. Je vous mets le script qui affiche le contenu de notre variable, puis vous le testez, et enfin je vous explique comment ça marche.

Code : JavaScript

1 2	var nom_du_visiteur = 'Patrick'; document.write('Bienvenue '+nom_du_visiteur+' !<br/>Vous avez 3 nouveaux messages');

Essayer !

Explications :

On crée une variable qui a pour nom nom_du_visiteur, et pour valeur la chaîne de caractères "Patrick".
On commence à écrire à l'écran "Bienvenue" puis là, on ferme l'apostrophe, on met un plus ( + ) puis le nom de la variable, puis un autre plus, et enfin on remet une apostrophe et on finit sa phrase.

Cela peut paraître dur pour certains d'entre vous, mais on n'y échappe pas ! Relisez jusqu'à ce que vous ayez compris cette méthode, sinon vous serez complètement noyés dans les prochains chapitres.

Voilà, ce qu'on vient de faire s'appelle la concaténation. La variable nom_du_visiteur a été concaquetée concoctée concaténée.

Modifier une variable

Vous savez à présent créer, nommer et afficher une variable. Mais sachez qu'on peut faire d'autres trucs avec ! On va apprendre à la modifier une.

Je suis sûr que vous avez presque tous voulu un jour ne plus faire de calculs de tête. Bonne nouvelle, c'est grâce aux variables qu'on peut faire des calculs ! C'est très simple, regardez comment je m'y prends.
Code : JavaScript

var chiffre_a = 1;
var chiffre_b = 1;
var resultat = chiffre_a + chiffre_b;
document.write('Regardez la toute puissance des variables, elles font les calculs toutes seules<br/>');
document.write('Voici le calcul : '+chiffre_a+' + '+ chiffre_b+' = '+resultat+'<br/>');
document.write('Fantastique, n\'est-ce pas ?');

Essayer !

Explications :

En premier, j'ai créé toutes les variables dont j'avais besoin. J'ai créé chiffre_a qui contient le premier chiffre, puis chiffre_b qui lui contient le deuxième, et enfin resultat qui contient l'addition des variables chiffre_a et chiffre_b.
Ensuite, vous devriez avoir compris : j'ai concaténé toutes les variables de manière à afficher un calcul. Oui, moi aussi je trouve que ça se complique un peu dans toutes ces concaténations, mais on n'a pas le choix hein.

Et si je veux faire un autre calcul qu'une addition, je peux ?

Evidemment que vous pouvez ! Il suffit juste de retenir ces 4 signes qui vous serviront pour faire vos calculs (je fait ai fait un beau tableau tout clean, la classe

Signe à utiliser	Opération
%	modulo
/	division
*	multiplication
-	soustraction
+	addition

C'est quoi cette histoire de modulo ?

Le modulo est le reste de la division euclidienne... Quoi ? Vous voulez un rappel ? Bon ok, c'est juste en dessous.

Le modulo est le chiffre rouge

On peut maintenant tester toutes ces opérations.
Code : JavaScript

var chiffre_a = 4;
var chiffre_b = 7;
var resultat_addition = chiffre_a + chiffre_b;
var resultat_soustraction = chiffre_a - chiffre_b;
var resultat_multiplication = chiffre_a * chiffre_b;
var resultat_division = chiffre_a / chiffre_b;
var resultat_modulo = chiffre_a % chiffre_b;

document.write('Addition : '+chiffre_a+' + '+chiffre_b+' = '+resultat_addition+'<br/>');
document.write('Soustraction : '+chiffre_a+' - '+chiffre_b+' = '+resultat_soustraction+'<br/>');
document.write('Multiplication : '+chiffre_a+' * '+chiffre_b+' = '+resultat_multiplication+'<br/>');
document.write('Division : '+chiffre_a+' / '+chiffre_b+' = '+resultat_division+'<br/>');
document.write('Modulo : '+chiffre_a+' % '+chiffre_b+' = '+resultat_modulo+'<br/>');

Essayer !

Modifier une variable

Pour modifier une variable, c'est là encore très simple. Il suffit de respecter la syntaxe suivante : ma_variable = nouvelle_valeur;. Je vais vous faire un exemple avec une modification simple, et une autre plus compliquée.
Code : JavaScript

var ma_variable = 'Vincent';
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable = 133;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable = ma_variable + 77;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');

Essayer !

Vous l'avez bien vu, c'est long d'écrire ma_variable = ma_variable + 1. C'est pourquoi il existe quelques raccourcis pour aller plus vite. Je vous les montre, et puis je fais un exemple.

Opération sans raccourci	Raccourci
ma_variable = ma_variable % ma_variable2	ma_variable %= ma_variable2
ma_variable = ma_variable / ma_variable2	ma_variable /= ma_variable2
ma_variable = ma_variable * ma_variable2	ma_variable *= ma_variable2
ma_variable = ma_variable - ma_variable2	ma_variable -= ma_variable2
ma_variable = ma_variable + ma_variable2	ma_variable += ma_variable2
ma_variable = ma_variable - 1	ma_variable--
ma_variable = ma_variable + 1	ma_variable++

Code : JavaScript

var ma_variable = 27;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable++;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable--;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable += 5;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable -= 122;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable *= 39;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable /= 2;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');
ma_variable %= 67;
document.write('Ici, ma_variable vaut '+ma_variable+'<br/>');

Essayer !

Prenez le temps de bien tout mémoriser avant de passer au QCM, parce que vous en avez des choses à apprendre !

Q.C.M.

Que fait ce script ?

Code : JavaScript

1 2	var ma_variable = 1; document.write('ma_variable vaut '+ma_variable+', non ?')

Il efface tout ce qu'il y a sur la page, puis écrit ma_variable vaut 1, non ?
Une erreur
Rien

Que vaut ma_variable à la fin de ce script ?

Code : JavaScript

var na_variable = 1;
na_variable++;
na_variable++;
na_variable *= 5;
na_variable -= 2;
var ma_variable;

On ne sait pas
12
2
1

Que vaut nom_du_visiteur à la fin de ce script ?

Code : JavaScript

var nom_du_visiteur = 'Patrick';
nom_du_visiteur = 'Mohamed';
nom_du_visiteur = 'Vincent';
nom_du_visiteur = 'Jean ';
nom_du_visiteur += 'Claude';

Et une dernière pour la route : Que vaut age_du_herisson à la fin du script ?

Code : JavaScript

var age = 0;
var age_du_herisson;
age += 7;
age += 2;
age++;
age *= 10;
age--;
age %= 55;
age /= 11;
age_du_herisson = age;

Statistiques de réponses au QCM

Enfin ! On en a enfin fini avec les variables ! J'espère qu'à présent vous avez compris pouquoi ce cours était d'une importance capitale.

Au fait, j'ai oublié de vous montrer un dernier truc... :-°

Grâce aux variables on peut aussi gagner du temps sur des textes : étudiez bien ce texte, vous allez voir qu'il suffit juste de modifier une variable, et hop ! La lettre change de destinataire !
Code : JavaScript

var nom_du_destinataire = 'Jonathan';
document.write('Cher '+nom_du_destinataire+', <br/>');
document.write('Cela fait longtemps que je ne t\'avais pas écrit, et ça me manquait plus que tout au monde '+nom_du_destinataire+'<br/>');
document.write('Allez, je ne vais pas t\'enquiquiner plus que ça mon petit '+nom_du_destinataire+'<br/>');
document.write('Au revoir !<br/><br/><i>L\'admiratrice de '+nom_du_destinataire+'</i>');

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Les variables

Qu'est-ce qu'une variable ?

Afficher une variable

La concaténation

Modifier une variable

Modifier une variable

Q.C.M.

	Auteur : ZoZor Note : 19 / 20 (6 votes) Visualisations : 43 014 Plus d'informations Créé : le 28/06/2006 à 21:30:15 Modifié : le 22/08/2008 à 15:52:25 Avancement : 0% Licence : Copie non autorisée