École Centrale des Logiciels Libres et de Télécommunications

Support Cours JavaScript avancé.

Présenté par : Sous la supervision du :
Ahamadi Nasry Pr. Samuel Ouya

Centre d'Informatique et de Recherche de

Institut Supérieur de Technologie de
l'Armée et de la Sécurité (CIRAS)
l'Université de Bangui (IST/UB)
 Table des matières
Chapitre 1 : Introduction à la programmation événementielle et au DOM ................................ 1

1.1 Présentation : ............................................................................................................... 1

1.2 Qu'est-ce qu'un événement en JavaScript ? ................................................................. 1

1.2.1 Exemple :.............................................................................................................. 1

1.2.2 Résultat : ............................................................................................................... 1

1.2.3 Dans cet exemple : ............................................................................................... 1

1.3 Introduction au modèle événementiel (Event-Driven Programming) ......................... 2

1.3.1 Concepts clés : ...................................................................................................... 2

1.3.2 Exemple avec addEventListener : ........................................................................ 2

1.3.3 Résultat : ............................................................................................................... 2

1.3.4 Importance de la programmation événementielle dans les applications modernes

2

1.4 Introduction au DOM (Document Object Model) ....................................................... 3

1.4.1 Qu'est-ce que le DOM ? ....................................................................................... 3

1.4.2 Structure du DOM : .............................................................................................. 3

1.4.3 Représentation DOM : ......................................................................................... 4

1.4.4 Relation entre HTML, CSS, et JavaScript ........................................................... 4

1.4.5 Vue d’ensemble de la manipulation des éléments HTML via le DOM ............... 4

1.4.6 Exemple pratique : Modifier un texte via le DOM .............................................. 5

1.4.7 Résultat ................................................................................................................. 5

1.5 Outils de développement pour la gestion des événements et le DOM ........................ 6

1.5.1 Console JavaScript des navigateurs ..................................................................... 6

1.5.2 Exemple : Tester un événement dans la console .................................................. 6

Chapitre 2 : Les bases de la programmation événementielle ..................................................... 8

2.1 Gestion des événements en JavaScript ........................................................................ 8

AHAMADI NASRY I
 2.2 Attacher des gestionnaires d’événements .................................................................... 8

2.2.1 Attributs HTML (onclick) .................................................................................... 8

2.2.2 Exemple :.............................................................................................................. 8

2.2.3 Résultat : ............................................................................................................... 8

2.2.4 Avantages : ........................................................................................................... 8

2.2.5 Inconvénients : ..................................................................................................... 9

2.2.6 Méthodes modernes : addEventListener .............................................................. 9

2.2.7 Exemple :.............................................................................................................. 9

2.2.8 Différences entre onclick et addEventListener .................................................. 10

2.2.9 Faire le bon choix : ............................................................................................. 10

2.2.10 Exemple comparatif : ......................................................................................... 11

2.2.11 Résultat : ............................................................................................................. 11

2.2.12 Supprimer un gestionnaire avec removeEventListener ...................................... 12

2.3 Types d’événements courants et leurs usages ........................................................... 13

2.3.1 Gestion des événements de clavier : Keydown, Keyup, Keypress .................... 13

2.3.1.1 keydown ...................................................................................................... 13

2.3.1.2 keyup ........................................................................................................... 14

2.3.1.3 keypress (Déprécié)..................................................................................... 15

2.3.2 Comparaison entre keydown, keyup et keypress ............................................... 16

2.3.3 Événements souris : click, dblclick, mouseenter, mouseleave, mousemove ..... 17

2.3.3.1 Événement click .......................................................................................... 17

2.3.3.2 Événement dblclick ..................................................................................... 18

2.3.3.3 Événement mouseenter ............................................................................... 18

2.3.3.4 Événement mouseleave ............................................................................... 19

2.3.3.5 Événement mousemove .............................................................................. 19

2.3.4 Résumé et cas d'utilisation ................................................................................. 20

2.3.5 Événements de formulaire en JavaScript ........................................................... 21

AHAMADI NASRY II
 2.3.5.1 L'événement submit .................................................................................... 21

2.3.5.2 L'événement change .................................................................................... 22

2.3.5.3 L'événement focus ...................................................................................... 23

2.3.5.4 L'événement blur ......................................................................................... 24

2.3.5.5 L'événement input ....................................................................................... 25

2.3.6 Différences entre tous ces évènements ............................................................... 26

2.3.7 Les évènements : chargement/déchargement de page ........................................ 27

