Introduction au JavaScript
1 Les variables
a La déclaration
Le Javascript étant très souple au niveau de l'écriture (à double-tranchant car il laisse passer des erreurs...), la déclaration des variables peut se faire de deux façons :
-
soit de façon explicite, en faisant précéder la variable du mot clé var
var chaine = "bonjour";
-
soit de façon implicite, en laissant le navigateur déterminer qu'il s'agit d'une déclaration de variable
chaine = "bonjour";
b Portée (visibilité) des variables
Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible (visible) de partout dans le script ou bien uniquement dans une portion confinée du code, on parle de « portée » d'une variable.
-
Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite, elle est accessible de partout dans le script (n'importe quelle fonction du script peut faire appel à cette variable).
On parle alors de variable globale. -
La portée d'une variable déclarée de façon explicite (précédée du mot-clé var), dépend de l'endroit où elle est déclarée.
Une variable déclarée au début du script, avant toute fonction, sera globale. Elle peut être utilisée n'importe où dans le script.
Une variable déclarée explicitement dans une fonction aura une portée limitée à cette seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs. On parle alors de « variable locale ».
var a = 12;
var b = 4;
function MultipliePar2(b) {
var a = b * 2;
return a;
}
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);
Le double de 4 est 8
La valeur de a est 12
var a = 12;
var b = 4;
function MultipliePar2(b) {
a = b * 2;
return a;
}
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);
Le double de 4 est 8
La valeur de a est 8
c Les types de données dans les variables
En Javascript il n'est pas nécessaire de déclarer le type des variables, contrairement à des langages évolués tels que le langage C ou le Java pour lesquels il faut préciser s'il s'agit d'entier (int), de nombre à virgule flottante (float) ou de caractères (char).
En fait, le Javascript n'autorise la manipulation que de 4 types de données :
- des nombres : entiers (int) ou à virgules (float)
- des chaînes de caractères (string) : une suite de caractères
-
des booléens (bool): des variables permettant de vérifier une condition.
true : si le résultat est vrai
false : lors d'un résultat faux - des variables de type null: un mot caractèristique pour indiquer que la variable ne contient aucune donnée.
d Conversions de types
Même si Javascript gère de façon transparente les changements de type des variables, il est parfois nécessaire de forcer la conversion du type.
Ainsi Javascript fournit deux fonctions natives permettant de convertir le type des variables passées en paramètre :
- parseInt() permet de convertir une variable en nombre
- parseFloat() permet de convertir une variable en nombre décimal
2 Les tableaux
Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois.
Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois insuffisant, car il devient difficile de gérer un grand nombre de variable distinctes.
Pour y remédier Javascript propose une structure de données permettant de stocker l'ensemble de ces données dans une "variable commune" : le tableau.
Un tableau, en Javascript, est donc une variable pouvant contenir plusieurs données indépendantes, indexées par un numéro, appelé indice.
L'indice d'un tableau est ainsi l'élément permettant d'accéder aux données qui y sont stockées.
Il existe 2 méthodes pour déclarer un tableau :
var MonTableau = ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];
var MonTableau = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4");
Pour plus de rigueur, un tableau devrait être déclaré avant que l'on lui affecte des valeurs.
var MonTableau = new Array();
Il est possible d'utiliser des indices personnalisés pour indexer les valeurs du tableau, on parle alors de tableau associatif. Javascript autorise en effet l'utilisation d'une chaîne ou d'un nombre spécifique pour indexer les valeurs du tableau.
Voici un exemple de représentation d'un tableau associatif :
MonTableau["Pierre"] = 12;
MonTableau["Jean-François"] = 25;
MonTableau["Paul"] = 16;
MonTableau["André"] = 22;
Indice | "Paul" | "André" | "Pierre" | "Jean-François" |
---|---|---|---|---|
Donnée | 16 | 22 | 12 | 25 |
Le langage Javascript propose l'objet Array, comportant de nombreuses méthodes permettant de manipuler les tableaux, c'est-à-dire d'insérer, supprimer, ou extraire des éléments dans le tableau et également de trier les élément du tableau.
MonTableau.push('donnée'); //Cette méthode ajoute un ou plusieurs éléments au tableau.
MonTableau.splice(); //Cette méthode ajoute/retire des éléments d'un tableau.
MonTableau.sort(); //Cette méthode permet de trier les éléments d'un tableau.
MonTableau.join(); //Cette méthode renvoie une chaîne de caractères contenant tous les éléments du tableau.
3 Les boucles
a WHILE
Tant que la condition est satisfaite, on répète les instructions.
while(condition){
instructions
}
b FOR
for(initialisation ; condition ; incrementation){
instructions
}
Évitez de modifier la variable qui sert de compteur à l'extérieur des parenthèses du for, qui sont prévues pour ça.
c DO WHILE
Le test est effectué après les instructions, ce qui veut dire que ces dernières seront exécutées au moins une fois, quelle que soit la condition.
do{
instructions
} while(condition);
d Le mot clé : "break"
Le mot clé "break" permet de mettre fin immédiatement à une boucle en cours.
Il renvoie directement à la sortie de la boucle sans exécuter le code qui le suit dans la boucle.
e Le mot clé : "continue"
Le mot clé "continue" permet de passer directement à l'itération suivante.
Il renvoie directement à l'itération suivante de la boucle sans exécuter le code qui le suit dans la boucle.
4 Les opérateurs
Les opérateurs sont des symboles mathématiques qui permettent de manipuler des variables, c'est-à-dire effectuer des opérations, les évaluer, ...
a Les opérateurs "de calcul"
Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable.
Opérateur | Dénomination | Effet | Exemple (X = 8) |
---|---|---|---|
+ | opérateur d'addition | Ajoute deux valeurs | X + 2 = 10 |
- | opérateur de soustraction | Soustrait deux valeurs | X - 3 = 5 |
* | opérateur de multiplication | Multiplie deux valeurs | X * 2 = 16 |
/ | opérateur de division | Divise deux valeurs | X / 2 = 4 |
= | opérateur d'affectation | Affecte une valeur à une variable | X = 3 ré-affecte la valeur de X à 3 |
% | opérateur modulo | Retourne le reste de la division entière de l'opérande de gauche par celle de droite | X % 3 = 2 |
b Les opérateurs "d'affectation"
Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur dans une variable et stocker le résultat dans la variable.
Une telle opérations s'écrirait habituellement de la façon suivante par exemple : X = X + 2
Avec les opérateurs d'assignation il est possible d'écrire cette opération sous la forme suivante : X += 2
Ainsi, si la valeur de X était 8 avant opération, elle sera de 10 après...
Opérateur | Effet |
---|---|
+= | ajoute l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche. |
-= | soustrait l'opérande de droite à l'opérande de gauche et stocke le résultat dans l'opérande de gauche. |
*= | multiplie l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche. |
/= | divise l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche. |
%= | calcule le reste de la division entière de l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche. |
c Les opérateurs "d'incrémentation"
Ce type d'opérateur permet de facilement augmenter ou diminuer d'une unité une variable.
Ces opérateurs sont très utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un).
Un opérateur de type X++ permet de remplacer des notations lourdes telles que X = X + 1 ou bien X += 1
Opérateur | Dénomination | Effet | Exemple (X = 8) |
---|---|---|---|
++ | Incrémentation | Augmente d'une unité la variable | X++ X = 9 |
-- | Décrémentation | Diminue d'une unité la variable | X-- X = 7 |
d Les opérateurs "de comparaison"
Ces opérateurs permettent de comparer deux variables, voir une variable avec elle même plus autre chose.
Opérateur | Dénomination | Effet | Exemple (X = 8) |
---|---|---|---|
== | opérateur d'égalité | Compare deux valeurs et vérifie leur égalité | X == 3 retourne false X == 8 retourne true |
=== | opérateur d'identité | Vérifie l'identité de valeur et de type de deux valeurs | X === Y (Y = "8") retourne false X === Y (Y = 8) retourne true |
!= | opérateur de différence | Vérifie qu'une variable est différente d'une valeur | X != 3 retourne true X != 8 retourne false |
!== | opérateur de non identité | Vérifie la non identité de valeur et de type de deux valeurs, c'est-à-dire si les deux valeurs n'ont pas la même valeur ou bien sont de types différents. | X !== Y (Y = "8") retourne true X !== Y (Y = 8) retourne false |
< | opérateur d'infériorité stricte | Vérifie qu'une variable est strictement inférieure à une valeur | X < 9 true X < 7 false |
> | opérateur de supériorité stricte | Vérifie qu'une variable est strictement supérieure à une valeur | X > 9 false X < 7 true |
<= ou >= | opérateur d'infériorité ou de supériorité | Vérifie qu'une variable est inférieur/supérieure ou égale à une valeur | X <= 9 true X <= 7 false X <= 8 true |
e Les opérateurs "logiques" (booléens)
Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies
Opérateur | Dénomination | Effet | Exemple |
---|---|---|---|
|| | OU logique | Vérifie qu'une des conditions est réalisée | ((expression1) || (expression2)) |
&& | ET logique | Vérifie que toutes les conditions sont réalisées | ((expression1) && (expression2)) |
! | NON logique | Inverse l'état d'une variable booléenne (retourne la valeur 1 si la variable vaut 0, 0 si elle vaut 1) | (!condition) |
5 Les conditions
a L'instruction "if"
L'instruction "if" est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe parfois différente d'un langage à l'autre...). Elle permet d'exécuter une série d'instructions (un bloc d'instructions) si jamais une condition est réalisée.
La syntaxe de cette expression est la suivante :
if (condition) {
série d'instructions
}
il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et OU (&& et ||)
b L'instruction "if ... else"
L'instruction "if" dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps on aimerait pouvoir choisir les instructions à exécuter en cas de non réalisation de la condition...
L'expression "if ... else" permet d'exécuter une autre série d'instruction en cas de non-réalisation de la condition.
La syntaxe de cette expression est la suivante :
if (condition) {
//série d'instructions
}
else {
//autre série d'instructions
}
c Les opérateurs "ternaires"
Il est possible de faire un test avec une structure beaucoup moins lourde grâce à la structure suivante :
(condition) ? série d'instruction si vrai : serie d'instruction si faux;
Cet opérateurs est souvent utilisé dans l'affection de valeur à une variable
var prenom = "Alexis";
var nom = (prenom == "Alexis") ? "Branlant" : null ;
Dans ce cas, la variable nom prendra la valeur "Branlant"
var prenom = "Thomas";
var nom = (prenom == "Alexis") ? "Branlant" : null ;
Dans ce cas, la variable nom prendra la valeur null
d L'instruction "switch...case"
L'instruction "switch" permet de faire plusieurs tests de valeurs sur le contenu d'une même variable.
Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une variable, car cette opération aurait été compliquée (mais possible) avec des "if" imbriqués.
Sa syntaxe est la suivante :
switch (Variable) {
case Valeur1:
série d'instructions;
break;
case Valeur2:
série d'instructions;
break;
default:
série d'instructions;
break;
}
6 Les fonctions
Les fonctions permettent de regrouper une série d'instructions, permettant de simplifier et de clarifier le code. D'autre part, une fonction peut faire appel à elle-même, on parle alors de fonction récursive.
La définition d'une fonction s'appelle "déclaration". La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante :
function nom_de_ma_fonction(argument1, argument2, ...){
série d'instructions
}
Une la fonction déclarée, il reste à l'appeler, on appel cette étape l'exécution.
nom_de_ma_fonction();
Il n'existe pas de classe en javascript, il propose en fait un système d'héritage par prototypage, on parle d'objets héritants d'autres d'objets.
Un prototype est un objet à partir duquel on crée de nouveaux objets.
function auteur(nom, prenom){
this.nom = nom;
this.prenom = prenom;
};
function livre(titre,collection,edition,auteur){
this.titre = titre;
this.collection = collection;
this.edition = edition;
this.auteur = auteur;
}
Si on prend l'exemple précedant, en créant un objet auteur, on peut simplement rattacher cet auteur à un ou plusieurs livres :
var auteur1 = new auteur("Branlant","Alexis");
var livre1 = new livre("Javascript les bases","Hachette","Premium",auteur1);
On accèdera donc au nom de l'auteur du livre1 comme ceci :
alert(livre1.auteur.nom); affichera une boite de dialogue contenant : Branlant
livre1.auteur.nom = "B."; modifiera "Branlant" par "B."