Pr.

Zakaria Boulouard

Interaction avec
JavaScript
Objectifs

• Dans ce chapitre, on va :

• Introduire le langage JavaScript

• Découvrir les propriétés basiques de JS
• Manipuler les éléments d’une page avec DOM
• Gérer les évènements utilisateur

2
Introduction au JavaScript

3
Objectifs

• Dans cette section, on va :

• Comparer un langage de script avec un langage compilé

• Comprendre l’architecture client/serveur

4
Introduction

• JavaScript est un langage de script interprété, orienté objet,

principalement utilisé pour rendre les pages web interactives et
dynamiques.

• Il s’exécute directement dans le navigateur web de l’utilisateur

grâce à un moteur JavaScript (comme V8 pour Chrome,
SpiderMonkey pour Firefox ou JavaScriptCore pour Safari).

5
Compilateur vs Interpréteur

• La compilation consiste à transformer le code écrit dans un

langage de programmation de haut niveau (code lisible par
l'homme) en code machine compréhensible par un processeur
informatique (bits binaires 1 et 0).

• Le compilateur s'assure également que le programme est correct

du point de vue type (on n’est pas autorisé à affecter une chaîne
de caractères à une variable entière).

6
Compilateur vs Interpréteur

• Le compilateur veille également à ce que le programme soit

syntaxiquement correct.

• Par exemple, « x * y » est valide, mais « x @ y » ne l'est pas.

7
Compilateur vs Interpréteur

• Un interpréteur est un programme informatique qui convertit

chaque déclaration de programme de haut niveau en code
machine.

• Cela inclut le code source, le code précompilé et les scripts.

8
Compilateur vs Interpréteur

• Un compilateur convertit le code en code machine (crée un exe)

avant l'exécution du programme.

• L’interpréteur convertit le code en code machine, ligne par ligne,

au moment d’exécution du programme.

9
Compilateur vs Interpréteur

• Exemples de langages compilés :

• C, C++, C#
• Rust
• COBOL
• etc…

10
Compilateur vs Interpréteur

• Exemples de langages interprétés :

• HTML, CSS, JavaScript

• Python
• Perl
• etc…

11
Langage Compilé vs Interprété

• Le slide suivant explique le processus d’exécution d’un langage

compilé :

12
13
Langage Compilé vs Interprété

• Le slide suivant explique le processus d’exécution d’un langage

interprété :

14
15
Langage de Script

• Un langage de script (également appelé script) est une série de

commandes qui peuvent être exécutées sans compilation.

• Les langages de script utilisent un programme appelé

interpréteur pour traduire les commandes.

16
Langage de Script

• Les langages de script côté serveur s'exécutent sur un serveur

Web Lorsqu'un client envoie une requête, le serveur répond en
envoyant du contenu via le protocole HTTP.

• Les scripts côté serveur ne sont pas visibles par le public, leur
rôle est d’assurer la rapidité du traitement, l'accès aux données et
la résolution des erreurs.

17
Langage de Script

• Exemples de langages de script côté serveur :

• PHP
• JEE
• [Link]
• etc…

18
Langage de Script

• Les langages de script côté client s'exécutent du côté du client,

sur son navigateur Web, et sont axés sur l'interface utilisateur et
ses fonctionnalités.

• L'avantage des scripts côté client est qu'ils peuvent réduire la

demande sur le serveur, ce qui permet aux pages Web de se
charger plus rapidement.

19
Langage de Script

• Exemples de langages de script côté client :

• HTML
• CSS
• JavaScript

20
Interpréteur

• Le fonctionnement des langages de script est assuré par

l’interpréteur Son rôle réside dans la traduction des instructions
du programme source en code machine.

• S'il y a une erreur dans l'instruction courante, l'interpréteur

termine son processus de traduction à cette instruction et affiche
un message d'erreur. L'interprète ne passe à la ligne d'exécution
suivante qu'après avoir éliminé l'erreur

21
Interpréteur

• L'interpréteur ne passe à la ligne d'exécution suivante qu'après

avoir éliminé l'erreur.

• Un interpréteur exécute directement les instructions écrites dans

un langage de script sans les convertir préalablement en code
objet ou en code machine.

22
Interpréteur

• Le slide suivant décrit le fonctionnement d’un langage de script

au niveau de l’interpréteur :

23
24
Architecture Client – Serveur

• L’architecture client serveur correspond à l’architecture d'un réseau

informatique dans lequel de nombreux clients (processeurs distants)
demandent et reçoivent des services d'un serveur centralisé.

• Les clients sont souvent situés sur des ordinateurs personnels,

téléphones, ou tablettes, tandis que les serveurs sont situés ailleurs sur
le réseau, généralement sur des machines plus puissantes.

25
26
Architecture Client – Serveur

• Les ordinateurs clients fournissent une interface (comme les

navigateurs) permettant à un utilisateur de demander des
services auprès de serveur et d'afficher les résultats.

27
Architecture Client – Serveur

• Cette interaction passe par les étapes suivantes :

1. L'utilisateur saisit l'URL (Uniform Resource Locator) du site web ou du

fichier. Le navigateur demande alors au serveur le DNS (Domain Name
System).

2. Le serveur DNS recherche l'adresse du serveur web.

28
Architecture Client – Serveur

• Cette interaction passe par les étapes suivantes :

3. Le serveur DNS répond avec l'adresse IP du serveur Web.

4. Le navigateur envoie une requête HTTP/HTTPS à l'adresse IP du

serveur web (fournie par le serveur DNS).

29
Architecture Client – Serveur

• Cette interaction passe par les étapes suivantes :

5. Le serveur envoie les fichiers nécessaires du site web (pages html,

documents, images, ….).

6. Le navigateur rend alors les fichiers et le site web s'affiche.

30
Architecture Client – Serveur

• Ce rendu est effectué à l'aide de l'interpréteur DOM (Document Object

Model), de l'interpréteur CSS et du moteur JS, collectivement connus
sous le nom de compilateurs JIT (Just in Time).

• Le fonctionnement d’un système client/serveur peut être illustré par le

schéma suivant :

31
32
Serveurs Web et HTTP

• Les navigateurs web communiquent avec les serveurs web via le

protocole HTTP (HyperText Transfer Protocol).

• En tant que protocole de type « Requête – Réponse », ce protocole

permet aux utilisateurs d'interagir avec des ressources web telles que
des fichiers HTML en transmettant des messages hypertextes entre les
clients et les serveurs.

33
Serveurs Web et HTTP

• Une requête HTTP inclut :

• Une URL pointant sur la cible et la ressource .

• Une méthode de requête spécifique afin d'effectuer diverses tâches (par

exemple mise à jour des données, récupération d’un fichier, etc…)

