CHAPITRE : 1

Rappels JavaScript

Rappels JavaScript

Plan du chapitre

1. Les variables.................................................................2
2. Les types.......................................................................5
3. Les opérateurs arithmétiques........................................7
4. La concaténation...........................................................9
5. Les conditions.............................................................10
6. Les boucles..................................................................15
7. Les fonctions................................................................17
Framework coté client chapitre 1 : Rappels JavaScript

Rappels JavaScript
jQuery est un framework JavaScript, il est donc essentiel de comprendre un minimum de ce langage
pour progresser plus facilement.

Rassurez-vous, rien de bien compliqué à l'horizon. Nous verrons uniquement les bases nécessaires à
tout bon intégrateur web désireux de progresser.

Voici un bref aperçu de ce que nous aborderons dans cette partie :

8. Les variables
9. Les types
10. Les opérateurs arithmétiques
11. La concaténation
12. Les conditions
13. Les boucles
14. Les fonctions

Vous trouverez sur le site de "Mozilla developer" une bonne documentation en français sur JavaScript :
[Link]

2
Framework coté client chapitre 1 : Rappels JavaScript

1. Les variables
Une variable est un objet repéré par son nom, pouvant contenir tout type de données, qui pourront être
modifiées lors de l'exécution du programme.

En JavaSript les noms de variables peuvent être aussi long que l’ont le souhaite, mais doivent répondre à
certains critères :

1. un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un _ underscore.
2. un nom de variable peut comporter des lettres, des chiffres et les caractères _ et & .
3. les espaces ne sont pas autorisés
4. Les noms de variables ne peuvent pas être les noms suivants, qui sont des noms réservés :
abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double,

else, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, infinity, instanceof, int,

interface, label, long, native, new, null, package, private, protected, public, return, short, static, super, switch,

synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with.

1.1. Création de notre première variable

Nous déclarons notre variable.

var maVariable;

Le mot clé var indique que vous déclarez une variable,

; indique que l'instruction est terminée. Une fois
déclarée, var n'est plus nécessaire, vous pouvez stoker ce que vous souhaitez.

var maVariable;
maVariable = "J'aime JavaScript";

Nous pouvons modifier la valeur de la variable.

var maVariable;
maVariable = "J'aime JavaScript";
maVariable = "Je n'ai pas peur de JavaScript";
// maVariable vaut "Je n'ai pas peur de JavaScript

Nous pouvons déclarer notre variable et lui attribuer une valeur sur la même ligne.

var maVariable_2 = 7;

Nous pouvons déclarer plusieurs variables sur une ligne, mais attribuer une valeur seulement à maVariable_2.

var
Puisque l'ont délare le même type d'élément, le mot clé peut éviter d'être répété en séparant les déclarations par des
virgules.

3
Framework coté client chapitre 1 : Rappels JavaScript

var maVariable_1,
aVariable_2 = 7,
maVariable_3;

Vous pouvez afficher votre 1ère variable dans la console de votre navigateur.

var maVariable = "JavaScript"

[Link](maVariable);

4
Framework coté client chapitre 1 : Rappels JavaScript

2. Les types

2.1. Les chaînes de caractères ou "string"

Ce type représente n’importe quel texte. On peut l'assigner de deux façons différentes.

Avec des guillemets

maVariable = "J'aime JavaScript";

Avec des apostrophes

maVariable = 'J\'aime JavaScript';

Attention, si vous voulez des apostrophes pour déclarer votre variable et que vous utilisez des apostrophes dans le texte
vous devez échapper les derniers avec le caractère \ (antislash). Dans le cas contraire, JavaScript pensera que le code
s’arrête à la première apostrophe et produira une erreur.

2.2. Le type numérique ou "number"

Ce type de variable représente tout nombre que ce soit un entier, un négatif, un nombre scientifique, etc.

maVariable = 3;

Un chiffre décimal se déclare avec un point comme séparateur et non une virgule.

maVariable = 3.5;

Attention, si vous écrivez le nombre entre guillemets ou avec apostrophes, il sera reconnu comme une
chaîne de caractères.

maVariable = '3'; // Chaîne de caractères

2.3. Les booléens

Désigne un paramètre qui peut avoir comme valeur true ou false.

Lorsque :

aucune valeur n'est passée ;

la valeur est égale à 0 ;
une chaîne de caractères est vide, null, undefined ou NaN

la valeur de l'objet est initialisée à False .

5
Framework coté client chapitre 1 : Rappels JavaScript

