Cours JavaScript EEMI 2016-2017

Table
des matières
Introduction 1.1
Chapitre 1 - Les Bases 1.2
Chapitre 2 - Algorithmes et Jeux 1.3
Chapitre 3 - Types avancés 1.4
Chapitre 4 - Manipuler le Web avec DOM 1.5
‫ﺗﻢ‬
Chapitre 5 - Manipuler les classes et styles CSS 1.6
‫اﻟﺘ‬
Chapitre 6 - Composants et POO 1.7
‫ﺤﻤﻴ‬
Chapitre 7 - Manipulation DOM avancée 1.8
‫ﻞﻣ‬
Chapitre 8 - Échanges de données avec AJAX 1.9
‫ﻦﻣ‬
Chapitre 9 - Identification avec Google et Facebook 1.10
Chapitre 10 - jQuery, Node.js et frameworks ‫ﻮﻗﻊ‬ 1.11
Chapitre 11 - Gestion d'erreurs et Geolocation API 1.12
‫ﺗﻌﻠ‬
‫ﻢ اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻣﻦ‬‫ا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬1

Introduction
Cours JavaScript
Chapitre 1 - Les bases
‫ﺗ‬
Chapitre 2 - Algorithmes et jeux
‫ﻢا‬
Chapitre 3 - Types avancés
‫ﻟﺘﺤ‬
Chapitre 4 - Manipuler le Web avec DOM
‫ﻤﻴﻞ‬
Chapitre 5 - Manipuler les classes et styles CSS
Chapitre 6 - Composants et POO
‫ﻣﻦ‬
Chapitre 7 - Manipulation DOM avancée
‫ﻣ‬
Chapitre 8 - Échanges de données avec AJAX ‫ﻮﻗﻊ‬
Chapitre 9 - Identification avec Google et Facebook
‫ﺗ‬
Chapitre 10 - jQuery, Node.js et frameworks
‫ﻌﻠﻢ‬
Chapitre 11 - Gestion d'erreurs et Geolocation API

‫اﻟﱪ‬
‫ﻣﺠ‬
Tests et corrigés
‫ﻪ‬
‫ﻣﻦ‬
QCM 1: Bases (solutions)

‫اﻟﺒ‬
QCM 2: Conditions (solutions)

‫ﺪ‬
‫اﻳﻪ‬
Contrôle 1: Bases et Conditions (solutions)

QCM 3: Boucles (solutions)
‫إﱃ‬
QCM 4: Fonctions (solutions)

‫اﻹ‬
QCM 5: Tableaux (solutions)

‫ﺣﱰ‬
Partiel 1: Solutions
‫اف‬
QCM 6: Objets (solutions)

QCM 7: DOM (solutions)
QCM 8: Styling CSS (solutions)
QCM 9: Composants (solutions)
Contrôle 2: Objets -> POO (solutions)
QCM 10: AJAX (solutions)
Contrôle 3: AJAX (solutions)
Ressources alternatives
Introduction
Formation JavaScript de Grafikart

(Cours/TP) Apprentissage JavaScript, par Julien Guézennec
OpenClassrooms: Apprenez à coder avec JavaScript
OpenClassrooms: Créez des pages web interactives avec JavaScript
Khan Academy: HTML/JS : faire des pages Web interactives
Ressources alternatives en langue anglaise

JS for cats, une explication simple et amusante des concepts de base
‫ﺗﻢ‬
You-Dont-Know-JS, free book series on JavaScript
JS Books
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
JavaScript basics, videos by Beau Carnes + challenges on freeCampCode
‫ﻞﻣ‬
Ressources annexes au cours
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
Apprendre à apprendre: deux modes d’apprentissage
Startup Noob Guide
‫ﻢ‬ ‫ﺗﻌﻠ‬
‫اﻟﱪ‬
‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 1 - Les Bases
Chapitre 1: Les bases
‫ﺗﻢ‬
Conseil pratique: pour naviguer dans ce cours, vous pouvez y rechercher un mot (ex:
‫اﻟﺘ‬
"exercice") en pressant Ctrl-F ou Cmd-F . Utilisez la table des matières pour passer
‫ﺤﻤﻴ‬
d'un chapitre à l'autre.
‫ﻞ‬
‫ﻣﻦ‬
Introduction à la Programmation et à
JavaScript ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
Slides du TP 1
‫اﻟﱪ‬
Langage de programmation
‫ﻣﺠ‬
‫ﻪﻣ‬
JavaScript est un langage qui permet de donner des ordres (appelés instructions) à une
machine.
‫ﻦا‬
‫ﻟﺒﺪ‬
La machine en question peut être:

‫اﻳﻪ‬
un navigateur web
‫إﱃ‬
un ordinateur
‫اﻹ‬
un serveur sur internet

‫ﺣﱰ‬
un objet intelligent (ex: Arduino, Raspberry Pi...)

‫اف‬
voire même une carte à puce ! (ex: carte SIM, carte bleue...)
On va donc apprendre des commandes et structures pour expliquer ce qu'on attend de cette
machine.
Qu'est-ce qu'un programme ?

Le code source d'un programme est un peu comme une recette de cuisine: on y définit une
liste d'actions (les instructions) qui permettent à quiconque de reproduire le plat, autant de
fois qu'il le veut.

‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
Comme dans une recette, si votre code source est trop vague ou contient des erreurs, le
‫ﻣ‬
‫ﻮﻗﻊ‬
résultat risque d'être décevant, voire complètement à côté de la plaque.
Contrairement à une recette de cuisine, il faut garder en tête que ce n'est pas un humain qui
‫ﺗ‬
‫ﻌﻠﻢ‬
va interpréter votre code source, mais une machine. Sachant que, contrairement à un
humain, une machine n'est pas capable de raisonner intuitivement, il faut être extrêmement
‫اﻟﱪ‬
rigoureux dans le respect des règles de grammaire et d'orthographe du langage.

‫ﻪ‬ ‫ﻣﺠ‬
‫ﻣﻦ‬
‫اﻟﺒ‬
‫ﻪ‬ ‫ﺪاﻳ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Si vous écrivez votre code de manière approximative, deux choses peuvent se passer:
si vous avez de la chance, la machine vous avertira qu'elle n'a pas compris une de vos
instructions => elle affichera un message d'erreur pour vous aider à la corriger;
soit, dans certains cas, il ne se passera rien de visible. Dans ce cas, ce sera à vous de

relire votre code, et de vous mettre à la place de la machine pour essayer de

comprendre comment elle l'interprète.
Histoire du langage JavaScript

JavaScript a été créé en 1995, pour le compte de la société Netscape (éditeur d'un des
premiers navigateurs web, dont Mozilla Firefox est l'héritier), puis standardisé sous le nom
d'ECMAScript (souvent réduit à ses initiales "ES").
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
‫اﻟﱪ‬
‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
Utilisable sur de nombreuses plate-formes, JavaScript est le seul langage de programmation

‫اﻹ‬
‫ﺣﱰ‬
inclus en standard dans les navigateurs web. On dit donc que c'est "le langage du web".
‫اف‬
Même si le nom ressemble, Java est un langage différent de JavaScript. Si vous avez
la flemme de prononcer "JavaScript", utilisez donc ses initiales "JS" plutôt que "Java".

Malgré ses nombreuses évolutions, JavaScript est plutôt un langage de script qu'un langage
de programmation, à proprement parler. En effet, il a été conçu comme une solution simple
pour ajouter des interactions aux pages HTML du web, et non pour créer des logiciels à haut
niveau de sûreté. Une des conséquences: c'est un langage faiblement typé. Nous allons voir
ça plus bas.
Exécution de code JavaScript

Il y a deux façons d'exécuter nos instructions JavaScript:
1. de manière interactive: via une console
‫ﺗﻢ‬
2. de manière programmative: en rédigeant un code source
‫ا‬
‫ﻟﺘﺤ‬
Dans le premier cas, chaque instruction sera exécutée immédiatement puis retournera un
‫ﻤﻴﻞ‬
résultat, comme sur une calculatrice.
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
‫اﻟﱪ‬
‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
Dans le deuxième cas, on va écrire une liste d'instructions dans un fichier (appelé "code
‫اﻹ‬
source"), pour que notre machine puisse exécuter ce fichier en une seule fois.
‫ﺣﱰ‬
Pour tester JavaScript en mode interactif:

‫اف‬
Ouvrez une fenêtre de navigation privée (mode incognito) depuis Google Chrome,
ouvrez la console JavaScript en utilisant le raccourci clavier Cmd + Alt + J (sur Mac)
ou Ctrl + Shift + J (sur PC/Window)
tapez 1+1 et validez. => La console devrait afficher le résultat de cette opération.
Ensuite tapez alert('bonjour'); et observez ce qui se passe.

‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
‫ﻦﻣ‬
Il existe de nombreuses consoles JavaScript plus ou moins évoluées: repl.it, glot.io,
jsbin, jsfiddle, et codepen permettent d'éditer son code de manière un peu plus
‫ﻮﻗﻊ‬
confortable mais ne conservent pas d'historique de vos instructions, contrairement à la
‫ﺗﻌﻠ‬
console de Google Chrome.
‫ﱪ‬ ‫ﻢ اﻟ‬
Manipulation de valeurs
‫ﻣﺠ‬
‫ﻪﻣ‬
Types de valeurs
‫ﻦا‬
‫ﻟﺒﺪ‬
En langue Française, il existe plusieurs types de mots: les noms, les verbes, les adjectifs,
‫اﻳﻪ‬
les prénoms, etc...

‫إﱃ‬
De la même façon, en maths, on peut manipuler plusieurs types de valeurs: nombres

‫اﻹ‬
entiers, décimaux, rationnels (fractions), complexes, etc...

‫ﺣﱰ‬
En JavaScript, c'est pareil. Il est possible d'exprimer et de manipuler des valeurs de

‫اف‬
différents types.
Types simples
booléen (boolean): true , false
nombre (integer/float number): 999 , 0.12 , -9.99
chaîne de caractères (string): 'coucou'
aucune valeur: null
Types avancés

non défini: undefined

objet (object): { prop: 'valeur' }
tableau (array): [ 1, 2, 3 ]
fonction (function): function(){ /* ... */ }
Exercice: Quel type ?

1) Reconnaissez les types des valeurs ci-dessous. Notez que:
certaines lignes contiennent plusieurs valeurs;

quand une ligne contient une opération, devinez la valeur et le type du résultat de cette
‫ﺗﻢ‬
opération.
‫ا‬
‫ﻟﺘﺤ‬
2) Vérifiez vos réponses en saisissant ces opérations dans la console, et en utilisant le mot
‫ﻤﻴﻞ‬
clé typeof . (voir plus bas)
‫ﻣﻦ‬
0
‫ﻣﻮﻗ‬
true
2 - 1.2
‫ﻊﺗ‬
'hello'
‫ﻌﻠﻢ‬
'bonjour' + 4
{ a: 0.4 }
[ 'a', 'b', 'c' ]
‫اﻟﱪ‬
‫ﻣﺠ‬
Le mot clé typeof renvoie le type de l'expression qui suit.

‫ﻪﻣ‬
‫ﻦا‬
3) Expliquez le type de la dernière ligne.

‫ﻟﺒﺪ‬
Solution
‫اﻳﻪ‬
‫إﱃ‬
Variables et opérateur d'affectation

‫اﻹ‬
‫ﺣﱰ‬
Variables et valeurs littérales

‫اف‬
Dans l'exercice ci-dessus, nous avons manipulé des valeurs de manière littérale. C'est à
dire qu'elles étaient explicitement affichées dans le code.
Dans un véritable programme, les valeurs dépendent souvent d'une saisie de l'utilisateur, ou
d'autre chose. Du coup, elles sont rarement exprimées de manière littérale. On utilise pour
ça une représentation symbolique: les variables.
En maths, on représente habituellement une variable sous forme d'une lettre minuscule. Par
exemple "soit x=4" veut dire qu'on définit une variable appelée x représente actuellement
la valeur 4 . (un nombre entier, en l'occurrence)

En JavaScript, une variable représentée par une suite de lettres (minuscules et/ou
majuscules) pouvant contenir aussi des chiffres et le symbole underscore ( _ ).
Généralement, on emploie une notation appelée camel case pour nommer les variables en
JavaScript. Cette notation consiste à coller plusieurs mots, en mettant en majuscule
seulement la première lettre de chaque mot, sauf celle du premier mot.
Exemple: nombreSaisiParUtilisateur est un bon nom pour une variable JavaScript.
Camel veut dire "chameau", en Français. Avez-vous compris pourquoi ?
Opérateur d'affectation
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
Comme en maths, l'opérateur d'affectation = permet d'affecter une valeur (à droite) à une
‫ﻤﻴﻞ‬
variable (à gauche).
Par exemple, si on tape monNombre = 1 dans une console JavaScript, puis qu'on y tape
‫ﻣﻦ‬
monNombre , la console nous répondra 1 car c'est la valeur actuelle de la variable
monNombre .
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Chaque usage de l'opérateur d'affectation sur une variable changera sa valeur actuelle,
‫ﻌﻠﻢ‬
quitte à remplacer la valeur qu'elle portait précédemment.

‫اﻟﱪ‬
Par exemple, si on tape monNombre = 1 , monNombre = 2 puis monNombre , la console

‫ﻣﺠ‬
JavaScript nous répondra 2 car c'est la dernière valeur qui a été affectée à la variable
‫ﻪ‬
monNombre .
‫ﻣﻦ‬
La valeur affectée (à droite du = ) peut être une valeur littérale, ou celle d'une autre
‫اﻟﺒ‬
variable.
‫ﺪ‬
‫اﻳﻪ‬
Par exemple, si on tape autreNombre = monNombre , puis autreNombre , la console

‫إﱃ‬
JavaScript nous répondra 2 car nous avons affecté la valeur de la variable

‫اﻹ‬
monNombre ( 2 , tel qu'affecté dans l'exemple précédent) à notre nouvelle variable

‫ﺣﱰ‬
autreNombre .
‫اف‬
À noter que l'opérateur d'affectation se comporte différemment selon que la valeur affectée
est de type simple (nombre, chaîne de caractères...) ou avancé (objet, tableau, fonction...):
l'affectation d'une valeur de type simple dupliquera cette valeur dans la variable
affectée;
alors qu'en affectant une valeur de type avancé, notre variable affectée sera en fait une
référence à cette valeur.
Exemple d'affectation de valeur de type simple:
https://altkowa.blogspot.com ‫ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬10

maValeurSimple = 1;
autreValeurSimple = maValeurSimple;
// à ce stade, nos deux variables valent 1
maValeurSimple = 2;
// => autreValeurSimple vaut toujours 1, alors que maValeurSimple vaut 2
Exemple d'affectation de valeur de type avancé:
monTableau = [ 1, 2, 3 ];
autreVariable = monTableau;
// à ce stade, nos deux variables valent [ 1, 2, 3 ]
‫ﺗﻢ‬
// cette instruction a affecté un autre tableau à monTableau
‫اﻟﺘ‬
// => autreValeurSimple vaut toujours [ 1, 2, 3 ], car il référence toujours le tablea
‫ﺤ‬
u qui lui avait été affecté
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
Exemple d'affectation de valeur de type avancé, avec modification:
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
autreVariable = monTableau;
// à ce stade, nos deux variables valent [ 9, 8, 7 ]
‫ﻌﻠﻢ‬
monTableau.sort();
// cette instruction a rangé notre tableau dans l'ordre croissant
‫اﻟﱪ‬
// => monTableau vaut désormais [ 7, 8, 9 ]

‫ﻣﺠ‬
// => ... et autreVariable vaut aussi [ 7, 8, 9 ], car la tableau qu'il référencé a ét

é modifié.
‫ﻪ‬
‫ﻣﻦ‬
‫اﻟﺒ‬
Création de variable
‫ﺪاﻳ‬
‫ﻪإ‬
Dans nos exemples, les variables ont été créées automatiquement par la console JavaScript
‫ﱃ‬
lors de leur première affectation de valeur.

‫اﻹ‬
Mais nous allons désormais créer nos variables de manière explicite, à l'aide du mot-clé
‫ﺣﱰ‬
var .
‫اف‬
En effet, l'usage de var permet de s'assurer qu'on a pas déjà créé une variable du même
nom.
Il est possible d'affecter une valeur à notre variable lors de sa création avec var .
Il restera évidemment possible d'affecter d'autres valeurs à notre variable, à l'aide de

l'opérateur d'affectation, mais sans utiliser var ensuite.
Exemple:

// on va crééer une variable de type chaîne de caractères:

var maVariable = 'mon texte';
// => maVariable vaut 'mon texte'
maVariable = `mon nouveau texte`;
// => maVariable vaut désormais 'mon nouveau texte'
Vous remarquerez que:
j'ai ajouté des espaces autour de l'opérateur d'affectation pour améliorer la lisibilité de
mon code;
et j'ai terminé mes instructions par un point-virgule ( ; ).
‫ﺗﻢ‬
Afin d'améliorer la lisibilité de votre code, et d'éviter tout ambiguïté pouvant occasionner des
‫ﺤ‬ ‫اﻟﺘ‬
erreurs, je compte sur vous pour appliquer ces règles.
‫ﻤﻴﻞ‬
Exercice: Création de variables
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
En utilisant la console JavaScript: ‫ﻊﺗ‬
1) Créez les variables suivantes:
‫ﻌﻠﻢ‬
la variable monNombre avec une valeur de 4 ,

‫اﻟﱪ‬
la variable maChaine contenant 'bonjour ! :-)' ,

la variable monBooleen valant false ,
‫ﻣﺠ‬
et une variable sansValeur à laquelle vous n'aurez affecté aucune valeur.

‫ﻪ‬
‫ﻣﻦ‬
2) Pour confirmer que vos variables sont correctes, vérifiez que chaque instruction ci-
‫اﻟﺒ‬
dessous répond true : (copiez-collez-les une par une dans la console)

‫ﺪاﻳ‬
‫ﻪإ‬
monNombre === 4;
maChaine === 'bonjour ! :-)';
‫ﱃ‬
monBooleen === false;

‫اﻹ‬
sansValeur === undefined;

‫ﺣﱰ‬
‫اف‬
Solution
Comparaisons de valeurs et conditions

Slides du TP 2
Un programme est sensé pouvoir prendre des décisions de manière autonome, sur la base
de conditions.

Pour exprimer ces conditions, on s'appuie généralement sur des comparaisons entre
valeurs. Nous allons commencer par la comparaison la plus simple: l'égalité de valeurs.
Comparaison d'égalité: == et ===

En JavaScript il existe deux opérateurs de comparaison d'égalité:
== vérifie l'égalité de deux valeurs de manière laxiste;
=== vérifie l'égalité de deux valeurs de manière stricte.
Une égalité laxiste consiste à dire que deux valeurs sont vues comme équivalentes, mais
‫ﺗ‬
pas exactement égales.
‫ﻢا‬
‫ﻟﺘﺤ‬
Exemple: 1 (nombre) et "1" (chaîne de caractères) représentent tous les deux le
‫ﻤﻴﻞ‬
chiffre 1 , mais sont de types différents => ils sont égaux seulement selon l'opérateur
d'égalité laxiste.
‫ﻣﻦ‬
L'égalité stricte vérifie en plus que le type des deux valeurs comparées est le même.
Quelques exemples: ‫ﻣﻮﻗ‬

‫ﻊﺗ‬
‫ﻌﻠﻢ‬
1 == '1'; // => true

1 === `1`; // => false (car types différents)
‫اﻟﱪ‬
‫ﻣﺠ‬
0 == false; // => true

0 === false; // => false
‫ﻪﻣ‬
‫ﻦا‬
null == undefined; // => true

null === undefined; // => false
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
La comparaison entre valeurs de types avancés fonctionne différemment. Ce ne sont pas

‫إﱃ‬
les valeurs à proprement parler qui sont comparées, mais la référence vers cette valeur.
‫اﻹ‬
Explication:
‫ﺣﱰ‬
‫اف‬
[1,2] == [1,2]; // => false, car deux tableaux ont été créés
var monTab = [1,2];

monTab == monTab; // => true, car la variable monTab référence un seul et même tableau
monTab == [1,2]; // => false, car ce sont deux références de tableaux différents
var monTab2 = monTab;

monTab == monTab2; // => true, car monTab2 fait référence au même tableau que monTab
ATTENTION !

Notez que les opérateurs de comparaison d'égalité == et === ne doivent pas être
confondus avec l'opérateur d'affectation = .
Vous verrez plus tard que se tromper d'opérateur peut causer des erreurs silencieuses qui
peuvent mettre des heures à être détectées et corrigées dans votre code !
Donc soyez attentifs à bien les différencier quand vous écrivez votre code.
Opérateurs d'inégalité
Quand on sait que deux valeurs ne sont pas égales, notre programme peut s'adapter à
‫ﺗ‬
différents cas de figure.
‫ﻢا‬
‫ﻟﺘﺤ‬
Nous avons vu que les opérateurs === et == permettaient d'évaluer l'égalité (stricte ou
‫ﻤﻴﻞ‬
laxiste), en retournant une valeur true quand c'était le cas. Le langage JavaScript fournit
aussi leurs opérateurs contraires: !== et != (strict, et laxiste, respectivement). Ceux-ci
‫ﻣﻦ‬
retournent une valeur true quand les valeurs comparées ne sont pas égales.
‫ﻣ‬
Exemples:
‫ﺗ‬ ‫ﻮﻗﻊ‬
1 == 1; // => true
‫ﻌﻠﻢ‬
1 === 1; // => true

1 == '1'; // => true
‫اﻟﱪ‬
1 === '1'; // => false

‫ﻣﺠ‬
1 != 1; // => false
‫ﻪ‬
1 !== 1; // => false

‫ﻣﻦ‬
1 != '1'; // => false

‫اﻟﺒ‬
1 !== '1'; // => true

‫ﺪ‬
‫اﻳﻪ‬
Le langage JavaScript fournit aussi les opérateurs de comparaison suivants:

‫إﱃ‬
strictement inférieur: < ,

‫اﻹ‬
‫ﺣﱰ‬
strictement supérieur: > ,

inférieur ou égal: <= ,
‫اف‬
supérieur ou égal: >= .
Exemples:

1 < 1; // => false

1 > 1; // => false
1 <= 1; // => true
1 >= 1; // => true
1 < 2; // => true

1 > 2; // => false
1 <= 2; // => true
1 >= 2; // => false
Conditions
‫ﺗﻢ‬
Dans un programme (codé en langage JavaScript ou pas), les conditions sont une des
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
instructions les plus incontournables.
‫ﻞﻣ‬
C'est grâce aux conditions que votre programme peut prendre des décisions et donc
d'effectuer des actions de manière autonome (ou automatique), en fonction des données qui
‫ﻦﻣ‬
lui sont fournies.
‫ﻮﻗﻊ‬
On peut représenter ces décisions sous forme d'un arbre:
‫ﺗﻌﻠ‬
‫ﻢ‬
‫اﻟﱪ‬
‫ﻪ‬ ‫ﻣﺠ‬
‫ﻣﻦ‬
‫ﺪ‬ ‫اﻟﺒ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Cet exemple d'arbre illustre un diagnostic médical, en fonction des symptômes.
Cet arbre pourrait être traduit en pseudo-code de la manière suivante:
si douleur à abdomen, alors appendicite
sinon, si douleur à la gorge et :
si fièvre, alors rhume
sinon , mal de gorge -
sinon, si ...

Puis être implémenté en langage JavaScript de la manière suivante:
// supposons que les variables douleur et fievre soient fournies

var diag;
if (douleur === 'abdomen') {
diag = 'appendicite';
} else if (douleur === 'gorge') {
if (fievre === true) {
diag = 'rhume';
} else {
diag = 'mal de gorge';
}
}
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
En JavaScript, les conditions s'expriment à l'aide des mots-clés if et else . On les
emploie de la manière suivante:
‫ﻞﻣ‬
‫ﻦﻣ‬
if (expression) {
// si expression == true, alors les instructions entre ces accolades vont s'exécuter
} else { ‫ﻮﻗﻊ‬
// sinon, ce sont les instructions entre ces accolades là qui vont s'exécuter
‫ﺗﻌﻠ‬
}
‫ﻢ اﻟ‬
Le mot-clé else (facultatif) permet d'exécuter une séquence d'instructions seulement si

‫ﱪﻣ‬
expression n'est pas vraie.

‫ﺠﻪ‬
Vous pouvez utiliser une comparaison en guise d' expression .

‫ﻣﻦ‬
Exemple:
‫اﻟﺒ‬
‫ﺪاﻳ‬
‫ﻪإ‬
var monNombre = 1, resultat;

if (monNombre === 1) {
‫ﱃ‬
resultat = 'monNombre vaut 1';

‫اﻹ‬
} else {
‫ﺣﱰ‬
resultat = 'monNombre ne vaut pas 1';

}
‫اف‬
resultat;
// => cette liste d'instructions va afficher 'monNombre vaut 1'
A retenir: dans un bloc if-else , soit les instructions entre la première paire
d'accolades sera exécuté, soit celles de la deuxième paire d'accolades.
Par ailleurs, observez bien la manière d'agencer les accolades et les espaces.
Condition avec multiples alternatives

Dans le cas où vous aimeriez définir plus de deux comportements alternatifs, vous pouvez
employer ajouter des cas else if() entre votre bloc if{} et votre bloc else{} .
Exemple:
if (monNombre === 1) {
resultat = 'monNombre vaut 1';
} else if (monNombre > 1) {
resultat = 'monNombre est supérieur à 1';
} else {
resultat = 'monNombre n\'est ni égal à 1, ni supérieur à 1';
}
‫ﺗ‬
resultat;
‫ﻢا‬
‫ﻟﺘﺤ‬
Comme pour les blocs if-else , seules les instructions d'une paire d'accolades seront
‫ﻤﻴﻞ‬
exécutées.
‫ﻣﻦ‬
Par contre, si vous écrivez plusieurs blocs if-else à la suite les uns des autres, ceux-ci
‫ﻣﻮﻗ‬
seront complètement indépendants. ‫ﻊﺗ‬
Instructions pour interagir avec l'utilisateur: prompt et
‫ﻌﻠﻢ‬
alert
‫اﻟﱪ‬
Maintenant qu'on a vu comment faire en sorte qu'un programme prenne des décisions, il
‫ﻣﺠ‬
faut qu'on soit capable d'interagir avec lui.

‫ﻪﻣ‬
A ce stade, nous allons employer deux instructions pour cela:

‫ﻦا‬
‫ﻟﺒﺪ‬
alert permet d'afficher un message à l'utilisateur;

‫اﻳﻪ‬
et prompt permet de lui demander de saisir une chaîne de caractères.

‫إﱃ‬
Par exemple, voici comment afficher Bonjour ! :