• Les différentes méthodes de requêtes et les actions associées sont

présentées dans le tableau ci-dessous :

34
35
Serveurs Web et HTTP

• La réponse HTTP (HTTP Response) est l'information fournie par le

serveur à la suite de la demande du client.

• Elle sert à confirmer que l'action demandée a été exécutée avec succès.

• En cas d'erreur dans l'exécution de la demande du client, le serveur

répond par un message d'erreur.

36
Serveurs Web et HTTP

• Les réponses HTTP se présentent sous la forme d'un texte brut

formaté au format JSON ou XML, tout comme les demandes HTTP.

• Le corps d'une réponse aboutie à une requête GET contiendrait la

ressource demandée.

37
Serveurs Web et HTTP

38
Serveurs Web et HTTP

• Exemple d’une réponse HTTP (clic droit dans la page

[Link] puis clic sur « Inspecter », puis sur l’onglet
« Network » puis rechargement de la page) :

39
40
Fondamentaux du JavaScript

41
Objectifs

• Dans cette section, on va :

• Maîtriser la syntaxe JavaScript et ses notions fondamentales

• Découvrir les structures de contrôle
• Apprendre à utiliser les fonctions
• Manipuler les objets

42
Introduction

• JavaScript est un langage de scripts qui peut être incorporé aux balises
HTML.

• JS est exécuté par le navigateur, et son rôle est d'améliorer la

présentation et l'interactivité des pages web.

43
Introduction

• JavaScript offre des « gestionnaires d'événements » qui

reconnaissent et réagissent aux demandes du client (comme les
mouvements de la souris, clics sur les touches du clavier, etc…).

• JavaScript peut être intégré n’importe où dans le document HTML.

• Il est aussi possible de l’utiliser plusieurs fois dans le même document

HTML.

44
 Méthode 1 : Code JavaScript intégré au code HTML

<script language="JavaScript">

/* ou // code JS */

</script>

Méthode 2 : Code JavaScript externe

<script language="JavaScript" src="[Link]">

</script>

Méthode 3 : Pseudo-URL

<a href="JavaScript:[Link]('Welcome to JavaScript');">

Cliquez ici</a>
45
Variables en JS

• Un identifiant en JS correspond au nom d’une variable.

• Ce nom doit être unique.

• Ces identifiants peuvent être des noms courts (comme x et y) ou bien

des noms plus descriptifs (comme note, total, NomComplet, etc…)

46
Variables en JS

47
Variables en JS

• JavaScript est un langage faiblement typé, donc le type d’une variable

est défini au moment de l’exécution.

• On peut déclarer une variable JS en utilisant les mots-clés suivants :

• var : utilisé pour déclarer une variable globale (function scope).

• let : utilisé pour déclarer une variable dont la portée est limitée à un
bloc (block scope).

48
Variables en JS

• On peut déclarer une variable JS en utilisant les mots-clés suivants :

• const : permet de déclarer une variable qui doit avoir une valeur initiale
et ne peut pas être réassignée.

49
Variables en JS

• Déclaration explicite (en utilisant le mot clé var) :

var nom_variable = new Type_variable;

var nom_variable;

• Déclaration implicite :
Numero = 1;
Prenom = "xyz";

50
Variables en JS

• Déclaration des variables booléennes :

var test = new Boolean(true);

test = new Boolean(1);

let test = true;

51
Variables en JS