2.3.7.1 L'événement load ........................................................................................ 27

2.3.7.2 L'événement beforeunload .......................................................................... 27

2.3.7.3 L'événement unload .................................................................................... 28

2.3.8 Différences entre tous ces évènements ............................................................... 29

2.3.9 Événements DOM : DOMContentLoaded, resize, scroll. .................................. 30

2.3.9.1 L'événement DOMContentLoaded ............................................................. 30

2.3.9.2 L'événement resize ...................................................................................... 31

2.3.9.3 L'événement scroll ...................................................................................... 32

2.3.10 Différences entre tous ces évènements ............................................................... 33

AHAMADI NASRY III

 1 Chapitre 1 : Introduction à la programmation
événementielle et au DOM
1.1 Présentation :
Le JavaScript est essentiel pour dynamiser vos pages HTML grâce à la programmation
événementielle. En apprenant à capter des événements comme des clics de bouton et des entrées
de formulaire, vous pourrez exécuter des actions et afficher des messages.

1.2 Qu'est-ce qu'un événement en JavaScript ?

Un événement est une action ou une occurrence détectée par le navigateur, déclenchée par un
utilisateur ou par le système. Par exemple :

Un clic de souris sur un bouton.

Une touche pressée sur un clavier.
Une image ou une page web qui finit de se charger.

1.2.1 Exemple :

1.2.2 Résultat :

1.2.3 Dans cet exemple :

L’événement est le clic sur le bouton.
L’action associée est l’affichage d’une alerte.

AHAMADI NASRY 1
1.3 Introduction au modèle événementiel (Event-Driven Programming)
Le modèle événementiel est une approche dans laquelle le flux de l'application est déterminé
par des événements externes comme des clics ou des frappes au clavier.

1.3.1 Concepts clés :

Écouteur d'événement : Une fonction attachée à un événement spécifique.
Gestionnaire d'événement : La logique exécutée lorsqu’un événement est déclenché.
Cycle de vie d'un événement :
 L’événement est détecté.
 Le gestionnaire associé est exécuté.

1.3.2 Exemple avec addEventListener :

1.3.3 Résultat :

1.3.4 Importance de la programmation événementielle dans les applications

modernes
La programmation événementielle est essentielle pour créer des interfaces interactives et
dynamiques :

AHAMADI NASRY 2
 Exemple : Lorsqu’un utilisateur saisit son mot de passe, un événement peut vérifier
automatiquement sa force en temps réel.
Les Framework modernes comme React, Angular ou Vue.js utilisent massivement ce
modèle.

1.4 Introduction au DOM (Document Object Model)

1.4.1 Qu'est-ce que le DOM ?
Le DOM est une interface de programmation qui représente la structure d'une page HTML ou
XML sous forme d’un arbre hiérarchique. Chaque élément HTML devient un nœud ou un objet
dans cet arbre.

1.4.2 Structure du DOM :

AHAMADI NASRY 3
1.4.3 Représentation DOM :

1.4.4 Relation entre HTML, CSS, et JavaScript

HTML : Définit la structure et le contenu de la page.

CSS : Applique le style (couleurs, polices, disposition).

JavaScript : Manipule dynamiquement le contenu, le style et la structure via le DOM.

1.4.5 Vue d’ensemble de la manipulation des éléments HTML via le DOM

Avec JavaScript, nous pouvons :

Sélectionner des éléments :

Exemple : document.getElementById(), document.querySelector().

Modifier du contenu :

AHAMADI NASRY 4
Exemple : Changer le texte d'un élément.

Modifier les styles :

Exemple : Ajouter une couleur.

Créer et supprimer des éléments :

Exemple : Ajouter une liste dynamique.

1.4.6 Exemple pratique : Modifier un texte via le DOM

1.4.7 Résultat

AHAMADI NASRY 5
1.5 Outils de développement pour la gestion des événements et le DOM
1.5.1 Console JavaScript des navigateurs
La console JavaScript est accessible depuis les outils de développement des navigateurs
(généralement via F12 ou Ctrl + Shift + I).

Elle permet de :

 Tester des bouts de code JavaScript.

 Vérifier les erreurs liées aux événements ou au DOM.

1.5.2 Exemple : Tester un événement dans la console

Résultat :

AHAMADI NASRY 6
AHAMADI NASRY 7
 2 Chapitre 2 : Les bases de la programmation