‫اﻹ‬
‫ﺣﱰ‬
alert('Bonjour !');
‫اف‬
Comme vous le voyez, il faut fournir le message à afficher entre parenthèses. Et,
comme il s'agit ici d'une chaîne de caractères littérale, il ne faut pas oublier de mettre le
texte entre apostrophes.
Il est aussi possible d'afficher la valeur d'une variable:
var monMessage = 'Hello !';

alert(monMessage); // usage d'une variable => pas d'apostrophes

Maintenant, voici comment inviter l'utilisateur à saisir une chaîne de caractères, puis
l'afficher:
var sonPrenom = prompt('Quel est ton prénom ?');

alert('Bonjour, ' + sonPrenom + ' ! :-)');
Êtes vous capable d'interpréter ce que signifie le code à l'intérieur des parenthèses du
alert ? On appelle ça "la concaténation". On verra ça plus en détail dans les cours à
venir.
‫ﺗﻢ‬
Exercice 1: Chat-bot bête mais poli
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Écrivez et testez un programme qui va inviter l'utilisateur à saisir une phrase, et se
comporter différemment selon sa saisie:
‫ﻞﻣ‬
si l'utilisateur saisit bonjour , afficher Bonjour à toi ! ;
‫ﻦﻣ‬
sinon, si l'utilisateur saisit tu vas bien ? , afficher Bien, et toi ? ;
et sinon, afficher Désolé, je n'ai pas compris... . ‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Solution
‫ﻢ‬
‫اﻟﱪ‬
Exercice 2: Chat-bot poli mais pas sympa

‫ﻣﺠ‬
Écrivez un autre programme sur la base du précédent.

‫ﻪ‬
‫ﻣﻦ‬
Dans le cas où l'utilisateur aura saisi bonjour , le programme affichera Bonjour ! Ca va ? ,

‫اﻟﺒ‬
invitera l'utilisateur à saisir une deuxième réponse puis se comportera différemment selon
‫ﺪ‬
cette deuxième réponse:

‫اﻳﻪ‬
‫إﱃ‬
si l'utilisateur saisit oui , afficher Je suis content pour toi. ;

sinon, afficher Désolé, il faut que je file. .
‫اﻹ‬
‫ﺣﱰ‬
Solution: Arbre de décision et implémentation en JavaScript

‫اف‬
Exercice 3: Votre propre chat-bot

À vous de concevoir et implémenter votre propre chat-bot !
Vous allez devoir produire et rendre deux fichiers:
1. Dessiner un arbre représentant un total de 5 questions qui pourront être posées par
votre chat-bot, ainsi que les réponses associées pour chaque cas. L'arbre doit avoir au
moins 2 niveaux de profondeur (c.a.d. degré 2).
2. Implémenter et tester les lignes de code JavaScript permettant d’interagir avec le chat-

bot, tel que défini par votre arbre.
Vous devrez utiliser les mots clés: var , if , else , = , === , prompt et alert .
Solution: cf solution de l'exercice précédent.
Exercice bonus: Chat-bot sur Messenger

Si vous avez trouvé les exercices trop faciles, et que vous avez aidé vos camarades, je vous
propose un défi un peu plus compliqué: faire de votre programme un véritable chat-bot
joignable via Messenger.
‫ﺗﻢ‬
Pour cela, je vous recommande d'utiliser une plate-forme de développement de chat-bot, ou
‫اﻟﺘ‬
de partir d'un exemple. (ex: https://bottr.co/)
‫ﺤ‬
‫ﻤﻴﻞ‬
Combinaison d'expressions conditionnelles && et ||
‫ﻣﻦ‬
Dans l'exemple précédent, on a vu que chaque alternative dépendait du résultat d'une seule
expression de comparaison de valeurs. ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
if (maPremiereValeur === maDeuxiemeValeur) { /* ... */

} else if (maPremiereValeur > maDeuxiemeValeur) { /* ... */ }
‫اﻟﱪ‬
‫ﻣﺠ‬
Dans certains cas, une alternative est définie par la combinaison de plusieurs expressions.
‫ﻪ‬
‫ﻣﻦ‬
Par exemple, imaginons un programme qui propose comment s'habiller en fonction du

temps qu'il fait, en suivant les critères suivants:
‫اﻟﺒ‬
‫ﺪاﻳ‬
S'il fait beau et chaud, suggérer de porter un short,

‫ﻪإ‬
S'il pleut ET qu'il fait chaud, suggérer de prendre un parapluie,

‫ﱃ‬
S'il pleut ET qu'il fait froid, suggérer de prendre un manteau à capuche.

‫اﻹ‬
‫ﺣﱰ‬
Sachant qu'il est possible d'imbriquer des conditions, on pourrait l'implémenter de la

manière suivante:
‫اف‬
if (temps === 'beau') {

suggestion = 'short';
} else if (temps === 'pluie') {
if (temperature >= 20) {
suggestion = 'parapluie';
} else if (temperature < 20) {
suggestion = 'manteau à capuche';
}
}

Mais il est aussi possible d'exprimer nos critères de manière plus linéaire, en combinant les
conditions à l'aide de l'opérateur && :
if (temps === 'beau') {

suggestion = 'short';
} else if (temps === 'pluie' && temperature >= 20) {
suggestion = 'parapluie';
} else if (temps === 'pluie' && temperature < 20) {
suggestion = 'manteau à capuche';
}
Dans cette implémentation, nous avons combiné les critères de temps et de temperature
‫ﺗﻢ‬
dans une même expression conditionnelle.
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Lorsqu'une alternative if/else est définie par plusieurs expressions liées par l'opérateur
‫ﻞﻣ‬
&& (appelé et), il faut que toutes ces expressions soient vraies afin que les instructions
associées à cette alternative soient exécutées.
‫ﻦﻣ‬
Il existe aussi un opérateur || (appelé ou) qui permet de définir des alternatives qui seront
‫ﻮﻗﻊ‬
exécutées si au moins une des expressions est vraie.
‫ﺗ‬
‫ﻌﻠﻢ‬
Exemple:
‫اﻟﱪ‬
if (rdvPrevu === true || envieDallerAuxToilettes === true) {

‫ﻣﺠ‬
message = 'excusez-moi, je vais devoir vous laisser';

} else {
‫ﻪﻣ‬
message = 'nous pouvons en discuter tout de suite, si vous voulez !';

‫ﻦا‬
}
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
... ce qui pourrait aussi s'écrire ainsi, sous sa forme développée:

‫إﱃ‬
if (rdvPrevu === true) {

‫اﻹ‬

‫ﺣﱰ‬
} else if (envieDallerAuxToilettes === true) {

‫اف‬
} else {
message = 'nous pouvons en discuter tout de suite, si vous voulez !';
}
Dans ce cas, nous voyons que la combinaison d'expression conditionnelle avec || permet
de réduire la redondance de notre code, en ne définissant qu'une seule fois une même liste
d'instructions correspondante à deux cas alternatifs.
Indentation et autres conventions à respecter

Dans le cadre de ce cours, nous allons respecter un extrait des conventions du guide de
style d'Airbnb. (c'est illustré de nombreux exemples très clairs qui aident à comprendre les
bonnes et mauvaises manières d'écrire son code)
Extrait des règles qui seront à respecter:
mettre les chaînes de caractères entre apostrophes, (cf 6.1)

usage et placement des accolades (braces, en anglais), (cf 16.1)
et indentation de 2 espaces. (cf 18.1)
Pour vérifier et corriger l'indentation de votre code JavaScript, vous pouvez utiliser l'outil en
ligne jsbeautifier.
‫ﺗ‬
‫ﻢا‬
Si vous préférez utiliser votre éditeur de code préféré (ex: sublime text) pour vous aider à
‫ﻟﺘﺤ‬
corriger l'indentation et/ou les conventions ci-dessus, configurez-le de manière à ce qu'il
‫ﻤﻴﻞ‬
respecte le guide de style d'Airbnb.
‫ﻣ‬ ‫ﻣﻦ‬
‫ﻌﻠﻢ‬
‫اﻟﱪ‬
‫ﻪ‬ ‫ﻣﺠ‬
‫ﻣﻦ‬
‫اﻟﺒ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 2 - Algorithmes et Jeux
Chapitre 2: Algorithmes et Jeux

Objectifs:
‫ﺗﻢ‬
Savoir développer les jeu ChiFouMi (pierre feuille ciseaux)
‫اﻟﺘ‬
Création d'algorithmes à l'aide de boucles, et de fonctions
‫ﺤﻤﻴ‬
Plan du chapitre:
‫ﻞﻣ‬
1. Algorithmes
‫ﻦﻣ‬
2. Boucles for (Slides du TP)
Application: FizzBuzz
‫ﻮﻗﻊ‬
Application: Devine le nombre
‫ﺗﻌﻠ‬
3. Fonctions (Slides du TP)
‫ﻢ‬
Application: définition et appel de fonctions

‫اﻟﱪ‬
Exercice: Jeu ChiFouMi

‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
1. Algorithmes
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
Définition de Wikipedia
‫إﱃ‬
‫اﻹ‬
« Un algorithme est une suite finie et non ambiguë d’opérations ou d'instructions

‫ﺣﱰ‬
permettant de résoudre un problème ou d'obtenir un résultat. »

‫اف‬
Une recette de cuisine peut être réduite à un algorithme, si on peut réduire sa spécification
aux éléments constitutifs :
des entrées (les ingrédients, le matériel utilisé) ;

des instructions élémentaires simples, dont l'exécution amène au résultat voulu ;
un résultat : le plat préparé.
Un casse-tête, tel le Rubik's Cube, peut être résolu de façon systématique par un algorithme
qui mécanise sa résolution.
Illustration: algorithme de résolution de Rubik's Cube.

Autre définition, plus concrète, de Gérard Berry

« Un algorithme, c’est tout simplement une façon de décrire dans ses moindres détails
comment procéder pour faire quelque chose. [...] Le but est d’évacuer la pensée du
calcul, afin de le rendre exécutable par une machine numérique (ordinateur…). On ne
travaille donc qu’avec un reflet numérique du système réel avec qui l’algorithme
interagit.
2. Boucles for
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Qu'est-ce qu'une boucle ?
‫ﻞﻣ‬
Une boucle permet de répeter plusieurs fois une séquence d'instuctions.
‫ﻦﻣ‬
Pour afficher les nombres de 1 à 3 dans la console JavaScript, on pourrait utiliser les
instructions suivantes: ‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
console.log(1);
‫ﻢ‬
console.log(2);
‫اﻟﱪ‬
console.log(3);
‫ﻣﺠ‬
Et ça fonctionne très bien !

‫ﻪ‬
‫ﻣﻦ‬
Par contre, le code deviendrait très fastidieux à écrire (et à lire) dans le cas où on voudrait
‫اﻟﺒ‬
afficher les nombres de 1 à 10000 !

‫ﺪ‬
‫اﻳﻪ‬
Pour ce genre de répétition, le mot-clé for permet de définir une seule fois les instructions
‫إﱃ‬
qui doivent êtres répétées, puis de spécifier combien de fois on souhaite qu'elles soient
‫اﻹ‬
répétées.
‫ﺣﱰ‬
Pour afficher les nombres de 1 à 10000 , il suffit donc d'écrire le code suivant:
‫اف‬
for ( var monNombre = 1; monNombre <= 10000; monNombre++ ) {

console.log( monNombre );
}
On pourrait traduire ce code de la manière suivante:
Pour chaque valeur de monNombre , croissant de 1 à 10000 (compris), afficher la

valeur de monNombre dans la console.

À quoi servent les boucles ?

Les boucles sont donc très utiles pour éviter les redondances dans un programme (ex: jouer
5 fois le même son, mettre tous les champs d'un formulaire en majuscules...), mais elles
sont surtout indispensables dans de nombreuses applications courantes:
Les jeux tour-par-tour consistent en une boucle qui se termine lorsqu'un joueur
remporte la partie;
Les jeux d'action utilisent une boucle permettant de mettre à jour l'affichage (frame par
frame, pour utiliser la terminologie exacte) en fonction des actions du/des joueur(s);
Ainsi que les algorithmes de tri et de manipulation de données utilisés dans 99% des
‫ﺗﻢ‬
logiciels.
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Javascript fournit quatre mots-clés pour définir des boucles: do , while , until et for .
La forme de boucle la plus courante est for car c'est la plus générique / adaptable. Nous
‫ﻞﻣ‬
allons donc seulement travailler avec des boucles for dans le cadre de ce cours.
‫ﻦﻣ‬
Anatomie d'une boucle for en JavaScript ‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Reprenons l'exemple de boucle que nous avons vu plus haut:
‫ﻢ‬
‫اﻟﱪ‬
for ( var monNombre = 1 ; monNombre <= 10000 ; monNombre++ ) {

console.log( monNombre );
‫ﻣﺠ‬
}
‫ﻪﻣ‬
‫ﻦا‬
Cette boucle est définie par:

‫ﻟﺒﺪ‬
l'usage du mot clé for ;

‫اﻳﻪ‬
une liste d'instructions (saisie entre accolades {} ) à répéter tant que la condition est
‫إﱃ‬
vraie: console.log( monNombre ); (dans notre exemple, il n'y a qu'une seule instruction,
‫اﻹ‬
mais on peut en mettre une infinité);

‫ﺣﱰ‬
une condition (expression conditionnelle, comme dans une condition if ): monNombre

‫اف‬
<= 10000 ;
une instruction d'itération qui sera exécutée après chaque itération de la boucle:
monNombre++ (qui, ici, incrémente la valeur de monNombre , c'est à dire augmente sa
valeur de 1 );
et une instruction d'initialisation qui ne sera exécutée qu'une seule fois: var monNombre =
1 (ici, on créée une variable monNombre et on lui affecte la valeur initiale 1 ).
On appelle itération chaque répétition de la boucle.
Pour synthétiser, voici la syntaxe à utiliser pour définir une boucle for en JavaScript:

for( /* initialisation */ ; /* condition */ ; /* incrémentation */ ) {

/* instructions à répeter */
}
À noter que, dans la plupart des cas, les boucles sont utilisées pour itérer:
sur un intervalle (dans notre exemple: nombres entiers entre 1 et 10000 ),

ou sur une énumération de valeurs (ex: un tableau/Array, comme on le verra plus tard).
Traçage de l’exécution d'une boucle for
‫ﺗ‬
‫ﻢا‬
Afin de mieux comprendre le fonctionnement de la boucle for et de la manière de saisir
‫ﻟﺘﺤ‬
ces trois paramètres, nous allons interpréter une boucle comme le fait un navigateur web
‫ﻤﻴﻞ‬
(ou tout autre interpréteur JavaScript).
‫ﻣﻦ‬
Prenons la boucle for suivante:
console.log('on va boucler');
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
for ( var i = 0; i < 4; i++ ) {
console.log('i', i, i < 4);
‫ﻌﻠﻢ‬
}
console.log('on a fini de boucler');
‫اﻟﱪ‬
‫ﻣﺠ‬
Voici la manière dont elle va être interprétée et exécutée par la machine:

‫ﻪ‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

console.log('on va boucler'); // => affiche: on va boucler
// interprétation de la boucle => on commence par l'initialisation

var i = 0; // initialisation de la boucle, en affectant 0 à la variable i
// --- première itération de la boucle ---

i < 4 ? // condition vraie, car i vaut 0
console.log('i', i, i < 4); // => affiche: i 0 true
i++; // incrémentation => i vaut maintenant 1
// --- seconde itération de la boucle ---

i < 4 ? // condition vraie, car 1 < 4
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
// --- troisième itération de la boucle ---
‫ﻞﻣ‬
‫ﻦﻣ‬
// --- quatrième itération de la boucle ---
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
‫ﻢ اﻟ‬
// --- cinquième itération de la boucle ---

‫ﱪﻣ‬
i < 4 ? // condition fausse, car i==4 => fin de boucle

‫ﺠﻪ‬
// boucle terminée => on interprète les instructions suivantes.

console.log('on a fini de boucler'); // => affiche: on a fini de boucler
‫ﻣﻦ‬
‫اﻟﺒ‬
Il est très pratique de décomposer une boucle de cette manière lorsqu'elle ne se comporte
‫ﺪاﻳ‬
pas comme voulu. (débogage)

‫ﱃ‬ ‫ﻪإ‬
Interrompre l'exécution d'une boucle: break

‫اﻹ‬
‫ﺣﱰ‬
Dans certains cas, il est pratique d'interrompre l'exécution d'une boucle, pendant l'exécution
‫اف‬
d'une de ses itérations (tel que définie entre les accolades de définition de la boucle).
for (var i = 0; i < 10; i++) {

var commande = prompt('entrez une commande');
if (commande === 'quitter') {
break; // => on sort de la boucle for, la suite programme continue de s'exécuter (
après ses accolades du for)
}
}

Cependant, l'usage de break est non recommandé, car il rend la logique plus complexe à
comprendre en lisant le code. Il est généralement possible et plus élégant d'intégrer la
condition de sortie dans la condition de la boucle.
var commande;
for (var i = 0; i < 10 && commande !== 'quitter'; i++) {
commande = prompt('entrez une commande');
}
Ici, on a intégré la condition à l'aide de l'opérateur logique && , donc la boucle continuera
d'itérer tant que i < 10 ET que commande !== 'quitter' .
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
Application: FizzBuzz
‫ﻤﻴﻞ‬
Algorithme à implémenter
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
À implémenter étape par étape: ‫ﻊﺗ‬
1. Écrire un programme qui affiche les nombres de 1 à 199 (compris) dans la console.
‫ﻌﻠﻢ‬
2. Pour les multiples de 3 , afficher Fizz au lieu du nombre.
3. Pour les multiples de 5 , afficher Buzz au lieu du nombre.
‫اﻟﱪ‬
4. Pour les nombres multiples de 3 et 5 , afficher uniquement FizzBuzz .

‫ﻣﺠ‬
Pour ne pas s'embrouiller, il est recommandé de:

‫ﻪﻣ‬
commencer par écrire la logique d'une seule itération, avant de la faire se répéter à
‫ﻦا‬
l'aide d'une boucle;

‫ﻟﺒﺪ‬
écrire sous forme de pseudo-code (en langue française), avant de l'implémenter en

‫اﻳﻪ‬
JavaScript.
‫إﱃ‬
‫اﻹ‬
Trace d'exécution de l'algorithme

‫ﺣﱰ‬
‫اف‬
On devrait obtenir les lignes suivantes dans la console:

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
‫ﺗﻢ‬
14
‫اﻟﺘ‬
FizzBuzz
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
... et ainsi de suite, jusqu'à 199 .
‫ﻦﻣ‬
Comment savoir si un nombre est multiple d'un autre ?
‫ﻮﻗﻊ‬
Pour savoir si un nombre est multiple de 3 et/ou de 5 , nous allons utiliser deux fonctions
‫ﺗﻌﻠ‬
fournies ci-dessous:
‫ﻢ اﻟ‬
‫ﱪﻣ‬
function estMultipleDeTrois(nombre) {
return nombre % 3 === 0;
‫ﺠﻪ‬
}
function estMultipleDeCinq(nombre) {
‫ﻣﻦ‬
return nombre % 5 === 0;

}
‫اﻟﺒ‬
‫ﺪاﻳ‬
‫ﻪإ‬
Après avoir copié-collé la définition de ces deux fonctions dans la console JavaScript, vous
‫ﱃ‬
pouvez les utiliser de la manière suivante:

‫اﻹ‬
‫ﺣﱰ‬
estMultipleDeTrois(2); // => retourne false, car 2 n'est pas multiple de 3

estMultipleDeTrois(6); // => retourne true, car 6 est un multiple de 3
‫اف‬
estMultipleDeCinq(6); // => retourne false, car 6 n'est pas un multiple de 5

estMultipleDeCinq(15); // => retourne true, car 15 est un multiple de 5
Vous pouvez alors appeler ces fonctions dans les parenthèses de vos conditions if , car,
comme une expression de comparaison de valeurs, un appel de fonction retourne une
valeur qui est vraie ( true ) ou fausse ( false ).
Exemple:

var monNombre = 5; // valeur fournie en guise d'exemple

if (estMultipleDeCinq(monNombre)) {
console.log('monNombre est multiple de 5');
} else {
console.log('monNombre n\'est pas multiple de 5');
}
Solution
Application: Devine le nombre
‫ﺗﻢ‬
Fonctionnement du jeu à implémenter
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
En début de partie, l'ordinateur va choisir un nombre aléatoire entre 0 et 100 .
‫ﻞﻣ‬
Le joueur a droit à 10 tentatives pour deviner ce nombre.
À chaque tentative:
‫ﻦﻣ‬
Si le nombre saisi est inférieur à celui de l'ordinateur, afficher Plus grand .
‫ﻮﻗﻊ‬
Si le nombre saisi est supérieur à celui de l'ordinateur, afficher Plus petit .
Si le joueur a réussi à deviner le bon nombre, afficher Bravo ! .
‫ﺗ‬
‫ﻌﻠﻢ‬
La partie continue jusqu'à ce que le joueur gagne ou épuise ses 10 tentatives.

‫اﻟﱪ‬
Pour implémenter ce jeu:

‫ﻣﺠ‬
vous allez avoir besoin d'interagir avec l'utilisateur, et donc d'utiliser les mots-clés
‫ﻪﻣ‬
prompt et alert ;
‫ﻦا‬
il est recommandé de commencer par écrire le code d'une seule itération (sans
‫ﻟﺒﺪ‬
utiliser de boucle), et de le tester en donnant des valeurs arbitraires à vos

‫اﻳﻪ‬
variables, pour simuler chaque cas.

‫إﱃ‬
Exemple de déroulement d'une partie

‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Nombre saisi par le joueur: 10

Réponse de l'ordinateur: Plus grand
Réponse de l'ordinateur: Plus petit
Réponse de l'ordinateur: Bravo !
Comment obtenir un nombre aléatoire

Pour obtenir un nombre aléatoire entier entre 0 et 100:

Math.round(Math.random() * 100)
Libre à vous de stocker cette valeur dans une variable, si vous avez besoin de la comparer
à d'autres valeurs, par exemple.
Solution
3. Fonctions
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
Introduction
‫ﻤﻴﻞ‬
Comme en mathématiques, une fonction transforme des paramètres (en "entrée") en une
valeur de résultat (la "sortie"), lorsqu'elle est appelée. Avant de pouvoir l'appeler, on la
‫ﻣﻦ‬
définit par une suite d'instructions qui déterminera cette valeur de résultat, en fonction des
‫ﻣ‬
paramètres qui lui seront passés. ‫ﻮﻗﻊ‬
‫اﻟﱪ‬
Définir une fonction permet de regrouper des instructions JavaScript, afin qu'elles puissent
‫ﻣﺠ‬
être exécutées à différentes occasions, sans avoir à dupliquer le code correspondant.

