Master 1 –ESE

Programmation Avancée (PRAVAN)

Où sommes nous ?

Les bases de données Chapitre 5 Chapitre 4 Site dynamique

Serveur
Web
Base de données

Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

HTML CSS

Chapitre 3 Chapitre 1
Interactivité Navigateur
(programmation JavaScript Introduction
côté client)

2
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
3
Programmation Avancée (PRAVAN)

1
Rappel

4
Programmation Avancée (PRAVAN)
1- Rappel
Site Web Statique (Seulement avec HTML+CSS)

Serveur
Web Suffisants pour
la présentation
Requête Réponse
HTTP HTML CSS

…Mais, à eux seuls, ils ne

Navigateur permettent pas l’interactivité
avec l’utilisateur!

De quelle interactivité
parle-ton ?

5
Programmation Avancée (PRAVAN)
1- Rappel
Site Web Statique (Seulement avec HTML+CSS)+Interactif

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

Navigateur
(Côté Client)
Réaction
6
Programmation Avancée (PRAVAN)
1- Rappel
Site Web Statique (Seulement avec HTML+CSS)+Interactif

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

Navigateur
Les comportements que l’on
souhaite prévoir sur notre (Côté Client)
page Web doivent être
programmés Réaction
7
Programmation Avancée (PRAVAN)
1- Rappel
Site Web Statique (Seulement avec HTML+CSS+JS)+Interactif

Serveur
Exemples d’interaction:
Suite à un événement provoqué par Web
l’utilisateur (ex. clique sur un bouton): Interactivité
Site Statique +
- Une élément HTML (Côté Client)
s’affiche/se modifie/se masque. Requête Réponse
- ou Une propriété CSS change.
HTTP HTML CSS JavaScript
- ou Un résultat d’un calcul est affiché.
- ou Suivant la véracité d’une condition le
contenu de la page Web change.
- ou Vérification du contenu d’un champs
de saisie.
- etc. Action Cette programmation se
fait dans des scripts en
Navigateur langage JavaScript
Les comportements que l’on
souhaite prévoir sur notre (Côté Client)
page Web doivent être
programmés Réaction
8
Programmation Avancée (PRAVAN)
1- Rappel
Site Web Statique (Seulement avec HTML+CSS+JS)+Interactif

Serveur
Exemples d’interaction:
Suite à un événement provoqué par Web
l’utilisateur (ex. clique sur un bouton): Interactivité
Site Statique +
- Une élément HTML (Côté Client)
s’affiche/se modifie/se masque. Requête Réponse
- ou Une propriété CSS change.
HTTP HTML CSS JavaScript
- ou Un résultat d’un calcul est affiché.
- ou Suivant la véracité d’une condition le
contenu de la page Web change.
- ou Vérification du contenu d’un champs
de saisie.
- etc. Action Cette programmation se
fait dans des scripts en
Navigateur langage JavaScript
Les comportements que l’on
souhaite prévoir sur notre (Côté Client) Ces scripts sont exécutés par le
page Web doivent être
Réaction navigateur au besoin (ex. un
programmés événement click se produit)
9
Programmation Avancée (PRAVAN)

2
Les Bases
de la programmation
côté client

10
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:

11
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

….
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

Script JS

….
Ce comportement doit
être programmé dans un
script JS (JavaScript).
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

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).
14
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

….
15
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

….
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",

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 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

….
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
18
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.

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.

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

20
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

21
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>

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)

22
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>

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.

23
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.

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

D’abord, Il est important de Visuel

Les bases
HTML
Evénement connaitre le langage JavaScript
(syntaxe, sémantique, etc.)
Quelque chose se passe:

du langage
Plusieurs événements sont
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.

25
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ée par Netscape (le fameux navigateur Web),en 1990.
• 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).

26
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. ES12 ES2021 June 2020
❑ Syntaxe ES11 ES2020 June 2020
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 dynamique et faiblement typé ES7 ES2016 June 2016
Une variable peut à tout moment changer de type.
ES6 ES2015 June 2015
❑ Langage non compilé, mais interprété: ES5.1 ES5.1 June 2011
En C++ et Java, tout le code source passe par l’étape de compilation ES5 ES5 December 2009
(transforme le code en code binaire que la machine comprend et exécute).
ES4 ES4 Abandoned
En revanche, en JavaScript, il n’y a pas d’étape de compilation. A la place,
un interpréteur (présent dans le navigateur), lit le code JS, interprète ES3 ES3 December 1999
chaque ligne, et l’exécute. ES2 ES2 June 1998
ES1 ES1 June 1997
❑ Spécification: ECMAScript (ES) Specification.
27
Programmation Avancée (PRAVAN)
3- Les Bases du Langage JavaScript

Familiarités avec les langages de programmation Comme avec tout langage de programmation, en
JavaScript, il y a aussi la console qu’on peut utiliser pour
Contrairement au langage C ou Java, en JavaScript il n’y a pas de notion de afficher (on écrit: console.log("text à afficher")).
fonction principale (la fameuse fonction main()).
Le console est accessible dans n’importe quel
A la place, le navigateur interprète et exécute le code de haut vers le bas, navigateur. Par exemple, ici, on a ouvert la page
et compris les fichiers JS externes. maPage.html, puis les outils de développement, puis
l’onglet Console.

maPage.html Outils de développement/Console

Mon_script.js

28
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

29
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 (;)

Les affectations Les commentaires

Signe égale: Ici on a fait un calcul, et le résultat

est affecté à une variable "a" // pour chaque ligne

Sur plusieurs lignes : commence par /* et se termine par */

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

> Console

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

> Console

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