• Déclaration des chaînes de caractères :

var chaine = "Bonjour";

• Déclaration des nombres :

var entier = 60; // un entier
let pi = 3.14; // un réel

52
 Variables en JS

• Déclaration de plusieurs variables :

var variable3 = 2, variable4 = "mon texte d’initialisation";

• Déclaration sans initialisation :

• Une variable déclarée sans valeur aura la valeur « undefined ».

53
Variables en JS

• Déclaration de variables constantes :

const PI = 3.141592653589793;
PI = 3.14;// Erreur
PI = PI + 10;// Erreur

const PI;
PI = 3.14159265359; // Incorrect
54
Variables en JS

• La portée d’une variable détermine son accessibilité.

• En JS, trois types de portées sont distinguées :

• Bloc
• Fonction
• Globale

55
Variables en JS

• En utilisant le mot-clé « let », les variables déclarées à l’intérieur d’un

bloc « { } » ne sont pas accessibles à l’extérieur du bloc :

{
let x = 2;
}

// x n'est pas accessible ici

56
Variables en JS

• En utilisant le mot-clé « var », les variables déclarées à l’intérieur d’un

bloc « { } » sont accessibles à l’extérieur du bloc :

{
var x = 2;
}

// x est accessible ici

57
Variables en JS
function Test()
{
var x = "test1";
let y = "test2";
const z = "test3";
}
• Les variables déclarées dans une
fonction JavaScript deviennent /* Les variables x, y, et z ne
LOCALES à la fonction, et ne sont
accessibles qu'à partir de la fonction.
sont pas accessibles en dehors
de la fonction Test()*/

58
Variables en JS

• Une variable déclarée en dehors d’une fonction, devient GLOBALE.

• Les variables globales sont accessibles de n'importe où dans un

programme JavaScript.

59
Opérateurs en JS

• Les opérateurs arithmétiques

en JS sont comme suit :

60
Opérateurs en JS

• Les opérateurs d’affectation en JS sont comme suit :

61
62
Opérateurs en JS

• L’opérateur « + » appliqué aux chaînes de caractères, permet de

concaténer des chaînes entre elles, ou des chaînes et des nombres.

let text1 = "LST2I";

let x = 1 + 1;
text1 += " ";
let y = "5" + 1;
let text2 = "FSTM";
/* x = 2
text3 = text1 + text2;
y = "51" */
// Output : text3 = "LST2I FSTM"

63
Opérateurs en JS

• Les opérateurs de comparaison permettent de comparer des

opérandes (qui peuvent être des valeurs numériques ou des chaînes
de caractères) et renvoie une valeur logique :

• true si la comparaison est vraie.

• false sinon.

64
65
Opérateurs en JS

• Les opérateurs logiques, aussi appelés opérateurs booléens, sont

utilisés pour combiner des valeurs booléennes (des conditions qui
peuvent avoir les valeurs true ou false) et produire une nouvelle
valeur booléenne.

66
Affichage en JS

• JavaScript permet d’afficher les données de différentes manières :

• [Link]() : Écriture dans le document de sortie HTML.

Utilisée pour des fins de test, après le chargement du document HTML,
elle supprime le contenu existant.

67
 Code HTML / JS
<!DOCTYPE html>
<html>
<body>
<h1>Ceci est une page de test</h1>
<p>C'est un paragraphe</p>
<script language="JavaScript">
[Link](5 + 6);
</script>
</body>
<html>

Sortie

Sortie JS
68
Affichage en JS

• JavaScript permet d’afficher les données de différentes manières :

• [Link]() : Écriture dans une boîte d'alerte. Utilisée pour

afficher des messages à l’utilisateur et aussi pour afficher des données.

69
 Code HTML / JS
<!DOCTYPE html>
<html>
<body>
<h1>Ceci est une page de test</h1>
<p>C'est un paragraphe</p>
<script language="JavaScript">
[Link](5 + 6);
</script>
</body>
<html>

Sortie JS Sortie

70
Affichage en JS

• JavaScript permet d’afficher les données de différentes manières :

• [Link]() : Écriture dans la console du navigateur. Cette

méthode est pratique pour le débogage du code. Utilisée pour afficher
des données dans la console du navigateur, cette méthode est pratique
pour le débogage du code.

71
 Code HTML / JS
<!DOCTYPE html>
<html>
<body>
<h1>Ceci est une page de test</h1>
<p>C'est un paragraphe</p>
<script language="JavaScript">
[Link](5 + 6);
</script>
</body>
<html>

Sortie
Sortie JS

72
Affichage en JS

• JavaScript permet d’afficher les données de différentes manières :

• [Link]() : Écriture dans la console du navigateur. Cette

méthode est pratique pour le débogage du code. Utilisée pour afficher
des données dans la console du navigateur, cette méthode est pratique
pour le débogage du code.

73
 Code HTML / JS

<!DOCTYPE html>
<html>
<body>
<h1>Ceci est une page de test</h1>
<p>C'est un paragraphe</p>
<button onclick="[Link]()">
Imprimer cette page
</button>
</body>
</html>

74
Sortie