‫ﻪﻣ‬
‫ﻦا‬
Par exemple, sur le web, les fonctions JavaScript sont utilisées par le développeur pour
définir le comportement que doit suivre le navigateur lorsque l'utilisateur effectue certaines
‫ﻟﺒﺪ‬
actions (ex: saisie dans un champ, clic sur un bouton, soumission d'un formulaire).
‫اﻳﻪ‬
‫إﱃ‬
Définition et appel de fonction

‫اﻹ‬
‫ﺣﱰ‬
On définit une fonction de la manière suivante:

‫اف‬
function nomDeLaFonction (parametre1, parametre2, parametre3 ...) {

// instructions javascript
// pouvant utiliser les paramètres parametre1, parametre2 et parametre3
return resultat;
}
Par exemple:

function multiplierParDeux (nombre) {

return nombre * 2;
}
Pour exécuter une fonction, il faut l'appeler en citant son nom, et en lui fournissant des
valeurs pour chacun des paramètres entre parenthèses.
Par exemple:
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
var resultat = multiplierParDeux(3); // => le paramètre nombre vaut 3 => la variable r
esultat vaudra 6
‫ﻞﻣ‬
‫ﻦﻣ‬
Comme pour une variable, l'appel à une fonction sera remplacé la valeur qu'elle renvoie, au
moment de l'exécution du programme. Contrairement aux variables, cette valeur dépendra
de la valeur des paramètres passés à la fonction.
‫ﻌﻠﻢ‬
Ainsi, il est possible de passer le résultat de l'appel d'une fonction en paramètre d'une
fonction.
‫اﻟ‬
‫ﱪﻣ‬
Exemple de substitution d'un appel de fonction par sa valeur de retour:

‫ﺠﻪ‬
‫ﻣﻦ‬
‫ﺪ‬‫اﻟﺒ‬
resultat = multiplierParDeux(multiplierParDeux(3)); // équivaut à:

‫اﻳﻪ‬
resultat = multiplierParDeux(3 * 2); // qui équivaut à:

resultat = (3 * 2) * 2; // qui vaut finalement:
‫إﱃ‬
resultat = 12;
‫اﻹ‬
‫ﺣﱰ‬
Et, avec une autre valeur passée en paramètre:

‫اف‬
var resultat = multiplierParDeux(multiplierParDeux(4)); // équivaut à:

var resultat = multiplierParDeux(4 * 2); // qui équivaut à:
var resultat = (4 * 2) * 2; // qui vaut finalement:
var resultat = 16;
Importance de return

Quand on exécute une fonction depuis une console JavaScript, la valeur retournée par cette
fonction est affichée dans la console. Il ne faut pas pour autant confondre le mot clé return
et la fonction console.log .
En effet:
console.log peut être appelée plusieurs fois depuis un même définition de fonction,
mais chaque appel de fonction ne peut résulter qu'en une seule valeur de retour
spécifiée par return ,
l'usage de return permet à l'appelant d'une fonction de disposer de la valeur
résultante comme il le souhaite: il peut par exemple décider d'afficher cette valeur dans
‫ﺗ‬
‫ﻢا‬
la console, ou dans un alert , ou même de la stocker dans une variable. Or, si la
définition de cette fonction affiche la valeur résultante dans la console au lieu d'utiliser
‫ﻟﺘﺤ‬
return , il sera impossible pour l'appelant de récupérer cette valeur résultante dans
‫ﻤﻴﻞ‬
son programme.
‫ﻣﻦ‬
Pratique: Définition et appel de fonction
‫ﻣ‬
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Dans cette partie de mise en pratique, nous allons définir ensemble plusieurs fonctions, et
les tester en les appelant.
‫ﻢ‬
‫اﻟﱪ‬
Développer:
‫ﻣ‬
‫ﺠﻪ‬
une fonction diviserParDeux qui retourne la moitié de la valeur passée en paramètre.

‫ﻣﻦ‬
Tests:
‫ا‬
‫ﻟﺒﺪ‬
diviserParDeux(2) === 1;
‫اﻳﻪ‬
diviserParDeux(4) === 2;
var n = Math.random(); diviserParDeux(n) === n / 2;

‫إﱃ‬
une fonction somme qui retourne la somme des deux paramètres qui lui seront passés.
‫اﻹ‬
Tests:
‫ﺣﱰ‬
‫اف‬
somme(1, 1) === 2;
somme(1, 2) === 3;
somme(2, 1) === 3;
var n = Math.random(); somme(n, 1) === n + 1;
une fonction signe qui retourne la chaîne de caractères positif , négatif ou nul ,
selon le signe de la valeur passée en paramètre. Tests:
signe(-1) === 'negatif';
signe(0) === 'nul';
signe(Math.random()) === 'positif';

une fonction factorielle qui retourne le produit de tous les entiers consécutifs entre 1
et l'entier passé en paramètre (compris). Exemple: factorielle(3) retourne le résultat
de 1 * 2 * 3 , soit 6 . Tests:
factorielle(0) === 0;
Solution
‫ﺗ‬
‫ﻢا‬
Bugs et tests unitaires: comment tester une fonction
‫ﻟﺘﺤ‬
Appeler une fonction ajoute de l'incertitude et parfois de l'imprévisibilité au comportement du
‫ﻤﻴﻞ‬
code, car cela revient à déléguer une fonctionnalité à une autre partie du code (la définition
de la fonction appelée).
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
Afin de se rassurer sur le bon fonctionnement d'une fonction et éviter les bugs, il est
important de tester les fonctions qu'on utilise.
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
Un bug est un comportement imprévu causant des anomalies et/ou l'interruption de
l'exécution du programme. Il est généralement causé par une erreur d'implémentation ou
‫اﻟﱪ‬
une réalisation trop naïve (c.a.d. ne couvrant pas certains cas qui peuvent se produire).
‫ﻣﺠ‬
Exemple d'implémentation naïve pouvant causer un bug:

‫ﻪ‬
‫ﻣﻦ‬
function multiplierParDix (nombre) {

‫اﻟﺒ‬
return nombre + '0'; // on ajoute un zéro à la fin du nombre

‫ﺪ‬
}
‫اﻳﻪ‬
multiplierParDix(2); // => 20 => OK

multiplierParDix(3); // => 30 => OK
‫إﱃ‬
multiplierParDix(0.5); // => 0.50 => BUG! on voulait obtenir 5 dans ce cas

‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Dans l'exemple ci-dessus, nous avons effectué trois tests d'appel de notre fonction
multiplierParDix , et l'un d'eux nous a permis de détecter un bug dans notre fonction.
Afin de réduire le nombre de bugs potentiels d'une fonction, et donc de se rassurer sur son
bon fonctionnement, il est important d'écrire et exécuter plusieurs tests unitaires, et penser
intelligemment aux cas limites, les cas qui pourraient le plus probablement causer un bug.
Écrire un test unitaire pour une fonction consiste à:
décrire un exemple d'usage de cette fonction, en précisant la valeur résultante attendue

pour certaines valeurs de paramètres,

implémenter l'appel de cette fonction, et comparer la valeur résultante à celle qui est
attendue.
Lors de l'exécution du test unitaire, si la valeur de la comparaison détermine si la fonction

fonctionne comme prévue sur l'exemple de ce test.
Par exemple, on pourrait définir les trois tests unitaires suivants pour valider notre fonction
multiplierParDix :
multiplierParDix(2) === 20; // => false (car '20' différent de 20)

multiplierParDix(3) === 30; // => false (car '30' différent de 30)
multiplierParDix(0.5) === 5; // => false (car '0.50' différent de 0.5)
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
Avec la définition de la fonction multiplierParDix fournie plus haut, aucun de ces tests ne
‫ﻤﻴﻞ‬
passe. C'est à dire que chaque test d'égalité sera false .
‫ﻣﻦ‬
En revanche, les tests unitaires passeront avec la définition suivante de cette même
fonction:
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
function multiplierParDix (nombre) {
return nombre * 10;
‫ﻌﻠﻢ‬
}
multiplierParDix(2) === 20; // => true => OK
‫اﻟﱪ‬
multiplierParDix(3) === 30; // => true => OK

‫ﻣﺠ‬
multiplierParDix(0.5) === 5; // => true => OK

‫ﻪﻣ‬
‫ﻦا‬
À retenir: Un test unitaire est un exemple d'appel permettant de vérifier qu'une fonction
se comporte comme prévu dans un cas donné, en comparant le résultat effectivement
‫ﻟﺒﺪ‬
retourné au résultat qui devrait être retourné.

‫اﻳﻪ‬
‫إﱃ‬
Valeur et affectation d'une fonction

‫اﻹ‬
‫ﺣﱰ‬
Nous avons vu que l'appel d'une fonction consiste à mentionner son nom, suivi de
‫اف‬
paramètres exprimés entre parenthèses. Et que cet appel est remplacé par la valeur
retournée par son exécution.
// définition de la fonction multiplierParDeux()

function multiplierParDeux (nombre) {
return nombre * 2;
}
// appel de la fonction multiplierParDeux(), en passant le nombre 3 en paramètre

var resultat = multiplierParDeux(3);
// la valeur retournée par l'appel de la fonction (6) est affectée à résultat

Ainsi, multiplierParDeux(3) est remplacé par sa valeur de retour: 6 , après l'exécution de

la fonction multiplierParDeux à laquelle on a passé la valeur littérale 3 comme valeur du
paramètre appelé nombre .
Pour rappel, une variable Javascript est remplacée par la dernière valeur qui lui a été
affectée. Ainsi, si la valeur 6 a été affectée à la variable maVariable à l'aide de l'instruction
maVariable = 6; , les mentions suivantes de maVariable seront remplacée par sa valeur
6 .
En Javascript, une fonction est une valeur, au même titre qu'un nombre ou une chaîne de
caractères. Elle peut donc aussi être attribuée à une variable.
‫ﺗ‬
‫ﻢا‬
Ainsi, il est possible d'affecter la fonction multiplierParDeux à la variable maVariable :
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
maVariable = multiplierParDeux;
‫ﻣﻦ‬
...et de l'appeler de la manière suivante:
‫ﻣ‬
maVariable(3); // => retourne la valeur 6;
‫ﻮﻗﻊ‬
Il est donc aussi possible d'affecter une fonction anonyme à une variable:
‫اﻟﱪ‬
‫ﻣﺠ‬
var multiplierParTrois = function (nombre) {

return nombre * 3;
‫ﻪﻣ‬
};
‫ﻦ اﻟ‬
... ce qui est équivalent à écrire:

‫ﺒ‬
‫ﺪاﻳ‬
‫ﻪإ‬
function multiplierParTrois (nombre) {

‫ﱃ‬
return nombre * 3;
‫اﻹ‬
}
‫ﺣﱰ‬
‫اف‬
Exercice: Jeu ChiFouMi
Fonctionnement du jeu à implémenter

À chaque manche, l'ordinateur et le joueur choisissent chacun un élément parmi pierre ,
feuille ou ciseaux .
Un point est donné à celui qui a choisi l'élément le plus fort, sachant que:
ciseaux > feuille (les ciseaux coupent la feuille)
pierre > ciseaux (la pierre casse les ciseaux)

feuille > pierre (la feuille enveloppe la pierre)
Si l'ordinateur et le joueur ont choisi le même élément, aucun d'eux n'emporte de point.
Exemple de déroulement d'une manche

l'ordinateur choisit secrètement pierre (parmi les trois valeurs d'éléments possibles);
le joueur est invité à saisir son choix => il tape feuille ;
l'ordinateur affiche feuille car c'est l'élément qui l'emporte (la feuille enveloppe la
pierre).
‫ﺗ‬
‫ﻢا‬
Phase 1: Implémentation d'une manche
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
Pour implémenter le code d'une manche, nous allons:
définir une fonction comparer(choix1, choix2) qui renvoie le nom de l'élément gagnant,
‫ﻣﻦ‬
entre les deux passés en paramètres;
‫ﻣﻮﻗ‬
appeler cette fonction, en passant les choix de l'ordinateur et du joueur en paramètres,
‫ﻊﺗ‬
afin de savoir lequel des deux a remporté la manche.
‫ﻌﻠﻢ‬
Pour vous aider, le site codecademy propose un guide interactif: Créez un "Pierre, feuille,
ciseaux".
‫اﻟﱪ‬
‫ﻣﺠ‬
Si vous ne souhaitez pas utiliser ce site, voici une proposition d'étapes à suivre:
‫ﻪ‬
1. Dessiner l'arbre de décision d'une manche: nom de l'élément gagnant en fonction de

‫ﻣﻦ‬
deux éléments choisis;

‫اﻟﺒ‬
2. Transformer l'arbre de décision en conditions if imbriquées, en fonction de la valeur

‫ﺪ‬
‫اﻳﻪ‬
de deux variables: choix1 et choix2 ;

3. Chaque condition de dernier niveau va afficher dans la console le nom de l'élément qui
‫إﱃ‬
remporte la manche;
‫اﻹ‬
4. Transférer ces conditions dans la définition d'une fonction comparer(choix1, choix2)

‫ﺣﱰ‬
qui retourne le nom de l'élément gagnant à l'aide de return (au lieu de l'afficher dans
‫اف‬
la console), parmi les deux passés en paramètres;

