Chapitre 4: JavaScript

UP Web

AU: 2022/2023
Plan

HTML & JavaScript

BOM

DOM

Les évènements

2
Objectifs

• Manipuler le DOM.
• Différencier entre les événements.
• Ecrire un script en utilisant les fonctions prédéfinis,
événement…

Prérequis
• HTML

3
HTML & JavaScript
Console • Firefox: Ctrl+Shift+K
développeur • Chrome / Edge: Ctrl+Shift+I

• <a href="#" onclick="alert('Vous avez cliqué !'); return

Balise HTML false;">Cliquez-moi !</a>

Code HTML
• <script> … </script>
(interne)

Fichier séparé
• <script src="script.js"></script>
(externe)
4
BOM: Browser Object Model

5
DOM: Document Object Model (1/16)

• Structure arborescente créée par le navigateur.

• Facilite l’accès à la structure HTML.
• Le navigateur utilise le DOM pour appliquer le style et
corriger les éléments.
• Le développeur utilise le DOM pour manipuler la page.

6
 DOM: Document Object Model (2/16)
❑ Un DOM est un arbre avec des nœuds.
❑ Chaque nœud est un objet pour lequel il existe des
méthodes et des propriétés (qu’on peut « lire» ou
« modifier »).

7
 DOM: Document Object Model (3/16)
❑ Exploration de l’arbre DOM: Exemple

8
 DOM: Document Object Model (4/16)
❑ Exploration de l’arbre DOM: Exemple
❑ Les principaux types de nœuds sont:
🡺 Root Element: la racine de
document
🡺 Element: les balises standards
🡺 Text: le contenu d’un élément
🡺 Attribute: les attributs des balises

9
 DOM: Document Object Model (5/16)
❑ Exploration de l’arbre DOM: Exemple

❑ La navigation dans l'arbre se fait en appelant:

🡺 Le parent d’un nœud
🡺 Les enfants d’un nœud (child)
🡺 Les attributs d’un nœud
🡺 Les nœuds-frères (sibling)

10
 DOM: Document Object Model (6/16)
❑ Exploration de l’arbre DOM:
Exemple Parent

Child

Sibling Attribut

11
 DOM: Document Object Model (7/16)
❑ Exploration de l’arbre DOM: Propriétés
Propriétés Explication
childNodes La liste des nœuds enfants
firstChild Le premier nœud enfant
lastChild Le dernier nœud enfant
nextSibiling Le prochain nœud du même niveau
parentNode Le nœud parent
previousSibiling Le nœud précédent du même niveau
nodeName Le nom du nœud
nodeValue La valeur ou contenu du nœud
nodeType Le type du nœud
innerHTML Le contenu littéral du nœud

12
 DOM: Document Object Model (8/16)
❑ Recherche dans l’arbre DOM: Méthodes

❑ Pour manipuler les éléments de la page il faut au préalable les

sélectionner.
❑ La sélection d’ éléments peut se faire:
🡺 par son attribut id
🡺 par son attribut class
🡺 par sa balise
🡺 par un sélecteur CSS
🡺 par son attribut name 13
 DOM: Document Object Model (9/16)
