Chapitre 4

Site Interactif

JavaScript

Dr. BOUBENIA Mohamed

[Link]@[Link]
01/11/2025
Programmation Avancée (PRAVAN)
Plan de cette séance

1. Rappel
1. Notions de base du Web
2. Les Bases de la programmation côté client
3. Les Bases du Langage JavaScript
4. Manipulation du DOM
5. Le BOM (Browser Object Model)
6. Les Evénements
2
Programmation Avancée (PRAVAN)

1
Rappel

3
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques

Les langage HTML et CSS suffisent pour Serveur

créer des sites Web statiques :
Web
• CV en ligne Suffisant pour
• Site vitrine ou Portfolio (Galerie) la présentation
• Blog Statique
• Site de présentation d’un organisme Requête Réponse HTML CSS
• Landing page (page de destination) HTTP HTML+CSS.
• Site de documentation technique
• Site événementiel
• Site de recette

4
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques

Les langage HTML et CSS suffisent pour Serveur

créer des sites Web statiques :
Web
• CV en ligne Suffisant pour
• Site vitrine ou Portfolio (Galerie) la présentation
• Blog Statique
• Site de présentation d’un organisme Requête Réponse HTML CSS
• Landing page (page de destination) HTTP HTML+CSS.
• Site de documentation technique
• Site événementiel
• Site de recette

…Mais, à eux seuls, ils ne

permettent pas l’interactivité
avec l’utilisateur!

De quelle interactivité
parle-ton ?

5
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques Interactif

Exemples d’interaction:
Suite à un événement provoqué par Serveur
l’utilisateur (ex. clique sur un bouton): Web
- Une élément HTML Suffisant pour
s’affiche/se modifie/se masque. la présentation
- ou Une propriété CSS change.
- ou Un résultat d’un calcul est affiché. Requête Réponse HTML CSS
- ou Suivant la véracité d’une condition le HTTP HTML+CSS.
contenu de la page Web change.
- ou Vérification du contenu d’un champs
de saisie.
- etc. Action
…Mais, à eux seuls, ils ne
permettent pas l’interactivité
avec l’utilisateur!

De quelle interactivité
parle-ton ?
Réaction
6
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques Interactif

Exemples d’interaction:
Suite à un événement provoqué par Serveur
l’utilisateur (ex. clique sur un bouton): Web
- Une élément HTML Suffisant pour
s’affiche/se modifie/se masque. la présentation
- ou Une propriété CSS change.
- ou Un résultat d’un calcul est affiché. Requête Réponse HTML CSS
- ou Suivant la véracité d’une condition le HTTP HTML+CSS.
contenu de la page Web change.
- ou Vérification du contenu d’un champs
de saisie.
- etc. Action
…Mais, à eux seuls, ils ne
permettent pas l’interactivité
Les comportements que l’on avec l’utilisateur!
souhaite prévoir sur notre
De quelle interactivité
page Web doivent être parle-ton ?
programmés Réaction
7
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques Interactif

Exemples d’interaction:
Suite à un événement provoqué par Serveur
l’utilisateur (ex. clique sur un bouton): Web
- Une élément HTML
Mais rappelez-vous Suffisant pour
s’affiche/se modifie/se masque. la présentation
- ou Une propriété CSS change. HTML n’est pas un langage de programmation
- ou Un résultat d’un calcul est affiché. Requête Réponse HTML CSS
Un langage
- ou Suivant la véracité d’une condition le de programmation permet deHTTP donner des HTML+CSS.
contenu de la page Web change. instructions la machine, en utilisant des variables, conditions,
- ou Vérification du contenu d’unboucles,
champs fonctions, etc.
de saisie. HTML/CSS ne sont que des langages déclaratifs
- etc. Action
…Mais, à eux seuls, ils ne
permettent pas l’interactivité
Les comportements que l’on avec l’utilisateur!
souhaite prévoir sur notre
De quelle interactivité
page Web doivent être parle-ton ?
programmés Réaction
8
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques Interactif

Exemples d’interaction:
Suite à un événement provoqué par Serveur
l’utilisateur (ex. clique sur un bouton): Web
- Une élément HTML Suffisant pour
s’affiche/se modifie/se masque. la présentation
- ou Une propriété CSS change.
- ou Un résultat d’un calcul est affiché. Requête Réponse HTML CSS
- ou Suivant la véracité d’une condition le HTTP HTML+CSS.
contenu de la page Web change.
- ou Vérification du contenu d’un champs
de saisie.
JavaScript
- etc. Action

Les comportements que l’on

souhaite prévoir sur notre
Cette programmation
page Web doivent être se fait dans des scripts
programmés Réaction
en langage JavaScript
9
Programmation Avancée (PRAVAN)
1- Rappel
Quels types de site pourrait-on créer avec HTML et CSS seulement ?

Sites Statiques Interactif

Exemples d’interaction:
Suite à un événement provoqué par Serveur
l’utilisateur (ex. clique sur un bouton): Web
- Une élément HTML Suffisant pour
s’affiche/se modifie/se masque. la présentation
- ou Une propriété CSS change.
- ou Un résultat d’un calcul est affiché. Requête Réponse HTML CSS
- ou Suivant la véracité d’une condition le HTTP HTML+CSS.
contenu de la page Web change.
- ou Vérification du contenu d’un champs
de saisie.
JavaScript
- etc. Action

Les comportements que l’on

souhaite prévoir sur notre Ces scripts sont exécutés
page Web doivent être par le navigateur au
programmés Réaction besoin (ex. un événement
click se produit) 10
Programmation Avancée (PRAVAN)

2
Les Bases
de la programmation
côté client

11
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client

HTML

2
un élément H1 "Compteur=0"

3
1 et un élément Button (bouton)
Prenons l'exemple suivant. "Incrémenter"
Nous avons donc un code
HTML qui contient:

12
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le
comportement suivant bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.

HTML

….
13
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le
comportement suivant bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.

HTML

Script JS