5. Tester cette fonction en lui passant chaque combinaison possible de valeurs du jeu en
paramètres;
6. En dehors de la définition de la fonction, créer les variables choixOrdi et
choixUtilisateur ;
7. Faire en sorte que choixOrdi ait pour valeur un des trois éléments, choisi de manière
aléatoire, et que choixUtilisateur soit saisi par l'utilisateur à l'aide de prompt() ;
8. Appeler la fonction comparer() , puis afficher dans la console la valeur de son résultat
(l'élément qui remporte la manche), à partir des choix de l'ordinateur et du joueur.

Phase 2: Partie en 3 manches, et scores

Après avoir implémenté une manche à l'aide de la fonction comparer() , faites en sorte que
le joueur puisse jouer 3 manches d'affilée et que le score final du joueur et de l'ordinateur
soient affichés dans la console en fin de partie.
Pour cela:
1. Créer les variables scoreOrdi et scoreJoueur ;

2. Après l'affichage du résultat de l'appel à comparer() dans la console, incrémenter une
de ces variables, en fonction de qui a remporté la manche;
‫ﺗﻢ‬
3. Mettre le code correspondant à une manche dans une boucle for , de manière à ce
qu'il s'exécute 3 fois d'affilée;
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
4. En fin de partie, afficher qui a remporté la partie: 'ordi' , 'joueur' ou 'aucun' , en
fonction des scores.
‫ﻞﻣ‬
Solution de la phase 1
‫ﻦﻣ‬
Solution de la phase 2 ‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
‫ﻢ اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 3: Types avancés

Objectifs:
‫ﺗﻢ‬
Savoir développer le Jeu du Pendu, et un répertoire téléphonique
‫اﻟﺘ‬
Utilisation de tableaux et d'objets
‫ﺤﻤﻴ‬
Plan du chapitre:
‫ﻞﻣ‬
1. Tableaux, introduction (Slides du TP)
‫ﻦﻣ‬
Application: Calendrier
2. Tableaux, fonctions avancées
‫ﻮﻗﻊ‬
Application: Jeu du Pendu
‫ﺗﻌﻠ‬
3. Objets JavaScript (Slides du TP)
‫ﻢ اﻟ‬
Application: Annuaire téléphonique

‫ﱪ‬
4. Objets, usage avancé

‫ﻣﺠ‬
Application: Répertoire téléphonique

‫ﻪﻣ‬
‫ﻦا‬
‫ﻟﺒﺪ‬
1. Tableaux, introduction
‫اﻳﻪ‬
‫إﱃ‬
Un tableau (appelé array en anglais) est un type avancé de valeurs. C'est une liste
‫اﻹ‬
ordonnée de valeurs.
‫ﺣﱰ‬
Exemple:
‫اف‬
var fruits = [ 'Mangue', 'Raisin', 'Figue' ];
Caractéristiques
Comme tous les autres types de valeur, un tableau peut être stocké dans une variable.
En revanche, en JavaScript, les tableaux sont considérés comme une forme particulière du
type object . Autrement dit, typeof [] retourne "object" .

Comme toute variable en JavaScript, les valeurs stockées dans un tableau peuvent être de
n'importe quel type (y compris un tableau), et n'ont pas besoin d'être tous du même type:
var fourreTout = [ null, true, 'bonjour', 1.2, fruits, undefined ];
Tout tableau possède une propriété length qui vaut le nombre de valeurs qu'il contient:
fourreTout.length; // => retourne 6, car il y a 6 valeurs dans notre tableau
Accéder aux éléments d'un tableau
‫ا‬ ‫ﺗﻢ‬
‫ﻟﺘﺤ‬
Chaque élément d'un tableau est numéroté par ce qu'on appelle un "indice" (ou "index" en
‫ﻤﻴﻞ‬
anglais).
A noter que cette numérotation commence par 0 (zéro), et non par 1.
‫ﻣﻦ‬
Du coup, l'indice du premier élément est 0 , et l'indice du dernier élément est length - 1
( length étant le nombre d'éléments du tableau). ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
On peut accéder à un élément de tableau en précisant son indice entre crochets:
‫اﻟ‬ ‫ﻌﻠﻢ‬

‫ﱪﻣ‬
fruits[0]; // vaut 'Mangue'

‫ﺠﻪ‬
fruits[1]; // vaut 'Raisin'

fruits[2]; // vaut 'Figue'
‫ﻣﻦ‬
fruits[3]; // undefined
‫ا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
Modification d'un élément

‫إﱃ‬
Pour modifier la valeur d'un élément, il suffit de l'adresser par indice (comme vu juste avant)
‫اﻹ‬
puis de lui affecter une valeur, comme on le ferait pour une variable:
‫ﺣﱰ‬
‫اف‬

fruits[1] = 'Kiwi';
fruits; // => vaut [ 'Mangue', 'Kiwi', 'Figue' ]
Ajout d'élément
La méthode push() permet d'ajouter un élément à la fin du tableau. La valeur de cet
élément est à passer en paramètre (entre parenthèses) de la méthode, quand on l'appelle:


fruits.push('Banane'); // appel de la méthode push() sur le tableau fruits, avec `Bana
ne` en paramètre
fruits; // => [ 'Mangue', 'Raisin', 'Figue', 'Banane' ]
À chaque fois qu'on ajoute un élément à un tableau en appelant la méthode push() , sa

longueur length est incrémentée (c.a.d. sa valeur augmente de 1 ):
fruits.length; // => 4, désormais
‫ﺗ‬
‫ﻢا‬
Retrait d'élément
‫ﻟﺘﺤ‬
La méthode pop() retourne la dernière valeur du tableau puis la retire de ce tableau:
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
var f = fruits.pop();
‫ﻣﻮﻗ‬
f; // => `Figue`
fruits; // => [ 'Mangue', 'Raisin' ];
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
À chaque fois qu'on retire un élément d'un tableau en appelant la méthode pop() , sa
longueur length est décrémentée (c.a.d. sa valeur décroit de 1 ):
‫اﻟﱪ‬
‫ﻣﺠ‬
fruits.length; // => 2, désormais

‫ﻪ‬
‫ﻣﻦ‬
Pratique: Calendrier
‫اﻳﻪ‬
var jours = [ 'lun', '007', 'mer', 'jeu', 'ven', 'sam', 'BUG' ];

‫إﱃ‬
‫اﻹ‬
Quelles instructions JavaScript faut-il exécuter pour effectuer les opérations suivantes ?
‫ﺣﱰ‬
‫اف‬
1. Retirer le dernière valeur du tableau jours

2. Afficher les valeurs du tableau dans la console
3. Ajouter la valeur 'dim' à la fin du tableau
4. Remplacer la valeur '007' par 'mar'
5. Afficher le nombre de valeurs du tableau dans la console
6. Afficher la troisième valeur du tableau dans la console
Quelle est la valeur finale du tableau, après avoir effectué toutes ces opérations ?
Solution

2. Tableaux, fonctions avancées

Recherche d'élément par valeur
La méthode indexOf() retourne l'indice du premier élément d'un tableau, pour une valeur
donnée. La valeur recherchée est à passer en paramètre (entre parenthèses) de la
méthode, quand on l'appelle:
var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Raisin' ];

fruits.indexOf('Raisin'); // => 1
‫ﺗﻢ‬
‫اﻟﺘ‬
Si aucun élément du tableau ne contient la valeur cherchée, l'appel à indexOf() retourne
‫ﺤﻤﻴ‬
-1 :
‫ﻞﻣ‬
fruits.indexOf('Pomme'); // => -1, car il n'y a pas de valeur 'Pomme' dans fruits
‫ﻦﻣ‬
Concaténation de tableaux
‫ﻌﻠﻢ‬
Comme pour les chaînes de caractères, il est possible de concaténer des tableaux.
‫اﻟ‬
La concaténation de deux tableaux consiste à créer un nouveau tableau contenant les

‫ﱪﻣ‬
éléments de ces deux tableaux.

‫ﺠﻪ‬
La méthode concat() retourne un nouveau tableau contenant les éléments du tableau sur
‫ﻣﻦ‬
lequel elle est appelée, et d'un autre tableau passé en paramètre:

‫اﻳﻪ‬
var fruits1 = [ 'Mangue', 'Raisin' ];

var fruits2 = [ 'Figue', 'Kiwi' ];
‫إﱃ‬
fruits1.concat(fruits2); // => [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ]

‫اﻹ‬
‫ﺣﱰ‬
Il est bien entendu possible d'utiliser des tableaux littéraux, au lieu de variables:
‫اف‬
[ 'Mangue', 'Raisin' ].concat([ 'Figue', 'Kiwi' ]); // => [ 'Mangue', 'Raisin', 'Figue
', 'Kiwi' ]
Partitionnement de tableaux
La méthode slice() retourne un nouveau tableau contenant un extrait du tableau sur
lequel elle est appelée.
A chaque appel de cette méthode, il faut fournir deux paramètres: l'indice de l'élément où
commence cet extrait, et l'indice de l'élément où se termine l'extrait (non compris):

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ];

fruits.slice(1, 3); // => [ 'Raisin', 'Figue' ]
Altération de tableau
La méthode splice() (à ne pas confondre avec slice() ) permet à la fois de supprimer et
d'insérer des éléments dans un tableau, en fournissant leur indice(s).
Syntaxe d'appel de la méthode: tableau.splice(i, c, v1, v2, ...) , avec
paramètre i : indice à partir duquel on va effectuer la modification
‫ﺗﻢ‬
paramètre c : nombre d'éléments à supprimer depuis l'indice i
‫اﻟﺘ‬
paramètre(s) suivant(s): valeur(s) d'élément(s) à insérer à partir de l'indice i
‫ﺤﻤﻴ‬
Voici un exemple utilisant les paramètres i et c : (suppression seulement)
‫ﻞﻣ‬
‫ﻦﻣ‬
fruits.splice(1, 2); // depuis l'indice 1, supprimer 2 valeurs
fruits; // => [ 'Mangue', 'Kiwi' ]
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Voici un exemple utilisant tous les paramètres: (insertion seulement)

‫ﻢ اﻟ‬
‫ﱪﻣ‬

‫ﺠﻪ‬
fruits.splice(1, 0, 'Pomme'); // depuis l'indice 1, supprimer 0 valeurs, puis y insére

r 'Pomme'
‫ﻣﻦ‬
fruits; // => [ 'Mangue', 'Pomme', 'Raisin', 'Figue', 'Kiwi' ]

‫اﻟﺒ‬
‫ﺪاﻳ‬
Contrairement aux méthodes concat() et slice() , splice() ne retourne pas un

‫ﻪإ‬
nouveau tableau, mais modifie le tableau sur lequel elle est appelée.
‫ﱃ‬
‫اﻹ‬
Pratique: Épicerie
‫ﺣﱰ‬
‫اف‬
Écrire un programme qui:
1. Affiche la liste de fruits disponibles;

2. Demande au client quel fruit il désire acheter:
s'il est présent dans le tableau fruits : le retirer du tableau, et afficher 'ok!' ,
sinon, afficher 'indisponible...' .
3. Affiche à nouveau la liste de fruits disponibles.

Solution
Exercice: Jeu du Pendu

Principe du jeu: Le joueur doit deviner un mot, lettre par lettre. Il perd après 10 mauvaises
tentatives.
Nous allons utiliser les variables suivantes:
var tentatives = 10;

var lettres = [ 's', 'u', 'p', 'e', 'r' ];
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
À chaque tentative, le joueur va proposer une lettre, puis:
‫ﻤﻴﻞ‬
si la lettre fait partie du mot à deviner (dont les lettres sont stockées dans le tableau
lettres ), cette lettre sera supprimée du tableau;
‫ﻣﻦ‬
sinon, le nombre de tentatives décrémente.
‫ﻣ‬
‫ﻮﻗﻊ‬
Le joueur gagne la partie quand il a deviné toutes les lettres du mot. (c.a.d. le tableau
lettres ne contient plus aucun élément)
Le joueur perd la partie si le nombre de tentatives atteint la valeur 0 .

‫اﻟﱪ‬
Exercice: implémenter le jeu du pendu en JavaScript.

‫ﻣﺠ‬
‫ﻪﻣ‬
Mots clés à utiliser: alert , prompt , if , else , = , === , indexOf , splice , et for
‫ﻦ اﻟ‬
Conseil: avant de créer une boucle for , implémenter l'algorithme qui sera exécuté à
chaque itération de cette boucle. (une itération = une tentative du joueur)
‫ﺒ‬
‫ﺪاﻳ‬
‫ﻪإ‬
Étapes proposées:
‫ﱃ‬
1. Afficher le nombre de lettres à trouver, et de tentatives restantes.

‫اﻹ‬
2. Si tentatives est nul, afficher perdu! .

‫ﺣﱰ‬
3. Si le nombre de lettres restantes à trouver est nul, afficher bravo! .

‫اف‬
4. Demander une lettre au joueur, en utilisant prompt() .

5. Si la lettre fait partie du tableau lettres , la supprimer du tableau. Sinon décrémenter
tentatives . Afficher un message au joueur dans chaque cas.
6. Créer une boucle for permettant de jouer jusqu'à la fin de partie (perdu ou bravo).
BONUS: Dans le cas où le joueur devine une lettre qui apparaît plus d'une fois dans le mot,
retirer toutes les occurrences de cette lettre en une seule fois.
Solution + Bonus

3. Objets JavaScript
Dans la première moitié de ce chapitre nous avons vu que les tableaux permettaient de
stocker une liste ordonnées d'éléments (ayant chacun une valeur de n'importe quel type). Et
que ces éléments étaient indexés par des numéros.
Exemple:
var tableau = ['a', 'b', 4];

// => Correspondance entre numéros d'éléments et leur valeur
// 0: 'a'
‫ﺗﻢ‬
// 1: 'b'
// 2: 4
‫ا‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
Les objets permettent aussi de stocker des valeurs.
‫ﻣﻦ‬
Alors que chaque valeur d'un tableau est stockée dans un élément, chaque valeur d'un
‫ﻣﻮﻗ‬
objet est stockée dans ce qu'on appelle une propriété.
‫ﻊﺗ‬
Alors que chaque élément d'un tableau est indexé par un numéro (indice), chaque propriété
‫ﻌﻠﻢ‬
d'un objet est indexé par une chaîne de caractères.
‫اﻟ‬
Définition d'objet
‫ﱪﻣ‬
‫ﺠﻪ‬
Contrairement à la manière de définir un tableau, chaque valeur de propriété stockée dans

‫ﻣﻦ‬
un objet doit être précédée du nom de cette propriété (aussi appelé clé, ou key en anglais),
et suivi par : (deux points).
‫ا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
var objet = {
‫إﱃ‬
prop1: 'a',
prop2: 'b',
‫اﻹ‬
prop3: 4,
‫ﺣﱰ‬
};
// => Correspondance entre noms de propriétés et leur valeur
‫اف‬
// 'prop1': 'a'
// 'prop2': 'b'
// 'prop3': 4
À noter que chaque définition de propriété doit être ponctuée d'une virgule.
Les règles d'indentation s'appliquent aussi à la définition d'objets sur plusieurs lignes, car les
propriétés sont définies entre accolades.

Le format JSON (JavaScript Object Notation, utilisé très couramment par les APIs de
sites web, et exports structurées de données depuis le web) correspond à cette
manière de définir des objets. Nous allons y revenir plus tard dans ce chapitre.
Accès aux propriétés d'un objet

Il existe deux manière d'accéder à la valeur d'une propriété d'objet:
1. La notation pointée, ex: objet.prop

2. L'usage des crochets, ex: objet[prop]
‫ﺗ‬
Comme pour les tableaux, l'adressage par crochets a un avantage intéressant: il permet
‫ﻢا‬
d'accéder à un élément dont la clé est stockée dans une variable.
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
Exemple:
‫ﻣﻦ‬
var objet = {
prop1: 'a',
prop2: 'b',
prop3: 4, ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
};
‫ﻌﻠﻢ‬
// adressage littéral par notation pointée:

‫اﻟﱪ‬
objet.prop2; // => 'b'

‫ﻣﺠ‬
// adressage littéral par crochets:

‫ﻪﻣ‬
objet['prop2']; // => 'b'

‫ﻦا‬
// adressage symbolique par crochets:

‫ﻟﺒﺪ‬
var cle = 'prop2';

objet[cle]; // => 'b'
‫اﻳﻪ‬
‫إﱃ‬
La notation pointée est plus concise et lisible, mais impose de mentionner la clé "en dur"
‫اﻹ‬
(littéralement) dans le code:

‫ﺣﱰ‬
‫اف‬
// adressage littéral, avec notation pointée:

objet.prop2; // => 'b'
// adressage symbolique, impossible avec notation pointée:

var cle = 'prop2';
objet.cle; // => undefined, car il n'y a pas de propriété appelée 'cle' dans l'objet
Modification de propriétés

La modification d'une propriété d'objet fonctionne similairement à la modification d'un

élément de tableau: il suffit d'effectuer une affectation après avoir adressé la valeur à
modifier.
var tableau = ['a', 'b', 4];

tableau[1] = 3; // => tableau = ['a', 3, 4]
var objet = {
prop1: 'a',
prop2: 'b',
prop3: 4,
};
‫ﺗ‬
‫ﻢا‬
objet.prop2 = 3; // => objet: { prop1: 'a', prop2: 3, prop3: 4 }
‫ﻟﺘﺤ‬
Il est bien sûr possible d'utiliser indifféremment l'adressage par notation pointée ou par
‫ﻤﻴﻞ‬
crochets, pour une affectation.
‫ﻣﻦ‬
Clés riches
‫ﻣ‬
‫ﻮﻗﻊ‬
Contrairement aux restrictions imposées pour nommer les variables en JavaScript, il est
‫ﺗ‬
‫ﻌﻠﻢ‬
possible d'inclure des espaces et des caractères spéciaux dans les noms de propriétés.
‫اﻟﱪ‬
Par contre, il faut dans ce cas utiliser des apostrophes (ou guillemets) pour définir et
adresser ces propriétés:
‫ﻪ‬ ‫ﻣﺠ‬
‫ﻣﻦ‬
var mesAmis = {
'Luke Skywalker': true,
‫اﻟﺒ‬
'Dark Vador': false,

‫ﺪ‬
};
‫اﻳﻪ‬
mesAmis.LukeSkywalker; // => undefined

mesAmis.Luke Skywalker; // => /!\ syntax error
‫إﱃ‬
mesAmis['Luke Skywalker']; // => true

‫اﻹ‬
‫ﺣﱰ‬
Notes sur les types

‫اف‬
Comme pour les tableaux, la valeur d'une propriété d'objet peut être de n'importe quel type:
string , number , boolean , null , undefined , object ou function .
A noter que, comme les objets, les tableaux sont aussi de type object .
typeof { prop: 'a' }; // => "object"

typeof [ 'a', 3, 4 ]; // => "object"

Mais les tableaux ont des caractéristiques particulières que n'ont pas les objets. Notamment
l'indexation numérique, des fonctions spécifiques comme slice , etc...
Mise en pratique: Annuaire téléphonique

Développer un programme qui permet d'afficher le numéro de téléphone d'un ami (à l'aide
de alert ), en saisissant son nom (à l'aide de prompt ).
Afin que l'annuaire soit extensible à l'avenir, aucune condition if ne doit être utilisée. Nous
allons donc stocker les noms et numéros de téléphones dans un objet, et utiliser l'adressage
par crochets pour trouver un numéro à partir d'un nom.
‫ﺗﻢ‬
‫اﻟﺘ‬
Solution
‫ﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
4. Objets, usage avancé
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Hiérarchie d'objets
‫ﻌﻠﻢ‬
Comme il est possible de stocker un objet comme valeur d'une propriété d'objet, cela veut
‫اﻟﱪ‬
dire que nous pouvons définir des hiérarchies / arbres d'objets.

‫ﻣﺠ‬
Exemple:
‫ﻪ‬
‫ﻣﻦ‬
var compteFacebook = {
‫اﻟﺒ‬
amis: {
‫ﺪاﻳ‬

‫ﻪإ‬
},
‫ﱃ‬
groupes: {
‫اﻹ‬
maitresJedi: {
‫ﺣﱰ‬
titre: 'Groupe des maîtres Jedi',

membres: [ 'Yoda', 'Obi Wan' ],
‫اف‬
},
lolcats: {
titre: 'Vive les chats !',
membres: [ 'Patrick' ],
},
},
};
Dans l'exemple ci-dessus, nous avons jusqu'à trois niveaux d'imbrication d'objets (voire
quatre, si on compte les tableaux comme des objets): l'objet compteFacebook contient une
propriété groupes (de type objet) contenant une propriété maitresJedi (aussi de type

objet) contenant deux propriétés (de type chaîne de caractères et tableau).
Cet objet peut être représenté visuellement sous forme d'un arbre.
Pour accéder au premier élément du tableau membres de la sous-propriété maitresJedi ,

on doit écrire le cheminement à suivre, de propriété à sous-propriétés.
Exemple:
// adressage par notation pointée:

compteFacebook.groupes.maitresJedi.membres[0]; // => 'Yoda'
‫ﺗﻢ‬
// adressage par crochets:
compteFacebook['groupes']['maitresJedi']['membres'][0]; // (idem)
‫ﺤ‬ ‫اﻟﺘ‬
‫ﻤﻴﻞ‬
Dans cet exemple aussi, on peut utiliser indifféremment la notation pointée ou les crochets,
pour accéder à la propriété d'un objet.
‫ﻣﻦ‬
Énumérer les propriétés d'un objet
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Il existe deux manières d'énumérer les propriétés d'un objet:
‫ﻌﻠﻢ‬
1. utiliser une boucle for-in ;

‫اﻟﱪ‬
2. ou itérer sur le tableau des clés de l'objet, à l'aide de la fonction Object.keys() .

‫ﻣﺠ‬
Une boucle for-in s'utilise de cette façon:

‫ﻪ‬
‫ﻣﻦ‬
var mesAmis = {
‫اﻟﺒ‬

‫ﺪاﻳ‬

‫ﻪإ‬
};
for (var cle in mesAmis) {
‫ﱃ‬
console.log(cle, '->', mesAmis[cle]);

‫اﻹ‬
}
‫ﺣﱰ‬
// => lignes affichées dans la console:

// Luke Skywalker -> true
‫اف‬
// Dark Vador -> false
Contrairement à une boucle for classique (dans laquelle on définit une instruction
d'initialisation, une expression conditionnelle et une instruction d'incrémentation, séparés par
des points-virgules, pour rappel), la boucle for-in va répéter la liste d'instructions entre
accolades pour chaque clé de l'objet.
Dans notre exemple de code ci-dessus, la variable cle prendra donc la valeur d'une clé de
l'objet mesAmis , pour chacune de ses propriétés.

A noter que cela fonctionne aussi sur les tableaux, sauf que l'indice de chaque élément
du tableau sera fourni (au lieu de la clé de chaque propriété de l'objet).
Énumérer les propriétés d'un objet, une autre manière

Lorsqu'elle est appelée en passant un objet en paramètre, la fonction Object.keys()
retourne un tableau contenant les clés/noms de chaque propriété de cet objet.
var mesAmis = {
‫ﺗﻢ‬
};
‫اﻟﺘ‬
var cles = Object.keys(mesAmis); // => [ 'Luke Skywalker', 'Dark Vador' ]
‫ﺤ‬
‫ﻤﻴﻞ‬
On peut alors utiliser une boucle for plus classique pour itérer sur les valeurs de ce
‫ﻣﻦ‬
tableau:
for (var i = 0; i < cles.length; i++) {

‫ﻣﻮﻗ‬
‫ﻊﺗ‬
var cle = cles[i];
console.log(i, ':', cle, '->', mesAmis[cle]);
‫ﻌﻠﻢ‬
}
// => lignes affichées dans la console:
‫اﻟﱪ‬
// 0, Luke Skywalker -> true

// 1, Dark Vador -> false
‫ﻪ‬ ‫ﻣﺠ‬
‫ﻣﻦ‬
Suppression d'une propriété

‫اﻟﺒ‬
‫ﺪاﻳ‬
Pour supprimer une propriété d'un objet, il faut utiliser le mot clé delete de la manière
‫ﻪإ‬
suivante:
‫ﱃ‬
‫اﻹ‬
var objet = {
‫ﺣﱰ‬
prop1: 'a',
prop2: 'b',
‫اف‬
prop3: 4,
};
delete objet.prop2;
// => objet === { prop1: 'a', prop3: 4 }
Exercice: Répertoire téléphonique

Sur la base de l'annuaire téléphonique réalisé plus haut, développer un programme qui
propose les fonctionnalités suivantes:
recherche et affichage d'un numéro de téléphone en saisissant un nom,

liste des contacts de l'annuaire (nom + numéro de téléphone, à afficher dans la console
à l'aide d'une boucle for..in ),
ajout d'un contact (nom + numéro de téléphone) dans l'annuaire,
suppression d'un contact.
Pour permettre à l'utilisateur de choisir la fonctionnalité qu'il souhaite utiliser, lui demander
de saisir la première lettre de la fonction:
'r' pour rechercher,
'l' pour afficher la liste,
'a' pour ajouter,
‫ﺗﻢ‬
et 's' pour supprimer.
‫اﻟﺘ‬
Afin que l'utilisateur puisse utiliser plusieurs fonctionnalités d'affilée, placer le code du
‫ﺤﻤﻴ‬
programme dans une boucle qui ne s'arrêtera que lorsque l'utilisateur aura tapé q au lieu
‫ﻞﻣ‬
de choisir une fonctionnalité.
‫ﻦﻣ‬
Solution
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
‫ﻢ اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 4: Manipuler le Web avec DOM

Objectifs:
‫ﺗﻢ‬
Exécuter du code JavaScript depuis une page HTML
‫اﻟﺘ‬
Manipuler une page HTML depuis un programme JavaScript
‫ﺤﻤﻴ‬
Introduction aux concepts d'API et d’événements
‫ﻞﻣ‬
Plan du chapitre:
‫ﻦﻣ‬
1. JavaScript et le DOM (Slides du TP)
Application: Calculatrice
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Références:
‫ﻢ‬
Référence JavaScript du Mozilla Developer Network (en Français)

‫اﻟﱪ‬
JavaScript Kit (en Anglais, moins à jour, mais plus concis et avec des exemples plus
‫ﻣﺠ‬
simples)
‫ﻪﻣ‬
Aide-mémoires:
‫ﻦا‬
‫ﻟﺒﺪ‬
OverAPI's JavaScript Cheatsheet (liste des propriétés et fonctions JavaScript/DOM,

‫اﻳﻪ‬
classées par type)

JavaScript Cheat Sheet by DaveChild (liste des principales fonctions et propriétés
‫إﱃ‬
JavaScript/DOM)
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
1. JavaScript et le DOM
Dans les chapitres précédents, nous avons exécuté des programmes JavaScript simples de
manière interactive, depuis la console de notre navigateur.
Dans ce chapitre, nous allons voir:
comment associer un programme JavaScript à une page web,

et comment modifier cette page dynamiquement depuis notre programme.

Terminologie: quelques rappels sur le Web

WWW: World Wide Web, c'est le nom donné à l'ensemble des pages liées entre elles
sur Internet via le protocole HTTP (nous en reparlerons dans le chapitre suivant). La
plupart de ces pages sont décrites en langage HTML.
HTML: HyperText Markup Language, c'est un langage qui permet de décrire la structure
et le contenu d'une page web, en utilisant des éléments (balises).
CSS: Cascading Style Sheets, c'est un langage qui permet de mettre en page et styliser
les éléments HTML d'une page web en leur appliquant des propriétés.
JavaScript: c'est le seul langage qui permet de donner des instructions exécutables
‫ﺗﻢ‬
depuis une page web au format HTML.
Navigateur Web / Web Browser: c'est un logiciel d'affichage de pages web
‫ا‬
‫ﻟﺘﺤ‬
(généralement composées de fichiers HTML, CSS et JavaScript), et permettant à
‫ﻤﻴﻞ‬
l'utilisateur d’interagir avec celles-ci.
DOM: Document Object Model, c'est à la fois le nom qu'on donne à l'ensemble des
‫ﻣﻦ‬
éléments qui constituent une page Web ouverte dans le navigateur (telle qu'elle est
‫ﻣﻮﻗ‬
structurée en mémoire), et à l'API qui permet de manipuler ces éléments.
‫ﻊﺗ‬
API: Application Programming Interface, est un ensemble de fonctions fournies par un
logiciel (par exemple: un navigateur Web, ou un serveur Web) qui permettent à d'autres
‫ﻌﻠﻢ‬
programmes d’interagir / échanger des informations avec lui.

‫اﻟﱪ‬
‫ﻣﺠ‬
Associer un programme JavaScript à une page web

‫ﻪﻣ‬
Vous devez savoir qu'une page web peut être associée à une feuille de style CSS. Pour
‫ﻦا‬
cela, le code source HTML de cette page doit contenir un élément <link> donnant l'URL du
‫ﻟﺒﺪ‬
fichier CSS correspondant.

‫اﻳﻪ‬
De la même façon, pour associer un programme JavaScript à une page web, il suffit
‫إﱃ‬
d'ajouter un élément <script> donnant l'URL du programme en question (dont le fichier

‫اﻹ‬
porte généralement l'extension .js ).

‫ﺣﱰ‬
Exemple de code source HTML d'une page web:

‫اف‬
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Bonjour !</h1>
<script src="script.js"></script>
</body>
</html>

Trois choses importantes à remarquer:
l'élément <script> peut être défini dans le <head> ou dans le <body> , mais il est
généralement recommandé de l'insérer juste avant la fin du <body> ;
l'URL du script doit être fournie via l'attribut src ;
mais surtout, contrairement aux éléments <link> , les éléments <script> ne doivent
pas être exprimés sous forme d'une balise auto-fermante (finissant par /> ) => il est
impératif d'utiliser une balise fermante </script> après chaque balise ouvrante
<script> .
Les scripts ainsi intégrés dans le <body> de la page seront exécutés au fur et à mesure
‫ﺗ‬
‫ﻢا‬
qu'ils sont découverts et chargés par le navigateur.
‫ﻟﺘﺤ‬
Remarque, il est aussi possible d'intégrer directement notre programme JavaScript
‫ﻤﻴﻞ‬
entre les balises <script> et </script> , pour éviter de le stocker dans un fichier
séparé. Cette méthode n'est pas recommandée car elle peut causer des erreurs de
‫ﻣﻦ‬
syntaxe.
‫ﻣ‬
Application: Dire bonjour au monde
‫ﻌﻠﻢ‬
Vous allez créer une page web qui affiche Bonjour le monde ! dans une fenêtre à l'aide de
la fonction alert() .
‫اﻟﱪ‬
‫ﻣﺠ‬
Pour cela:
‫ﻪ‬
1. Créez un fichier bonjour.html définissant une page web minimale mais valide,
‫ﻣﻦ‬
contenant seulement un titre de type <h1> .

‫اﻟﺒ‬
2. Ouvrez cette page dans votre navigateur, pour vérifier qu'elle s'affiche correctement.
‫ﺪ‬
‫اﻳﻪ‬
3. Créez un fichier bonjour.js contenant un programme JavaScript permettant d'afficher

le message demandé.
‫إﱃ‬
4. Testez votre code en le copiant dans la console du navigateur.

‫اﻹ‬
5. Associez le fichier bonjour.js à la page bonjour.html , à l'aide d'un élément

‫ﺣﱰ‬
<script> .
‫اف‬
6. Rafraîchissez la page bonjour.html dans votre navigateur, pour vérifier que le

message demandé s'affiche bien dès l'affichage de la page.
7. En cas de problème, vérifiez la présence d'erreurs dans la console JavaScript du
navigateur, corrigez-les, et ré-essayez.
Solution: bonjour.html, bonjour.js
Accéder aux éléments de la page Web depuis JavaScript

Les navigateurs Web (tels que Google Chrome) donnent accès à une API (voir définition
plus haut) permettant à nos programmes JavaScript d'interagir avec le DOM de la page Web
à laquelle ils sont liés.
C'est à dire qu'un script intégré dans une page peut utiliser des fonctions permettant de
manipuler le contenu de cette page. Par exemple: pour récupérer des informations saisies
par l'utilisateur dans des champs de la page, ou encore modifier le contenu et/ou l'affichage
de la page.
Pour accéder à un élément de la page, il faut identifier précisément (c.a.d. sans ambiguïté)
cet élément auprès du navigateur. Par exemple: en l'adressant par son identifiant unique
‫ﺗﻢ‬
(attribut id de l'élément).
‫اﻟﺘ‬
Pour cela, l'API du DOM met à notre disposition un objet (cf chapitre précédent) appelé
‫ﺤﻤﻴ‬
document , et cet objet contient plusieurs fonctions. Nous allons d'abord nous intéresser à la
‫ﻞﻣ‬
fonction getElementById() qui permet d'accéder à l'objet représentant un élément de la
‫ﻦﻣ‬
page, en fonction de son identifiant unique.
‫ﻮﻗﻊ‬
Supposons que notre page Web contienne les éléments suivants:
‫ﺗ‬
‫ﻌﻠﻢ‬
<body>
<p id="premier-paragraphe">Bonjour</p>
<p id="deuxieme-paragraphe">le monde</p>
‫اﻟ‬
‫ﱪﻣ‬
</body>
‫ﺠﻪ‬
Nous pouvons alors accéder au premier paragraphe en JavaScript (ex: depuis un script
‫ﻣﻦ‬
rattaché à cette page, ou depuis la console du navigateur) de la manière suivante:

‫اﻳﻪ‬
document.getElementById('premier-paragraphe');
// => retourne un objet qui représente l'élément HTML correspondant
‫إﱃ‬
‫اﻹ‬
En exécutant cet appel de fonction dans la console, on voit s'afficher ce qu'elle retourne: un
‫ﺣﱰ‬
objet JavaScript qui représente l'élément HTML ayant premier-paragraphe comme

‫اف‬
identifiant.
Nous allons voir plus bas que l'objet document fourni par l'API du DOM contient d'autre
fonctions permettant d'accéder à des éléments, comme getElementsByClassName() ou
encore querySelector() .
Application:
1. allez sur le site web de votre choix,
2. utilisez l'onglet "Éléments" de Chrome Dev Tools (barre latérale dans laquelle se trouve

aussi la console JavaScript),

3. repérez un élément qui possède un attribut id ,
4. dans la console, utilisez getElementById() de manière à afficher l'objet JavaScript
représentant cet élément.
Astuce: pour accéder plus rapidement à la partie du DOM qui représente un élément
d'une page Web, effectuer un clic-droit sur cet élément de la page, puis cliquez sur
"Inspecter". Vous vous retrouverez immédiatement dans l'onglet "Éléments" de la page,
à l'endroit où est défini cet élément.
Récupérer la valeur d'un champ de saisie <input>
‫ﺗﻢ‬
‫اﻟﺘ‬
Maintenant que nous savons accéder à l'objet JavaScript correspondant à un élément HTML
‫ﺤﻤﻴ‬
de la page, nous allons voir comment récupérer des données de cet élément.
‫ﻞﻣ‬
Pour cela, nous allons utiliser la propriété value de l'objet JavaScript représentant un
‫ﻦﻣ‬
élément HTML.
Imaginons une page HTML contenant le formulaire suivant:

‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
<body>
‫ﻢ‬
<form>
‫اﻟﱪ‬
<label for="nom">Nom:</label>
‫ﻣﺠ‬
<input id="nom" value="Michel" />

<label for="prenom">Prénom:</label>
‫ﻪ‬
<input id="prenom" value="Jean" />

‫ﻣﻦ‬
</form>
</body>
‫اﻳﻪ‬
Pour accéder à l'objet JavaScript représentant le champ portant l'identifiant nom , nous
‫إﱃ‬
allons utiliser la fonction getElementById() de cette manière:

‫اﻹ‬
‫ﺣﱰ‬
document.getElementById('nom');
‫اف‬
Enfin, pour récupérer la valeur actuelle de ce champ, il suffit d'utiliser la propriété value de
cet objet:
document.getElementById('nom').value;
Dans notre exemple, l'exécution de cette instruction JavaScript retournera la valeur du

champ correspondant: "Michel" .

Si on exécute à nouveau cette instruction après que l'utilisateur a modifié la valeur du

champ, la valeur retournée correspondra à la valeur actuelle du champ (après modification).
Pratique: Récupération des valeurs du formulaire

Afin de mettre en pratique l'association d'un programme JavaScript à une page HTML,
l'accès à un élément en JavaScript, et la récupération de la valeur d'un champ de saisie,
vous allez:
1. Créer un dossier JS-FORM-1 ;

2. Dans ce dossier, créer un fichier index.html valide contenant deux champs de saisie,
‫ﺗﻢ‬
tel que définis dans l'exemple ci-dessus (avec identifiants nom et prenom );
‫ا‬
‫ﻟﺘﺤ‬
3. Toujours dans ce dossier, créer un fichier index.js contenant un programme
‫ﻤﻴﻞ‬
JavaScript qui affichera avec alert() la valeur du premier champ de la page, puis
celle du deuxième champ;
‫ﻣﻦ‬
4. Associez votre programme JavaScript (fichier index.js ) à votre page HTML (fichier
index.html ), de manière à ce qu'il soit exécuté quand on ouvre la page, et vérifier que
‫ﻣﻮﻗ‬
les deux valeurs sont bien affichées dans des alert lors du chargement de la page
‫ﻊﺗ‬
dans votre navigateur;
‫ﻌﻠﻢ‬
5. En cas de malfonctionnement, corrigez les erreurs dans vos fichiers, en vous aidant de
la console JavaScript.
‫اﻟﱪ‬
‫ﻣﺠ‬
Solution: index.html, index.js

‫ﻪﻣ‬
Réagir aux actions de l'utilisateur sur la page

‫ﻦا‬
‫ﻟﺒﺪ‬
Maintenant que nous savons accéder aux données d'une page HTML depuis un programme
‫اﻳﻪ‬
JavaScript, et faire en sorte que ce programme s'exécute au chargement de la page, nous

‫إﱃ‬
allons voir comment exécuter des instructions JavaScript en réponse à une action de
l'utilisateur sur la page.
‫اﻹ‬
‫ﺣﱰ‬
À chaque fois que l'utilisateur interagit avec une page Web, le navigateur déclenche des
‫اف‬
événements. Ces événements sont mis à disposition par l'API du DOM, afin qu'un
programme JavaScript puisse les intercepter et réagir à certains d'entre eux.
Quelques exemples d'événements:
click : l'utilisateur a cliqué sur un élément
change : l'utilisateur a changé la valeur d'un champ de saisie
mouseover : l'utilisateur a survolé un élément à l'aide de la souris
On peut définir le comportement (la réaction) que doit adopter le navigateur lorsqu'un
événement survient, en y associant une fonction JavaScript.

Par exemple, nous pourrions définir une fonction direBonjour() contenant

alert('bonjour !') , puis demander au navigateur d'appeler cette fonction à chaque
fois que l'utilisateur clique sur un bouton.
Il existe plusieurs moyens d'intercepter des événements en y attachant une fonction:
la fonction addEventListener() (que nous verrons peut-être plus tard)

et les propriétés on* associées à chaque nom d'événement, ex: onclick , onchange ,
onmouseover ...
Pour l'instant, nous allons employer la méthode la plus simple: affecter une fonction à la
propriété d'un élément correspondante à l'événement choisi.
‫ﺗﻢ‬
‫اﻟﺘ‬
Imaginons une page HTML contenant un bouton:
‫ﺤﻤﻴ‬
<body>
‫ﻞﻣ‬
<button id="mon-bouton">Mon Beau Bouton</button>
‫ﻦﻣ‬
</body>
‫ﻮﻗﻊ‬
Pour afficher un alert à chaque fois que l'utilisateur cliquera sur ce bouton (événement
‫ﺗﻌﻠ‬
click ), nous devons affecter une fonction à la propriété onclick de l'objet JavaScript
représentant ce bouton:
‫ﻢ اﻟ‬
‫ﱪﻣ‬
document.getElementById('mon-bouton').onclick = function direBonjour() {

‫ﺠﻪ‬
alert('bonjour !');
};
‫ﻟﺒﺪ‬
Exercice: Calculatrice
‫اﻳﻪ‬
Afin de pratiquer la récupération de valeurs d'un formulaire et l'exécution de code JavaScript

‫إﱃ‬
lorsque l'utilisateur clique, nous allons développer une calculatrice simple en HTML +
‫اﻹ‬
JavaScript.
‫ﺣﱰ‬
‫اف‬
La page HTML a développer doit contenir:
deux champs <input> portant les valeurs d' id : " premier-nombre " et " deuxieme-
nombre ";
un troisième champ portant l' id : " resultat ";

et un bouton portant l' id : " mon-bouton ".
Ensuite, y associer un fichier JavaScript qui permettra à l'utilisateur, à chaque fois qu'il
cliquera sur le bouton mon-bouton , d'obtenir le résultat de l'addition des nombres qu'il aura
saisis dans les champs premier-nombre et deuxieme-nombre , dans le champ resultat .

Vous aurez probablement besoin d'utiliser la fonction parseInt() ou parseFloat()

pour convertir des chaînes de caractères en véritables nombres.
Solution: index.html, index.js
Solution bonus: index.html, index.js
Exercice Bonus: Calculatrice multi-opérations

Sur la base de la calculatrice ci-dessus, ajouter un composant de sélection de l'opération qui
sera effectuée entre les deux nombres lorsque l'utilisateur cliquera sur le bouton: addition,
‫ﺗ‬
soustraction, multiplication et division.
‫ﻢا‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
‫اﻟﱪ‬
‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 5: Manipuler les classes et styles

CSS
‫ﺗﻢ‬
Objectifs:
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Utiliser JavaScript pour manipuler le contenu et l'apparence de pages Web
Développer une liste avec filtrage dynamique par catégorie
‫ﻞﻣ‬
Comprendre la portée des variables en JavaScript
‫ﻦﻣ‬
Plan du chapitre:
1. Manipulation de classes CSS (Slides du TP)

‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Application: Afficher/cacher
‫ﻢ‬
2. Accéder à des éléments par classe

‫اﻟﱪ‬
Application: Cacher les spoilers

‫ﻣﺠ‬
3. Manipulation de styles CSS

‫ﻪﻣ‬
Application: Surbrillance au clic

Exercice: Filtrage par catégorie
‫ﻦا‬
4. Accéder à des éléments par nom d'élément

‫ﻟﺒﺪ‬
5. Manipulation d'attributs
‫اﻳﻪ‬
6. Manipulation de contenu HTML d'un élément

‫إﱃ‬
7. Scope et génération de fonctions

‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
1. Manipulation de classes CSS

En HTML, chaque élément peut être associé à des classes. On les spécifie en les
énumérant dans l'attribut class de l'élément.
Exemple:
<p id="premier">texte visible</p>

<p id="second" class="hidden">ce texte devrait être caché</p>

Dans cet exemple, l'élément <p> est associé à une classe hidden . Pour que tous les
éléments associés à cette classe soient cachés, il suffirait alors de définir la règle CSS
suivante:
.hidden {
display: none;
}
En JavaScript, il est possible de modifier dynamiquement la liste de classes associées à un

élément (et donc son affichage, en fonction des règles CSS qui sont associées à ces
classes), grâce à la propriété classList , et à ses fonctions add() et remove() .
‫ﺗ‬
‫ﻢا‬
‫ﻟﺘﺤ‬
Exemple:
‫ﻤﻴﻞ‬
var element = document.getElementById('un-element');
element.classList.add('hidden'); // => la classe hidden va être associée à l'élément
‫ﻣﻦ‬
Exercice: Afficher/cacher ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
Créer une page web valide contenant les deux paragraphes <p> tels que définis plus
haut.
‫اﻟﱪ‬
Y associer un fichier CSS contenant la règle .hidden tel que définie plus haut.
‫ﻣﺠ‬
Ouvrir la page, vérifier que seul le premier paragraphe est visible.

‫ﻪ‬
Quel code JavaScript faut-il exécuter pour retirer la classe hidden du deuxième
‫ﻣﻦ‬
paragraphe ?
‫اﻟﺒ‬
Solution: Codepen
‫ﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
2. Accéder à des éléments par classe

‫ﺣﱰ‬
‫اف‬
Dans la partie précédente, nous avons utilisé la fonction getElementById() pour accéder à
un des éléments de notre page, à partir de son identifiant id .
L'API du DOM donne également accès à une fonction qui permet d'accéder à l'ensemble
des éléments qui portent une même classe class : getElementsByClassName() .
Supposons que nous soyons sur une page HTML contenant plusieurs paragraphes portant
une même classe:

<p>C'est l'histoire d'un garçon troublé</p>

<p class="spoiler">car il s'avère que son ours en peluche a disparu</p>
<p class="spoiler">mais finalement il le retrouve</p>
Pour accéder à tous les éléments portant la classe spoiler , nous allons utiliser le code
JavaScript suivant:
var elements = document.getElementsByClassName('spoiler'); // => tableau d'éléments
À noter que, contrairement à getElementById() , cette fonction ne retourne pas un seul
‫ﺗ‬
‫ﻢا‬
élément, mais un tableau de plusieurs éléments.
‫ﻟﺘﺤ‬
Pour effectuer une même manipulation sur chacun des éléments de ce tableau, il suffit
‫ﻤﻴﻞ‬
d'utiliser une boucle for , tel que nous l'avons vu dans un précédent chapitre.
‫ﻣﻦ‬
Exercice: Cacher les spoilers
‫ﻣﻮﻗ‬
Créer une page web valide contenant les trois paragraphes <p> tels que définis dans
‫ﻊﺗ‬
l'exemple ci-dessus.
‫ﻌﻠﻢ‬
Y associer un fichier CSS contenant la règle .hidden tel que définie plus haut.
‫اﻟﱪ‬
Ouvrir la page, vérifier que les trois paragraphes sont visibles.

Quel code JavaScript faut-il exécuter pour ajouter la classe hidden aux paragraphes
‫ﻣﺠ‬
qui portent la classe spoiler ?

‫ﻪﻣ‬
Ajouter un bouton à la page HTML, et y intégrer le code JS nécessaire pour que les
‫ﻦا‬
spoilers soient cachés seulement une fois que l'utilisateur aura cliqué sur le bouton.
‫ﻟﺒﺪ‬
Attention, aucun code JavaScript ne doit pas apparaître dans votre fichier HTML =>
‫اﻳﻪ‬
faire un fichier .js à part.

‫إﱃ‬
Solution: Codepen
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
3. Manipulation de styles CSS

Nous savons à présent:
accéder à des éléments HTML, à partir de leur id ou class ;

et modifier la liste des classes associées à un élément HTML.
Dans cette partie, nous allons voir qu'il est possible de modifier dynamiquement le style
d'éléments HTML sans avoir à manipuler de classes CSS.

De la même manière que les éléments HTML <input> fournissent une propriété JavaScript
value permettant d'accéder à leur valeur, tous les éléments HTML fournissent une
propriété JavaScript style .
Alors que la propriété value est de type String (chaîne de caractères), la propriété
style est de type Object .
L'objet associé à la propriété style est structuré similairement à une règle CSS: il est
constitué de propriétés clé-valeur.
Exemple de règle CSS:
‫ﺗ‬
‫ﻢا‬
#mon-element {
‫ﻟﺘﺤ‬
border: 1 solid black;
background-color: red;
‫ﻤﻴﻞ‬
}
‫ﻣﻦ‬
... et l'objet JavaScript correspondant, tel qu'associé à la propriété style de l'élément:
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
{
border: '1 solid black',
‫ﻌﻠﻢ‬
backgroundColor: 'red'
}
‫اﻟﱪ‬
‫ﻣﺠ‬
Il y a deux différences importantes à noter:

‫ﻪﻣ‬
la propriété style de l'élément doit respecter la syntaxe d'objet JavaScript (JSON),

‫ﻦا‬
donc les valeurs de propriétés sont des chaînes de caractères (entre apostrophes), et
‫ﻟﺒﺪ‬
les propriétés doivent être séparées par des virgules (au lieu des point-virgules de la
‫اﻳﻪ‬
notation CSS);
‫إﱃ‬
enfin, les noms de propriétés contenant des tirets doivent être écris en respectant la
‫اﻹ‬
notation "camel case" (pour rappel: mots collés, avec majuscules en début de chaque
‫ﺣﱰ‬
mot sauf le premier).

‫اف‬
Exemple de changement de style

Prenons le fichier HTML suivant:
<p id="premier">texte important</p>

<p id="second">autre texte</p>
Pour modifier la couleur de fond du premier paragraphe, il faut exécuter le code JavaScript
suivant:

var element = document.getElementById('premier');

element.style.backgroundColor = 'red';
Exercice: Surbrillance au clic

Créer une page web valide contenant les deux paragraphes <p> tels que définis dans
l'exemple ci-dessus.
Ouvrir la page, vérifier que les deux paragraphes sont visibles.
Intégrer le code JavaScript nécessaire pour que la couleur de fond du deuxième
paragraphe devienne jaune quand l'utilisateur clique dessus.
‫ﺗﻢ‬
Bonus: Intégrer le code JavaScript nécessaire pour que la couleur de fond de n'importe
‫اﻟﺘ‬
quel paragraphe de la page devienne jaune quand l'utilisateur clique dessus. (indice: il
‫ﺤﻤﻴ‬
va falloir utiliser le paramètre fourni à l'appel de votre fonction onclick , nous ne
‫ﻞﻣ‬
l'avons pas encore vu en cours)
‫ﻦﻣ‬
Solution: Codepen (et bonus)
‫ﻮﻗﻊ‬
Exercice à rendre: Filtrage par catégorie
Vous allez développer une page web contenant une liste de produits, et permettant à
‫اﻟﱪ‬
l'utilisateur de filtrer l'affichage de ces produits, en activant les catégories de produits qui
‫ﻣﺠ‬
l'intéressent.
‫ﻪ‬
Exemple minimaliste (animation):

‫ﻣﻦ‬
‫اﻟﺒ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Vous êtes libre sur le choix des produits et des catégories qui seront proposés sur votre
page, sur leur rendu visuel, ainsi que sur la manière d'activer les catégories.
Contraintes à respecter:

incluez au minimum 10 produits et 3 catégories;

chaque produit doit être représenté par un élément HTML;
les catégories de chaque produit doivent associées aux éléments correspondants à
l'aide de l'attribut class ;
le filtrage par catégories doit s'appuyer sur ces classes;
l'utilisateur doit pouvoir passer rapidement d'une catégorie à une autre, puis afficher la
liste complète (non filtrée) des produits;
au moins 2 de vos produits doivent être présents dans plusieurs catégories.
Exemple de liste de produits en HTML:
‫ﺗ‬
‫ﻢا‬
<article class="ludique pratique">iPad</article>
‫ﻟﺘﺤ‬
<article class="ludique sportif">Batte de baseball</article>
<article class="pratique">Ventilateur</article>
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
Vous serez évalué(e) selon les critères suivants:
bon fonctionnement du filtrage,

concision et qualité du code, ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
bonus: esthétique du rendu et simplicité d'usage. (ergonomie)
‫ﻌﻠﻢ‬
Les solutions les plus élégantes seront présentées en cours.

‫اﻟﱪ‬
Solution: Codepen
‫ﻣﺠ‬
‫ﻪ‬
‫ﻣﻦ‬
‫اﻟﺒ‬
4. Accéder à des éléments par nom d'élément

‫ﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
Fonction DOM: getElementsByClassName()

‫اﻹ‬
Jusqu'ici, nous avons vu deux fonctions de sélection d'éléments du DOM:

‫ﺣﱰ‬
‫اف‬
getElementById() retourne un élément, quand on fournit son id ;
et getElementsByClassName() retourne un tableau d'éléments, quand on fournit leur

class .
Dans certains cas, il est pratique d'adresser les éléments par type (nom de balise). C'est ce
que permet la fonction getElementsByTagName() .
Exemple:
var images = document.getElementsByTagName('img');

// => images est un tableau contenant tous les éléments <img> de la page

À noter que, comme getElementsByClassName() , getElementsByTagName() retourne un

tableau d'éléments.
5. Manipulation d'attributs
Fonctions DOM: getAttribute() et setAttribute()
Nous avons vu qu'il était possible de récupérer et/ou modifier la valeur d'un champ <input>
‫ﺗﻢ‬
à l'aide de la propriété value de l'objet JavaScript représentant ce champ.
‫ا‬
‫ﻟﺘﺤ‬
Il se trouve que value est aussi le nom de l'attribut HTML correspondant. En effet, le DOM
‫ﻤﻴﻞ‬
donne accès à des propriétés correspondant aux attributs standards des éléments HTML.
En guise d'exemple, imaginons l'élément HTML suivant:
‫ﻣﻦ‬
<button id="mon-bouton" data-numero="5">
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
L'attribut data-numero n'est pas standard, mais nous avons le droit de nous en servir pour
rattacher des informations à cet élément.
‫اﻟ‬
‫ﱪﻣ‬
Pour récupérer la valeur de cet attribut, utilisons la fonction getAttribute() de la manière

‫ﺠﻪ‬
suivante:
‫ﻣﻦ‬
document.getElementById('mon-bouton').getAttribute('data-numero');
‫ا‬
‫ﻟﺒﺪ‬
// => cet appel de fonction retournera 5

‫اﻳﻪ‬
Pour modifier la valeur de cet attribut, utilisons la fonction setAttribute() de la manière

‫إﱃ‬
suivante:
‫اﻹ‬
‫ﺣﱰ‬
document.getElementById('mon-bouton').setAttribute('data-numero', 7);
‫اف‬
// => l'attribut va prendre la valeur 7, au lieu de 5
6. Manipulation de contenu HTML d'un élément

Propriété innerHTML

Avant que nous décrivions comment modifier la structure du DOM d'une page web, sachez
qu'il est possible de modifier directement depuis JavaScript le code HTML contenu par un
élément HTML: à l'aide de la propriété innerHTML de cet élément.
Exemple:


<p id="mon-parag">texte initial</p>
document.getElementById('mon-parag').innerHTML = 'image: <img src="image.jpg">';
‫ﺗﻢ‬
‫اﻟﺘ‬
Cette affectation modifiera le DOM de la page web de la manière suivante:
‫ﺤﻤﻴ‬

‫ﻞﻣ‬
<p id="mon-parag">image: <img src="image.jpg"></p>
‫ﻦﻣ‬
7. Scope et génération de fonctions
Nous avons vu plus haut qu'il fallait utiliser une boucle for pour effectuer une même
‫ﱪﻣ‬
opération sur un ensemble d'éléments HTML.

‫ﺠﻪ‬
Exemple:
‫ﻣﻦ‬
‫اﻟﺒ‬
// supposons que elements soit un tableau d'éléments HTML

‫ﺪ‬
for (var i = 0; i < elements.length; i++) {

‫اﻳﻪ‬
elements[i].classList.add('bordure-rouge');
‫إﱃ‬
}
‫اﻹ‬
‫ﺣﱰ‬
Ce genre de code ne pose aucun problème.

‫اف‬
Par contre, dès qu'une boucle for définit une fonction qui sera appelée plus tard et dépend
de la variable de boucle, notre programme se comporte de manière inattendue...
C'est notamment le cas si on définit une fonction onclick dans une boucle, tel que dans
l'exemple suivant:


elements[i].onclick = function() {
alert('vous avez cliqué sur l\'élément nº' + i);
}
}
En cliquant sur les éléments sur lesquels s'applique cette boucle, vous constaterez que
l' alert affichera toujours le même élément, alors que la variable de boucle i prend bien
comme valeur l'indice de chaque élément de la page.
‫ﺗﻢ‬
Ce comportement est dû à la manière dont JavaScript référence les variables: leur "portée"
‫اﻟﺘ‬
(appelée "scope", en Anglais).
‫ﺤ‬
‫ﻤﻴﻞ‬
"Scope": portée des variables
‫ﻣﻦ‬
En JavaScript, toute variable définie par var est rattachée à la fonction qui contient
sa définition, ou dans l'espace "global" sinon.
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Illustration:
‫ﻌﻠﻢ‬
var variableGlobale = 4;
‫اﻟﱪ‬
function maFonction() {
‫ﻣﺠ‬
var variableLocale = 5;
console.log('(maFonction) variableGlobale:', variableGlobale); // => 4
‫ﻪ‬
console.log('(maFonction) variableLocale:', variableLocale); // => 5

‫ﻣﻦ‬
}
maFonction();
‫اﻟﺒ‬
console.log('variableGlobale:', variableGlobale); // => 4

‫ﺪاﻳ‬
console.log('variableLocale:', variableLocale); // => ReferenceError: variableLocale

‫ﻪإ‬
is not defined
‫ﱃ‬
‫اﻹ‬
Quand on mentionne une variable à l'intérieur d'une définition de fonction, JavaScript va

‫ﺣﱰ‬
d'abord chercher s'il existe une variable localement définie, puis chercher dans les contextes
‫اف‬
parents dans lesquels ont été définis cette fonction, jusqu'à l'espace global, si besoin.
Dans le cas de notre boucle for (cf exemple plus haut), la fonction affectée à la propriété
onclick utilise la variable i , et cette variable n'est pas locale à cette fonction: elle est
rattachée au contexte parent (celui qui contient la définition de fonction).
Du coup, lorsque cette fonction est appelée (en l’occurrence: au moment où l'utilisateur
clique sur un élément), c'est la valeur de cette variable au moment de l'appel qui va être
utilisée. Or, au moment de l'appel, notre boucle a fini d'itérer, et la variable i vaut donc sa
valeur maximum. (en l’occurrence: elements.length )

Pour éviter ce problème de portée, le plus simple est d'appeler à chaque itération une
fonction en passant notre variable i en paramètre, de manière à ce que sa valeur soit
rattachée à la fonction (comme si c'était une variable locale), et non au contexte parent.
Il existe deux moyens classiques d'appliquer cette pratique:
1. la closure: définir une fonction anonyme et l'appeler dans la foulée;

2. ou appeler une fonction qu'on aura définie à l'extérieur de notre boucle.
Dans les deux cas, cette fonction devra retourner une autre fonction, de manière à ce que
cette dernière ne soit pas appelée immédiatement au moment de la définition de la fonction
parente.
‫ﺗﻢ‬
‫اﻟﺘ‬
Fonction génératrice de fonction
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
Nous avons vu qu'une fonction pouvait retourner une valeur de n'importe quel type, et que
les fonctions étaient un des types avancés du langage JavaScript. Il est donc tout à fait
‫ﻦﻣ‬
possible qu'une fonction retourne une autre fonction !
Exemple:
‫ﻮﻗﻊ‬
function mere() {
‫اﻟﱪ‬
console.log('fonction mere appelée');

return function fille() {
‫ﻣﺠ‬
console.log('fonction fille appelée');

‫ﻪﻣ‬
};
}
‫ﻦا‬
var fct = mere(); // => affiche 'fonction mere appelée' puis retourne la fonction fille
‫ﻟﺒﺪ‬
// => la fonction fille est affectée à la variable fct

‫اﻳﻪ‬
fct(); // => affiche 'fonction fille appelée'

‫إﱃ‬
‫اﻹ‬
Pour éviter le problème de portée expliqué plus haut, il suffit alors de passer la valeur en
‫ﺣﱰ‬
paramètre de la fonction mère, qui sera appelée à chaque itération de la boucle:

‫اف‬

function mere(i) {
// i est *promue* comme variable locale à la fonction mere
// => à chaque appel de la fonction qu'elle retourne, elle aura conservé sa valeur
return function fille() {
alert('vous avez cliqué sur l\'élément nº' + i);
// i fait référence à la valeur qui avait été passée en paramètre
// de l'appel à la fonction mere(), à chaque itération de boucle.
};
}
elements[i].onclick = mere(i);
// => la fonction retournée par mere va être affecté à fille
‫ﺗﻢ‬
}
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
‫ﻦﻣ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻣﻦ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 6: Composants et POO

Objectifs:
‫ﺗﻢ‬
Développer un composant web simple
‫اﻟﺘ‬
Permettre à un même composant d'être instancié plusieurs fois sur une même page
‫ﺤﻤﻴ‬
Initiation à la Programmation Orientée Objet et au mot clé this
‫ﻞﻣ‬
Plan du chapitre:
‫ﻦﻣ‬
1. Création d'un composant Web simple (Slides du TP)
‫ﻮﻗﻊ‬
Exercice: Accordéon / Carousel / Galerie vidéo
2. Composant Web multi-instances et POO (Slides du TP)
‫ﺗﻌﻠ‬
Défi: Plusieurs instances de Carousel sur une même page
‫ﻢ اﻟ‬
Deux manière de rendre générique un composant

‫ﱪﻣ‬
Programmation Orientée Objet: classes, instances et this

‫ﺠﻪ‬
‫ﻣﻦ‬
1. Création d'un composant Web simple

‫ا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
Sur le Web, un composant est un programme qui permet de fournir une interface intégrable,
‫إﱃ‬
conçue pour un usage précis, mais personnalisable par chaque développeur.

‫اﻹ‬
‫ﺣﱰ‬
Par exemple, si je développe et diffuse un composant de galerie d'images, d'autre

développeurs pourront intégrer simplement mon composant sur leur site, et y ajouter
‫اف‬
les images de leur choix.
Les composants permettent donc d'enrichir le contenu, l’esthétique, et/ou les interactions
proposées par un site Web, en ré-utilisant du code qui n'a pas été écrit spécifiquement pour
ce site.
Il existe de très nombreux composants publiés sur Internet et utilisables gratuitement. Pour
la plupart, ils sont basés sur la librairie "jQuery" (dont nous parlerons plus tard dans ce
cours). Mais nombreux ont été conçus en JavaScript/DOM natif (aussi appelé "Vanilla
JavaScript"), et peuvent donc fonctionner sans jQuery.

Note: Dans le cadre de ce cours, l'usage (direct ou pas) de jQuery ne sera pas
accepté.
Voici quelques exemples de composants natifs intégrables librement:
Sweet Alert
Dialog Modal
Animate on scroll
Tranglify
Vous pourrez trouver d'autres composants natifs sur le site Vanilla List.
‫ﺗﻢ‬
À ce stade, nous allons apprendre à réaliser un composant simple, dans le sens où celui-ci
‫اﻟﺘ‬
ne sera pas suffisamment modulaire pour être intégré plusieurs fois sur une même page.
‫ﺤﻤﻴ‬
Nous verrons plus tard comment faire cela.
‫ﻞﻣ‬
Généricité et instructions d'intégration
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
Afin que notre composant puisse être intégré de manière personnalisée par chaque
développeur, quelque soit le site Web en question et son contenu, il est important de définir
‫ﺗﻌﻠ‬
quelques règles et abstractions.
‫ﻢ‬
D'abord, un composant doit être simple à intégrer, et un utilisateur de composant ne devrait

‫اﻟﱪ‬
jamais avoir à consulter ni modifier le code source du composant. Il va falloir donc que le
‫ﻣﺠ‬
composant soit suffisamment générique et configurable depuis le site Web qui l’intégrera.
‫ﻪﻣ‬
Par exemple, un composant de galerie d'images doit s'adapter à une liste d'images fournie
‫ﻦا‬
par un développeur désirant l'intégrer, et l'intégrateur ne devrait en aucun cas avoir à

‫ﻟﺒﺪ‬
modifier la liste d'images dans le code source du composant.

‫اﻳﻪ‬
Pour cela, un composant:

‫إﱃ‬
‫اﻹ‬
ne doit pas contenir de valeurs et références littérales; (ex: nombre d'images et/ou
‫ﺣﱰ‬
URLs des images stockés "en dur" dans le code du composant)

‫اف‬
doit définir et documenter les règles et contraintes éventuelles que devront respecter
les intégrateurs du composant.
Exemples d'instructions d'intégration fournies par la documentation d'un composant:
toutes les images à afficher dans la galerie doivent être des balises <img> portant la
classe carousel-img ;
ou encore: appeler la fonction creerGallerie() (définie par le composant) en passant en
paramètres l'identifiant du DIV devant contenir la galerie, et un tableau d'URLS
d'images.
Prenez le temps d'analyser les instructions d'intégration des composants listés plus haut.

Exercice 1: développer et documenter un composant

simple
Pour mettre en pratique cette partie du chapitre, développer un des trois composants
suivants, et fournir la page de documentation associée.
La page de documentation doit contenir:
une description concise du composant: à quoi il sert, quelles sont ses fonctionnalités et
avantages éventuels;
une démonstration du composant, pour le tester depuis la page;
‫ﺗﻢ‬
les instructions permettant d'intégrer simplement ce composant à son site;
‫اﻟﺘ‬
la description des fonctions et/ou paramètres éventuellement fournis par le composant;
‫ﺤﻤﻴ‬
BONUS: la liste des navigateurs (et leur versions) sur lesquels le composant
fonctionne;
‫ﻞﻣ‬
BONUS: le composant et sa documentation publiés sur GitHub.
‫ﻦﻣ‬
S'inspirer de la documentation des composants fournis plus haut en exemple.
‫ﻮﻗﻊ‬
Conseil pratique: pour afficher du code source sur une page HTML sans que celui-ci ne
‫ﺗﻌﻠ‬
soit interprété par le navigateur, utiliser la balise <xmp> .
‫ﻢ‬
‫اﻟﱪ‬
Composant: Carousel
‫ﻣﺠ‬
‫ﻪﻣ‬
Un "carousel" est un composant de galerie d'images permettant à l'utilisateur de passer

d'une image à l'autre, et éventuellement d'agrandir une image en plein-écran.
‫ﻦا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Certains carousels passent automatiquement d'une image à l'autre, à l'aide d'un minuteur
( setTimeout() ou setInterval() ).
Pour développer un carousel, il faut maîtriser:

les sélecteurs DOM ( getElementById() , getElementsByClassName() et/ou

getElementsByTagName() ),
la manipulation de styles et/ou classes CSS en JavaScript,

la capture d'événements onclick ,
et l'opérateur modulo ( % ).
Solution: Jsfiddle
Composant: Accordéon
Un "accordéon" est un composant proposant plusieurs rubriques à l'utilisateur, et lui
‫ﺗﻢ‬
permettant d'afficher le contenu d'une rubrique à la fois, en cliquant sur son titre.
‫ا‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
‫اﻟﱪ‬
‫ﻪ‬ ‫ﻣﺠ‬
‫ﻣﻦ‬
Pour développer un accordéon, il faut maîtriser:


‫اﻳﻪ‬
‫إﱃ‬
la manipulation de styles et/ou classes CSS en JavaScript,

‫اﻹ‬

‫ﺣﱰ‬
et la gestion du scope.
‫اف‬
Solution: Jsfiddle
Composant: Galerie vidéo

Une galerie vidéo permet à l'utilisateur de visualiser une vidéo, en cliquant parmi une
sélection fournie.

‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Pour développer une galerie vidéo, il faut maîtriser:
‫ﻞﻣ‬
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
l'intégration d' <iframe> (ex: à l'aide de innerHTML ),
et la gestion du scope.
‫ﺗ‬
‫ﻌﻠﻢ‬
Solution: Jsfiddle
‫اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
2. Composant Web multi-instances et POO

‫ﻣﻦ‬
Défi: Plusieurs instances de Carousel sur une même page

‫اﻳﻪ‬
‫إﱃ‬
Dans la partie précédente, vous avez appris à développer un composant Web simple.
‫اﻹ‬
Mais votre composant fonctionnera-t-il correctement si vous l'intégrez plusieurs fois sur une
‫ﺣﱰ‬
même page Web ? (Essayez, et observez ce qui se passe !)

‫اف‬
Supposons par exemple que vous ayez développé un composant de Carousel permettant
de créer une galerie d'images à partir des éléments <img> de la page portant la classe
carousel-img (comme celui-ci). Si vous souhaitez intégrer deux galeries indépendantes sur
votre page, avec des images spécifiques à chacune d'elles, le composant ne sera pas
capable de faire la distinction entre les images de ces deux galeries, car il se contente de
créer une galerie à partir de toutes les images portant la classe carousel-img !
Alors, comment faire pour qu'un composant puisse être intégré plusieurs fois sur une même
page ?

Il existe plusieurs solutions, notamment:
implémenter le composant de manière à ce qu'il s'applique sur des groupes d'éléments,

plutôt que sur les éléments eux-mêmes; (ex: chercher les éléments portant une classe
image-group , puis intégrer les images définis comme sous-éléments de ce groupe)
ou permettre à l'intégrateur de préciser spécifiquement sur quelles images chaque

galerie doit être construite, et à quel moment elles doivent être construites. (ex: en
appelant une fonction fournie par le composant, en passant en paramètres l' id de
l'élément contenant les images de la galerie à intégrer)
Nous allons voir ces deux solutions plus en détails.
‫ﺗ‬
‫ﻢا‬
Solution 1: Composant qui s'applique sur des groupes
‫ﻟﺘﺤ‬
d'éléments
‫ﻤﻴﻞ‬
Supposons que notre composant à intégrer fournisse les instructions d'intégration suivantes:
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
Au chargement du composant, chaque élément portant la classe image-group sera
transformé en Carousel, à partir des balises <img> définis dans cet élément.
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
On pourrait alors intégrer le composant de la manière suivante:

‫اﻟﱪ‬
Galerie 1:
‫ﻣﺠ‬
<div class="image-group">
<img src="img1.jpg">
‫ﻪﻣ‬
‫ﻦا‬
</div>
‫ﻟﺒﺪ‬
Galerie 2:
‫اﻳﻪ‬
<div class="image-group">
‫إﱃ‬
‫اﻹ‬
</div>
‫ﺣﱰ‬
<script src="carousel.js"></script> 

‫اف‬
Pour fonctionner ainsi, le code source du Carousel devra récupérer les images de chaque
groupe, de la manière suivante:

var groupes = document.getElementsByClassName('image-group');

for (var i = 0; i < groupes.length; i++) {
var groupe = groupes[i];
var imagesDuGroupe = groupes[i].getElementsByTagName('img');
creerGalerie(groupe, imagesDuGroupe); // création de la galerie dans l'élément groupe
... au lieu de se contenter d'un unique appel à document.getElementsByTagName('img') ,

applicable à l'ensemble des images de la page.
‫ﺗﻢ‬
Remarque: Ici, nous avons appelé la fonction getElementsByTagName() sur un élément,
‫اﻟﺘ‬
et non sur document . Ceci a pour effet de ne retourner que les éléments qui sont
‫ﺤﻤﻴ‬
contenus à l'intérieur de cet élément parent.
‫ﻞﻣ‬
Avantages de cette solution:
‫ﻦﻣ‬
simple à implémenter, à documenter et à intégrer.
Inconvénients de cette solution:

‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
l'intégrateur ne peux pas générer une galerie à la demande, car les galeries sont toutes
‫ﻢ‬
générées au moment où le composant est chargé.

‫اﻟﱪ‬
‫ﻣﺠ‬
Exemple de documentation d'un composant pour groupes

‫ﻪﻣ‬
d'éléments
‫ﻦا‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Solution 2: Composant contrôlable par l'intégrateur

La solution précédente est simple mais empêche à l'intégrateur de contrôler la
transformation de chaque galerie.
Par exemple, comment regénérer une galerie après l'ajout d'une image ?
Pour permettre ce genre de manipulation, il faudrait que chaque galerie soit accessible
individuellement depuis le code JavaScript de l'intégrateur.
Idéalement, l'intégrateur aimerait pouvoir effectuer ce genre d'appel:
‫ﺗﻢ‬
maGalerie2.ajouterImage('img7.jpg');
‫اﻟﺘ‬
maGalerie2.regenerer();
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
Pour cela, il faudrait que chaque galerie puisse être référencée par une variable, et donc
que le composant fournisse un moyen de retourner une variable pour chaque galerie créée.
‫ﻦﻣ‬
La solution consiste à ce que le code source du composant définisse une fonction pour
‫ﻮﻗﻊ‬
créer une galerie et retourner une référence vers un objet permettant à l'intégrateur
‫ﺗﻌﻠ‬
d'interagir avec cette galerie.
‫ﻢ‬
Exemple:
‫اﻟﱪ‬
‫ﻣﺠ‬
// extrait de code source du composant

‫ﻪ‬
function creerGalerie(conteneur, urlImages) {

‫ﻣﻦ‬
var html = '';

// génération des éléments <img> dans le conteneur
‫اﻟﺒ‬
for (var i = 0; i < urlImages.length; i++) {

‫ﺪ‬
html = html + '<img src="' + urlImages[i] + '" class="hidden">;

‫اﻳﻪ‬
}
conteneur.innerHTML == html;
‫إﱃ‬
// TODO: afficher la première image seulement

‫اﻹ‬
// TODO: créer un objet reference permettant à l'intégrateur de manipuler la galerie

‫ﺣﱰ‬
return reference;
}
‫اف‬
La documentation du composant contiendrait alors les instructions d'intégration suivantes:
Pour chaque galerie à créer, appeler la fonction creerGalerie(conteneur, urlImages) , avec

conteneur étant une référence de l'élément dans lequel créer la galerie (ex: un <div> ), et
urlImages un tableau contenant les URLs des images à intégrer dans la galerie. Cette
fonction retourne un objet vous permettant d'interagir avec la galerie.
Exemple de documentation d'un composant proposant une

API

Comment définir cet objet reference qui permettra à l'intégrateur d'interagir distinctement
‫ﺗ‬
‫ﻢا‬
avec chaque galerie ? En définissant puis instanciant une classe, tel que nous allons le voir
‫ﻟﺘﺤ‬
ensuite.
‫ﻤﻴﻞ‬
Programmation Orientée Objet: classes, instances et
‫ﻣﻦ‬
this
‫ﻣﻮﻗ‬
Une classe est un modèle d'objet. Elle peut être instanciée, c'est à dire qu'on crée un objet
‫ﻊﺗ‬
(appelé instance) selon ce modèle.
‫ﻌﻠﻢ‬
La modèle d'une classe consiste à assurer que chaque objet instance de cette classe aura
‫اﻟﱪ‬
les mêmes:
‫ﻣﺠ‬
propriétés; (cf chapitre sur les types avancés)

‫ﻪﻣ‬
et méthodes: des fonctions qui s'appliquent à une instance donnée.

‫ﻦا‬
À noter que:
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
chaque instance d'une classe aura les mêmes propriétés, mais la valeur de celles-ci
pourra être différente pour chaque instance;
‫إﱃ‬
chaque instance d'une classe aura les mêmes méthodes, mais l'exécution de la
‫اﻹ‬
fonction correspondante ne s'appliquera qu'à l'instance sur laquelle elle aura été
‫ﺣﱰ‬
appelée.
‫اف‬
Exemple de classe que vous avez déjà utilisée sans le savoir: la classe Element .
En effet, à chaque fois que vous appelez la fonction document.getElementById() , elle vous
retourne un objet qui est en fait une instance de la classe Element . C'est grâce à la classe
Element que vous pouvez utiliser les propriétés value , onclick et la méthode
getAttribute() sur tout objet retourné par document.getElementById() .
Notez que getElementById() est aussi une méthode. Quand on effectue un appel à
document.getElementById() , on exécute en réalité la méthode getElementById() sur l'objet
document qui est dérivé de la classe Element .

Comment définir et instancier une classe en JavaScript/ES6

En guise d'exemple, nous allons définir et instancier une classe Galerie utile pour notre
composant Carousel. Cette classe définira méthodes qui seront rattachées à chaque objet
retourné par notre fonction creerGalerie() , tel qu'introduite plus haut.
Afin de permettre l'appel des méthodes ajouterImage() et regenerer() sur une instance
de Galerie :
// supposons que conteneur référence un <div> de la page

var maGalerie2 = creerGalerie(conteneur, ['img4.jpg', 'img5.jpg', 'img6.jpg']);
‫ﺗﻢ‬
maGalerie2.ajouterImage('img7.jpg');
maGalerie2.regenerer();
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
... notre composant Carousel doit définir la classe Galerie de la manière suivante:
‫ﻞﻣ‬
‫ﻦﻣ‬
class Galerie {
// définition du constructeur de la classe Galerie

constructor(conteneur, urlImages) {
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
this.conteneur = conteneur;
this.urlImages = urlImages;
‫ﻢ‬
}
‫اﻟﱪ‬
‫ﻣﺠ‬
// cette méthode permet d'ajouter une image à cette galerie

ajouterImage(url) {
‫ﻪﻣ‬
this.urlImages.push(url);
‫ﻦا‬
}
‫ﻟﺒﺪ‬
// cette méthode permet de générer et d'afficher cette galerie dans la page

‫اﻳﻪ‬
regenerer() {
var html = '';
‫إﱃ‬

for (var i = 0; i < this.urlImages.length; i++) {
‫اﻹ‬
html = html + '<img src="' + this.urlImages[i] + '" class="hidden">;';

‫ﺣﱰ‬
}
‫اف‬
this.conteneur.innerHTML == html;
}
Comme vous l'aurez remarqué:
le code que nous avions écrit dans la fonction creerGalerie() se trouve maintenant
dans la définition de la méthode regenerer() de notre classe Galerie ;
les paramètres conteneur et urlImages de la fonction creerGalerie() ont été
transférés au constructeur de la classe Galerie , et stockées sous forme de propriétés

d'un certain objet this . (nous allons expliquer ça plus bas)
Maintenant que la classe Galerie de notre composant est définie, il va falloir que notre
fonction creerGalerie() retourne une instance de cette classe.
Il suffit de la redéfinir de la manière suivante:
// extrait de code source du composant, après avoir défini la classe Galerie

function creerGalerie(conteneur, urlImages) {
var reference = new Galerie(conteneur, urlImages);
reference.regenerer(); // générer et afficher la galerie fraîchement créée
return reference; // retourner l'instance de Galerie
‫ﺗﻢ‬
// ...pour que l'intégrateur puisse avoir accès aux méthodes ajouterImage() et regen
erer()
‫اﻟﺘ‬
}
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
Le mot clé new permet d'instancier notre classe, et donc d'exécuter son constructeur (défini
plus haut) en leur transmettant les paramètres conteneur et urlImages . La variable
‫ﻦﻣ‬
reference contient alors une instance de cette classe, et permet donc d'appeler les
‫ﻮﻗﻊ‬
méthodes regenerer() et ajouterImage() sur cette instance.
‫ﺗﻌﻠ‬
Usage de this
‫ﻢ‬
‫اﻟﱪ‬
Quand on mentionne this dans la définition d'une méthode, ce mot clé représente
‫ﻣﺠ‬
l'instance depuis laquelle la méthode a été appelée.

‫ﻪﻣ‬
Par exemple:
‫ﻦا‬
‫ﻟﺒﺪ‬
class Article {
‫اﻳﻪ‬
constructor(titre) {
this.titre = titre;
‫إﱃ‬
}
‫اﻹ‬
getTitre() {
‫ﺣﱰ‬
return this.titre; // this === article1 ou article2, dans notre exemple

}
‫اف‬
var article1 = new Article('Trump élu président');

var article2 = new Article('Macron se présente');
article1.getTitre(); // => retourne 'Trump élu président'

article2.getTitre(); // => retourne 'Macron se présente'
À noter qu'en JavaScript, this est en fait utilisable depuis toute fonction, qu'elle soit ou pas
définie dans une classe. Il faut retenir que l'usage de classes permet à l'interpréteur
JavaScript d'affecter automatiquement à this l'instance sur laquelle s'exécute chaque

méthode.
Attention: pour cette dernière raison, il est parfois nécessaire de garder une référence de
this , en particulier quand on souhaite y accéder depuis une sous-fonction.
Exemple:
class Galerie {
// [...]
// cette méthode permet de générer et d'afficher cette galerie dans la page

regenerer() {
‫ﺗﻢ‬
// [...]
‫اﻟﺘ‬
var galerie = this;
‫ﺤ‬
for (var i = 0; i < this.urlImages.length; i++) {
‫ﻤﻴﻞ‬
img.onclick = function() {
galerie.afficherImageSuivante(); // car dans cette fonction, this !== galerie
‫ﻣﻦ‬
};
}
// [...]
} ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
}
‫اﻟﱪ‬
Dans l'exemple ci-dessus, nous souhaitons appeler une méthode de notre instance de
‫ﻣﺠ‬
galerie, quand l'utilisateur cliquera sur n'importe laquelle des images affichée par la galerie.
‫ﻪ‬
Pour cela, nous devons définir et affecter une fonction anonyme à l'attribut onclick de
‫ﻣﻦ‬
chaque image, définissant le comportement que devra adopter le navigateur à chaque clic.
‫اﻟﺒ‬
Or, à l'intérieur de cette définition de fonction, this ne correspond pas à l'instance de la

‫ﺪاﻳ‬
classe Galerie sur laquelle a été appelée la méthode regenerer , mais à l'objet sur lequel a
‫ﻪإ‬
été appelé la fonction anonyme. Pour conserver une référence vers notre instance, nous
‫ﱃ‬
avons affecté la valeur de this à une variable galerie , en dehors de la définition de notre
‫اﻹ‬
fonction anonyme.
‫ﺣﱰ‬
‫اف‬
Exercice 2: Créer un composant Web instanciable plusieurs

fois
Dans l'exercice 1, nous avons développé un composant qui ne pouvait être intégré qu'en un
seul exemplaire sur chaque page Web.
Dans cet exercice, modifier le code source et la documentation de ce composant, puis

publiez-le sur Internet, de manière à ce que tout intégrateur puisse:
l'intégrer plus d'une fois sur une même page;

et ajouter des données à une de ces intégrations, en appelant une méthode fournie

par le composant. (ex: ajouter une image, dans le cas d'un composant Carousel)
Concevez votre composant de manière à ce que:
l'intégrateur n'ait pas besoin de modifier le code source de votre composant;

l'intégrateur n'ait pas besoin de taper plus de 3 lignes de code au total (HTML et
JavaScript, balise <script> comprise) pour intégrer chaque instance de votre
composant sur sa page.
Pour que le code JavaScript de votre composant soit intégrable sans que l'utilisateur ait
besoin de dupliquer votre code source dans celui de son site, vous pouvez publier le fichier
.js correspondant sur votre espace étudiant, ou sur Codepen. (le code JS sera alors
‫ﺗﻢ‬
accessible directement en ajoutant l'extension .js à votre URL Codepen, ex:
‫اﻟﺘ‬
http://codepen.io/adrienjoly/pen/ggNNba.js )
‫ﺤﻤﻴ‬
Vous serez évalués sur:
‫ﻞﻣ‬
‫ﻦﻣ‬
la concision et clarté des instructions d'intégration fournies sur la page de
documentation de votre composant;
‫ﻮﻗﻊ‬
la simplicité effective d'intégration du composant;
la qualité d'une ou plusieurs démos directement utilisables sur la page de
‫ﺗﻌﻠ‬
documentation de votre composant;
‫ﻢ اﻟ‬
le bon fonctionnement de votre composant, en l'intégrant plusieurs fois sur un autre

‫ﱪﻣ‬
site.
‫ﺠﻪ‬
Solutions: js-composants (sur Github)

Exercice 3: Création de classe

‫ﻟﺒﺪ‬
‫اﻳﻪ‬
--> http://marijnhaverbeke.nl/talks/es6_falsyvalues2015/exercises/#Point
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

Chapitre 7: Manipulation DOM avancée

(Slides du TP)
‫ﺗ‬
‫ﻢا‬
Objectifs:
‫ﻟﺘﺤ‬
Inspecter la source d'un évènement du DOM
‫ﻤﻴﻞ‬
Manipuler la structure du DOM en JavaScript
‫ﻣﻦ‬
Plan du chapitre:
1. Utilisation de la classe Event

‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Exercice: détecter "Entrée" dans un champ texte
2. Navigation dans le DOM
‫ﻌﻠﻢ‬
Exercice: changer la couleur du parent au clic

‫اﻟﱪ‬
3. Modification de la structure du DOM

‫ﻣﺠ‬
Exercice: construire une page web en JavaScript

‫ﻪ‬
Exercice: supprimer le champ de recherche de Google

‫ﻟﺒﺪ‬
Dans les chapitres précédents, nous avons:

‫اﻳﻪ‬
‫إﱃ‬
utilisé l'API fournie par le navigateur pour accéder aux éléments du DOM d'une page
web/HTML,
‫اﻹ‬
‫ﺣﱰ‬
modifié les classes et le rendu d'éléments,

défini une réaction aux évènements déclanchés par l'utilisateur,
‫اف‬
et introduit les concepts de Programmation Orientée Objet, et de classes.
Dans ce chapitre, nous allons voir:
comment en savoir plus sur un évènement qui a été déclanché par l'utilisateur,
comment naviguer dans le DOM d'une page web/HTML, de noeud en noeud,
et comment en modifier la structure.

1. Utilisation de la classe Event

Reprenons un exemple de page web avec gestion d'évènement click sur un élément HTML:
Pour afficher un alert à chaque fois que l'utilisateur cliquera sur ce bouton, nous avons vu
qu'il fallait affecter une fonction à la propriété onclick de l'objet JavaScript représentant ce
bouton:
‫ﺗ‬
‫ﻢا‬
document.getElementById('mon-bouton').onclick = function() {
‫ﻟﺘﺤ‬
alert('bonjour !');
};
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
En effet, les propriétés d'évènements ( onclick , onchange , ou autre) d'un élément
permettent d'indiquer au navigateur quelle fonction appeler lorsque l'évènement
correspondant est déclenché par l'utilisateur.
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Ce que nous n'avons pas encore vu, en revanche, c'est que le navigateur passe
‫ﻌﻠﻢ‬
systématiquement un paramètre lorsqu'il appelle cette fonction: une instance de la classe

‫اﻟﱪ‬
Event .
‫ﻣﺠ‬
Affichons la valeur de ce paramètre event (objet-instance de la classe Event ) dans la

‫ﻪﻣ‬
console, afin d'en découvrir les propriétés:

‫ﻦا‬
document.getElementById('mon-bouton').onclick = function(event) {
‫ﻟﺒﺪ‬
console.log(event);
‫اﻳﻪ‬
};
‫إﱃ‬
La propriété la plus couramment utilisée est event.currentTarget . En effet, elle a pour

‫اﻹ‬
‫ﺣﱰ‬
valeur l'élément HTML sur lequel l'évènement a été intercepté par notre fonction.
‫اف‬
Cette propriété est particulièrement utile dans le cas où nous voulons affecter une même
fonction de gestion d'évènement sur plusieurs éléments, mais que cette fonction a besoin de
savoir sur lequel de ces éléments l'évènement a été déclenché.
Par exemple:
<button>Mon 1er Bouton</button>

<button>Mon 2ème Bouton</button>

var boutons = document.getElementsByTagName('button');

for (var i = 0; i < boutons.length; i++) {
boutons[i].onclick = function(event) {
alert('bouton clické: ' + event.currentTarget.innerHTML);
// => le contenu du bouton clické va être affiché dans l'alert
};
}
À noter que, selon le type d'évènement auquel est associée une fonction, le paramètre
event peut être une instance de sous-classes contenant des propriétés et méthodes
supplémentaires.
‫ﺗ‬
‫ﻢا‬
Par exemple:
‫ﻟﺘﺤ‬
le paramètre event d'une fonction liée à l'évènement mousemouse (appelée à chaque
‫ﻤﻴﻞ‬
mouvement de la souris) est une instance de la classe `MouseEvent' qui possède les
‫ﻣﻦ‬
propriétés clientX et clientY , afin de connaître la position de la souris sur l'écran.
le paramètre event d'une fonction liée à l'évènement keydown (appelée quand
‫ﻣﻮﻗ‬
l'utilisateur tape un caractère dans un champ) est une instance de la classe
‫ﻊﺗ‬
KeyboardEvent qui possède les propriétés key et keyCode , permettant de connaître
‫ﻌﻠﻢ‬
quelle touche a été tapée par l'utilisateur.

‫اﻟﱪ‬
Par ailleurs, la classe Event et ses sous-classes définissent une méthode

‫ﻣﺠ‬
preventDefault() qui permet d'annuler le traitement habituel d'un évènement qui a été
intercepté par une fonction. Cette méthode est par exemple utile pour empêcher l'ouverture
‫ﻪﻣ‬
d'un hyperlien <a> , la soumission d'un formulaire, ou l'ajout de caractères dans un champ.
‫ﻦا‬
‫ﻟﺒﺪ‬
Exercice: détecter "Entrée" dans un champ texte

‫اﻳﻪ‬
‫إﱃ‬
Créer une page HTML simple contenant un champ <input> dont la valeur est effacée
quand l'utilisateur presse la touche "Entrée".
‫اﻹ‬
‫ﺣﱰ‬
Solution: jsfiddle
‫اف‬
2. Navigation dans le DOM

Toute page HTML est structurée sous forme hiérarchique (arbre): chaque élément HTML a
un élément parent, et peut avoir plusieurs éléments enfants.
Reprenons par exemple notre page web ne contenant qu'un bouton:

<body>
</body>
Dans cette page, l'élément <button> a l'élément <body> comme parent, et un noeud texte
(le contenu textuel de l'élément) comme enfant. On peut aussi dire que <button> est un
noeud enfant de <body> .
Ici, le seul enfant de notre élément <button> est un noeud textuel, mais il serait possible
que ce même élément ait d'autres éléments comme enfants.
‫ﺗﻢ‬
Supposons que notre bouton soit référencé par la variable element :
‫ا‬
‫ﻟﺘﺤ‬
var element = document.getElementById('mon-bouton');
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
Comme tout élément HTML représenté en JavaScript (et donc instance de la classe
Element ), notre variable element possède trois propriétés utiles pour nous aider à
naviguer dans ses noeuds parent et enfants: ‫ﻣﻮﻗ‬

‫ﻊﺗ‬
parentNode est le noeud/élément HTML parent de l'élément,
‫ﻌﻠﻢ‬
children est un tableau de d'éléments, enfants directs de l'élément, et

‫اﻟﱪ‬
childNodes est un tableau de noeuds HTML (éléments et/ou noeuds textuels), enfants
‫ﻣﺠ‬
directs de l'élément.
‫ﻪﻣ‬
Dans notre exemple:

‫ﻦا‬
element.parentNode est l'équivalent de document.body ; (l'élément <body> de notre

‫ﻟﺒﺪ‬
page)
‫اﻳﻪ‬
element.children est un tableau vide, car il n'y a pas d'éléments à l'intérieur du bouton,
‫إﱃ‬
et
‫اﻹ‬
element.childNotes est un tableau qui ne contient que le noeud textuel ayant pour
‫ﺣﱰ‬
valeur " Mon Beau Bouton ".

‫اف‬
Exercice: Changer la couleur du parent au clic

Soit la page HTML suivante:

<div style="padding: 10px;">

<button>Mon 1er Bouton</button>
</div>
</div>
</div>
Écrire le code JavaScript permettant de colorier le fond du <div> parent en jaune lorsqu'un
bouton est cliqué par l'utilisateur.
‫ﺗﻢ‬
‫اﻟﺘ‬
Pour cela, utiliser une boucle for , une seule fonction onclick , son paramètre event , les
‫ﺤﻤﻴ‬
propriétés parentNode et style .
‫ﻞﻣ‬
Solution: jsfiddle
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
3. Modification de la structure du DOM
‫اﻟﱪ‬
À ce stade, nous savons accéder à des éléments du DOM, modifier leur contenu et rendu,
et accéder à leurs parent et enfants.
‫ﻣﺠ‬
‫ﻪ‬
Dans cette partie, nous allons voir comment créer, rattacher et supprimer des noeuds du
‫ﻣﻦ‬
DOM.
Créer et rattacher un noeud dans le DOM

‫اﻳﻪ‬
‫إﱃ‬
Pour ajouter un élément HTML dans le DOM d'une page web, le navigateur fournit les
‫اﻹ‬
méthodes suivantes:
‫ﺣﱰ‬
document.createElement(nom) pour créer un élément,

‫اف‬
document.createTextNode(texte) pour créer un noeud textuel, et
conteneur.appendChild(element) pour ajouter un élément comme enfant d'un autre
élément.
Donc, pour ajouter un bouton au <body> d'une page HTML, il faudra exécuter les
instructions JavaScript suivantes;

// 1. créer l'élément
var bouton = document.createElement('button');
// 2. créer le contenu du bouton (noeud textuel)
var texteDuBouton = document.createTextNode('Mon beau bouton');
// 3. ajouter le contenu au bouton
bouton.appendChild(texteDuBouton);
// 4. ajouter le bouton au body de la page
document.body.appendChild(bouton);
Supprimer un noeud du DOM
‫ﺗ‬
‫ﻢا‬
Le retrait d'un noeud du DOM est l'opération inverse de celle d'ajout ( appendChild() ): elle
‫ﻟﺘﺤ‬
consiste à appeler la méthode conteneur.removeChild(noeud) , où conteneur est le noeud
parent duquel on souhaîte retirer noeud .
‫ﻤﻴﻞ‬
Ainsi, pour supprimer le bouton que nous avons ajouté à la page de l'exemple précédent, il
‫ﻣﻦ‬
faudra exécuter:
document.body.removeChild(bouton); ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
... ou, de manière plus générale:

‫اﻟﱪ‬
bouton.parentNode.removeChild(bouton);
‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
Exercice: construire une page web en JavaScript

‫ﻟﺒﺪ‬
En partant d'une page HTML vierge, développer le code JavaScript permettant d'ajouter à la
‫اﻳﻪ‬
page:
‫إﱃ‬
un champ <input> ,
‫اﻹ‬
et un bouton qui vide la valeur du champ quand on clique dessus.

‫ﺣﱰ‬
‫اف‬
Pour cela, utiliser: createElement() , createTextNode() , appendChild() , document.body ,

onclick , et value .
Solution: jsfiddle
Exercice: supprimer le champ de recherche de Google

En utilisant l'inspecteur et la console de Chrome Dev Tools depuis la page google.com,
trouver l'instruction JavaScript permettant de supprimer le champ de recherche.
Solution: jsfiddle

‫‪Chapitre 7 - Manipulation DOM avancée‬‬
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
‫ﻢ‬‫ﺗﻌﻠ‬
‫اﻟﱪ‬
‫ﻣ‬
‫ﺠﻪ‬
‫ﻣﻦ‬
‫اﻟﺒ‬
‫ﺪاﻳ‬
‫ﱃ‬ ‫ﻪإ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
‫‪https://altkowa.blogspot.com‬‬ ‫‪89‬ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬

Chapitre 8 - Échanges de données avec AJAX
Chapitre 8: Échanges de données avec

AJAX
‫ﺗﻢ‬
Objectifs:
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Interroger une API du Web en JavaScript
Envoyer des informations à une API du Web
‫ﻞﻣ‬
Plan du chapitre:
‫ﻦﻣ‬
1. Effectuer une requête GET avec XMLHttpRequest (Slides du TP)
‫ﻮﻗﻊ‬
Exercice: afficher la météo de la ville de l'utilisateur
‫ﺗ‬
2. Effectuer une requête POST avec XMLHttpRequest (Slides du TP)
‫ﻌﻠﻢ‬
Exercice: tweeter un message

‫اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
Effectuer une requête GET avec

‫ﻣﻦ‬
XMLHttpRequest
‫اﻳﻪ‬
Introduction
‫إﱃ‬
Créé en 1995, le procédé AJAX (Asynchronous Javascript and XML) a été intégré aux
‫اﻹ‬
‫ﺣﱰ‬
navigateurs pour permettre aux sites Web d'être plus dynamiques.

‫اف‬
Cette technique permet à une application JavaScript de:
échanger des données avec des serveurs Web;

charger des données sur une page sans la recharger;
accéder à des API (Application Programming Interface) du Web.
Une requête AJAX consiste à effectuer une requête HTTP depuis du code JavaScript.
Pour rappel, HTTP est le protocole employé par les navigateurs pour communiquer avec les
serveurs Web.

Par exemple, quand nous allons sur Google, nous tapons http://google.com dans la barre
du navigateur, ce qui a pour effet de demander la page HTML de recherche au serveur
HTTP de google.com . Ceci est une requête de type GET , car elle permet seulement de
récupérer des données depuis ce serveur, contrairement aux requêtes POST permettant
d'envoyer des données à un serveur.
A noter que le chargement d'une page HTML déclanche généralement d'autres requêtes
HTTP, afin de récupérer toutes les ressources associées à cette page Web: scripts, feuilles
de style CSS, images, etc...
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
‫ﻢ اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻟﺒﺪ‬
Formats de données
‫اﻳﻪ‬
Une requête HTTP permet de récupérer des données de formats variés.

‫إﱃ‬
‫اﻹ‬
Par exemple:
‫ﺣﱰ‬
le format HTML, pour les pages Web,

‫اف‬
le format CSS, pour les feuilles de styles,

le format JS, pour les scripts en JavaScript,
le format JPG, pour les images, etc...
Nous allons nous intéresser en particulier aux formats représentant des données
structurées.
Initialement, AJAX a été créé pour récupérer des données au format XML. Un format proche
du HTML, et très en vogue à l'époque.
Exemple de document XML:

<inbox>
<email from="amazon">votre colis a été envoyé</email>
</inbox>
Comme en HTML, un document XML est composé d'éléments, d'attributs, et de noeuds

textuels.
Désormais, la majorité des sites Web emploient le format JSON pour échanger des données
structurées.
Exemple de document JSON:
‫ﺗﻢ‬
‫اﻟﺘ‬
{
‫ﺤﻤﻴ‬
"email": {
"from": "amazon",
‫ﻞﻣ‬
"subject": "votre colis a été envoyé"
}
‫ﻦﻣ‬
}
‫ﻮﻗﻊ‬
Pour rappel, JSON (JavaScript Object Notation) est en fait la syntaxe utilisé pour définir des
‫ﺗ‬
‫ﻌﻠﻢ‬
objets en JavaScript.
‫اﻟ‬
En supposant que cet objet JSON soit stocké dans une variable objet , le langage
‫ﱪﻣ‬
JavaScript nous permet d'accéder facilement aux données qui y sont stockées.
‫ﺠﻪ‬
Par exemple, pour afficher la valeur de la propriété subject de la propriété email , il suffit
‫ﻣﻦ‬
de saisir:
console.log(objet.email.subject);
‫اﻳﻪ‬
‫إﱃ‬
Émettre une requête HTTP GET avec AJAX

‫اﻹ‬
‫ﺣﱰ‬
Pour récupérer des données depuis une URL HTTP, le navigateur met à notre disposition la
‫اف‬
classe XMLHttpRequest . Malgré son nom, il est possible de l'utiliser pour récupérer des
données exprimées dans d'autres formats que XML.
Voici un exemple de requête HTTP GET simple, en JavaScript:

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
alert(xhr.responseText);
}
};
xhr.send();
Cette requête permet de récupérer le texte d'un document disponible à l'URL

https://jsonplaceholder.typicode.com/users/1 , puis de l'afficher dans un alert() une fois
‫ﺗ‬
qu'il a été téléchargé intégralement.
‫ﻢا‬
‫ﻟﺘﺤ‬
Effectuer une requête avec XMLHttpRequest consiste en 4 étapes:
‫ﻤﻴﻞ‬
1. instancier la classe, avec new ;
2. spécifier la méthode ( GET ) et l'URL du document à récupérer, en appelant la méthode
‫ﻣﻦ‬
open() ;
‫ﻣ‬
‫ﻮﻗﻊ‬
3. définir ce qu'on souhaite faire de la réponse, une fois reçue intégralement, en affectant
une fonction à la propriété onreadystatechange de notre instance;
‫ﺗ‬
‫ﻌﻠﻢ‬
4. puis envoyer la requête, en appelant la méthode send() de notre instance.
La propriété readyState permet de savoir où en est le téléchargement du document.

‫اﻟﱪ‬
Lorsque celui-ci est complet, readyState vaut 4 , et la fonction affectée à

‫ﻣﺠ‬
onreadystatechange est appelée à nouveau par le navigateur. À ce moment là, nous

‫ﻪ‬
pouvons accéder au contenu du document téléchargé, stocké dans la propriété

‫ﻣﻦ‬
responseText .
À noter que, même si le document en question est au format JSON (par exemple),
‫اﻳﻪ‬
responseText contiendra la version sérialisée du document, c'est à dire qu'il sera de type
‫إﱃ‬
string , et non object . À ce stade, il n'est donc pas possible d'accéder à une propriété
‫اﻹ‬
spécifique de cet objet.

‫ﺣﱰ‬
Nous allons voir comment convertir cette chaîne de caractères en veritable objet dans la
‫اف‬
prochaine partie.
Récupérer un document JSON avec AJAX

Dans le cas où notre requête retourne un document JSON, il est possible de convertir sa
représentation textuelle (fournie dans la propriété responseText ) en véritable objet
JavaScript.
Pour cela, le navigateur fournit la fonction JSON.parse() .

Cette fonction prend en paramètre une chaîne de caractères (type: string ) contenant la
version sérialisée d'un objet, et retourne l'objet correspondant (type: object ).
Par exemple, imaginons l'objet sérialisé suivant:
var chaine = '{"message":"bonjour!"}';

console.log(chaine.message); // => undefined
Comme cet objet est sérialisé sous forme de chaine de caractères, il n'est pas possible
d'accéder directement à ses propriétés.
‫ﺗﻢ‬
Pour permettre cela, nous le passer en paramètre de la fonction JSON.parse() :
‫ا‬
‫ﻟﺘﺤ‬
var chaine = '{"message":"bonjour!"}';
‫ﻤﻴﻞ‬
var objet = JSON.parse(chaine);
console.log(objet.message); // => "bonjour!"
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
Donc, pour récupérer un objet JavaScript depuis la réponse JSON de notre requête AJAX, il
faut utiliser le code suivant:
‫ﻊﺗ‬
‫ﻌﻠﻢ‬

xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
‫اﻟﱪ‬
‫ﻣﺠ‬
var reponse = JSON.parse(xhr.responseText);
‫ﻪﻣ‬
alert(reponse.name);
‫ﻦا‬
}
};
‫ﻟﺒﺪ‬
xhr.send();
‫اﻳﻪ‬
‫إﱃ‬
Bien entendu, n'oubliez pas de remplacer l'URL de cet exemple par celle à laquelle se
trouve le document que vous souhaitez récupérer !
‫اﻹ‬
‫ﺣﱰ‬
N'oubliez pas non plus de consulter la console de votre navigateur ainsi que la partie
‫اف‬
"Réseau" (ou "Network", en anglais) de Chrome Dev Tools, afin de diagnostiquer les
éventuelles erreurs.
Exemples d'API interrogeables via AJAX

