| Alain Barraud | Mémento informatique |
JavaScript - Partie 2
Retour accueil JS
Sommaire partie 2
Les variables
Profiter de la mémoire de son ordinateur
En JS, on a rapidement besoin de demander à l' ordinateur de retenir des données.
Comment sont enregistrées les données ?
Shématiquement et pour illustrer le fonctionnement et l'organisation de cette mémoire :
- La mémoire est composée de boîtes vides (au départ).
- Avant de stocker une donnée dans une boîte vide, pour pouvoir la retrouver, on colle une étiquette sur la boîte.
En JS, c'est le même principe :
- La boîte s'appelle variable
- L'étiquette est le nom de cette variable
- La donnée est la valeur de cette variable
Que faire avec ces données ?
Si on enregistre ces données, c'est pour :
- pouvoir aller les lire quand on en a besoin (cela revient à ouvrir la boîte, prendre l'information, l'utiliser et la remettre dans sa boîte).
- pouvoir aussi, si besoin, les modifier (dans ce cas, on ouvre la boîte et on remplace l'ancienne valeur par la nouvelle).
Créer, lire et modifier une variable
Créer la variable
Voici comment on crée une variable :
 |
C'est une instruction, donc on a un point-virgule en fin de ligne. |
"nom" est le nom de la variable (de façon illustée, c'est l'étiquette sur la boîte).
Le terme exact n'est pas créer, mais déclarer une variable.
Nota : il y a des cas pour lesquels on ne déclare pas une variable.
Attention à ne pas déclarer deux fois la même variable.
Règles pour nommer les variables :
- Le nom peut contenir les 26 lettres de l'alphabet, en majuscules et en minuscules, les 10 chiffres ainsi que le underscore (tiret du bas).
- Il ne doit pas commencer par un chiffre.
- Il y a des mots "interdits". Ils existent déjà en JS mais pour autre chose. Parmi les plus courants : break, case, char, continue, delete, double, final, long, new, public, super (voir liste complète).
|
Le JS est sensible à la casse. Ainsi : nom, Nom et NOM sont 3 variables différentes. |
|
JS utilise une mémoire temporaire : les variables sont détruites lorsque le visiteur quitte ou change de page. |
Modifier la valeur d'une variable
Pour modifier la valeur d'une variable, on utilise pour cela le symbole d'affectation = de cette manière :
2 var message;
3
4 annee = 2009;
5 message = "Bonjour, visiteur";
|
Il n'est pas obligatoire de déclarer les variables au début du code, mais ça peut é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.
2 var message = "Bonjour, visiteur";
Nota : les guillemets dans la variable "message" servent à délimiter le texte.
On peut modifier une variable autant de fois qu'on veut :
2 annee = 2008; // on modifie une premiere fois
3 annee = 2009; // puis une deuxieme fois
Lire une variable
Lorsque l'ordinateur trouve un nom de variable, il fait directement référence à son contenu.
Exemple : 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.
2 alert(annee);
Test dans code page : Quelle année ?.
Noter l'abscence de guillemets car, on ne veut pas afficher le texte "annee", mais le contenu de cette variable.
Les chaînes de caractères
"Chaînes de caractères", string en anglais, est une suite de caractères (un caractère est une lettre, un chiffre, un espace, un tiret…) qui a un ordre précis.
C'est un type de donnée, au même titre qu'un nombre.
Délimiter une chaîne de caractères
Signifier à l'ordinateur qu'il s'agit d'une chaîne de caractères. Pour cela, on utilise indifféremment les guillemets " (dits "double quotes") ou les apostrophes ' (dits "simple quote"). Ils délimitent la chaîne de caractères.
Pourquoi deux types de guillemets ?
Car le JS peut être placé directement dans une balise (x)HTML. 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.
Exemple :
Entre les parenthèses, on met une chaîne de caractères.
Quelques exemples avec les variables :
2 var message1 = 'Une autre chaine de caracteres';
3 var message2 = "C'est une chaine de caracteres…"; Attention aux guillemets. Il faut ici des guillemets doubles à cause du C'est… ou bien il faut l'écrire C\'est…
4
5 // maintenant, on les affiche
6 alert(message1);
6 alert(message2);
Caractères spéciaux et d'échappement
Comment mettre des guillemets à l'intérieur d'une chaîne qui est délimitée par des guillemets ,
Et comment on fait un saut de ligne ?
Les guillemets
|
Ce qui ne marche pas, car les guillemets servent à délimiter la chaîne : |
|
Code : JavaScript
1 var message = "Ceci est un "petit" test";
2 alert(message); |
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).
Et pour afficher un antislash… on le fait précéder aussi d'un antislash.
2 var message2 = 'Un autre "petit" test. Cette fois, il faut penser à l\'antislash devant les apostrophes';
3
4 alert(message1);
5 alert(message2);
Les caractères spéciaux
Caractères spéciaux les plus courants :
- \n qui insère un retour à la ligne.
- \t pour insérer une tabulation (ne marche pas dans tous les cas)
- \b pour insérer un backspace (comme si on appuie 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).
On peut trouver la liste de ces caractères avec leur valeur sur cette page wikipédia.
La concaténation
Concaténer, c'est en fait "mettre bout-à-bout" plusieurs chaînes de caractères pour n'en former qu'une seule.
Exemple, on a une variable age qui contient l'âge du visiteur.
On veut afficher un message annonçant :"Vous avez XX ans" (XX est l'âge).
Si on écrit :
Pour cela, on va utiliser le symbole de concaténation + entre chaque morceau (idem qu'en php avec le point), comme ceci :
2 alert("Vous avez " + age + " ans");// on affiche les chaines mises bout-à-bout
message contenant la chaîne concaténée, et l'afficher ensuite.)
Demander une chaîne de caractère au visiteur
Dans l'exemple précédent, on pourrait avoir une variable age contenant l'âge qu'on aurait demandé au visiteur.
Un peu comme alert("message");, il existe une autre boîte de dialogue pour demander au visiteur de saisir son âge.
Boîte de dialogue demandant au visiteur de saisir un texte
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.
Récuper la chaîne de caractères dans la variable age (noter que si elle a déjà été déclarée, on ne met pas le var devant).
Cela donne :
2 alert("Vous avez " + age + " ans");// on affiche la phrase
Les nombres
Un autre type de variable
Au même titre que les chaînes de caractères, les nombres 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 ! (certains nombres décimaux comme 1/3 sont infinis, d'où l'imprécision.
|
On n'utilise pas la virgule, mais le point. On écrira par exemple 3,14 3.14. |
2 alert(nombre);
Des nombres pour calculer
Les opérateurs de base :
- + addition
- - soustraction
- * multiplication
- / division
- % modulo : quand on a a%b et que b est positif (ce qui est presque toujours le cas), alors a%b est le reste de la division de a par b.
Exemple : 52%19=14 (car 52=19*2+14).
2 var nombre1 = prompt('Premier nombre ?');
3 var nombre2 = prompt('Deuxieme nombre ?');
4
5 // on calcule le quotient et on l'affiche;
6 var resultat = nombre1 / nombre2;
7 alert("Le quotient de ces deux nombres est " + resultat);
Test dans code page : Premier nombre ?, Deuxième nombre ?.
Donc : Quotient des 2 nombres
Cas particuliers
Suivant les nombres donnés, on peut obtenir certains messages :
- si on entre "0" en deuxième nombre (division par 0 impossible) : le résultat sera "Infinity" ou "-Infinity" (l'infini, positif ou négatif).
- Si on a entré du texte, on obtient un "NaN" (Not a Number).
Nombres et chaînes de caractères
Comment convertir un nombre en chaîne de caractères, ou inversement ?
Chaîne --> nombre
En général, la conversion est faite au-to-ma-ti-que-ment.
Pour preuve, dans l'exemple précédent, dans le script de division, on demande en fait au visiteur non pas un nombre, mais une chaîne de caractères. Mais lorsqu'on demande à 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 sort le "NaN" s'il n'arrive pas à effectuer cette conversion).
Si maintenant, on essaie 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 !
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 :
- 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".
2 var nombre2 = prompt('Deuxieme nombre ?');
3
4 // on convertit en nombres decimaux et on calcule;
5 var resultat = parseFloat(nombre1) + parseFloat(nombre2);
6 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 on a besoin d'effectuer manuellement cette conversion (par exemple en voulant afficher deux nombres les uns derrière les autres), on peut ajouter des '' (deux apostrophes).
En ajoutant une chaîne entre ces nombres, l'ordinateur sera forcé de les concaténer.
Exemple :
2 var nombre2 = 12;
3 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 (-).
- 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.
Entre autres :
De même, il existe 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 :
De même, pour décrémenter (diminuer la valeur de 1) une variable, le code est le suivant :
Pour résumer …
Voici quelques lignes de codes parfaitement équivalentes.
2 variable = variable + X;
2 variable = variable - X;
2 variable = variable * X;
2 variable = variable / X;
2 variable = variable % X;
Les opérateurs pour incrémenter / décrémenter :
2 variable = += 1;
3 variable = variable + 1;
2 variable = -= 1;
3 variable = variable - 1;