❑ Recherche dans l’arbre DOM: Méthodes
Méthodes Explication
querySelector() Retourne le premier élément
dans le document
correspondant au sélecteur(s)
spécifié(s) ou null
querySelectorAll Retourne uncontenant la liste
() des éléments du document
qui correspondent au
sélecteur(s) spécifié(s)
getElementById( Renvoie un objet (élément)
) qui représente l’élément
portant l’id spécifié.
Syntaxe
element = document.querySelector
(sélecteur);
Nom =
document.querySeclector(« #nom))
document.querySelector(.prenom)
element = document.querySelectorAll
(sélecteur);
element = document.getElementById
(id);
Element=document.getElementById(‘ 14
 DOM: Document Object Model (10/16)
❑ Recherche dans l’arbre DOM: Méthodes

Méthodes Explication Syntaxe

getElementsByTa Renvoie un tableau qui contient elements =
gName() tous les éléments ayant un type document.getElementsByTagName
donné. (input);//

getElementsByCla Renvoie un tableau qui contient elements =

ssName() tous les éléments portant le document.getElementsByClassName
nom de classe spécifié. (‘prenom’);
getElementById
getElementsByNa Renvoie un tableau qui contient elements =
me() tous les éléments portant le document.getElementsByName (‘test’);
« name » spécifié.

15
 DOM: Document
Object Model (11/16)
❑ Accès aux objets du formulaire

Window.document.forms[n].name_d’objet

1 2 3
Avec:
🡺 forms[n] (c’est le tableau des formulaires) peut être
remplacé par le nom de la balise form ou par
1
getElementById(id de la balise form).

🡺 Puisque Window occupe la première place dans

l’hiérarchie, il devient facultatif. 3 2
16
 DOM: Document Object Model (12/16)
❑ Accès aux éléments de Type « text »
❖ La principale action en JavaScript sur une zone de texte est de manipuler son
contenu.
❖ Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

Résultat

17
 DOM: Document Object Model (13/16)
❑ Accès aux éléments de Type « radio »
❖ Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked

Résultat

18
 DOM: Document Object Model (14/16)
❑ Manipulation de l’arbre DOM
❑ DOM permets de ajouter ou de supprimer des nœuds quelconques.
❑ L'ajout d'un nœud se fait en deux étapes:
1. Création d’un nœud
2. Quand il est prêt, il sera inséré dans l'arbre DOM.
Méthodes Explication
.
createElement() Permet de créer un nouvel élément HTML dans le document
createTextNode() Permet de créer un nœud texte

createAttribute() Permet de créer un noeud attribut

appendChild() Permet d’ajouter l’élément créé au document comme le dernier
nœud enfant de l’élément parent.
19
 DOM: Document Object Model (15/16)
❑ Manipulation de l’arbre DOM
❑ DOM permets de rajouter ou de supprimer des nœuds quelconques.
❑ La suppression d'un nœud se fait directement.

. Méthodes Explication
removeChild() Permet de supprimer un nœud.

20
 DOM: Document Object Model (16/16)
❑ Manipulation de l’arbre DOM: Exemple d’application
On souhaite ajouter un élément HTML <h1>:.

Résultat

OK

21
Les évènements (1/14)
• Un événement est un signal généré suite à une action sur les
éléments de l'interface DOM visualisés dans un navigateur.
• Par exemple
• un clic de souris,
• le curseur de la souris qui survole une zone,
• le clic sur un bouton
• la saisie d'un texte dans un formulaire

22
Les évènements (2/14)
Un événement en JavaScript est représenté dans une balise HTML
en utilisant une action et une fonction que l'on nomme un
callback .

L'action: une propriété qui représente le gestionnaire

d'évènement de l'élément courant ( onClick , OnMouseMove ...)

La fonction callback: est appelée à chaque fois que l'action

sur un élément est exécutée.

23
Les évènements (3/14)

24
Les évènements (4/14)
Gérer les événements avec la méthode JavaScript
element.addEventListener(event, function)

• La méthode addEventListener() appelée par un élément, le

document lui-même et une Window ou par n'importe quel
objet prenant en charge les évènements.
• Lorsque l'événement se produit, la fonction callback est
exécutée en lui passant un argument. Le code est placé au
niveau de cette fonction.

25
 Les évènements (5/14)
Gérer les événements avec la méthode JavaScript
element.addEventListener(event, function)

Chaine de caractères qui Spécifie la fonction à exécuter

spécifie le nom de l'événement. lorsque l'événement se produit.

26
 Les évènements (6/14)
Nom de l’événement Description
load Fin de chargement de la page web
click Clic sur un element
dbclick Double clic sur un element
keydown Une touche est appuyée
Exemples keypress Une touche est maintenue enfoncée
d’événements keyup Une touche est relachee
mouseenter Le curseur entre au dessus d’un élément
mouseleave Le curseur quitte l’element
select Selection d’une option dans un select
change Changement de valeur sur un select, un checkbox
Submit Soumission d’un formulaire
focus L’élément reçoit le focus
blur L’élément perd le focus 27
Les évènements (7/14)
Load
L’événement load se produit lorsque le navigateur a terminé le
chargement de la page.

28
Les évènements (8/14)
Click
L’événement click se produit lorsque l’utilisateur clique sur un
élément ,un bouton, un formulaire ou sur le document .

29
Les évènements (9/14)
KeyUp / KeyDown
L’événement KeyUp se produit au moment où l’utilisateur relâche
une touche du clavier.
L’événement KeyDown se produit au moment où l’utilisateur
enfonce ou clique une touche du clavier.

30
Les évènements (10/14)
MouseLeave
L’événement MouseLeave ne sera exécuté que lorsque le curseur
se déplace vers un élément.

31
Les évènements (11/14)
Change
L’événement Change se produit lorsque l’utilisateur modifie la
valeur d’un élément ( Select / Text / TextArea ).

32
Les évènements (12/14)
Submit
L’événement Submit se produit lorsque l’utilisateur envoie des
données à partir d’un formulaire.

Remarque: on utilise e.preventDefault() pour empêcher le formulaire

de s'envoyer au serveur.

33
Les évènements (13/14)
Submit
L’événement Submit se produit lorsque l’utilisateur envoie des
données à partir d’un formulaire.

34
Les évènements (14/14)
Blur
L’événement Blur se déclenche lors de la perte de focus d'un
élément.

35
Merci de votre attention