Sortie JS 75
Entrées en JS

• JavaScript permet de récupérer les données de différentes manières :

• Prompts : affiche une boîte de dialogue avec une zone de saisie. La

méthode « prompt() » (boîte d'invite) propose un champ comportant
une entrée à compléter par l'utilisateur avec une valeur par défaut. En
cliquant sur « OK », la méthode renvoie la valeur tapée par l'utilisateur ou
la réponse proposée par défaut. Si l'utilisateur clique sur « Annuler » la
valeur « NULL » est alors renvoyée.

76
Code HTML / JS

77
Sortie

78
Entrées en JS

• JavaScript permet de récupérer les données de différentes manières :

• Formulaires : les contrôles des formulaires comme la zone « <input> ».

Javascript peut récupérer les données de n'importe quel élément html par
la méthode document « getElementById() » qui prend en paramètre
l’identifiant de l’objet.

79
Code HTML / JS

80
Sortie

81
Types de Données en JS

• En JavaScript, on distingue deux familles de types de données :

82
Types de Données en JS

• Une valeur de données primitive est une valeur de données simple.

• L'opérateur « typeof » permet de renvoyer les types primitifs

suivants :

• string
• number
• boolean
• undefined

83
Code HTML / JS

84
Types de Données en JS

• L'opérateur « typeof » permet aussi de renvoyer les types

complexes suivants :

• function

• object

85
Code HTML / JS

86
Types de Données en JS

• Il est possible de convertir le type des variables JavaScript :

• En utilisant les fonctions JavaScript proposées

• Automatiquement par JavaScript lui même

87
Types de Données en JS

• La fonction « Number() » permet de convertir les chaînes en nombres

selon les règles suivantes :

• Les chaînes de caractères contenant des nombres (comme "3.14") sont

converties en nombres (comme 3.14).

• Les chaînes vides sont converties en 0.

• Tout le reste est converti en NaN (Not a Number).

88
Code HTML / JS

89
Types de Données en JS

• L’opérateur unaire « + » permet de convertir une variable en nombre.

• Si la variable de type chaîne ne peut pas être convertie, elle prend la

valeur « NaN ».

90
Code HTML / JS

91
Types de Données en JS

• La fonction « String() » est utilisée pour convertir des nombres en

chaînes de caractères.

• Elle s’applique sur tout type de nombres, littéraux, et expressions.

92
Code HTML / JS

93
Types de Données en JS

• La méthode « toString() » est équivalente.

94
Code HTML / JS

95
Types de Données en JS

• Les fonctions « Number() », « String() », ainsi que la méthode

« toString() » peuvent être utilisées pour convertir des dates.

96
Code HTML / JS

97
Types de Données en JS

• Les fonctions suivantes peuvent être utilisées pour extraire des

données depuis des dates :

98
99
Conditions en JavaScript

• L’instruction « if » est utilisée pour spécifier un bloc de code

JavaScript à exécuter si une condition est vraie.

100
Code HTML / JS

101
Conditions en JavaScript

• L’instruction « else » est utilisée pour spécifier un bloc de code

JavaScript à exécuter si une condition est fausse.

102
Code HTML / JS

103
Conditions en JavaScript

• L’instruction « else » est utilisée pour spécifier un bloc de code

JavaScript à exécuter si la première condition est fausse.

104
Code HTML / JS

105
Conditions en JavaScript

• L’instruction « switch » est utilisée pour sélectionner un choix parmi

plusieurs (pour remplacer les blocs « if … else » multiples).

106
Code HTML / JS

107
Boucles en JavaScript

• JavaScript, comme la plupart des langages de programmation, prend

en charge les types de boucles suivantes :

108
Code HTML / JS

109
Code HTML / JS

110
Code HTML / JS

111
Code HTML / JS

112
Boucles en JavaScript

• L'instruction « break » est utilisée pour sortir brusquement d'une

boucle.

• L'instruction « continue » ignore une itération dans la boucle et

passe à l’'itération suivante.

113
Code HTML / JS

114
Code HTML / JS

115
Fonctions en JavaScript

• Une fonction est définie comme un bloc de code organisé et

réutilisable, créé pour effectuer une action unique.

• Le rôle des fonctions est d’offrir une meilleure modularité au code et

un haut degré de réutilisation.

116
Fonctions en JavaScript

• Une fonction JavaScript est un ensemble d’instructions qui peut

prendre des entrées de l’utilisateur, effectuer un traitement et
renvoyer le résultat à l’utilisateur.

• Une fonction JavaScript est exécutée au moment de son appel.

117
Fonctions en JavaScript

• En JavaScript, il existe 2 types de fonctions :

118
Fonctions en JavaScript

• En JavaScript, une fonction est définie avec le mot clé « function »

suivi du nom de la fonction et des parenthèses « () ».

• Le nom de la fonction doit respecter les mêmes règles que les noms
des variables.

• Les parenthèses peuvent inclure des noms de paramètres séparés par

des virgules.

119
Fonctions en JavaScript

• Le code à exécuter, par la fonction, est placé entre accolades « {} ».

• Exemple :

120
Fonctions en JavaScript

• L’instruction « return » est utilisée pour renvoyer une valeur

(souvent calculée) au programme appelant.

• Lorsque l’instruction « return » est atteinte, la fonction arrête son

exécution.

121
Fonctions en JavaScript

• Le code de la fonction est exécuté quand la fonction est appelée selon

les cas suivants :

• Lorsqu'un événement se produit (clic sur un bouton par exemple).

• Lorsqu'il est invoqué (appelé) à partir d’un autre code JavaScript.

122
Fonctions en JavaScript

• La fonction est appelée en utilisant son nom et, si elle prend des
paramètres, en indiquant la liste de ses arguments :

123
Fonctions en JavaScript

• A l'intérieur de la fonction, les arguments (les paramètres) sont

considérés comme des variables locales.

• Les variables locales ne sont accessibles qu'à partir de la fonction.

124
Fonctions en JavaScript

125
Exceptions en JavaScript

• Lorsqu’une erreur se produit, JavaScript arrête et crée un objet

d'erreur error avec deux propriétés nom et un message (varie selon le
navigateur) → JavaScript lance une exception, ont dit qu’une erreur
est générée.