Dans tous les autres cas, l'objet Boolean possédera la valeur True .

Ces deux états s'écrivent de la façon suivante :

var isTrue = true;

var isFalse = false;

2.4. Test de type

Nous pouvons vérifier le type de variable avec l’instruction typeof.

La fonction [Link]() affiche le résultat dans la console du navigateur.

var myVariable = 2;
[Link](typeof myVariable); // Affiche : « number »

var myVariable = 'Mon texte';

[Link](typeof myVariable); // Affiche : « string »

var myVariable = false;

[Link](typeof myVariable); // Affiche : « boolean »

Nous pouvons tester l’existence de variable avec la même instruction.

[Link](typeof otherVariable); // Affiche : « undefined »

2.5. La convertion de type

Convertion type "string" en" number"

Dans certains cas de figure, nous pouvons avoir besoin de convertir une chaîne de caractères en
parseInt()
nombre. La méthode convertie une chaîne de caractères en nombre.

var myVariable = '2',

n = parseInt(myVariable);
[Link](typeof n); // Affiche : « number »

Convertion type "number" en "string

Pour convertir une chaîne de charactères en nombre, nous pouvons utiliser la méthode .toString() .

var myVariable = 2,
n = [Link]();
[Link](typeof n); // Affiche : « string »

6
Framework coté client chapitre 1 : Rappels JavaScript

3. Les opérateurs arithmétiques

Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable

de type number. Ils sont à la base de tout calcul et sont au nombre de 5 :

Résultat (avec x
Opérateurs Signe Effet Exemple valant 7)

Addition + Ajoute deux valeurs x+3 10

Soustraction - Soustrait deux valeurs x-3 4

Multiplication * Multiplie les valeurs x*3 21

Division / Divise deux valeurs x/3 2.3333333

Retourne le reste de la division entière de l'opérant de

Modulo % x%2 1
gauche par celle de droite

3.1. Calculs simples

Faire des calculs avec JavaScript s'avère très simple.

var result = 7 + 2;
[Link](result); // Affiche : 9

Nous pouvons faire des calculs avec des variables contenant des valeurs de type numérique.

var number_1 = 7, number_2 = 2, result;

result = number_1 + number_2;
[Link](result); // Affiche : 9

Nous pouvons faire des calculs plus complexes comprenant plusieurs opérateurs.

var result = (((3 + 4) - 1) / 2) * 3;

[Link](result); // Affiche : 9

3.2. Simplification des calculs

Il est fréquent d’écrire ce type de calcul.

var maVariable = 7;
maVariable = maVariable + 2
[Link](maVariable); // Affiche : 9

Il existe une façon plus concise permettant d'éviter la redondance de variables.

var maVariable = 7;

7
Framework coté client chapitre 1 : Rappels JavaScript

maVariable += 2;
[Link](maVariable); // Affiche : 9

On procèdera de la même manière pour chaque opérateur.

maVariable += 2;
maVariable -= 2;
maVariable *= 2;
maVariable /= 2;
maVariable %= 2;

Pour ajouter +1 nous pouvons utiliser l'opérateur d'incrémentation ++

var maVariable = 7;
maVariable++;
[Link](maVariable); // Affiche : 8

Pour supprimer -1 nous pouvons utiliser l'opérateur de décrémentation --

var maVariable = 7;
maVariable--;
[Link](maVariable); // Affiche : 6

8
Framework coté client chapitre 1 : Rappels JavaScript

4. La concaténation
L’opérateur arithmétique + permet de faire des concaténations entre plusieurs chaînes de caractères.

La concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre, comme dans cet exemple.

var maVariable = "J'aime JavaScript";

var autreVariable = "je n'en ai pas peur.";
var concatenation = maVariable + ", " + autreVariable;
[Link](concatenation); // affiche : J'aime JavaScript, je n'en ai pas peur.

9
Framework coté client chapitre 1 : Rappels JavaScript

5. Les conditions
On appelle structure conditionnelle les instructions qui permettent de tester si une condition est vraie (true)

ou non (false). En JavaScript les conditions sont constituées de :

valeurs à tester ;
un opérateur logique ;
un opérateur de comparaison (optionnel).

5.1. Les opérateurs de comparaison

Opérateurs Désignation Effet Exemple Résultat

Retourne True
opérateur
== Compare deux valeurs et vérifie leur égalité x == 3 si X est égal à
d'égalité
3, sinon False

Retourne 1 si
opérateur de
!= Vérifie qu'une variable est différente d'une valeur x != 3 X est différent
différence
de 3, sinon 0