….
Ce comportement doit
être programmé dans un
script JS (JavaScript).
14
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le
comportement suivant bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.

HTML

Ce scripts sera exécuté

par le navigateur lors
d’un click sur le bouton

Script JS

….
Ce comportement doit
être programmé dans un
script JS (JavaScript).
15
Programmation Avancée (PRAVAN) lorsque l’utilisateur clique sur le
bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.

HTML

Décortiquons un peu ce
comportement

Script JS

….
16
Programmation Avancée (PRAVAN) Décortiquons un peu ce lorsque l’utilisateur clique sur le
comportement bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.
Evénement
HTML lorsque l’utilisateur clique sur le
bouton "Incrémenter",

Nous avons attaché à l’élément

bouton un événement (au Clic).
Ca veut dire, quand il sera cliqué

Script JS

….
17
Programmation Avancée (PRAVAN) Décortiquons un peu ce lorsque l’utilisateur clique sur le
comportement bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.
Evénement
HTML lorsque l’utilisateur clique sur le
bouton "Incrémenter",

Traitement
le compteur s’incrémente de 1
Changement visuel

Script JS

….
Nous précisons quoi faire quand cet
événement se réalise (au clic):
Ici, c’est le traitement doIncrement
qui est exécuté (qui est une
fonction).

Puis un changement visuel est

effectué, qui consiste à modifier le
contenu de l’élément h1 18
Programmation Avancée (PRAVAN) Décortiquons un peu ce lorsque l’utilisateur clique sur le
comportement bouton "Incrémenter", le compteur
2- Les Bases de la programmation côté client s’incrémente de 1, et si on dépasse 5,
il devient rouge.
Evénement
HTML lorsque l’utilisateur clique sur le
bouton "Incrémenter",

Traitement
le compteur s’incrémente de 1
Changement visuel

Script JS

….
Traitement
et si on dépasse 5, il devient rouge.
Changement visuel

Nous pouvons aussi mettre une condition comme un

traitement, si elle est vérifiée, on fait un changement
visuel. Ici, on a changé la couleur de l’élément h1
19
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client
Résumons
Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de
la page), etc.

Changement visuel
On sélectionne un élément HTML (presque
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

20
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client
Résumons
Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de
la page), etc.

Changement visuel
On sélectionne un élément HTML (presque
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation
affectations, comparaisons, tableaux, etc.

Oui… Mais où mettre ces scripts? Il existe 3 méthodes

21
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client Où mettre les Scripts ?

Méthode 1: Enligne

Consiste à mettre le script directement dans

la balise ouvrante de l'élément concerné, en
précisant l’événement.
Idéal quand il s’agit d’un petit traitement
(peu recommandé)

22
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client Où mettre les Scripts ?

Méthode 1: Enligne

Méthode 2:Dans un élément

<script></script> à la fin de body

Consiste à mettre le script à l’intérieur d’un

élément <script></script>, et de mettre cet
élément n’importe où dans le document
HTML (dans le body, où dans le head)

23
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client Où mettre les Scripts ?

Méthode 1: Enligne Méthode 3: Fichier JS

Méthode 2:Dans un élément

<script></script> à la fin de body

Consiste à mettre le script dans un

autre fichier qui porte l'extension .js mon_script.js

Dans cet exemple, nous avons mis

notre script dans « mon_script.js"

et nous lui avons fait référence dans

notre fichier HTML, grâce à
l’élément script, dans l’élément
Head.
Vous avez la possibilité de charger
plusieurs fichiers 24
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client Où mettre les Scripts ?

Méthode 3: Fichier JS avec URL

Vous avez également la possibilité

de faire référence à des fichiers JS
sur le Web (ex. bibliothèques)

25
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client Où mettre les Scripts ?

Méthode 1: Enligne
Erreur fréquente de débutant Méthode 3: Fichier JS

Lorsque vous mettez votre script dans le head,

il sera exécuté avant le chargement en entier
du DOM (votre page)

Méthode 2:Dans un élément

<script></script> à la fin de body

Consiste à mettre le script dans un

autreune
Ce code produira fichier qui car
erreur, porte l'extension
le code JS .js mon_script.js
essayera de manipuler un élément (h1) qui n’a
Dans cet exemple, nous avons mis
pas encore été créé.
notre script dans « mon_script.js"

et nous lui avons fait référence dans

notre fichier HTML, grâce à
l’élément script, dans l’élément
Head.

26
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client Où mettre les Scripts ?

Méthode 1: Enligne
Solutions possibles Méthode 3: Fichier JS

1
Vous pouvez différer l’exécution de [Link]
après le chargement de la page.

Méthode 2:Dans un élément

<script></script> à la fin de body

Consiste à mettre le script dans un

autre fichier qui porte l'extension .js mon_script.js

Dans cet exemple, nous avons mis

2 notre script dans « mon_script.js"
Vous pouvez explicitement mettre
et nous lui avons fait référence dans
l’élément script à la fin de body
notre fichier HTML, grâce à
l’élément script, dans l’élément
Head.
Vous pouvez également utiliser un événement
approprié DOMContentLoaded 27
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client

Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de
la page), etc.