126
Exceptions en JavaScript

• Pour gérer les exceptions en JS on utilise les mots clés suivants :

• « try » : teste un bloc de code pour les erreurs.

• « catch » : gère l'erreur.
• « throw » : crée des erreurs personnalisées.
• « finally » : permet l'exécution de code, après try et catch, quel que
soit le résultat.

127
Exceptions en JavaScript

• Syntaxe :

128
Exceptions en JavaScript

• Exemple :

129
Objets en JavaScript

• Un objet en JavaScript permet de représenter une entité du monde réel

à l’aide de :

• propriétés → caractéristiques

• méthodes → comportements

130
Objets en JavaScript

• Le mot-clé « class » (introduit par la norme « ES6 ») permet de

présenter les classes d’objets avec une syntaxe plus claire, ainsi que de
garantir une meilleure lisibilité, et une structuration proche des
langages objets classiques.

• Une classe sert de modèle pour créer plusieurs objets.

131
132
Objets en JavaScript

• Il est possible d’accéder aux éléments d’un objet créé de la manière

habituelle « [Link]été » pour les propriétés, ou
« objet.méthode(params) » pour les méthodes :

133
Objets en JavaScript

• Il est aussi possible de modifier les attributs d’un objet créé de la

manière habituelle « [Link]été = nouvelleValeur » :

[Link] = 150;
[Link] = 380;

134
Objets en JavaScript

• Il est aussi possible d’utiliser la boucle « for … of » pour parcourir

les éléments d’un tableau d’objets :

135
Objets JSON

• JSON (ou JavaScript Object Notation) est un format d'échange de

données qui est facile à utiliser par les humains et les machines.

• Ce format est utilisé pour échanger les valeurs entre les applications
(clients) et les serveurs.

• Sa forme complète est en notation d'objet JavaScript.

136
Objets JSON

• JSON est un format :

• Facile à utiliser : L'API JSON offre une mise en œuvre avancée des
différents types et structures de données, ce qui aide à simplifier les cas
d'utilisation.

• Performant et rapide : JSON consomme très peu de mémoire.

• Gratuit : La bibliothèque JSON est open source et gratuite.

137
Objets JSON

• JSON est un format :

• Indépendant : L'API JSON ne dépend d’aucune autre bibliothèque.

• Pris en charge : Par les navigateurs, les principaux frameworks JS, les
différents moyens de transmission des données, ainsi que par les
langages de programmation modernes.

138
Objets JSON

• La syntaxe d’un objet JSON est comme suit :

139
Objets JSON

• En JavaScript, les méthodes utilisées pour convertir des objets JSON

sont :

• « [Link](param) » : Permet de convertir JSON vers un objet

JavaScript.
• « [Link](param) » : Permet de convertir des objets
JavaScript vers des données JSON.

• Exemples :

140
Objets JSON

141
Manipuler les éléments d’une
page avec DOM

142
Objectifs

• Dans cette section, on va :

• Comprendre l’arbre DOM, les nœuds parents et enfants

• Connaître les bases de la manipulation du DOM en JavaScript
• Manipuler les éléments HTML

143
Arbre DOM

• DOM (Document Object Model) est une interface de

programmation normalisée par le W3C.

• Son rôle est d’accéder au contenu du navigateur web, et le modifier, en

utilisant des scripts

• Le DOM représente un document HTML sous forme d’un arbre

d'objets (un paragraphe, une image, un style, etc…).

144
Arbre DOM

• La modification du document HTML à l'aide du DOM consiste alors à

ajouter ou supprimer des nœuds de l'arbre.

• DOM offre un ensemble de méthodes pour accéder aux éléments

HTML.

145
Arbre DOM

• Avec le modèle objet, JavaScript peut créer du contenu HTML

dynamique en :

• Modifiant / Ajoutant / Supprimant les éléments HTML de la page.