Retourne True
si a est égal à
opérateur Vérifie l'identité de valeur et de type de deux
=== a === b b et est de
d'identité valeurs
même type,
sinon False

Retourne True
Vérifie la non identité de valeur et de type de si a est
opérateur de deux valeurs, c'est-à-dire si les deux valeurs différent de b
!== a !== b
non identité n'ont pas la même valeur ou bien sont de types ou bien est de
différents. type différent,
sinon False

Retourne True
opérateur de
Vérifie qu'une variable est strictement si X est
> supériorité x>3
supérieure à une valeur supérieur à 3,
stricte
sinon False

Retourne True
si X est
opérateur de Vérifie qu'une variable est supérieure ou égale à
>= x >= 3 supérieur ou
supériorité une valeur
égal à 3,
sinon False

Retourne True
opérateur si X est
Vérifie qu'une variable est strictement inférieure
< d'infériorité x<3 inférieur à 3,
à une valeur
stricte sinon False

Retourne True
si X est
opérateur Vérifie qu'une variable est inférieure ou égale à
<= x <= 3 inférieur ou
d'infériorité une valeur
égale à 3,
sinon False

10
Framework coté client chapitre 1 : Rappels JavaScript

5.2. Les opérateurs logiques (booléens)

Opérateurs Désignation Effet Syntaxe

|| OU logique Vérifie qu'une des conditions est réalisée ( (expression1) ||
(expression2) )

( (expression1) &&
&& ET logique Vérifie que toutes les conditions sont réalisées
(expression2) )

Inverse l'état d'une variable booléenne (retourne la valeur

! NON logique ( !condition )
1 si la variable vaut 0, 0 si elle vaut 1)

5.3. Instruction if

Elle permet d'exécuter une série d'instructions lorsqu'une condition

est réalisée. La syntaxe de cette expression est la suivante.

if ( si condition
réalisée ) { liste
d'instructions
}

Il est possible de définir plusieurs conditions à remplir avec les opérateurs

&amp;&amp; et || .

Par exemple, l'instruction ci-dessous teste si les deux conditions sont réalisées.

if ( (condition1) && (condition2) ) { … }

L'instruction suivante exécutera les instructions si l'une ou l'autre des deux conditions est réalisée.

if ( (condition1) || (condition2) ) { … }

Exemple

// Déclaration de variable et assignation

de valeur var monArgent = 1;
var prixCafe = 1.2;

// Condition
// Si
if ( monArgent >= prixCafe) {
[Link]("J'ai assez d'argent pour boire un café.");
}

5.4. Instruction if … else

L'instruction if dans sa forme basique permet de tester qu'une condition. Or, la plupart du temps, on
aimerait pouvoir choisir les instructions à exécuter lorsque la condition n'est pas remplie.

11
Framework coté client chapitre 1 : Rappels JavaScript

L'expression if … else permet dès lors d'exécuter une autre série d'instructions en cas de non-

réalisation de la condition. La syntaxe de cette expression est la suivante :

if ( si condition réalisée ) {
// liste d'instructions
}
else {
// sinon autre série d'instructions
}

Remarque :
Les structures conditionnelles pouvant être imbriquées, il peut être utile d'indenter le code pour plus de
lisibilité. En d'autres termes, il s'agit de décaler à l'aide d'une tabulation chaque bloc d'instructions pour
pouvoir rapidement visualiser l'imbrication des structures.

Exemple

// Déclaration de variable et assignation

de valeur var monArgent = 1;
var prixCafe = 1.2;

// Condition
// Si
if ( monArgent >= prixCafe) {
[Link]("J'ai assez d'argent pour boire un café.");
}
//
Sinon
else {
[Link]("Je n'ai pas assez d'argent pour boire un café.");
}

5.5. Instruction else if

Cette instruction permet d'exécuter une série d'instructions lorsque plusieurs conditions

sont réalisées. La syntaxe de cette expression est la suivante :

// Une première condition est testée if
( si condition réalisée ) {
// liste d'instructions
}
// Une deuxième condition est présente et sera testée si la
première échoue else if ( sinon si condition réalisée ) {
// liste d'instructions
}
// Et si aucune condition ne se vérifie, la structure else fait
alors son travail. else {
// sinon autre série d'instructions
}

12
Framework coté client chapitre 1 : Rappels JavaScript

Exemple

// Déclaration de variable et assignation

de valeur var monArgent = 1;
var prixCafe = 1.2;