événementielle
2.1 Gestion des événements en JavaScript
En JavaScript, les événements jouent un rôle essentiel dans l'interaction entre l'utilisateur et
l'interface de navigation. Un événement peut être une action de l'utilisateur (clic, déplacement
du curseur, frappe au clavier, etc.) ou une action du navigateur (chargement d'une page,
fermeture d'une fenêtre, etc.).

2.2 Attacher des gestionnaires d’événements

2.2.1 Attributs HTML (onclick)
C'est la méthode la plus simple et la plus ancienne pour associer un événement à un élément.
Le gestionnaire est directement écrit dans l’attribut HTML.

2.2.2 Exemple :

2.2.3 Résultat :

2.2.4 Avantages :
Syntaxe concise : attribue des gestionnaires directement en HTML, réduisant ainsi le
code en JavaScript.
Facile à lire : l'objectif du gestionnaire est clair dans l'élément.

AHAMADI NASRY 8
 Familier avec les développeurs connaisseurs de HTML : s'aligne sur la gestion
traditionnelle des événements HTML.

2.2.5 Inconvénients :
Limité à un gestionnaire par événement : vous ne pouvez pas attacher plusieurs
gestionnaires au même événement en utilisant onclick.
Peut conduire à un mélange de logique : mélanger JavaScript et HTML peut réduire
la maintenabilité du code et la séparation des préoccupations.
Pas aussi flexible pour la gestion des événements dynamiques : l'ajout ou la
suppression de gestionnaires après le chargement de la page nécessite une manipulation
DOM.

2.2.6 Méthodes modernes : addEventListener

Cette méthode permet d'ajouter un gestionnaire d'événements à un élément. Elle est flexible,
car elle permet d’ajouter plusieurs gestionnaires à un seul événement.

2.2.7 Exemple :

Résultat :

AHAMADI NASRY 9
2.2.8 Différences entre onclick et addEventListener

Aspect Onclick addEventListener

Nombre de gestionnaires Remplace l'ancien Permet plusieurs
gestionnaire. gestionnaires.
Flexibilité Moins flexible. Plus flexible (support de
plusieurs options).
Compatibilité Méthode ancienne, toujours Méthode moderne et
supportée. recommandée.

2.2.9 Faire le bon choix :

Quand l'utiliser onclick:
 Pour les gestionnaires d'événements simples et ponctuels qui ne nécessitent pas de
modifications dynamiques.
 Lorsque vous préférez la concision de la gestion des événements en ligne.
 Pour des prototypes rapides ou des projets simples.
Quand l'utiliser addEventListener:
 Pour des applications robustes et évolutives avec plusieurs gestionnaires par
événement.
 Lorsque vous devez ajouter, supprimer ou modifier des gestionnaires de manière
dynamique.
 Maintenir une séparation claire des préoccupations entre HTML et JavaScript.
 Pour tirer parti de fonctionnalités avancées telles que la capture d'événements et le
bullage.

AHAMADI NASRY 10
2.2.10 Exemple comparatif :

2.2.11 Résultat :

AHAMADI NASRY 11
2.2.12 Supprimer un gestionnaire avec removeEventListener
Un gestionnaire d'événement ajouté avec addEventListener peut être supprimé si nécessaire.

Exemple :

Résultat :

AHAMADI NASRY 12
2.3 Types d’événements courants et leurs usages
2.3.1 Gestion des événements de clavier : Keydown, Keyup, Keypress
Les événements keydown, keyup et keypress sont déclenchés lorsque l'utilisateur interagit avec
le clavier.

2.3.1.1 keydown
L'événement keydown est déclenché lorsqu'une touche du clavier est enfoncée. Cet événement
est souvent utilisé pour détecter quelle touche a été pressée.

Exemple pratique :

Résultat :

AHAMADI NASRY 13
Explication :

Lorsque l'utilisateur appuie sur une touche, le texte dans le paragraphe est mis à jour pour
afficher le nom de la touche et son code.

2.3.1.2 keyup
L'événement keyup est déclenché lorsqu'une touche du clavier est relâchée. Cet événement est
utile pour détecter quand l'utilisateur a terminé une action avec le clavier.

Exemple pratique :

AHAMADI NASRY 14
Résultat :

Explication :

Lorsque l'utilisateur relâche une touche, le paragraphe affiche le nom de la touche qui a été
relâchée

2.3.1.3 keypress (Déprécié)

L'événement keypress est déclenché lorsqu'une touche produisant un caractère (comme les
lettres ou les chiffres) est pressée. Cet événement est déprécié et devrait être évité dans les
projets modernes. Utilisez keydown ou keyup à la place.

Exemple pratique :

Résultat :

AHAMADI NASRY 15
Note importante :

 keypress ne détecte que les touches produisant un caractère imprimable (comme les
lettres, les chiffres ou les symboles). Les touches spéciales comme Shift, Ctrl ou Alt ne
déclenchent pas cet événement.
 Dépréciation : L'usage de keypress est déconseillé dans les navigateurs modernes.
Utilisez plutôt keydown ou keyup.

2.3.2 Comparaison entre keydown, keyup et keypress

Événement Moment déclenché Utilisation
recommandée
Keydown lorsqu'une touche est Pour capturer toutes les
enfoncée. touches, y compris celles qui
ne produisent pas de
caractères.
Keyup Lorsqu'une touche est Pour effectuer des actions
relâchée. après qu'une touche ait été
relâchée.

AHAMADI NASRY 16
 keypress Lorsqu'une touche Remplacé par keydown.
imprimable est pressée. Utilisation déconseillée.
(Déprécié)

2.3.3 Événements souris : click, dblclick, mouseenter, mouseleave,

mousemove
Chaque événement souris sera illustré avec un exemple distinct, en utilisant uniquement HTML
et JavaScript simple.

2.3.3.1 Événement click

L'événement click est déclenché lorsqu'un utilisateur clique sur un élément avec le bouton
gauche de la souris.

Exemple pratique :

Résultat :

Explication :

Lorsque l'utilisateur clique sur le bouton, une alerte s'affiche avec le message "Bouton cliqué
!".

AHAMADI NASRY 17
2.3.3.2 Événement dblclick
L'événement dblclick est déclenché lorsqu'un utilisateur double-clique sur un élément.

Exemple pratique :

Résultat :

Explication :

Une alerte apparaît uniquement si l'utilisateur double-clique sur le bouton.

2.3.3.3 Événement mouseenter

L'événement mouseenter est déclenché lorsque la souris entre dans un élément.

Exemple pratique :

Explication :

AHAMADI NASRY 18
Une alerte s'affiche chaque fois que la souris entre dans la zone du <div>.

2.3.3.4 Événement mouseleave

L'événement mouseleave est déclenché lorsque la souris quitte un élément.

Exemple pratique :

Résultat :

Explication :

Une alerte s'affiche lorsque la souris quitte la zone du <div>.

2.3.3.5 Événement mousemove

L'événement mousemove est déclenché chaque fois que la souris est déplacée sur un élément.

Exemple pratique :

AHAMADI NASRY 19
Explication :

À chaque mouvement de la souris sur le <div>, le texte du paragraphe est mis à jour avec le
message "Souris en mouvement !".

2.3.4 Résumé et cas d'utilisation

Événement Description Utilisation typique
Click Déclenché par un clic de Boutons, actions simples
souris. déclenchées par l'utilisateur.
Dblclick Déclenché par un double- Sélection ou confirmation
clic. rapide d'une action.
mouseenter Déclenché lorsque la souris Effets de survol, menus
entre dans un élément. déroulants.
Mouseleave Déclenché lorsque la souris Réinitialisation d'un effet de
quitte un élément. survol.

AHAMADI NASRY 20
 Mousemove Déclenché lorsque la souris Suivi en temps réel des
est déplacée sur un élément. mouvements de la souris.

2.3.5 Événements de formulaire en JavaScript

Les formulaires HTML jouent un rôle central dans les applications web pour collecter des
données auprès des utilisateurs. JavaScript permet de gérer les interactions utilisateur grâce à
des événements spécifiques. Les événements principaux des formulaires sont :

submit
change
focus
blur
input

2.3.5.1 L'événement submit

L'événement submit est déclenché lorsqu'un formulaire est soumis. Il est couramment utilisé
pour valider les données ou empêcher l'envoi du formulaire avec la méthode preventDefault().

Exemple : Valider un formulaire avant l'envoi

AHAMADI NASRY 21
Résultat :

2.3.5.2 L'événement change

L'événement change est déclenché lorsque la valeur d'un champ de formulaire est modifiée,
puis que le champ perd le focus.

AHAMADI NASRY 22
Exemple : Suivi des modifications sur un champ de sélection

Résultat :

2.3.5.3 L'événement focus

L'événement focus est déclenché lorsqu'un champ de formulaire reçoit le focus (clic ou
navigation au clavier).

Exemple : Mise en évidence d'un champ actif

AHAMADI NASRY 23
Résultat :

2.3.5.4 L'événement blur

L'événement blur est déclenché lorsqu'un champ de formulaire perd le focus. Il est souvent
utilisé pour valider un champ dès que l'utilisateur quitte ce dernier.

Exemple : Validation d'une adresse email

AHAMADI NASRY 24
Résultat :

2.3.5.5 L'événement input

L'événement input est déclenché chaque fois que la valeur d'un champ change (par la saisie, le
copier-coller, etc.), même avant que l'utilisateur quitte le champ.

Exemple : Prévisualisation en temps réel

AHAMADI NASRY 25
Résultat :

2.3.6 Différences entre tous ces évènements

Événement Description
submit Se déclenche lors de l'envoi d'un formulaire.
change Se déclenche lorsque la valeur d'un champ est
modifiée et que le focus est perdu.
focus Se déclenche lorsqu'un champ reçoit le focus.
blur Se déclenche lorsqu'un champ perd le focus.
input Se déclenche à chaque modification d'un
champ.

AHAMADI NASRY 26
2.3.7 Les évènements : chargement/déchargement de page
2.3.7.1 L'événement load
L'événement load est déclenché lorsque tous les éléments de la page (HTML, CSS, images,
scripts, etc.) sont complètement chargés. Cet événement est souvent utilisé pour initialiser des
scripts ou afficher des messages lorsque la page est prête.