Changement visuel
Nous allons
On sélectionne un élément HTML (presque
décortiquer
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

28
Programmation Avancée (PRAVAN)
2- Les Bases de la programmation côté client

D’abord, Il est important de Visuel

Les bases
HTML
Evénementconnaitre le langage JavaScript
(syntaxe, sémantique, etc.)
Quelque chose se passe:
Plusieurs événements sont
du langage possibles, par exemple:
onclick (au clic),
onmouseover (au survol),

JavaScript onload (au chargement de

la page), etc.

Changement visuel
Nous allons
On sélectionne un élément HTML (presque
décortiquer
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

29
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript

C’est quoi ?
JavaScript est principalement un langage
de programmation côté client.

Historique
• JavaScript (anciennement ECMAScript) a été créé par Netscape (le fameux navigateur Web),en 1995.
• But: Permettre aux développeurs Web d’incorporer un code exécutable dans leurs pages Web.
• Effet: Une page Web pouvait donc contenir un script en JavaScript, qui est exécuté quand l’utilisateur
visite la page (interactivité ou traitement).

30
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript

Caractéristiques Versions ECMAScript

 Langage multi-paradigmes Edition Nom Officiel Date publication
Impérative, Fonctionnelle, POO. ES16 ES2025 June 2025
 Syntaxe … … …
Fortement inspirée de C++ et Java.
ES10 ES2019 Summer 2019
Ne pas confondre avec Java (aucun lien, même si similitude dans le nom).
ES9 ES2018 June 2018
…Mais, Différences majeures avec des langages comme C++ et Java ! :
ES8 ES2017 June 2017
 Langage non compilé, mais interprété: ES7 ES2016 June 2016
Il n’y a pas d’étape de compilation. A la place, un interpréteur (présent dans
ES6 ES2015 June 2015
le navigateur (ex. V8, SpiderMonkey, etc.)), lit le code JS, interprète chaque
ligne, et l’exécute (compilation Just-In-Time (JIT)). ES5.1 ES5.1 June 2011

 Langage dynamique et faiblement typé ES5 ES5 December 2009

Une variable peut à tout moment changer de type. JS convertit ES4 ES4 Abandoned
automatiquement les types si nécessaire (ex. 2+ "2" donne "22"). ES3 ES3 December 1999
 Garbage Collector ES2 ES2 June 1998
Intégré dans le moteur JavaScript pour la gestion de la mémoire.
ES1 ES1 June 1997
 Spécification: ECMAScript (ES) Specification.
31
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript

Caractéristiques Single Threaded (Une seule file d’exécution) avec Event-Loop

JS s’exécute sur un seul thread principal. Cela signifie qu’il ne peut pas exécuter plusieurs instructions à
la fois (pas de multithreading natif). Mais, il n’est pas bloquant grâce à son modèle asynchrone

4 composant principaux:
1. Event Loop
2. Stack (pile d’appels): Syncrhone
3. Heap (tas de mémoire):
4. Callback Queue (file): Asynchrone

Déroulement:
1. L’Event Loop (la boucle d’événements, sur le thread principal)
exécute le code JavaScript ligne par ligne dans la Call Stack.
2. Les objets et variables sont stockés dans la Heap memory.
3. Lorsqu’une opération asynchrone est rencontrée (par ex.
setTimeout, appel à une API, événement DOM), elle est
déléguée à l’environnement du navigateur (les Web APIs).
4. Quand cette opération est terminée, son callback est placé
dans la Callback Queue (ou Task Queue).
5. L’Event Loop surveille en permanence la Call Stack :
dès qu’elle est vide, il y récupère la prochaine tâche de la
Callback Queue pour l’exécuter.
32
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript Comme avec tout langage de programmation, en
JavaScript, il y a aussi la console qu’on peut utiliser pour
Familiarités avec les langages de programmation afficher (on écrit: [Link]("text à afficher")).

Contrairement au langage C ou Java, en JavaScript il n’y a pas de notion de Le console est accessible dans n’importe quel
fonction principale (la fameuse fonction main()). navigateur. Par exemple, ici, on a ouvert la page
[Link], puis les outils de développement, puis
A la place, le navigateur interprète et exécute le code de haut vers le bas, l’onglet Console.
et compris les fichiers JS externes.
Recommandé lorsqu’on fait des teste (ex. les valeurs
des variables).

[Link] [Link]() Outils de développement/Console

Mon_script.js

33
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript

Familiarités avec les langages de programmation

D’autres soties possibles

innerHTML/innerText Alert()

34
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS
1. Syntaxe

2. Variables et Constantes

3. Les opérateurs

4. Les conditions

5. Les boucles

6. Les fonctions

7. Portée d’une variable

35
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 1. Syntaxe

• Syntaxe proche de celle du langage C: quasiment les mêmes

opérateurs, les mêmes instructions.
• Toutes les instructions doivent se terminer par un point virgule (;)
bien que ça reste facultatif.

Les affectations Bloc de code Les commentaires

Signe égale: Ici on a fait un Exemple: Fonction, // pour chaque ligne

calcul, et le résultat est conditions, etc
affecté à une variable "a"
Sur plusieurs lignes : commence
par /* et se termine par */

36
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 2. Variables et Constantes Les Types primitifs

String

number

boolean

null

> Console

37
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 2. Variables et Constantes Les Types Complexes
Méthodes utiles
Les Tableaux

> Console

Destructuration

38
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 2. Variables et Constantes Les Types Complexes
Les Objets Dans JS pratiquement tout repose sur les objets: les tableaux, les fonctions, même les classes sont en fait des objets.

Destructuration
// accès à nom
// accès à age
> Console

39
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 2. Variables et Constantes Les Types Complexes
Tableau d’Objets

Le tableau d’objets peut aussi être

transformé en objet JSON (JavaScript Objet
Notation), qui est un format léger, et très
utilisé pour les échanges client-serveur.
On le reverra dans la partie Site Web
Dynamique

40
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 3. Les Opérateurs

Arithmétiques Logiques Rationnels

Opérateurs combiné

41
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 4. Les Conditions If…else

42
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 4. Les Conditions switch

43
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 5. Les Boucles

forEach ne peut pas être interrompue avec

break (utilisé pour interrompre une
boucle), et ne peut pas sauter une
iteration avec continue. Elle ne peut pas
faire des return non plus.

44
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 6. Les Fonctions

45
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 6. Les Fonctions

Définir une valeur par défaut pour le paramètre Fonction anonyme et invoquée immédiatement

Hoistée Non Hoistée

Propre this Propre this

Réutilisable Non Réutilisable

Invocation immédiate
Protège le code

Fonction fléchée (Arrow Function)

Non Hoistée
This du parent
Réutilisable
Utile pour les callbacks

46
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 6. Les Fonctions Fonctions de rappel (Callbacks)
Un callback est une fonction passée en paramètre à une autre fonction, et appelée plus tard.

47
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 6. Les Fonctions Promesses (Promise)
Une Promise est un objet qui représente une opération asynchrone.
C’est comme un contrat : « Je te promets que je te rendrai un résultat (ou une erreur), mais plus tard. »

Code principal
Attente des résultats…
promesse

Code principal f ()
Je fais autre chose…

Résolve/Reject
(succès ou echec)
Code principal
Données reçues

48
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 6. Les Fonctions Async/Await
Une façon plus lisible d’écrire un code asynchrone.

Code principal
Attente des résultats…
promesse

Code principal f ()
Je fais autre chose…

Résolve/Reject
(succès ou echec)
Code principal
Données reçues

49
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 7. Portée d’une variable Globale vs Locale

50
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Noyau du langage JS 7. Portée d’une variable Globale vs Locale Let, Const, Var
Initialiser une variable sans la préfixer par Let ou Const ou Var est une mauvaise pratique.
Elle aura une portée globale implicite, même dans un bloc.

Pour éviter les erreurs, on utilise donc let pour les

variables, et const pour les constantes

La bonne pratique voudrait qu’on maitrise manuellement la

portée de nos variable.

Pour ne pas se tromper, on utilise le mode stricte, qui nous Dans les anciennes version de JS, on utilisait le mot
signale les variables non définie avec Let, ou Const, ou Var: clé var.

Mais le problème avec var

c’est que la variable était
Rehostée (hoisting), et donc
sa portée devenait globale

51
Programmation Avancée (PRAVAN)

D’abord, Il est important de Visuel

Les bases
HTML
Evénementconnaitre le langage JavaScript
(syntaxe, sémantique, etc.)
Quelque chose se passe:
Plusieurs événements sont
du langage possibles, par exemple:
onclick (au clic),
onmouseover (au survol),

JavaScript onload (au chargement de

la page), etc.

Changement visuel
Nous allons
On sélectionne un élément HTML (presque
décortiquer
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

52
Programmation Avancée (PRAVAN)

Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de
la page), etc.

Changement visuel
Nous allons
On sélectionne un élément HTML (presque
décortiquer
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

53
Programmation Avancée (PRAVAN)

Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de

Manipulation du DOM la page), etc.

Changement visuel
Il est important de comprendre Nous allons
On sélectionne un élément HTML (presque
décortiquer
le DOM, pour savoir comment
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
sélectionner un élément HTML
Plusieurs types de traitements sont contenu de l’élément.
et comment le modifier. possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

54
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Rappel: Structure d’un document HTML La racine

HTML
Document HTML
head body
<html>
<head>
</head> …. p p
<body>
<p>
…. ….
Bienvenue sur <strong>Bingo</strong>, le site
de <em>formation</em>. Un modèle en ARBRE
</p>
<p> Aujourd’hui nous allons parler de HTML. </p>
</body>
Le DOM: Document Object Model
</html>

55
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le DOM (Document Object Model)

Lorsque le navigateur charge une page Web,

il crée un Document Objet Model pour cette page
(cet objet a la structure d’un arbre).

Avec cet objet, JavaScript a tout le pouvoir dont il a

besoin pour modifier dynamiquement le contenu de la
page HTML:

• Il peut changer tous les élément HTML sur la page.

• Il peut changer tous les attributs HTML sur la page.
• Il peut changer tous les styles CSS sur la page.
• Il peut supprimer un élément/attribut HTML.
• Il peut ajouter un nouveau élément/attribut HTML.
• Il peut réagir à tous les événements sur la page.
• Il peut créer de nouveaux événement sur le page.

56
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le DOM (Document Object Model)

Lorsque le navigateur charge une page Web,

il crée un Document Objet Model pour cette page
(cet objet a la structure d’un arbre).

Avec cet objet, JavaScript a tout le pouvoir dont il a

besoin pour modifier dynamiquement le contenu de la
page HTML:

• Il peut changer tous les élément HTML sur la page.

• Il peut changer tous les attributs HTML sur la page.
• Il peut changer tous les styles CSS sur la page.
• Il peut supprimer un élément/attribut HTML.
• Il peut ajouter un nouveau élément/attribut HTML. Le tout se fait généralement en 2 étapes :
• Il peut réagir à tous les événements sur la page. 1- Retrouver l’élément HTML Analogie (les sélecteur en CSS)
• Il peut créer de nouveaux événement sur le page.
2- Faire une opération
57
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

HTML
Dans cet exemple, nous
avons d’abord retrouvé
l’élément h1, avec son
identifiant "compt_H1", et
nous avons changé son
contenu.

Script JS

….
Il existe plusieurs
Ici, nous avons changé son manières pour retrouver
style CSS un élément HTML.

58
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML

Par identifiant

Par le nom de balise

Par class

Par sélecteur CSS

Il existe plusieurs
manières pour retrouver
un élément HTML.

59
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML

Par identifiant

Par le nom de balise

Par class

Par sélecteur CSS

60
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par identifiant

document

HTML

h1 h2 h2 h2 p p

1
Je veux le
modifier
getElementById(<id>)
Retourne un seul élément qui possède l’identifiant id indiqué

61
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par identifiant

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec son id
getElementById(<id>)
Retourne un seul élément qui possède l’identifiant id indiqué

3
On commence toujours par "document", car c’est lui la racine 62
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par identifiant

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec son id
getElementById(<id>)
Retourne un seul élément qui possède l’identifiant id indiqué

4
L’élément récupéré est un objet qui
possède des propriété et des
méthodes. "innerHTML" est une
propriété qui renferme le contenu de
l’élément. Donc la modifier, permettra
3 d’avoir une différence au visuel dans la
On commence toujours par "document", car c’est lui la racine page Web. 63
Programmation Avancée (PRAVAN)
L’élément touché par la modification
4- Manipulation du DOM Après clique sur bouton "Exécuter
Script", qui déclenche la fonction
doTraitement()
Retrouver un élément HTML Par identifiant 5

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec son id
getElementById(<id>)
Retourne un seul élément qui possède l’identifiant id indiqué

4
L’élément récupéré est un objet qui
possède des propriété et des
méthodes. "innerHTML" est une
propriété qui renferme le contenu de
l’élément. Donc la modifier, permettra
3 d’avoir une différence au visuel dans la
On commence toujours par "document", car c’est lui la racine page Web. 64
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML

Par identifiant

Par le nom de balise

Par class

Par sélecteur CSS

65
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par le nom de balise

document

HTML

h1 h2 h2 h2 p p

1
Je veux le
modifier
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

66
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par le nom de balise

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec le nom balise
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

67
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par le nom de balise

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec le nom balise
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

3
Même s’il y a un seul h1 dans notre page
HTML, la méthode getElementsByTagName
retourne toujours une collection.
Dans notre cas, la collection contiendra un seul
élément h1, et pour le retrouver, on lit le
premier item de cet collection, avec [0] (car
une collection commence de l’index 0) 68
Programmation Avancée (PRAVAN)
L’élément touché par la modification
4- Manipulation du DOM Après clique sur bouton "Exécuter
Script", qui déclenche la fonction
doTraitement()
Retrouver un élément HTML Par le nom de balise 4

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec le nom balise
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

3
Même s’il y a un seul h1 dans notre page
HTML, la méthode getElementsByTagName
retourne toujours une collection.
Dans notre cas, la collection contiendra un seul
élément h1, et pour le retrouver, on lit le
premier item de cet collection, avec [0] (car
une collection commence de l’index 0) 69
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML

Par identifiant

Par le nom de balise

Par class

Par sélecteur CSS

70
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par class

document

HTML

h1 h2 h2 h2 p p

1
Je veux le
modifier
getElementsByClassName(<class>)
Retourne toujours une collection d’éléments d’une classe données

71
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par class

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec le nom classe
getElementsByClassName(<class>)
Retourne toujours une collection d’éléments d’une classe données

72
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par class

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec le nom classe
getElementsByClassName(<class>)
Retourne toujours une collection d’éléments d’une classe données

3
Dans notre cas, la collection contiendra un seul
élément p, et pour le retrouver, on lit le
premier item de cet collection, avec [0] (car
une collection commence de l’index 0)
73
Programmation Avancée (PRAVAN)
L’élément touché par la modification
4- Manipulation du DOM Après clique sur bouton "Exécuter
Script", qui déclenche la fonction
doTraitement()
Retrouver un élément HTML Par class 4

document

HTML

h1 h2 h2 h2 p p

1 2
Je veux le Je peux le retrouver
modifier avec le nom classe
getElementsByClassName(<class>)
Retourne toujours une collection d’éléments d’une classe données

3
Dans notre cas, la collection contiendra un seul
élément p, et pour le retrouver, on lit le
premier item de cet collection, avec [0] (car
une collection commence de l’index 0)
74
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML

Par identifiant

Par le nom de balise

Par class

Par sélecteur CSS

75
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par sélecteur CSS

1
Je veux le
modifier
querySelectorAll(<sélecteur>)
Retourne toujours une collection d’éléments d’un sélecteur donné

76
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML Par sélecteur CSS

1 2
Je veux le Je peux le retrouver
modifier avec un Sélecteur CSS
querySelectorAll(<sélecteur>)
Retourne toujours une collection d’éléments d’un sélecteur donné

77
Programmation Avancée (PRAVAN)
L’élément touché par la modification
4- Manipulation du DOM Après clique sur bouton "Exécuter
Script", qui déclenche la fonction
doTraitement()
Retrouver un élément HTML Par sélecteur CSS
3

1 2
Je veux le Je peux le retrouver
modifier avec un Sélecteur CSS
querySelectorAll(<sélecteur>)
Retourne toujours une collection d’éléments d’un sélecteur donné

78
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver plusieurs éléments HTML

Par identifiant
Jusqu’à présent, on n’a vu que
Par le nom de balise l’exemple avec un seul élément
récupéré…
Par class ….Mais, imaginons que ma sélection
retourne plusieurs éléments
Par sélecteur CSS

79
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver plusieurs éléments HTML

1
Je veux les
modifier
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

80
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver plusieurs éléments HTML

1 2
Je veux les Je peux les retrouver
modifier avec le nom Balise h2
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

81
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver plusieurs éléments HTML

1 2
Je veux les Je peux les retrouver
modifier avec le nom Balise h2
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

3
Comme getElementsByTagName retourne
toujours une collection, et ma collection
contient les 3 élément h2 présent dans mon
document HTML, je dois faire une boucle pour
parcourir la sélection, et faire mon traitement.

82
Programmation Avancée (PRAVAN)
L’élément touché par la modification
4- Manipulation du DOM Après clique sur bouton "Exécuter
Script", qui déclenche la fonction
doTraitement()
Retrouver plusieurs éléments HTML 4

1 2
Je veux les Je peux les retrouver
modifier avec le nom Balise h2
getElementsByTagName(<tag>)
Retourne toujours une collection d’éléments d’une balise données

3
Comme getElementsByTagName retourne
toujours une collection, et ma collection
contient les 3 élément h2 présent dans mon
document HTML, je dois faire une boucle pour
parcourir la sélection, et faire mon traitement.

83
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Retrouver un élément HTML

Par identifiant

Par le nom de balise

Par class

Par sélecteur CSS

1- Retrouver l’élément HTML

84
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération

Une fois l’élément

retrouvé, on peut faire des
opérations dessus

85
Programmation Avancée (PRAVAN) D’abord, il faut savoir qu’en JavaScript, un élément HTML
est un objet qui possède des propriétés et des méthodes
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus children innerText remove() getAttribute()

firstElementChild attributs removeChild() setAttribute()

lastElementChild appendChild()

nextElementSibling replaceChild()

Les plus importantes

Voir d’autres ici: [Link]

86
Programmation Avancée (PRAVAN) D’abord, il faut savoir qu’en JavaScript, un élément HTML
est un objet qui possède des propriétés et des méthodes
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus children innerText remove() getAttribute()
Nos opérations vont, donc, setAttribute()
firstElementChild attributs removeChild()
soit, modifier les valeurs
de ses propriétés, ou lastElementChild replaceChild()
appeler une des ses
méthodes nextElementSibling appendChild()

Les plus importantes

Voir d’autres ici: [Link]

87
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus children innerText remove() getAttribute()
Ces propriétés permettent la
Nos opérations vont, donc, navigation dans l’arbre, par rapport setAttribute()
firstElementChild attributs removeChild()
soit, modifier les valeurs à l’élément récupéré
de ses propriétés, ou lastElementChild appendChild()
appeler une des ses
méthodes nextElementSibling replaceChild()

Les plus importantes

Voir d’autres ici: [Link]

88
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML
parentNode

Propriétés firstElementChild lastElementChild

parentNode

children
Ces propriétés permettent nextElementSibling
firstElementChild la navigation dans l’arbre,
par rapport à l’élément
lastElementChild récupéré

nextElementSibling
children
Exemple:
Si l’élément récupéré c’est body.
La propriété children de cet élément
donnera la collection d’élément h1, p, p

89
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

parentNode innerHTML style append() hasAttribute()

children innerText remove() du

Permettent la modification getAttribute()
contenu de l’élément.
firstElementChild attributs removeChild() setAttribute()

lastElementChild appendChild()

nextElementSibling replaceChild()

Les plus importantes

Voir d’autres ici: [Link]

90
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

innerHTML est
Propriétés reconnue comme
du code HTML
innerHTML

innerText

Permettent la
modification du
contenu de l’élément. innerText est
reconnue comme
du texte simple

91
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus childNodes innerText remove() getAttribute()
Nos opérations vont, donc, Il est possible d’accéder à setAttribute()
firstChild attributs removeChild()
soit, modifier les valeurs certains attributs directement
de ses propriétés, ou lastChild avec leur nom appendChild()
appeler une des ses
méthodes nextSibling replaceChild()

Les plus importantes

Voir d’autres ici: [Link]

92
Programmation Avancée (PRAVAN) HTML

4- Manipulation du DOM

Un élément HTML

Propriétés

attributs

Il est possible d’accéder à

certains attributs directement
avec leur nom

Console

93
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style Il append()

est possible de modifier le
hasAttribute()
retrouvé, on peut faire des style CSS d’un élément
opérations dessus childNodes innerText directement
remove() à traversgetAttribute()
la
propriété style.
Nos opérations vont, donc, setAttribute()
firstChild attributs removeChild()
soit, modifier les valeurs
de ses propriétés, ou lastChild appendChild()
appeler une des ses
méthodes nextSibling replaceChild()

Les plus importantes

Voir d’autres ici: [Link]

94
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Propriétés

style

Il est possible de modifier

le style CSS d’un élément
directement à travers la
propriété style.

Remarque: en JavaScript, les tirets (-) dans les CSS Background-color

propriétés CSS sont supprimé, et remplacés par la
première lettre en majuscule du mot suivant JS BackgroundColor
95
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus childNodes innerText remove() getAttribute()
Nos opérations vont, donc, setAttribute()
firstChild attributs removeChild()
soit, modifier les valeurs
de ses propriétés, ou lastChild replaceChild()
appeler une des ses
méthodes nextSibling appendChild()

Les plus importantes

Voir d’autres ici: [Link]

96
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément Rajoute du texte au

parentNode innerHTML style sans le
contenu existant, append() hasAttribute()
retrouvé, on peut faire des
opérations dessus remplacer.
childNodes innerText remove() getAttribute()
Nos opérations vont, donc, setAttribute()
firstChild attributs removeChild()
soit, modifier les valeurs
de ses propriétés, ou lastChild appendChild()
appeler une des ses
méthodes nextSibling replaceChild()

Les plus importantes

Voir d’autres ici: [Link]

97
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

append()

Manière plus simple

de rajouter à la fin

98
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus childNodes innerText remove() getAttribute()
Nos opérations vont, donc, setAttribute()
firstChild attributs
Permettent de supprimer/ removeChild()
soit, modifier les valeurs
de ses propriétés, ou rajouter/remplacer un
lastChild élément replaceChild()
appeler une des ses
méthodes nextSibling appendChild()

Les plus importantes

Voir d’autres ici: [Link]

99
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

remove()

removeChild()

replaceChild()

appendChild()

L’élément Titre 1
Permet de supprimer a été supprimé.
l’élément

100
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

remove()

removeChild()

replaceChild()
Au premier clic, Titre2
est supprimé.
appendChild()

Permet de supprimer
un élément enfant Au deuxième clic, Titre3
est supprimé.

Au troisième clic, on obtient une erreur, car

plus aucun h2 ne se trouve dans le div 101
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

remove()

removeChild()

replaceChild()

appendChild() Au premier clic, Titre 2 est remplacé par Titre 1

(Titre 1 a changé de place dans le DOM)

Permet de remplacer
un élément enfant Au deuxième clic, Titre 3 est remplacé
par Titre 1 encore

Au troisième clic, on obtient une erreur, car

plus aucun h2 ne se trouve dans le div 102
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

remove()

removeChild()

replaceChild()

appendChild() Titre 1 (Titre 1 a changé de place dans le DOM)

Permet de rajouter un
élément enfant à la fin

103
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes
Je peux créer un élément HTML à partir de 0, et l’insérer dans le DOM

remove()

removeChild()

replaceChild()

appendChild()

Permet de rajouter un
élément enfant

104
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes
Je peux créer un élément HTML à partir de 0, et l’insérer dans le DOM

remove()

removeChild() Une autre possibilité (mais moins élégante)

replaceChild()

appendChild()

Permet de rajouter un
élément enfant

105
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

Une fois l’élément parentNode innerHTML style append() hasAttribute()

retrouvé, on peut faire des
opérations dessus Permettent de d’accéder
childNodes innerText remove()
aux attributs de l’élément getAttribute()
Nos opérations vont, donc,
firstChild attributs removeChild() setAttribute()
soit, modifier les valeurs
de ses propriétés, ou lastChild replaceChild()
appeler une des ses
méthodes nextSibling appendChild()

Les plus importantes

Voir d’autres ici: [Link]

106
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

hasAttribute()

getAttribute()

setAttribute()

Permettent de d’accéder
aux attributs de l’élément

Remarquez la différence
entre:
getAttribute("src")
et [Link]
getAttribute retourne la valeur exacte de l’attribut !
107
Programmation Avancée (PRAVAN)
4- Manipulation du DOM

Un élément HTML

Méthodes

[Link]()

[Link]()

[Link]()

Toggle permet d’ajouter (ou supprimer) la classe si elle

n’existe pas (ou existe).
Note: la propriété classListe donne la collection de classe
affectée à l’élément.

108
Programmation Avancée (PRAVAN)
4- Manipulation du DOM
Le tout se fait généralement en 2 étapes :
Un élément HTML
1- Retrouver l’élément HTML
2- Faire une opération
Propriétés Méthodes

parentNode innerHTML style append() hasAttribute()

childNodes innerText remove() getAttribute()

firstChild attributs removeChild() setAttribute()

lastChild replaceChild()

nextSibling appendChild()

Les plus importantes

Voir d’autres ici: [Link]

109
Programmation Avancée (PRAVAN)

1. Notions de base du Web

DOM vs BOM

110
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)

DOM

Rappelez-vous HTML

head body

…. p p

…. ….

Le DOM: Document Object Model

111
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Maintenant, il faut savoir
que l’objet document est
lui-même un enfant de
l’objet window window
DOM

document

HTML

head body

…. p p

…. ….

112
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Maintenant, il faut savoir
que l’objet document est
lui-même un enfant de
l’objet window window
DOM

document

HTML

head body

…. p p

…. ….

113
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)

window Et cet objet window a aussi

d’autres objets enfants

DOM

document screen location history navigator

HTML

head body

…. p p

…. ….

114
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
BOM: Browser Object
Model
window
DOM

document screen location history navigator

HTML

head body

…. p p

…. ….

115
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
[Link] window
DOM
Méthodes
Pop-ups
document
alert() screen location history navigator
Affiche une boite d’alerte.
HTML
Prompt()

head body
Affiche une boite avec champs de saisie.

scrollTo()
…. p p une position précise
Scroll jusqu’à

scrollBy();
…. ….
Scroll par un pas spécifié
116
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
[Link] window
DOM

document screen location history navigator

HTML
Propriétés
Height/width
head body
Orientation

…. p p

…. ….

117
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
[Link] window
DOM

document screen location history navigator

Méthode
HTML
href()

head body

…. p p

…. ….

118
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
[Link] window
DOM
Méthodes
document screen location history navigator
back()

go()
HTML
forward()
head body

…. p p

…. ….

119
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
[Link] window
DOM
Propriétés
document screen location history navigator
platform

HTML

head body

…. p p

…. ….

120
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes BOM: Browser Object
Model
window
DOM

document screen location history navigator

HTML
Voir d’autres ici:
[Link]
head body

…. p p

…. ….

121
Programmation Avancée (PRAVAN)

1. Notions de base du Web

Les APIs Natives JavaScript

122
Programmation Avancée (PRAVAN)
6- Les APIs natives de Javascript

Les navigateurs modernes offrent une gamme d’APIs (méthodes, objets ,

propriétés) permettant d’étendre les capacités de Javascript, en vue de
construire des applications riches.

Géolocalisation

Storage

ML/IA

Web APIs

BOM

Réseau

DOM

Sécurité

Performance

Voir d’autres ici:

123
[Link]
Programmation Avancée (PRAVAN)

Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de

Manipulation du DOM la page), etc.