// Condition
// Si
if ( monArgent >= (prixCafe*250) ) {
[Link]("J'ai assez pour pouvoir inviter toute l’école.");
}
// Sinon si
else if ( monArgent >= (prixCafe*30) ) {
[Link](" J'ai assez pour pouvoir inviter toute le groupe.");
}
else if ( monArgent >= (prixCafe*2) ) {
[Link](" J'ai assez pour pouvoir inviter mon professeur.");
}

// Sinon else {
[Link]("Je n'ai pas assez d'argent pour boire un café. ");
}

5.6. 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. Cette opération
aurait ainsi été plus compliquée (mais possible) avec des if imbriqués.

La syntaxe de cette expression est la suivante :

switch
(Variable) {
case
Valeur1:
Liste
d'instructions;
break;
case Valeur2:
Liste
d'instructions;
break;
default:
Liste
d'instructions;
break;
}

Les parenthèses qui suivent le mot clé switch indiquent une expression dont la valeur est testée
successivement par chacun des case. Lorsque l'expression testée est égale à une des valeurs suivant
un case, la liste d'instructions qui suit celui-ci est exécutée.

13
Framework coté client chapitre 1 : Rappels JavaScript

Le mot clé break indique la sortie de la structure conditionnelle. Le mot clé default précède la liste
d'instructions qui sera exécutée si l'expression n'est jamais égale à une des valeurs.

Attention, il est essentiel de terminer chaque bloc d'instructions par l'instruction break.
N'oubliez pas d'insérer des instructions break entre chaque test. Ce genre d'oubli est difficile à détecter,
aucune erreur n'étant signalée.

14
Framework coté client chapitre 1 : Rappels JavaScript

6. Les boucles
Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série d'instructions
jusqu'à ce qu'une condition ne soit plus réalisée.

La façon la plus commune de faire une boucle est de créer un compteur (une variable qui s'incrémente,
c'est-à-dire qui augmente de 1 à chaque tour de boucle) et de faire arrêter la boucle lorsque le compteur
dépasse une certaine valeur.

6.1. L'instruction for

L'instruction for permet d'exécuter plusieurs fois la même série d'instructions : c'est une boucle !

Dans cette syntaxe, il suffit de préciser le nom de la variable qui sert de compteur et éventuellement sa
valeur de départ, la condition sur la variable pour laquelle la boucle s'arrête (basiquement une condition
qui teste si la valeur du compteur dépasse une limite) et enfin une instruction qui incrémente ou
décrémente le compteur.

La syntaxe de cette expression est la suivante :

for (compteur; condition; modification du compteur) {

// liste d'instructions
}

Exemple

for (var i=1; i<6;

i++) {
[Link](i);
}

Cette boucle affiche 5 fois la valeur de i, c'est-à-dire 1,2,3,4,5.

Elle commence à i=1 , vérifie que i est bien inférieur à 6, etc... jusqu'à atteindre la valeur i=6 , pour laquelle la condition ne
sera plus réalisée. La boucle s'interrompra et le programme continuera son cours.

Attention

1. Il faudra toujours vérifier que la boucle a bien une condition de sortie.

2. Une instruction Alert(i) ; dans votre boucle est un bon moyen pour vérifier la valeur du compteur pas à pas.

Bien entendu, si nous pouvons incrémenter dans une boucle, nous pouvons aussi décrémenter.

for (var i=10; i>0;

i--) {
[Link](i);
}

15
Framework coté client chapitre 1 : Rappels JavaScript

6.2. L'instruction while

L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série d'instructions.

La syntaxe de cette expression est la suivante :

while (condition réalisée) {

// liste d'instructions
}

Cette instruction exécute la liste d'instructions tant que la condition est réalisée.

Attention aux boucles infinies (boucle dont la condition est toujours vraie) elle provoque un plantage du
navigateur.

Exemple