Exemple : Afficher un message une fois la page chargée

Résultat :

2.3.7.2 L'événement beforeunload

L'événement beforeunload est déclenché avant que l'utilisateur ne quitte ou recharge la page. Il
est utilisé pour afficher une confirmation ou enregistrer les données en cours avant de quitter.

AHAMADI NASRY 27
Exemple : Afficher un message de confirmation avant de quitter

Résultat :

2.3.7.3 L'événement unload

L'événement unload est déclenché lorsque la page est sur le point d'être déchargée (fermeture,
rechargement, ou navigation vers une autre page). Contrairement à beforeunload, il ne permet
pas d'interagir avec l'utilisateur.

Exemple : Enregistrer des données lors de la fermeture de la page

AHAMADI NASRY 28
Résultat :

2.3.8 Différences entre tous ces évènements

Événement Description Usage principal

load Déclenché lorsque tous les Initialisation des scripts.
éléments de la page (HTML,
CSS, images, etc.) sont
complètement chargés.
beforeunload Déclenché juste avant que Afficher une confirmation
l'utilisateur quitte la page. avant de quitter.
unload Déclenché lorsque la page est Effectuer des actions finales
sur le point d'être (enregistrement, etc.).
complètement déchargée.

AHAMADI NASRY 29
2.3.9 Événements DOM : DOMContentLoaded, resize, scroll.
Les événements DOM tels que DOMContentLoaded, resize et scroll sont essentiels pour
interagir avec le DOM et pour réagir aux modifications ou interactions de l'utilisateur avec la
fenêtre ou la page.