APIs simples:
Adresse IP: httpbin.org/ip

Heure: time.jsontest.com (HTTP Only)
Utilisateur: jsonplaceholder.typicode.com/users/1

APIs plus complexes:
Animations: Giphy
Photos: Flickr
Météo: openweathermap (doc) (HTTP Only)
Chatons: puppygifs.tumblr.com/api/read/json (JSON var with CORS)
Annuaire d'APIs: Programmable Web
Note: Certaines APIs nécessitent l'utilisation d'une clé API. Donc:
lisez la documentation de l'API,
‫ﺗﻢ‬
créez un compte développeur sur le site de l'API, si besoin,
‫اﻟﺘ‬
lisez les parties suivantes pour intégrer l'éventuelle clé API dans l'URL de votre
‫ﺤﻤﻴ‬
requête AJAX.
‫ﻞﻣ‬
Exercice 1: Récupérer l'adresse IP de l'utilisateur
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
Effectuer une requête AJAX vers l'API httpbin.org/ip qui affichera seulement l'heure fournie
en réponse dans un alert() .
‫ﺗﻌﻠ‬
Solution: ajax-get-ip.js.
‫ﻢ‬
‫اﻟﱪ‬
Exercice 2: Météo de la ville de l'utilisateur

‫ﻪ‬ ‫ﻣﺠ‬
Réaliser une page Web permettant d'afficher la météo d'une ville saisie par l'utilisateur. Pour
‫ﻣﻦ‬
récupérer la météo, utiliser une requête AJAX vers l'API de openweathermap.