var x = 0;
while(x <
10) {
[Link]("I'm
looping!"); x++;
}

16
Framework coté client chapitre 1 : Rappels JavaScript

7. Les fonctions
En programmation, une fonction est un sous-programme qui permet d’exécuter un ensemble
d’instructions dans le corps du programme principal.

Les fonctions permettent d'exécuter dans plusieurs parties du programme une série d’instructions. Ce
procédé permet une simplicité du code et donc une taille de programme minimale.

Par ailleurs, une fonction peut faire appel à elle-même. On parle alors de fonction récursive.

7.1. Création de notre première fonction

Avant d’être utilisée, une fonction doit être déclarée afin que le navigateur l’interprète.

Une déclaration de fonction est constituée du mot-clé function , suivi :

1. du nom de la fonction (suit les mêmes règles que les noms de variables ) ;
2. des parenthèses obligatoires pouvant contenir des paramètres facultatifs séparés par des virgules ;
3. des instructions JavaScript définissant la fonction, entourés d’accolades
{ } .
Les instructions d'une fonction peuvent comprendre des appels à d'autres fonctions définies dans
l'application courante.

La syntaxe de cette expression est la suivante.

function Nom_De_La_Fonction(argument1, argument2) {

// liste d'instructions
}

7.2. Appel de notre fonction

Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (une fois de plus en
respectant la casse) suivi d'une parenthèse ouverte (éventuellement des arguments) puis d'une parenthèse
fermée.

Nom_De_La_Fonction();

Attention, veillez toujours à ce qu'une fonction soit déclarée avant d'être appelée.

Exemple

// Déclaration de la
fonction function hello
() {
[Link](‘Hello world');
}

// Appel de la
fonction hello();

17
Framework coté client chapitre 1 : Rappels JavaScript

8. La portée des variables

Afin d’aborder ce concept assez simple mais pouvant induire en erreur, nous allons étudier deux exemples.

Exemple 1

var hello = "Hello

world !"; function
sayHello() {
[Link](hello);
}
sayHello();

Ici, pas de problème. On déclare une variable dans laquelle on stocke du texte puis on crée une fonction
qui se charge de l'afficher à l'écran et enfin on l'exécute.

Les variables déclarées en dehors des fonctions sont nommées variables globales.

Exemple 2

Modifions maintenant l’ordre des déclarations. Dans cette hypothèse, la variable sera déclarée dans la
fonction.

function sayHello() {
var hello = 'Hello world !';
}
sayHello();
[Link](hello);

Nous pouvons nous rendre compte que cet exemple ne fonctionne pas. Le script est arrêté car il produit
une erreur (visible dans l’inspecteur web).

Voilà tout le concept de portée de variables :

Toute variable déclarée dans une fonction n'est utilisable que dans cette même fonction ! Ces variables
spécifiques à une seule fonction ont un nom : les variables locales.

8.1. Variable globale VS variable locale

Maintenant que nous savons faire la différence entre les variables globales et les variables locales,
essayons de comprendre leur comportement.

Que se passe t’il si nous déclarons une variable globale et une locale avec le même nom, mais avec une
autre valeur ?

var hello = "Hello

world !"; function
sayHello() {
var hello = "Bonjour la terre !";
[Link]("Dans la fonction : " + hello);
}
sayHello();
[Link]("En dehors de la fonction : " + hello);

18
Framework coté client chapitre 1 : Rappels JavaScript

Nous obtenons le résultat suivant :

"Dans la fonction : Bonjour la terre !" "En dehors de la

fonction : Hello world !"

Bonne pratique

De manière générale, il est préférable d’utiliser les variables locales pour les fonctions, afin de ne pas
interférer avec d’autres fonctions qui peuvent utiliser le même nom de variables.

8.2. Les paramètres d'une fonction

Il est possible de passer des paramètres à une fonction, c'est-à-dire lui fournir une valeur ou le nom d'une
variable afin que la fonction puisse effectuer des opérations sur ces paramètres.

Lorsque vous passez plusieurs paramètres à une fonction il faut les séparer par des virgules aussi bien
dans la déclaration que dans l'appel. Il faudra également veiller à passer le bon nombre de paramètres
lors de l'appel. Dans le cas contraire, une erreur se produira dans votre script.

Exemple avec un argument

// Déclaration de la fonction
function carre(nombre) {
[Link]( nombre * nombre );
}
// Appel de la
fonction carre(3);

Exemple avec deux arguments

Exemple avec deux arguments

// Déclaration de la fonction
function remise(nombre, pourcentage)
{
[Link]( (pourcentage / 100) * nombre );
}
// Appel de la fonction
remise(150, 20);

8.3. La valeur return

Comme son nom l’indique, la valeur return est la valeur retournée par la fonction. Les fonctions ne
peuvent renvoyer qu’une valeur de retour.

function Nom_De_La_Fonction(argument1, argument2) {

return argument1 * argument2 ;
}

19
Framework coté client chapitre 1 : Rappels JavaScript

Attention
L’instruction return met fin à la fonction, puis retourne la valeur. Tout ce qui est renseigné en dessous
est ignoré.

Exemple

// Déclaration de la fonction
function carre(nombre) {
return nombre * nombre;
}

// Appel de la fonction
[Link](carre(20));

20