2.3.9.1 L'événement DOMContentLoaded

Cet événement est déclenché lorsque le HTML de la page est entièrement chargé et analysé,
mais avant le chargement des images et des styles. Il est plus rapide que l'événement load.

Exemple : Exécuter un script dès que le DOM est prêt

Résultat :

AHAMADI NASRY 30
2.3.9.2 L'événement resize
L'événement resize est déclenché lorsqu'un utilisateur redimensionne la fenêtre du navigateur.
Cet événement est souvent utilisé pour ajuster dynamiquement le contenu ou les styles en
fonction de la taille de la fenêtre.

Exemple : Afficher la taille actuelle de la fenêtre

Résultat :

AHAMADI NASRY 31
2.3.9.3 L'événement scroll
L'événement scroll est déclenché lorsqu'un utilisateur fait défiler une page ou un élément
contenant une barre de défilement. Cet événement est souvent utilisé pour créer des effets
visuels, des animations ou des barres de progression.

Exemple : Changer la couleur d'un en-tête en fonction du défilement

AHAMADI NASRY 32
Résultat :

2.3.10 Différences entre tous ces évènements

Événement Description Usage principal

DOMContentLoaded Déclenché lorsque le DOM Initialisation de scripts ou
est entièrement chargé et prêt mise en page.
à être manipulé.

AHAMADI NASRY 33
resize Déclenché lorsqu'un Ajustements dynamiques de
utilisateur redimensionne la styles ou de contenu.
fenêtre du navigateur.
scroll Déclenché lorsqu'un Création d'animations ou
utilisateur fait défiler la page effets de défilement.
ou un élément contenant une
barre de défilement.

AHAMADI NASRY 34
AHAMADI NASRY 35