Changement visuel
Il est important de comprendre Nous allons
On sélectionne un élément HTML (presque
décortiquer
le DOM, pour savoir comment
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
sélectionner un élément HTML
Plusieurs types de traitements sont contenu de l’élément.
et comment le modifier. possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

124
Programmation Avancée (PRAVAN)

Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de
la page), etc.

Changement visuel
Nous allons
On sélectionne un élément HTML (presque
décortiquer
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le
Plusieurs types de traitements sont contenu de l’élément.
possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
un langage de programmation: déclaration changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
affectations, comparaisons, tableaux, etc.
En langage JavaScript.

125
Programmation Avancée (PRAVAN)

Visuel
Evénement
HTML
Quelque chose se passe:
Plusieurs événements sont
possibles, par exemple:
onclick (au clic),
onmouseover (au survol),
onload (au chargement de
la page), etc.

Changement visuel
Nous allons
On sélectionne un élément HTML (presque
décortiquer
Traitement comme le fait le CSS), puis on modifie le
Script JS code HTML pour, par exemple, changer le

Les Evénements
Plusieurs types de traitements sont
possibles, comme ce qui peut se faire dans
un langage de programmation: déclaration
contenu de l’élément.
Ou, on modifie le style, pour, par exemple,
changer la couleur d’un élément.
de variables, opérations arithmétiques, Tout est modifiable par programmation.
Il est
important de connaitre
affectations, les événements
comparaisons, tableaux, etc.
En langage JavaScript.
possibles, pour maitriser l’interaction avec
l’utilisateur
126
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

127
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

le "lorsque l’utilisateur clique"

C’est un Evénement

128
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

le "lorsque l’utilisateur clique"

C’est un Evénement

En JavaScript, cet événement

s’appel "onclick"

129
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

Mais je le déclare où ??

le "lorsque l’utilisateur clique"

C’est un Evénement

En JavaScript, cet événement

s’appel "onclick"

130
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

le "lorsque l’utilisateur clique" sur sur le bouton "Incrémenter"

C’est un Evénement

En JavaScript, cet événement

s’appel "onclick"

131
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

Mais je n’ai pas terminé,

car je n’ai pas encore
le "lorsque l’utilisateur clique" sur sur le bouton "Incrémenter" précisé ce que j’ai envie
de faire quand
C’est un Evénement l’événement est
déclenché
En JavaScript, cet événement
s’appel "onclick"

132
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

le "lorsque l’utilisateur clique" sur sur le bouton "Incrémenter" Je fait un traitement Une fonction qu’on appellera par
exemple "do Traitement", et
C’est un Evénement qu’on définira
En JavaScript, cet événement compteur s’incrémente
s’appel "onclick" de 1, et si on dépasse 5,
il devient rouge.

133
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.
Rappelez-vous

HTML

Script JS

Une fonction qu’on appellera par

exemple "do Traitement", et
qu’on définira
compteur s’incrémente
de 1, et si on dépasse 5,
il devient rouge.

134
Programmation Avancée (PRAVAN) On voudrait prévoir le lorsque l’utilisateur clique sur le bouton
comportement suivant "Incrémenter", (un traitement)
6- Les Evénements (traitement) c’est : le compteur s’incrémente
de 1, et si on dépasse 5, il devient rouge.

HTML

Au clic

Script JS

Au clic

….
135
Programmation Avancée (PRAVAN)
6- Les Evénements

Autres notations

136
Programmation Avancée (PRAVAN)
6- Les Evénements

HTML

Au survol
Passage de la
souris, sans clique

Au survol

….
le "lorsque l’utilisateur clique"
clique

Evénement survol
onmouseover Mais il existe d’autres
événements possibles

137
Programmation Avancée (PRAVAN)
6- Les Evénements

HTML

Au survol
Passage de la
souris, sans clique

Au survol

….
le "lorsque l’utilisateur clique"
clique

Evénement survol
onmouseover
Liste des événements possibles
[Link]
[Link]
138
Programmation Avancée (PRAVAN)
6- Les Evénements
Event Description Exemple
[Link]("dblclick", ()=>
dbclick Double-clic sur un élément.
[Link]("Double clic"));
[Link]("keydown", e =>
keydown Une touche du clavier est enfoncée.
[Link]([Link]));
[Link]("keyup", ()=>
keyup Une touche du clavier est relâchée.
[Link]("Relâché"));
[Link]("focus", ()=>
focus Élément reçoit le focus (cliqué ou tabulé).
[Link]="yellow");
[Link]("blur", ()=>
blur Élément perd le focus.
[Link]="white");
[Link]("load", ()=>
load Page ou ressource terminée de charger.
[Link]("Page chargée"));
[Link]("contextmenu", e => {
contextmenu Clic droit (menu contextuel). [Link](); alert("Clic droit !");
});
[Link]("dragstart", ()=>
dragstart Début d’un glisser-déposer.
[Link]("Drag start"));
[Link]("drop", e =>
drop Élément déposé.
[Link]("Déposé !"));
139
Programmation Avancée (PRAVAN)
6- Les Evénements

HTML

Au survol de
Ici: j’ai mis mon traitement directement dans le HTML
Titre1
(juste montrer la possibilité).
J’ai aussi utilisé 2 événement:
• onmousover (au passage de la souris)
• onmousleave (quand l’élément n’est plus survolé)

Quand Titre1 n’est

plus survolé

140
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Bonnes pratiques

Structure et Organisation: Performance:

• Utiliser let et const à la place de var pour mieux gérer la portée. • Préférer les méthodes natives de tableau (map, filter,
• Séparer les responsabilités : logique, affichage (DOM), et style (CSS). reduce) aux boucles manuelles lourdes.
• Utiliser des classes et des objets littéraux pour structurer les • Utiliser l’asynchrone moderne (async/await) pour éviter
données. le blocage du thread principal.
• Documenter le code. • Éviter la manipulation directe et fréquente du DOM
(regrouper les mises à jour).
Lisibilité du code: • Utiliser des outils de profiling (Performance tab,
Lighthouse) pour détecter les goulots d’étranglement.
• Utiliser === au lieu de == (comparaison stricte). • Éviter les variables globales (risque de surcharge
• Favoriser les fonctions pures (sans effet de bord) (autonome) mémoire et conflits)
• Préférer la déstructuration (const {x, y} = obj) pour clarifier les
extraits de données. Organisation et maintenance:
• Utiliser les template literals (`Bonjour ${nom}`) pour la lisibilité des
chaînes. • Travailler avec un contrôle de version (Git) et des revues
• Écrire du code concis avec les fonctions fléchées quand approprié. de code.
• Aérer le code (indentation, espaces, retours à la ligne). • Respecter le mode strict ("use strict";) pour éviter les
• Utiliser Prettier ou un formateur automatique. erreurs silencieuses.
• Isoler la configuration et les variables d’environnement.

[Link] 141
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript
Evolution du langage

Evolution

1995: Naissance.
1997-1999: ES1 à ES3: Première version stable
2009: ES5: Modernisation (strict mode, JSON, forEach, map, reduce) version supporté par tous les navigateurs
2015: ES6 Révolution (let, const, class, modules, fonctions fléchées, Promise,…)
2016-2025: ES7-ES15: Modernisation continue (async/await, rest/spread, flat, chaining…)

Où se dirige JS ?
Abandonce de Frameworks
Langage universel: côté client/serveur/mobile, IA, IOT
Interopérabilité • Front-end: React, Vue, Angular…
Performance/typage: apparition de TypeScript pour typer le • Back-end: NodeJS, Express, NestJS
code.

142
Programmation Avancée (PRAVAN)
Liens utiles

W3Schools
[Link]

Mozilla Developer Network

[Link]

[Link]
[Link]

Spécification ECMAScriot 2026

[Link]

143