‫اﻟﺒ‬
‫ﺪاﻳ‬
Etapes:
‫ﻪ‬
1. réaliser une page HTML contenant un champ de saisie et un bouton.

‫إﱃ‬
2. ajouter un code JavaScript qui affiche le contenu du champ quand on clique sur le
‫اﻹ‬
bouton.
‫ﺣﱰ‬
3. ajouter la requête AJAX dans le code, afficher le résultat dans la console.

‫اف‬
4. faire en sorte que l'appel AJAX s'adapte en fonction de la saisie, à chaque clic sur le
bouton.
Solution: ajax-get-weather.html.
Exercice 3: Afficher les images demandées

Réaliser une page Web permettant d'afficher des images ou animations en rapport avec les
mots-clés saisis par l'utilisateur. Pour récupérer l'URL des images, utiliser une requête AJAX
vers l'API de Flickr ou de Giphy.

Les images doivent être affichées directement dans la page à l'aide d'éléments <img> ,
après la saisie de l'utilisateur. Pour cela, vous pouvez utiliser innerHTML , ou les méthodes
présentées dans le chapitre sur la manipulation avancée du DOM.
Solution: flickr, giphy
Restrictions de protocole HTTP / HTTPS

Comme vous le savez probablement, le protocole HTTP existe aussi en version sécurisée
(HTTPS).
‫ﺗ‬
Pour des raisons de sécurité, les navigateurs empêchent le protocole HTTP d'être employé
‫ﻢا‬
depuis une page Web affichée via HTTPS. Cette contrainte a des implications importantes
‫ﻟﺘﺤ‬
sur le fonctionnement des requêtes AJAX.
‫ﻤﻴﻞ‬
Notamment:
‫ﻣﻦ‬
Une page ouverte en HTTPS (ex: jsfiddle) ne peut pas effectuer de requête AJAX vers
‫ﻣ‬
‫ﻮﻗﻊ‬
des URLs HTTP (non sécurisée), seulement vers des URLs HTTPS.
Si vous exécutez une requête AJAX depuis la console d'une page HTTPS, les mêmes
‫ﺗﻌﻠ‬
constraintes s'appliquent.
‫ﻢ‬
Donc, dans la mesure du possible, assurez-vous d'utiliser le protocole HTTPS dans l'URL
‫اﻟﱪ‬
de vos requêtes AJAX.