• Modifiant / Ajoutant / Supprimant les attributs des éléments HTML

existants.

146
Arbre DOM

• Avec le modèle objet, JavaScript peut créer du contenu HTML

dynamique en :

• Modifiant les styles CSS de la page.

• Réagissant aux événements HTML dans la page.

• Exemple :

147
Code HTML

148
Arbre DOM

149
Objet « document »

• L'objet document correspond à l’élément « <html> » de la page Web.

• La variable « document » est la racine du DOM.

• L’objet document dispose d’un ensemble de méthodes et de propriétés

permettant d’accéder et de manipuler le code HTML.

150
Objet « document »

• Cette variable est un objet et dispose des propriétés « head » et

« body » qui permettent d'accéder respectivement aux éléments
« <head> » et « <body> » de la page.

151
Objet « document »

• Il est possible de chercher des éléments HTML grâce aux méthodes

suivantes :

152
153
Objet « document »

• Il est aussi possible d’ajouter ou de supprimer des éléments HTML

grâce aux méthodes suivantes :

154
155
Objet « document »

• Un élément DOM peut avoir des attributs comme suit :

156
157
Navigation dans le DOM

• Les éléments du DOM sont appelés des nœuds, qui sont en relation
hiérarchique sous forme d’un arbre Le nœud supérieur est appelé
racine (ou nœud racine).

• La relation entre les nœuds peut être qualifiée de relation « Parent-

Child » lorsque ces nœuds peuvent avoir des ascendants et des
descendants.

158
Navigation dans le DOM

• Les nœuds ascendants sont les nœuds qui sont parents d’un nœud (ou
parents d’un nœud parent).

• Nœuds descendants sont les nœuds qui sont enfants d’un nœud (ou
enfants d’un nœud enfant)

• Chaque nœud a exactement un parent, sauf la racine.

159
Navigation dans le DOM

• Un nœud peut avoir plusieurs enfants

• On peut aussi avoir une relation « Siblings » qui fait correspondre des
nœuds frères, càd les nœuds ayant le même parent.

160
Navigation dans le DOM

<ul>
<li>1er élément</li>
<li>2ème élément
<p>paragraphe</p>
• Exemple : <a>Lien</a>
</li>
<li>3ème élément</li>
</ul>

161
Relation entre nœuds

162
Navigation dans le DOM

• Chaque objet du DOM a une propriété « nodeType » qui indique son

type.

• La valeur de cette propriété est :

• « document.ELEMENT_NODE » pour un nœud « élément » (balise

HTML).
• « document.TEXT_NODE » pour un nœud textuel.

163
Navigation dans le DOM

• Exemple :

164
Navigation dans le DOM

• Chaque objet du DOM de type « ELEMENT_NODE » possède une

propriété « childNodes » qui correspond à une collection de ses
différents enfants :

• On peut connaître la taille de la collection avec la propriété « length ».

• On peut accéder aux éléments grâce à leur indice.

• On peut parcourir la collection avec une boucle « for ».

165
Navigation dans le DOM

• Les retours à la ligne et les espaces entre les balises dans le code
HTML sont considérés par le navigateur comme des nœuds textuels.

166
Navigation dans le DOM

• Exemple :

167
Navigation dans le DOM

• Chaque objet du DOM possède une propriété « parentNode » qui

renvoie son nœud parent sous la forme d'un objet DOM.

• Le parent de l’élément « document » est « null ».

168
Navigation dans le DOM

• Exemple :

169
Navigation dans le DOM

170
Navigation dans le DOM

171
172
173
174
175
176
177
Navigation dans le DOM

• On peut chercher les éléments directement par nom en utilisant les

méthodes suivantes :

• « [Link]() »
• « [Link]() »
• « [Link]() »
• « [Link]() »

178
Navigation dans le DOM

• La méthode « getElementById() » renvoie un objet qui représente

l’élément dont la valeur de l’attribut « id » correspond à la valeur
spécifiée en argument.

179
Navigation dans le DOM

• La méthode « getElementsByClassName() » renvoie une liste des

éléments possédant un attribut « class » qui correspond à la valeur
spécifiée en argument.

180
Navigation dans le DOM

• La méthode « getElementsByTagName() » permet de sélectionner

des éléments en fonction de leur nom.

181
Navigation dans le DOM

• L’API DOM fournit également des propriétés permettant d’accéder

directement à certains éléments du document.

• Parmi ces propriétés on trouve :

• La propriété « body » qui retourne le nœud représentant l’élément body.

• La propriété « head » qui retourne le nœud représentant l’élément head.

182
Navigation dans le DOM

• Parmi ces propriétés on trouve :

• La propriété « links » qui retourne une liste de tous les éléments « a »

ou « area » possédant un attribut href avec une valeur.

• La propriété « title » qui retourne le titre (le contenu de l’élément title )

du document.

183
Navigation dans le DOM

• Parmi ces propriétés on trouve :

• La propriété « url » qui renvoie l’URL du document sous forme d’une

chaine de caractères.

• La propriété « scripts » qui retourne une liste de tous les éléments

script du document.