// accès à la propriété nom

// accès à la propriété age
> Console

33
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

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

Arithmétiques Logiques Rationnels

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

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

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

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

39
Programmation Avancée (PRAVAN)

D’abord, Il est important de Visuel

Les bases
HTML
Evénement connaitre le langage JavaScript
(syntaxe, sémantique, etc.)
Quelque chose se passe:

du langage
Plusieurs événements sont
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.

40
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.

41
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.

42
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>

43
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.

44
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
45
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 changer son
contenu.

Script JS

….
Il existe plusieurs
Ici, nous avons changé son manières pour retrouver
style CSS un élément HTML.
46
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.
47
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

48
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é

49
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 50
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. 51
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. 52
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

53
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

54
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

55
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) 56
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) 57
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

58
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

59
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

60
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)
61
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)
62
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

63
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é

64
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é

65
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é

66
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

67
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

68
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

69
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.

70
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.

71
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

72
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

73
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 childNodes innerText remove() getAttribute()

firstChild attributs removeChild() setAttribute()

lastChild appendChild()

nextSibling replaceChild()

Les plus importantes

Voir d’autres ici: https://www.w3schools.com/jsref/dom_obj_all.asp

74
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 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: https://www.w3schools.com/jsref/dom_obj_all.asp

75
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()
Ces propriétés permettent la
Nos opérations vont, donc, navigation dans l’arbre, par rapport setAttribute()
firstChild attributs removeChild()
soit, modifier les valeurs à l’élément récupéré
de ses propriétés, ou lastChild appendChild()
appeler une des ses
méthodes nextSibling replaceChild()

Les plus importantes

Voir d’autres ici: https://www.w3schools.com/jsref/dom_obj_all.asp

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

Un élément HTML

Propriétés

parentNode

childNodes
Ces propriétés permettent la
firstChild navigation dans l’arbre, par rapport
à l’élément récupéré
lastChild

nextSibling

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

77
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() du getAttribute()
Permettent la modification
Nos opérations vont, donc, contenu de l’élément.
firstChild attributs removeChild() setAttribute()
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: https://www.w3schools.com/jsref/dom_obj_all.asp

78
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

79
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: https://www.w3schools.com/jsref/dom_obj_all.asp

80
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

81
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: https://www.w3schools.com/jsref/dom_obj_all.asp

82
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
83
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: https://www.w3schools.com/jsref/dom_obj_all.asp

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
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: https://www.w3schools.com/jsref/dom_obj_all.asp

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

Un élément HTML

Méthodes

append()

Manière plus simple

de rajouter à la fin

86
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: https://www.w3schools.com/jsref/dom_obj_all.asp

87
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

88
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 89
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 90
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

91
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

92
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

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 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, 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: https://www.w3schools.com/jsref/dom_obj_all.asp

94
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 element.src
getAttribute retourne la valeur exacte de l’attribut !
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: https://www.w3schools.com/jsref/dom_obj_all.asp

96
Programmation Avancée (PRAVAN)

1. Notions de base du Web

DOM vs BOM

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

DOM

Rappelez-vous HTML

head body

…. p p

…. ….

Le DOM: Document Object Model

98
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

…. ….

99
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

…. ….

100
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

…. ….

101
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

…. ….

102
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
https://www.w3schools.com/jsref/obj_window.asp window
DOM
Méthodes
document
alert() screen location history navigator
Affiche une boite d’alerte.
HTML
Prompt()

head Affiche une boite avec champs de saisie.

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

scrollBy();
…. ….
Scroll par un pas spécifié
103
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
https://www.w3schools.com/jsref/obj_window.asp window
DOM

document screen location history navigator

Méthode
HTML
href()

head body

…. p p

…. ….

104
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
https://www.w3schools.com/jsref/obj_window.asp window
DOM
Méthodes
document screen location history navigator
back()

go()
HTML
forward()
head body

…. p p

…. ….

105
Programmation Avancée (PRAVAN)
5- Le BOM (Browser Object Model)
Quelques propriétés et méthodes intéressantes
Voir d’autres ici:
https://www.w3schools.com/jsref/obj_window.asp window
DOM
Propriétés
document screen location history navigator
platform

HTML

head body

…. p p

…. ….

106
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:
https://www.w3schools.com/jsref/obj_window.asp
head body

…. p p

…. ….

107
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.

108
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.

109
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
110
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

111
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

112
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"

113
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"

114
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"

115
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"

116
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.

117
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.

118
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

….
119
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

120
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énéments possibles
https://www.w3schools.com/jsref/dom_obj_event.asp
https://developer.mozilla.org/fr/docs/Web/Events
121
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é

122
Programmation Avancée (PRAVAN)
Liens utiles

W3Schools
https://www.w3schools.com/

Mozilla Developer Network

https://developer.mozilla.org/fr/docs/Learn/HTML

Ma chaine Youtube (Bingo Web Academy)

https://youtube.com/playlist?list=PL6OcOlxBo0fDTwv7McJpGwq_t35PM6z70

123
Programmation Avancée (PRAVAN)
La suite ?

1- Exemples de programmation côtés client

2- Les bases du langage JavaScript

En TP 3- Manipulation du DOM

4- Utilisation du BOM

5- Les événements

Un site Statique Interactif

124
Programmation Avancée (PRAVAN)
La suite ? Prochain cours

Les bases de données Chapitre 5 Chapitre 4 Site dynamique

Serveur
Web
Base de données

Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

HTML CSS

Chapitre 3 Chapitre 1
Interactivité Navigateur
(programmation JavaScript Introduction
côté client)

125
Programmation Avancée (PRAVAN)

Merci

126