‫ﻣﺠ‬
‫ﻪﻣ‬
Restrictions de domaines
‫ﻦا‬
‫ﻟﺒﺪ‬
En plus des restrictions de sécurité HTTPS, certaines APIs ne permettent pas l'exécution de
‫اﻳﻪ‬
requêtes AJAX depuis certains domaines. (ex: jsfiddle)

‫إﱃ‬
D'autres refusent carrément de répondre aux requêtes émises depuis d'autres domaines
‫اﻹ‬
que le leur.
‫ﺣﱰ‬
Dans ce cas, vous pourrez seulement exécuter des requêtes AJAX depuis une page de leur
‫اف‬
site Web, via la console.
Manipuler les paramètres d'une URL HTTP

Dans les exemples d'APIs "complexes" fournis plus haut, vous remarquerez que certaines
URLs contiennent des paramètres, séparés par les caractères ? puis & .
Exemple:

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=74a9b070d210
72ccac3a7b5f44f09efa&tags=soccer&format=json&nojsoncallback=1
Comme dans la définition de propriétés d'un objet JavaScript, chaque paramètre est
composé d'un nom (aussi appelé clé) et d'une valeur. Dans une URL, le nom et la valeur de
chaque paramètre sont séparés par un = .
Dans l'URL fournie ci-dessus en exemple, quatre paramètres sont transmis:
le paramètre nommé method vaut flickr.photos.search ,

le paramètre nommé api_key vaut 74a9b070d21072ccac3a7b5f44f09efa ,
‫ﺗ‬
‫ﻢا‬
le paramètre nommé tags vaut soccer ,
‫ﻟﺘﺤ‬
le paramètre nommé format vaut json ,
‫ﻤﻴﻞ‬
et le paramètre nommé nojsoncallback vaut 1 .
De le cas où vous voudriez passer la valeur d'une variable de votre programme JavaScript
‫ﻣﻦ‬
en paramètre de votre URL, vous pouvez utiliser la concaténation.
‫ﻣ‬
Exemple:
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
var tags = 'soccer';
‫ﻢ‬
var url = 'https://api.com/?tags=' + tags + '&format=json';

‫اﻟﱪ‬
‫ﻣﺠ‬
Attention: Ceci fonctionne bien quand la valeur de votre variable ne contient aucun caractère
‫ﻪﻣ‬
spécial. Par contre que se passerait-il si elle contenait un espace, ou un & ? L'URL
‫ﻦ اﻟ‬
deviendrait alors invalide...

‫ﺒ‬
‫ﺪاﻳ‬
Pour éviter que les caractères spéciaux éventuels d'une chaine de caractères ne puisse
‫ﻪإ‬
invalider votre URL, utilisez la fonction encodeURIComponent() de la manière suivante:

‫ﱃ‬
var tags = 'soccer';

‫اﻹ‬
var url = 'https://api.com/?tags=' + encodeURIComponent(tags) + '&format=json';

‫ﺣﱰ‬
‫اف‬
Identification du développeur et/ou de l'application

Vous aurez remarqué que certaines URLs contiennent un paramètre api_key , ou appid .
Exemple:
http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b193
0da0d769e98

Ce genre de paramètre permet d'identifier l'application utilisant l'API, ou le développeur de

cette application. En effet, les fournisseurs d'APIs souhaitent connaitre cette information,
afin de contrôler l'accès et l'usage de leur API.
Pour obtenir une clé, rendez-vous sur le site Web de cette API, puis intégrez la clé fournie
dans l'URL de votre/vos requête(s) AJAX.
Effectuer une requête POST avec

XMLHttpRequest
‫ﺗﻢ‬
‫اﻟﺘ‬
Dans la partie précédente, nous avons utilisé la classe XMLHttpRequest pour envoyer des
‫ﺤ‬
‫ﻤﻴﻞ‬
requêtes de type HTTP GET . Pour rappel, ce type de requête permet de récupérer des
informations depuis un serveur.
‫ﻣﻦ‬
Dans cette partie, nous allons voir comment utiliser cette même classe pour envoyer des
‫ﻣﻮﻗ‬
requêtes de type HTTP POST . Même s'il permet aussi de recevoir une réponse du serveur à
‫ﻊﺗ‬
ces requêtes, ce type de requête permet d'envoyer des informations.
‫ﻌﻠﻢ‬
Envoi d'une chaine de caractères

‫اﻟﱪ‬
‫ﻣﺠ‬
Voici un exemple de requête POST effectuée en JavaScript/AJAX:

‫ﻪ‬
‫ﻣﻦ‬

xhr.open('POST', 'https://httpbin.org/post');
‫اﻟﺒ‬
‫ﺪاﻳ‬
‫ﻪإ‬
alert(xhr.responseText);
}
‫ﱃ‬
};
‫اﻹ‬
// envoi d'une chaine de caractères:

‫ﺣﱰ‬
xhr.send('ceci est un exemple de données envoyées');

‫اف‬
Le principe de fonctionnement est exactement le même que celui d'une requête GET , sauf
que nous avons cette fois-ci envoyé une chaine de caractères via notre requête à
l'adresse serveur https://httpbin.org/post .
Pour cela, nous avons:
remplacé le paramètre GET par POST , dans l'appel à la méthode open() ,

et passé une chaine de caractères en paramètre de l'appel à la méthode send() .
Envoi d'un objet JavaScript / JSON

Pour envoyer un objet JavaScript / JSON dans une requête POST , il faut d'abord sérialiser
l'objet (c'est à dire: le convertir) sous forme de chaine de caractères, à l'aide de la fonction
JSON.stringify() .
Il suffit donc de modifier le paramètre passé à la méthode send() , tel que dans l'exemple
suivant:
// ... ou envoi d'un objet JSON:

xhr.send(JSON.stringify({ message: 'bonjour!' }));
En effet, JSON.stringify() est la fonction inverse de JSON.parse() :
‫ا‬ ‫ﺗﻢ‬
alors que JSON.parse() permet de convertir une chaine de caractères en objet,
‫ﻟﺘﺤ‬
JSON.stringify() permet de convertir un objet en chaine de caractères.
‫ﻤﻴﻞ‬
Attention: veillez à ne pas appeler la méthode send() d'une même instance (ex:
‫ﻣﻦ‬
xhr , dans notre exemple) plus d'une seule fois !
Conseils pratiques pour diagnostiquer le fonctionnement ‫ﻣﻮﻗ‬

‫ﻊﺗ‬
de vos requêtes
‫ﻌﻠﻢ‬
Comme d'habitude, n'oubliez pas de consulter la console de votre navigateur pour

‫اﻟﱪ‬
vérifier la présence éventuelle d'erreurs dans votre code et/ou dans vos requêtes AJAX.
‫ﻣﺠ‬
(ex: accès non autorisé à une API)

‫ﻪ‬
Utilisez l'onglet "Réseau" (ou Network, en anglais) de Chrome Dev Tools pour suivre
‫ﻣﻦ‬
l'exécution de vos requêtes, et consulter à la fois leur contenu et celui de la réponse du

‫اﻟﺒ‬
serveur.
‫ﺪ‬
‫اﻳﻪ‬
Utilisez l'API https://httpbin.org/post pour tester le bon fonctionnement de vos

requêtes POST. Cette API vous envoie en réponse le contenu que le serveur a reçu
‫إﱃ‬
suite à votre requête.

‫اﻹ‬
‫ﺣﱰ‬
Exercice 4: Tweeter en AJAX

‫اف‬
Un serveur est mis à votre disposition à l'URL https://js-ajax-twitter.herokuapp.com. Comme

Twitter, l'application Web exécutée sur ce serveur permet aux utilisateurs de publier des
messages publics en temps réél.
Le but de cet exercice est de publier vos messages en utilisant une requête AJAX.
Sont fournis:
une page web affichant en temps réél le flux des derniers messages publiés sur le
serveur;

une API HTTP permettant de publier des messages sur le serveur, accessible depuis
l'adresse /tweet ;
et un client simple permettant de publier des messages à l'aide d'un formulaire HTML.
Documentation de l'API fournie

Pour publier un message sur ce serveur, il faut envoyer une requête HTTP POST à l'adresse
/tweet (accessible depuis la racine du serveur), en transmettant un objet JSON.
L'objet JSON à envoyer comme contenu de la requête doit contenir deux propriétés:
‫ﺗ‬
message : le texte à publier. (type: string )
‫ﻢا‬
token : le jeton fourni après identification de l'utilisateur. (type: string )
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
Note: La valeur de la propriété token de l'objet à envoyer est générée automatiquement
par le client simple fourni, dans la variable globale window.token .
‫ﻣﻦ‬
À chaque requête HTTP valide reçue, le serveur répondra par un objet JSON ayant:
‫ﻣﻮﻗ‬
soit une propriété error contenant un message d'erreur (type: string );
‫ﻊﺗ‬
soit une propriété ok , dans le cas où le message a été publié sans erreur.
‫ﻌﻠﻢ‬
Remarque importante: le bouton d'identification de Google n'a été activé que depuis les
‫اﻟﱪ‬
domaines jsbin.com et js-ajax-twitter.herokuapp.com . Vous ne pourrez donc pas