• La propriété « cookie » qui retourne la liste de tous les cookies associés

au document sous forme d’une chaine de caractères.

184
Navigation dans le DOM

• Exemple :

185
Manipulation des éléments DOM

• La méthode « createElement » permet de créer de nouveaux

éléments dans le document.

• La variable « element » renvoie la référence de l'élément crée.

186
Manipulation des éléments DOM

• Exemple :

187
Manipulation des éléments DOM

• Pour ajouter un élément à l’arborescence du DOM (après l’avoir créé),

il faut l’attacher à un élément parent.

• La méthode « append() » insère un objet en tant que dernier enfant

d’un élément parent.

188
Manipulation des éléments DOM

• Exemple :

189
Manipulation des éléments DOM

• La méthode « removeChild() » supprime un élément de la structure

du DOM.

• Le nœud à supprimer est passé en argument à la méthode.

• Une référence vers le nœud supprimé est retournée à la fin.

190
Manipulation des éléments DOM

• Exemple :

191
Manipulation des éléments DOM

• La méthode « replaceChild() » remplace un nœud par un autre

nœud dans le DOM.

• Une référence vers le nœud remplacé est retournée à la fin.

192
Manipulation des éléments DOM

• Exemple :

193
Manipulation des éléments DOM

• La propriété « .style » appliquée sur un élément permet de changer

les styles CSS.

• Exemple :

194
Manipulation des éléments DOM

195
Manipulation des éléments DOM

• La propriété « .className » permet de changer les paramètres de

style d’un élément HTML en lui attribuant une nouvelle classe dont le
nom est passé à l’élément sélectionné.

• Exemple :

196
Manipulation des éléments DOM

197
Gestion des événements
utilisateur

198
Objectifs

• Dans cette section, on va :

• Comprendre la notion d’événement pour gérer l’interactivité

• Gérer les éléments d’un formulaire

199
Qu’est-ce qu’un événement ?

• Un événement est une action effectuée soit par l'utilisateur soit par le
navigateur.

• Il existe plusieurs types d’événements événement de souris, un

événement de clavier, un événement de document, etc…

200
Qu’est-ce qu’un événement ?

201
Qu’est-ce qu’un événement ?

• Javascript offre des mécanismes de réaction aux événements.

• Les événements sont généralement traités par une fonction, qui

s'exécute après que l'événement se produit.

• Il existe deux terminologies lorsque nous rencontrons des événements

dans le développement web :

202
Qu’est-ce qu’un événement ?

203
Qu’est-ce qu’un événement ?

• On distingue deux méthodes pour la gestion des événements en

JavaScript :

• Utilisation de l'attribut HTML : Attacher directement un événement à un

élément HTML en tant qu'attribut.

• Appel de la méthode « addEventListener() » : Associer l’événement

à l’élément en utilisant la méthode « addEventListner() ».

204
Méthode « addEventListener() »

• La méthode « addEventListener() » appliquée sur un élément

DOM, lui ajoute un gestionnaire pour un événement particulier.

• Cette fonction sera appelée à chaque fois que l'événement se produit

sur l'élément.

• Il est possible d’ajouter plusieurs événements à un même élément.

205
Méthode « addEventListener() »

• Syntaxe :
[Link](evenement, fonction);

• « element » : L’élément HTML auquel l’événement est attaché.

• « evenement » : Le nom de l’événement.

• « fonction » : La fonction qui va gérer l’événement.

206
Méthode « addEventListener() »

• Exemple 1 :

207
Méthode « addEventListener() »

• Exemple 2 :

208
Méthode « addEventListener() »

• La méthode « addEventListener() » permet d’ajouter plusieurs

méthodes identiques ou différentes à un seul élément.

• Ainsi, il est possible d’ajouter plus de deux écouteurs d'événement

pour le même événement.

• Exemple :

209
Méthode « addEventListener() »

210
Méthode « addEventListener() »

• La méthode « addEventListener() » permet aussi d’attacher

plusieurs types d'événements différents au même élément HTML.

• Exemple :

211
212
Méthode « addEventListener() »

• La méthode « removeEventListener() » permet de supprimer

l'écouteur d'événement d’un élément ou un objet HTML

• Exemple :

213
214
Événements de la Souris

• Les événements de la souris sont déclenchés quand elle interagit avec

les éléments de la page.

• Les événements DOM définissent neuf types d’événements de la

souris « mousedown », « mouseup » et « click ».

215
Événements de la Souris

• Quand la souris est enfoncée, trois événements se déclenchent dans

l'ordre suivant :

• « mousedown » : se déclenche par appui sur le bouton gauche de la

souris.

• « mouseup » : se déclenche lorsqu'on relâche le bouton de la souris.

216
Événements de la Souris

• Quand la souris est enfoncée, trois événements se déclenchent dans

l'ordre suivant :

• « click » : se déclenche lorsqu’un événement « mousedown » et un

« mouseup » sont détectés sur l'élément.

217
Événements de la Souris

218
Événements de la Souris

• L'événement « dblclick » se déclenche lorsqu’on double clique sur