‫ﻣﺠ‬
exécuter le client simple fourni (ni une version dérivée) depuis un autre domaine, ni
‫ﻪﻣ‬
depuis le système de fichiers de votre machine (protocole file:// ).

‫ﻦا‬
Étapes proposées
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
1. Tester le client fourni: https://js-ajax-twitter.herokuapp.com/client.html (après login)

‫إﱃ‬
2. Cloner le client fourni: https://jsbin.com/bucilir/edit?html,js,output

‫اﻹ‬
3. Remplacer le formulaire par l'envoi d'une requête HTTP POST à chaque fois que
‫ﺣﱰ‬
l'utilisateur pressera ENTRÉE dans le champ de saisie.

‫اف‬
4. Dans le cas où la publication du message a fonctionné sans erreur, effacer le champ de

saisie, afin de permettre la saisie immédiate d'un nouveau message.
5. Dans le cas contraire, afficher une description de l'erreur dans un alert() .
Conseil: Pensez à utiliser la console JavaScript et l'onglet "Réseau" de Chrome Dev

Tools pour diagnostiquer.
Bonus: améliorations
Quand vous aurez terminé toutes les étapes proposées ci-dessus, vous pourrez apporter les
améliorations suivantes à votre client:
https://altkowa.blogspot.com ‫ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬100

‫ﺗﻢ‬
intégrer le flux de tous les messages sur votre page,

améliorer le design et l'expérience utilisateur de votre client.
Solution: jsbin
‫ا‬ ‫ﺗﻢ‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻟﺒﺪ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

‫ﺗﻢ‬
Chapitre 9: Identification avec Google et

Facebook
‫ﺗﻢ‬
Objectifs:
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
Intégrer un bouton de connexion pour identifier l'utilisateur
Gérer l'état de l'application en fonction de l'identification
‫ﻞﻣ‬
(Slides du TP)
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
Introduction
‫ﻢ‬
‫اﻟﱪ‬
Identifier l'utilisateur d'une application consiste à connaitre l'identité de la personne qui

‫ﻣﺠ‬
utilise une application depuis son navigateur, afin de:

‫ﻪ‬
‫ﻣﻦ‬
personnaliser son expérience d'usage de l'application; (ex: garder l'historique des

derniers achats, sur un site e-commerce)
‫اﻟﺒ‬
‫ﺪاﻳ‬
restreindre l'accès à certains utilisateurs. (ex: contrôles JavaScript seulement

accessibles aux étudiants de l'EEMI)
‫ﻪ‬
‫إﱃ‬
Sur la plupart des sites, cette identification est matérialisée par trois opérations:
‫اﻹ‬
‫ﺣﱰ‬
1. la création d'un compte utilisateur, en fournissant par exemple un email et un mot de

passe; (en anglais: user sign-up ou user registration )
‫اف‬
2. la vérification de l'identité de l'utilisateur, en demandant par exemple à l'utilisateur de

cliquer sur un lien envoyé à l'adresse email qu'il a fourni lors de la création de son
compte (ou par SMS); (permet de s'assurer que l'adresse email est valide, et de réduire
les risques d'usurpation d'identité)
3. puis l'identification à proprement parler de l'utilisateur sur son compte, en saisissant ses
identifiants. (en anglais: user log-in ou user sign-in )
Identification par plateforme tierce

‫ﺗﻢ‬
Plusieurs plateformes tierces (dont Google et Facebook) fournissent aux développeurs

d'applications des moyens de rendre plus rapide l'identification des utilisateurs. Ces moyens
consistent à donner accès à l'identité d'un utilisateur une fois que celui-ci accepte de
partager ces informations avec l'application.
‫ا‬ ‫ﺗﻢ‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
‫ﻊﺗ‬
Le mécanisme le plus répandu est OAuth. Il standardise les échanges nécessaires entre la
‫ﻌﻠﻢ‬
plateforme tierce d'identification et une application, afin que cette dernière puisse accéder
‫اﻟ‬
aux informations de l'utilisateur, voire à certaines fonctionnalités supplémentaires.

‫ﱪﻣ‬
‫ﺠﻪ‬
Dans ce cours, nous n'allons pas décrire le fonctionnement de OAuth, mais en récapituler
les grandes lignes.
‫ﻟﺒﺪ‬
Ce que voit l'utilisateur

‫اﻳﻪ‬
Voici ce qui est affiché à l'utilisateur, après qu'il ait cliqué sur un bouton "Se connecter avec
‫إﱃ‬
Facebook" (en anglais: "Facebook Connect") depuis une application web:

‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

‫ﺗﻢ‬
‫ا‬ ‫ﺗﻢ‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣ‬ ‫ﻣﻦ‬
Cette page web est générée par Facebook pour demander à l'utilisateur s'il accepte de
‫ﻮﻗﻊ‬
partager ses données d'identification avec l'application depuis laquelle il a cliqué sur le
‫ﺗﻌﻠ‬
bouton.
‫ﻢ اﻟ‬
Le plus souvent, ces données contiennent notamment le nom de l'utilisateur, son adresse
‫ﱪﻣ‬
email, et sa photo de profil. Parfois plus.

‫ﺠﻪ‬
Ces données sont envoyées à l'application seulement si l'utilisateur accepte.

‫ﻣﻦ‬
Échanges entre l'application et la plateforme tierce

‫اﻳﻪ‬
Du point de vue du développeur d'une application, l'identification des utilisateurs via une
‫إﱃ‬
plateforme tierce se déroulle en six étapes:

‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

‫ﺗﻢ‬
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
‫ﻦﻣ‬
1. L'application s'identifie auprès de la plateforme, à l'aide d'un identifiant souvent appelé
APP_ID , CLIENT_ID ou API_KEY .
2. La plateforme vérifie la validité de cet identifiant, et sa concordance avec le nom de
‫ﻌﻠﻢ‬
domaine depuis lequel l'identification a été demandée.

‫اﻟﱪ‬
3. La plateforme génère et affiche une page à l'utilisateur, pour lui demander sa

permission avant de partager ses information personnelles avec l'application.
‫ﻣﺠ‬
4. Après avoir éventuellement ajusté ses préférences, l'utilisateur donne sa permission.

‫ﻪﻣ‬
5. La plateforme prend note des préférences de vie privée de l'utilisateur, pour cette
‫ﻦا‬
application.
‫ﻟﺒﺪ‬
6. Enfin, elle contacte l'application pour l'informer de l'accord de l'utilisateur, et lui transmet
‫اﻳﻪ‬
un jeton (en anglais: token ), une chaine de caractères que devra utiliser l'application
‫إﱃ‬
pour communiquer désormais avec la plateforme. Par exemple: pour accéder aux
informations personnelles de l'utilisateur.
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
Mise en oeuvre
Dans la plupart des cas, le développeur d'application peut gagner beaucoup de temps en
utilisant un bibliothèque (en anglais: library) ou un SDK (Software Development Kit) fourni
par la plateforme.
Il existe de nombreux guides sur Internet comment utiliser ces outils, pour les applications
Web et Mobile.
Dans notre cas, nous allons utiliser le SDK Google Platform Library depuis notre application
Web JavaScript.

‫ﺗﻢ‬
Pratique: Intégration Google Sign-in

Nous allons développer:
une application qui affiche le nom de l'utilisateur quand il est connecté,

et lui permet de se déconnecter.
Pour cela, cloner et compléter l'application suivante sur jsbin:

https://jsbin.com/haxeqad/edit?html,js,output
Pour vous aider:
Integrating Google Sign-In into your web app
‫ا‬ ‫ﺗﻢ‬
‫ﻟﺘﺤ‬
Note importante: la clé CLIENT_ID fournie dans le code ne fonctionne que depuis le
site jsbin.com . Vous ne pourrez donc pas utiliser ce code pour identifier des
‫ﻤﻴﻞ‬
utilisateurs depuis un autre domaine, ni depuis votre propre machine.
‫ﻣﻦ‬
Solution: jsbin.com/tuyofec
Exercice: Login en production ‫ﻣﻮﻗ‬

‫ﻊﺗ‬
‫ﻌﻠﻢ‬
Maintenant que nous savons intégrer un bouton Google Signin à une application, nous
allons créer notre propre clé CLIENT_ID , de manière à ce que notre application puisse
‫اﻟﱪ‬
fonctionner depuis un autre domaine que jsbin.com .

‫ﻣﺠ‬
‫ﻪﻣ‬
Pour cela, vous allez devoir déclarer votre propre application auprès de Google et configurer
‫ﻦا‬
votre propre clé CLIENT_ID .

‫ﻟﺒﺪ‬
Étapes proposées:
‫اﻳﻪ‬
1. Héberger le code précédent sur votre espace étudiant, observer l'erreur obtenue
‫إﱃ‬
2. Se connecter à la Console Google Developers avec son compte EEMI

‫اﻹ‬
3. Créer un projet, et moyen de s'identifier à l'application Web avec "OAuth" depuis votre
‫ﺣﱰ‬
domaine
‫اف‬
4. Intégrer la clé CLIENT_ID fournie dans votre page, puis tester la connexion et
déconnexion.
5. BONUS: restreindre l'accès qu'à certaines personnes.
6. BONUS: Refaire l'exercice avec Facebook Connect au lieu de Google Signin.
Pour vous aider:
Creating a Google API Console project and client ID
autres références:
Registering OAuth clients for Google Sign-In

‫ﺗﻢ‬
Facebook Login for the Web with the JavaScript SDK
‫ا‬ ‫ﺗﻢ‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
‫ﻣ‬ ‫ﻣﻦ‬
‫ﻮﻗﻊ‬
‫ﺗﻌﻠ‬
‫ﻢ اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
‫ﻣﻦ‬
‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

‫ﺗﻢ‬
Chapitre 10: jQuery, Node.js et frameworks

Objectifs:
‫ﺗﻢ‬
Comprendre les bases d'usage de la bibliothèque jQuery
‫ا‬
‫ﻟﺘﺤ‬
Découvrir Node.js et l'installation de modules avec npm
‫ﻤﻴﻞ‬
Découvrir la création d'une Single Page App avec Augular et React
‫ﻣﻦ‬
Convertir un composant jQuery en
JavaScript/DOM pur ‫ﻣﻮﻗ‬
‫ﻊﺗ‬
‫ﻌﻠﻢ‬
Pour une introduction à la bibliothèque jQuery, consulter les slides du TP.

‫اﻟﱪ‬
Références:
‫ﻣﺠ‬
Some jQuery Functions And Their JavaScript Equivalents

‫ﻪﻣ‬
Plain JS
‫ﻦا‬
‫ﻟﺒﺪ‬
Exercice 1: convertir un composant accordéon

‫اﻳﻪ‬
Tester et analyser le jsfiddle d'exemple

‫إﱃ‬
Forker ce jsfiddle, puis le modifier pour qu'il ne contienne plus de jQuery:

‫اﻹ‬
1. Fonction associée au clic sur un seul menu

‫ﺣﱰ‬
2. ... puis sur chaque menu (à l'aide d'une boucle)

‫اف‬
3. Cacher les éléments .content

4. Afficher l'élément .content du .menu qui a été cliqué
Solution: jsfiddle
Exercice 2: convertir un autre composant (au choix)

Exemples de composants:
Slider: Simple Slider ou Craftyslide

Nombre animé: codepen, jsfiddle, ou github

‫ﺗﻢ‬
Node.js et npm
Introduction
En début d'année, nous avons vu qu'il existait différents types d'interpréteurs JavaScript.
Exemples:
‫ﺗﻢ‬
la console de Chrome permet d'exécuter des instructions JavaScript de manière
‫اﻟﺘ‬
interactive.
‫ﺤﻤﻴ‬
un fichier JavaScript intégré dans une page web est exécuté dès l'ouverture de cette
page dans un navigateur.
‫ﻞﻣ‬
Il existe un autre moyen d'exécuter du code JavaScript: Node.js.
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
Node.js est un logiciel basé sur le moteur d'exécution intégré dans Google Chrome: V8. Il
est constitué de deux commandes exécutables depuis le "terminal" (la console du système
‫ﺗﻌﻠ‬
d'exploitation): node et npm .
‫ﻢ اﻟ‬
La commande node permet d'exécuter du code JavaScript, alors que npm permet de
‫ﱪﻣ‬
télécharger puis installer des modules (appelés packages) de manière locale (dans le
‫ﺠﻪ‬
dossier en cours) ou globale (=> modules accessibles depuis n'importe quel dossier).
‫ﻣﻦ‬
Node.js est couramment utilisé pour développer des serveurs web (aussi appelé back-end,
‫ا‬
dans le cas de développement d'applications client-serveur telles que les applications web),
‫ﻟﺒﺪ‬
mais permet aussi la réalisation de scripts ayant accès à toutes les fonctions du système
‫اﻳﻪ‬
d'exploitation: système de fichiers, accès illimité aux ressources de n'importe quel réseau
‫إﱃ‬
(dont le web), etc...

‫اﻹ‬
npm est couramment utilisé pour installer les dépendances, c'est à dire les modules
‫ﺣﱰ‬
nécéssaires par un programme JavaScript qui sera exécuté par Node.js.

‫اف‬
À noter que la plupart des frameworks front-end actuels recommandent l'usage de la

commande npm pour les télécharger sur votre machine, ainsi que vous installer les
éventuelles bibliothèques, composants et autres extensions dont votre application auront
besoin.
Installer et tester Node.js sur sa machine

Après avoir ouvert le terminal, taper node pour exécuter la version interactive de Node.js.

‫ﺗﻢ‬
Pour lancer le "terminal":
sous Windows, appuyer sur la touche "Windows", taper "cmd" puis presser
ENTRÉE.
sous Mac, presser Cmd-Espace, taper "term" puis presser ENTRÉE.
Si la commande node n'est pas trouvée par le système, il faudra installer Node.js
depuis son site officiel, puis ré-ouvrir le terminal avant de poursuivre la manipulation.
Une fois Node.js lancé, vous pouvez taper des instructions, comme dans la console de
Chrome Dev Tools.
‫ﺗﻢ‬
Par exemple: tapez 1+1; pour voir le nombre 2 s'afficher en retour.
‫اﻟﺘ‬
Pour quitter l'interpréteur Node.js, pressez Ctrl-C.
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
Exécuter un fichier .js avec Node.js
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
Nous allons d'abord créer un fichier test.js très simple, en tapant la commande suivante
dans le terminal:
‫ﺗ‬
‫ﻌﻠﻢ‬
echo "console.log('bonjour');" >test.js

‫اﻟ‬
‫ﱪﻣ‬
‫ﺠﻪ‬
Sous Windows, vous aurez peut-être besoin de retirer les guillemets.

‫ﻣﻦ‬
Ensuite, pour exécuter ce fichier, il suffit alors de taper la commande suivante depuis le
terminal:
‫اﻳﻪ‬
node test.js
‫إﱃ‬
‫اﻹ‬
Vous devriez alors voir s'afficher la ligne suivante:

‫ﺣﱰ‬
‫اف‬
bonjour
À noter que les symboles tels que window , document , alert() et getElementById()
ne sont pas définis par Node.js, car ils sont seulement fournis lorsqu'un programme
JavaScript s'exécute depuis un navigateur Web !
Pour aller plus loin avec Node.js

Tutorials de grafikart:

‫ﺗﻢ‬
Qu'est ce que NodeJS ?

Installation de NodeJS
Créer un serveur avec NodeJS
Utilisation de modules
Création d'un serveur Web avec Express (ou depuis site officiel)
Serveur de tchat avec Socket.io
Ou suivre le cours Node.js sur Openclassrooms.
‫ﺗﻢ‬
Single Page Apps avec Augular et React
‫ا‬
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
Front-end VS back-end
‫ﻣﻦ‬
‫ﻣﻮﻗ‬
Une application Web moderne consiste en: ‫ﻊﺗ‬
un client / front-end: programme exécuté par le navigateur de chaque utilisateur,
‫ﻌﻠﻢ‬
et un "serveur web" / back-end: programme exécuté sur une machine appelée
"serveur", qui a pour mission de répondre aux requête des "clients" (et donc de chaque
‫اﻟﱪ‬
utilisateur).
‫ﻣﺠ‬
Comme nous l'avons vu, un client "web" est généralement constitué de fichiers HTML, CSS
‫ﻪﻣ‬
et JavaScript ayant accès à l'API du DOM fournie par le navigateur. À moins qu'il utilise des
‫ﻦا‬
moyens de persister ses données (ex: à l'aide de cookies, LocalStorage, ou requêtes AJAX
‫ﻟﺒﺪ‬
vers un serveur), son "état" (c.a.d. toutes les données de l'utilisateur saisies dans la page, et
‫اﻳﻪ‬
valeurs des variables) est réinitialisé à chaque rafraichissement de la page.

‫إﱃ‬
Un "serveur web" est rattaché à une adresse IP (ex: 127.0.0.1 , ou nom de domaine) et un
‫اﻹ‬
port (ex: 80 ), et permet de réagir et répondre à des requêtes HTTP envoyées par des
‫ﺣﱰ‬
"clients" à différents chemins (ex: /posts ) et avec différentes méthodes (ex: GET , POST ,
‫اف‬
etc...). Un "serveur web" peut être implémenté en nombreux langages: PHP, Java, ASP,
etc... Node.js peut être utilisé pour exécuter un serveur web implémenté en JavaScript.
Il est relativement facile et rapide de développer un client web simple: il suffit d'une page
HTML associée à un fichier JavaScript.
Par contre, dès qu'une application web contient plusieurs écrans et/ou modes (ex: utilisateur
connecté ou pas), elle devient vite complexe à écrire et maintenir.
Frameworks et bibliothèques front-end
https://altkowa.blogspot.com ‫ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬

111
Pour mieux structurer le code et le fonctionnement d'applications web riches, nombreux

frameworks et bibliothèques (libraries) ont été développés. Ils sont généralement inspirés du
principe d'architecture MVC (Modèle-Vue-Controlleur, cf définition sur Wikipedia).
Notamment, pour aider au développement de clients web, les technologies suivantes sont
actuellement très en vogue:
Angular (en JavaScript ou TypeScript), développé par Google,

React, développé par Facebook,
(Il en existe nombreuses autres: Polymer, Ember.js, Vue.js...)
‫ﺗﻢ‬
Suivez les guides liés à ces deux technologies pour comprendre leur fonctionnement par la
‫اﻟﺘ‬
pratique.
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
Solutions hybrides
‫ﻦﻣ‬
Il existe aussi des bibliothèques et frameworks permettant de faciliter le lien entre front-end
‫ﻮﻗﻊ‬
et back-end:
‫ﺗ‬
‫ﻌﻠﻢ‬
Firebase permet de créer une base de données sur internet, et d'y accéder directement
depuis un client web, et se présente donc comme une alternative simple à un serveur
‫اﻟﱪ‬
web / back-end. Solution valable quand le plus gros de son application s'exécute dans
‫ﻣﺠ‬
le navigateur. (consulter slides et vidéos de mon cours de l'an dernier et/ou guide
‫ﻪﻣ‬
officiel)
‫ﻦا‬
Basé sur Node.js et MongoDB, Meteor permet de créer des applications web JavaScript
‫ﻟﺒﺪ‬
isomorphiques. C'est à dire que des parties du code peuvent s'exécuter à la fois côté
‫اﻳﻪ‬
serveur et/ou côté client (dans le navigateur). Un de ses gros avantages est de
‫إﱃ‬
permettre l'intégration de composants gérant à la fois la partie "client" et la partie

"serveur", ex: bouton d'identification d'utilisateur avec stockage automatique dans la
‫اﻹ‬
‫ﺣﱰ‬
base de données de l'application. (suivre tutorial sur grafikart)

‫اف‬
Ces deux solutions sont très pratiques pour réaliser des prototypes de manière rapide /
efficace.

‫ﺗﻢ‬
Chapitre 11: Gestion d'erreurs et

Geolocation API
‫ﺗ‬
‫ﻢا‬
Objectifs:
‫ﻟﺘﺤ‬
Prévoir un intercepter les cas d'erreurs
‫ﻤﻴﻞ‬
Application: détecter la position géographique de l'utilisateur
‫ﻣﻦ‬
Consulter les slides du TP.
‫ﻣ‬
Références: ‫ﻮﻗﻊ‬
Error Handling in Node.js
‫ﺗﻌﻠ‬
Utiliser la Géolocalisation
‫ﻢ‬
Google Maps API pour le Web

‫اﻟﱪ‬
Démo et exemple: HTML5 Geolocation

‫ﻣﺠ‬
‫ﻪﻣ‬
‫ﻦا‬
Gestion d'erreurs en JavaScript

‫ﻟﺒﺪ‬
‫اﻳﻪ‬
Dans un programme informatique comme dans la vie, tout ne se passe pas toujours comme
‫إﱃ‬
prévu !
‫اﻹ‬
‫ﺣﱰ‬
Dans ce chapitre, nous allons découvrir les différents types d'erreurs qui peuvent survenir
dans un programme JavaScript, et comment les gérer dans notre code.
‫اف‬
Erreurs synchrones et asynchrones

Avant de catégoriser les différents type d'erreurs, définissons la différence entre du code
synchrone et asynchrone.
Une instruction synchrone est dite "bloquante". C'est à dire que l'instruction suivante sera
exécutée seulement une fois que l'opération invoquée par cette instruction aura fini de
s’exécuter.

‫ﺗﻢ‬
Exemple:
// alert() est une fonction synchrone car:

alert('cliquez sur OK'); // exécution du programme bloquée jusqu'au clic de l'utilisat
eur
console.log('bonjour !');
// bonjour sera affiché dans la console seulement une fois que l'utilisateur aura cliq
ué
Une instruction asynchrone est dite "non bloquante". C'est à dire qu'elle d’éclanche une
opération qui va se dérouler en arrière plan, pendant que les instructions suivantes du
‫ﺗ‬
programme vont être exécutées.
‫ﻢا‬
‫ﻟﺘﺤ‬
Conséquence importante: le résultat de l’exécution d'une instruction asynchrone n'était pas
‫ﻤﻴﻞ‬
disponible immédiatement, il va falloir définir et fournir un fonction qui sera appelée à la fin
de l'opération asynchrone correspondante.
‫ﻣﻦ‬
Exemple:
‫ﻣ‬
function direBonjour() {
console.log('bonjour !');
‫ﻌﻠﻢ‬
}
setTimeout(direBonjour, 1000);
‫اﻟﱪ‬
console.log('salut !');
‫ﻣﺠ‬
// => salut va s'afficher avant bonjour, car setTimeout() est une fonction asynchrone.
‫ﻪﻣ‬
Généralement, une instruction asynchrone consiste à appeler une fonction, en passant une
‫ﻦا‬
autre fonction de callback en paramètre. Cette fonction de callback sera appelée à la fin de
‫ﻟﺒﺪ‬
l'opération asynchrone, et un résultat sera passé en paramètre de cette fonction.

‫اﻳﻪ‬
Le résultat passé en paramètre de la fonction de callback peut être une valeur résultante de
‫إﱃ‬
l'opération (équivalent à l'usage de l'instruction return , dans le cas d'une fonction

‫اﻹ‬
synchrone) ou une description de l'erreur qui serait éventuellement survenue pendant cette
‫ﺣﱰ‬
opération. (équivalent à l'usage de l'instruction throw , dans le cas d'une fonction

‫اف‬
synchrone)
On peut alors discerner quatre types d'erreurs:
Synchrone Asynchrone
Erreur de programmation immédiate Erreur de programmation tardive
Erreur opérationnelle gérable par Erreur opérationnelle gérable par fonction de
try - catch callback
Erreurs de programmation

‫ﺗﻢ‬
Avez-vu déjà vu ce type d'erreurs dans la console JavaScript de votre navigateur ?
‫ﺗﻢ‬
Les erreurs de programmation sont causées par le développeur du programme. Souvent par
‫ا‬
inattention, ou cas non prévus.
‫ﻟﺘﺤ‬
‫ﻤﻴﻞ‬
Exemples d'erreurs de programmation:
erreur de syntaxe. ex: il manque une accolade fermante
‫ﻣﻦ‬
usage d'un symbole non défini: variable ou instruction mal orthographiée
‫ﻣﻮﻗ‬
usage d'une propriété ou méthode d'un objet non défini ( undefined )
‫ﻊﺗ‬
non respect du type d'un paramètre de fonction
‫ﻌﻠﻢ‬
fonction de callback non passée en paramètre de l'appel d'une fonction asynchrone
Quand une erreur survient dans un programme JavaScript s’exécutant dans un navigateur
‫اﻟﱪ‬
web, ce dernier arrête l’exécution de ce programme et affiche l'erreur dans la console, afin
‫ﻣﺠ‬
que le développeur puisse corriger son programme.

‫ﻪﻣ‬
Les erreurs de ce type peuvent être corrigées en relisant attentivement le code (ex: localiser
‫ﻦا‬
les paires de parenthèses et accolades), et en exécutant des tests couvrant un maximum de

‫ﻟﺒﺪ‬
cas limites (ex: que se passe-t-il si l'utilisateur clique sur le bouton "annuler" au lieu de
‫اﻳﻪ‬
fournir la valeur demandée ?).

‫إﱃ‬
‫اﻹ‬
Erreurs opérationnelles
‫ﺣﱰ‬
‫اف‬
Une erreur opérationnelle n'est pas directement causée par le développeur du programme.
Elle peut survenir dans des cas en dehors de son contrôle.
Exemples d'erreurs opérationnelles:
le serveur auquel une requête AJAX a été envoyée met trop de temps à répondre
le paramètre passé à JSON.parse() n'est pas un objet JSON valide
le navigateur de l'utilisateur a empêché le pop-up de s'ouvrir

‫ﺗﻢ‬
l'utilisateur a désactivé le stockage de cookies, ou la localisation

l'utilisateur n'est plus connecté à internet
le système est à cours de mémoire
Ce type d'erreurs arrive généralement de manière imprévue, et peut nuire gravement à

l'expérience de l'utilisateur si votre programme ne les gère pas correctement. En effet,
comme pour les erreurs de programmation, le navigateur interrompra l’exécution de votre
programme si une de ces erreurs survient et que votre programme ne décrit pas comment
les gérer.
L'interception d'une erreur opérationnelle dépend de la nature de l'instruction qui a l'a
‫ﺗﻢ‬
indirectement causée: synchrone ou asynchrone.
‫ا‬
‫ﻟﺘﺤ‬
Cas synchrone
‫ﻤﻴﻞ‬
Dans le cas d'une opération synchrone, il suffit de contenir l'instruction pouvant causer une
‫ﻣﻦ‬
erreur à l’intérieur d'un bloc try - catch .
‫ﻣﻮﻗ‬
Par exemple, la fonction JSON.parse() est synchrone, et déclanchera une erreur si la
‫ﻊﺗ‬
chaîne de caractères passée en paramètre n'est pas une chaine de caractère ou si elle ne
‫ﻌﻠﻢ‬
contient pas du JSON valide. Pour gérer cette erreur dans notre programme:
‫اﻟﱪ‬
try {
‫ﻣﺠ‬
var json = JSON.parse('{ JSON invalide }'); // cause une erreur interceptée par le c
‫ﻪ‬
atch()
‫ﻣﻦ‬
console.log('résultat:', json); // => cette instruction ne sera pas exécutée

} catch (error) {
‫اﻟﺒ‬
console.log('une erreur est survenue:', error.message);

‫ﺪ‬
}
‫اﻳﻪ‬
console.log('cette ligne s\'affichera dans tous les cas.');

‫إﱃ‬
‫اﻹ‬
Cas asynchrone
‫ﺣﱰ‬
‫اف‬
Dans la plupart des cas:
une erreur asynchrone n'interrompra pas directement l’exécution du programme dans le

navigateur.
mettre l'appel de fonction asynchrone dans un try - catch est inutile car l'erreur n'est
pas directement causée par le déclenchement de l'opération, mais par le traitement qui
est indirectement occasionné par lui.
Par contre, il est important de gérer ce type d'erreurs quand même afin d'en informer
l'utilisateur, et éventuellement l'aider à trouver une solution afin de ne pas rester bloqué.

‫ﺗﻢ‬
Pour rappel, quand on déclenche une opération asynchrone, il faut généralement fournir une
fonction de callback en paramètre de la fonction correspondante. La gestion d'erreur se fait
alors en analysant la valeur d'un des paramètres passés à l'appel de cette fonction de
callback.
Dans les programmes Node.js, c'est le premier paramètre d'une fonction de callback qui est
conventionnellement réservé à cet usage, et contient soit une instance de la classe Error ,
soit la valeur null ou undefined (dans le cas où aucune erreur n'aurait eu lieu).
uneFonctionAsynchrone(function(err, res) {
if (err) {
‫ﺗ‬
‫ﻢا‬
alert('une erreur est survenue: ' + err.message);
} else {
‫ﻟﺘﺤ‬
alert('resultat de la fonction: ' + res);
‫ﻤﻴﻞ‬
}
});
‫ﻣﻦ‬
Mais les conventions dépendent de la fonction qui est appelée. Par exemple, la fonction
‫ﻣﻮﻗ‬
getCurrentPosition() de l'API Geolocation prend deux fonctions de callback: une première
‫ﻊﺗ‬
qui sera appelée quand la position de l'utilisateur sera déterminée, et une deuxième qui ne
‫ﻌﻠﻢ‬
sera appelée qu'en cas d'erreur.

‫اﻟﱪ‬
function traiterPos(pos) {
‫ﻣﺠ‬
alert('Coordonnées GPS: ' + pos.coords.latitude + ', ' + pos.coords.longitude);

}
‫ﻪ‬
function traiterErr(err) {
‫ﻣﻦ‬
alert('Une erreur nous empêche de déterminer votre position: ' + err.message);

‫اﻟﺒ‬
// exemple d'erreur: l'utilisateur n'a pas accepté de partager sa position

}
‫ﺪ‬
‫اﻳﻪ‬
navigator.geolocation.getCurrentPosition(traiterPos, traiterErr);
‫إﱃ‬
À noter que certaines opérations asynchrones proposent une manière spécifique de gérer
‫اﻹ‬
‫ﺣﱰ‬
les erreurs. Par exemple, la classe XMLHttpRequest demande au développeur d'affecter une
fonction à la propriété onerror de l'instance correspondante à une requête AJAX.
‫اف‬
Il faut donc toujours penser à lire la documentation des fonctions et classes qu'on utilise
dans son programme, afin de gérer les erreurs éventuelles.
Usage de Geolocation API

Nous allons créer une petite application web permettant d'indiquer à l'utilisateur l'adresse où
il se trouve.

‫ﺗﻢ‬
Pour cela, notre programme JavaScript va utiliser deux API:
l'API navigator.geolocation fournie par les navigateurs modernes,

et une API de Geocoding pour transformer les coordonnés GPS en adresse postale.
(ex: celle fournie par Google)
Voici un scénario d'usage de cette application, à son ouverture dans le navigateur:
1. L'application informe l'utilisateur qu'il devra donner son autorisation pour accéder à la
position géographique
2. L'application va alors appeler l'API de positionnement pour tenter de détecter la position
de l'utilisateur
‫ﺗﻢ‬
Si la position est bien détectée, afficher les coordonnées sur la page
‫ا‬
‫ﻟﺘﺤ‬
Si la position n'est pas détectée (erreur asynchrone), afficher l'erreur
‫ﻤﻴﻞ‬
correspondante sur la page
Enfin, si l'API n'est pas accessible (erreur synchrone), afficher le message API
‫ﻣﻦ‬
Geolocation non disponible .
‫ﻣﻮﻗ‬
3. Dans le cas où le position a été détectée, l'application va déterminer l'adresse postale
correspondante à ces coordonnées
‫ﻊﺗ‬
Si une adresse est détectée, l'afficher sur la page, en plus des coordonnées
‫ﻌﻠﻢ‬
Si l'adresse n'est pas reconnue, afficher adresse non reconnue sur la page
Si une autre erreur est survenue lors de l'appel à l'API, afficher le message d'erreur
‫اﻟﱪ‬
correspondant sur la page

‫ﻣﺠ‬
‫ﻪﻣ‬
Tester les différents cas d'erreur en simulant les conditions correspondantes.

‫ﻦا‬
BONUS: En plus d'afficher les coordonnées et adresse postale où se trouve l'utilise (ou
‫ﻟﺒﺪ‬
message d'erreur), afficher sa position sur une carte.

‫اﻳﻪ‬
‫إﱃ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬

‫ﺗﻢ‬
‫‪Chapitre 11 - Gestion d'erreurs et Geolocation API‬‬
‫ﺗﻢ‬
‫اﻟﺘ‬
‫ﺤﻤﻴ‬
‫ﻞﻣ‬
‫ﻦﻣ‬
‫ﻮﻗﻊ‬
‫اﻟﱪ‬
‫ﻣ‬
‫ﺠﻪ‬
‫ﻣﻦ‬
‫اﻟﺒ‬
‫ﺪاﻳ‬
‫ﱃ‬ ‫ﻪإ‬
‫اﻹ‬
‫ﺣﱰ‬
‫اف‬
‫‪https://altkowa.blogspot.com‬‬ ‫‪ 119‬اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬

‫ﺗﻢ‬

Langue

Bienvenue sur Scribd !

Cours JavaScript EEMI 2016-2017

Transféré par

Informations du document

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Cours JavaScript EEMI 2016-2017

Transféré par

Description :

Droits d'auteur :

Titres liés

Table

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬1

Chapitre 11 - Gestion d'erreurs et Geolocation API

QCM 1: Bases (solutions)

QCM 2: Conditions (solutions)

Contrôle 1: Bases et Conditions (solutions)

QCM 4: Fonctions (solutions)

QCM 5: Tableaux (solutions)

QCM 6: Objets (solutions)

Formation JavaScript de Grafikart

Ressources alternatives en langue anglaise

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬3

Chapitre 1: Les bases

La machine en question peut être:

un serveur sur internet

un objet intelligent (ex: Arduino, Raspberry Pi...)

Qu'est-ce qu'un programme ?

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬4

rigoureux dans le respect des règles de grammaire et d'orthographe du langage.

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬5

relire votre code, et de vous mettre à la place de la machine pour essayer de

Histoire du langage JavaScript

Utilisable sur de nombreuses plate-formes, JavaScript est le seul langage de programmation

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬6

Exécution de code JavaScript

1. de manière interactive: via une console

Pour tester JavaScript en mode interactif:

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬7

les prénoms, etc...

De la même façon, en maths, on peut manipuler plusieurs types de valeurs: nombres

entiers, décimaux, rationnels (fractions), complexes, etc...

En JavaScript, c'est pareil. Il est possible d'exprimer et de manipuler des valeurs de

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬8

non défini: undefined

Exercice: Quel type ?

certaines lignes contiennent plusieurs valeurs;

Le mot clé typeof renvoie le type de l'expression qui suit.

3) Expliquez le type de la dernière ligne.

Variables et opérateur d'affectation

Variables et valeurs littérales

https://altkowa.blogspot.com ‫ ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬9

Exemple: nombreSaisiParUtilisateur est un bon nom pour une variable JavaScript.

Camel veut dire "chameau", en Français. Avez-vous compris pourquoi ?

quitte à remplacer la valeur qu'elle portait précédemment.

Par exemple, si on tape monNombre = 1 , monNombre = 2 puis monNombre , la console

Par exemple, si on tape autreNombre = monNombre , puis autreNombre , la console

JavaScript nous répondra 2 car nous avons affecté la valeur de la variable

monNombre ( 2 , tel qu'affecté dans l'exemple précédent) à notre nouvelle variable

Exemple d'affectation de valeur de type simple:

https://altkowa.blogspot.com ‫ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬10

Exemple d'affectation de valeur de type avancé:

// => monTableau vaut désormais [ 7, 8, 9 ]

// => ... et autreVariable vaut aussi [ 7, 8, 9 ], car la tableau qu'il référencé a ét

lors de leur première affectation de valeur.

Il restera évidemment possible d'affecter d'autres valeurs à notre variable, à l'aide de

https://altkowa.blogspot.com ‫ﺗﻢ اﻟﺘﺤﻤﻴﻞ ﻣﻦ ﻣﻮﻗﻊ ﺗﻌﻠﻢ اﻟﱪﻣﺠﻪ ﻣﻦ اﻟﺒﺪاﻳﻪ إﱃ اﻹﺣﱰاف‬11

// on va crééer une variable de type chaîne de caractères:

Vous remarquerez que:

la variable monNombre avec une valeur de 4 ,

la variable maChaine contenant 'bonjour ! :-)' ,

et une variable sansValeur à laquelle vous n'aurez affecté aucune valeur.

dessous répond true : (copiez-collez-les une par une dans la console)