un élément en utilisant la souris.

• Un événement « dblclick » est déclenché par deux événements

« click ».

219
Événements de la Souris

• L'événement « dblclick » a quatre événements déclenchés dans

l'ordre suivant :

• « mousedown »
• « mouseup »
• « click »
• « dblclick »

220
221
Événements de la Souris

• L'événement « mousemove » se déclenche à plusieurs reprises

lorsqu’on déplace le curseur de la souris autour d'un élément.

• Pour ne pas ralentir la page, le gestionnaire de l’événement

« mousemove » n’est enregistré qu’en cas de besoin, et doit être
supprimé dès qu'il n'est plus utilisé.

222
Événements de la Souris

• L'événement « mouseover » se déclenche lorsque le curseur de la

souris se déplace à l'extérieur d’un élément.

• L’événement « mouseout » se déclenche lorsque le curseur de la

souris survole un élément, puis se déplace vers autre élément.

223
Événements de la Souris

• L'événement « mouseenter » se déclenche lorsque le curseur de la

souris se déplace de l'extérieur à l'intérieur d'un élément.

• L’événement « mouseleave » se déclenche lorsque le curseur de la

souris se déplace de l'intérieur à l'extérieur d'un élément.

224
Événements de la Souris

• Pour enregistrer un gestionnaire d’événement de la souris, on passe

par les étapes suivantes :

• Étape 1 : Sélectionner l'élément concerné par l’événement à l'aide des

méthodes « querySelector() » ou « getElementById() ».

• Étape 2 : Enregistrer l'événement de la souris à l'aide de la méthode

« addEventListener() ».

225
Événements de la Souris

• Exemple :

226
Événements de la Souris

• L'objet « event » transmis au gestionnaire d'événements de la souris a

une propriété appelée « button » qui indique quel bouton de la
souris a été enfoncé pour déclencher l'événement.

• Chaque bouton de la souris est représenté par un nombre :

227
228
Événements de la Souris

• Les propriétés « screenX » et « screenY » de l'événement passées au

gestionnaire d'événements de la souris renvoient les coordonnées
(dans l’écran) correspondant à l'emplacement de la souris par rapport
à l'ensemble de l'écran.

229
Événements de la Souris

• Les propriétés « clientX » et « clientY » fournissent les

coordonnées horizontales et verticales dans la zone cliente de
l'application où l'événement de la souris s'est produit.

230
231
Événements de la Souris

• Exemple :

232
233
234
Événements du Clavier

• Il existe trois principaux événements dans un clavier :

• « keydown » : Déclenché lorsqu’on appuie sur une touche du clavier. Cet

événement se déclenche plusieurs fois pendant que la touche est
enfoncée.

• « keyup » : Déclenché lorsqu’on relâche une touche du clavier.

235
Événements du Clavier

• Il existe trois principaux événements dans un clavier :

• « keypress » : Déclenché lorsqu’on appuie sur les caractères comme

« a », « b », ou « c », et pas sur les touches fléchées gauche, droite, etc…
Cet événement se déclenche également à plusieurs reprises lorsqu’on
maintient la touche du clavier enfoncée.

236
Événements du Clavier

• Pour enregistrer un gestionnaire d’événement du clavier, on passe par

les étapes suivantes :

• Étape 1 : Sélectionner l'élément sur lequel l'événement clavier se

déclenchera (généralement d'une zone de texte).

• Étape 2 : Enregistrer l'événement du clavier à l'aide de la méthode

« addEventListener() ».

237
238
Soumission d’un Formulaire

• La méthode « submit() » du DOM est utilisée pour soumettre les

données du formulaire à l'adresse spécifiée dans son attribut
« action ».

• Cette méthode se comporte comme le bouton de soumission du

formulaire et ne prend pas de paramètres.

• Syntaxe :

239
Soumission d’un Formulaire

• Exemple :

240
241
Interruption d’un Formulaire

• La méthode « preventDefault() » empêche l’exécution de l’action

par défaut de l’événement.

• La méthode « [Link]() » renvoie à l’URL

précédente dans l’historique.

• Exemple :

242
243
Validation des Données

• La validation des données consiste à s'assurer que l'entrée de

l'utilisateur est conforme aux données attendues.

• Parmi les types de vérifications à faire on cite :

• L'utilisateur a-t-il rempli tous les champs obligatoires ?

244
Validation des Données

• Parmi les types de vérifications à faire on cite :

• L'utilisateur a-t-il saisi une date valide ?

• L'utilisateur a-t-il saisi du texte dans un champ numérique ?

• etc…

245
Validation des Données

• On distingue deux types de validation :

• Validation Côté Serveur : Effectuée par un serveur Web, une fois que les
données sont envoyées au serveur.

• Validation Côté Client : Effectuée par un navigateur Web, avant que les
données ne soient envoyées à un serveur Web.

246
Validation des Données

• HTML5 a introduit un nouveau concept de validation HTML qu’on

appelle « la validation des contraintes », et qui est basée sur :

247
Validation des Données

248
Validation des Données

249
Validation des Données

• Exemple :

250
251