ProgWeb Cours ch3 JavaScript

Chapitre 3
Site Interactif
JavaScript
Dr. BOUBENIA Mohamed

mo.boubenia@gmail.com
18/03/2023
Programmation Web
Où sommes nous ? Site dynamique
(programmation
Les bases de données Chapitre 5 Chapitre 4 côté serveur)
Serveur
Web
Base de données
HTML
Chapitre 1
Site
CSS
Statique
Chapitre 2
Chapitre 3
Interactivité Navigateur
(programmation JavaScript Chapitre 0
côté client)
Introduction
2
Programmation Web
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 Web
1
Rappel
4
Programmation Web
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-t-on ?
5
Programmation Web
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 Web
1- Rappel
Site Web Statique (Seulement avec HTML+CSS)+Interactif
Serveur
Site Statique +
HTTP HTML CSS
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 Web
1- Rappel
Site Web Statique (Seulement avec HTML+CSS+JS)+Interactif
Serveur
Site Statique +
HTTP HTML CSS JavaScript
de saisie.
- etc. Action Cette programmation se
fait dans des scripts en
Navigateur langage JavaScript
souhaite prévoir sur notre (Côté Client)
programmés Réaction
8
Programmation Web
1- Rappel
Site Web Statique (Seulement avec HTML+CSS+JS)+Interactif
Serveur
Site Statique +
HTTP HTML CSS JavaScript
de saisie.
- etc. Action Cette programmation se
fait dans des scripts en
Navigateur langage JavaScript
souhaite prévoir sur notre (Côté Client) Ces scripts sont exécutés par le
Réaction navigateur au besoin (ex. un
programmés événement click se produit)
9
Programmation Web
2
Les Bases
de la programmation
côté client
10
Programmation Web
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 Web 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
il devient rouge.
HTML
Script JS
….
Ce comportement doit
être programmé dans un
script JS (JavaScript).
13
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 Web lorsque l’utilisateur clique sur le
bouton "Incrémenter", le compteur
il devient rouge.
HTML
Décortiquons un peu ce
comportement
Script JS
….
15
Programmation Web Décortiquons un peu ce lorsque l’utilisateur clique sur le
comportement bouton "Incrémenter", le compteur
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
il devient rouge.
Evénement
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
il devient rouge.
Evénement
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 Web
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 Web
Résumons
Visuel
Evénement
HTML
onclick (au clic),
la page), etc.
Changement visuel
de variables, opérations arithmétiques, Tout est modifiable par programmation
Oui… Mais où mettre ces scripts? Il existe 3 méthodes

20
Programmation Web
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 Web
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 Web
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 Web
Visuel
Evénement
HTML
onclick (au clic),
la page), etc.
Changement visuel
Nous allons
décortiquer
24
Programmation Web
D’abord, Il est important de Visuel

Les bases
HTML
Evénementconnaitre le langage JavaScript
(syntaxe, sémantique, etc.)
du langage
onclick (au clic),
JavaScript onload (au chargement de

la page), etc.
Changement visuel
Nous allons
décortiquer
25
Programmation Web
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 Web
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 Web
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 Web
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 Web
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 Web
Noyau du langage JS 2. Variables et Constantes Les Types primitifs
> Console
31
Programmation Web
Noyau du langage JS 2. Variables et Constantes Les Types Complexes
Les Tableaux
> Console
32
Programmation Web
Les Objets
// accès à la propriété nom

// accès à la propriété age
> Console
33
Programmation Web
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 Web
Noyau du langage JS 3. Les Opérateurs
Arithmétiques Logiques Rationnels
35
Programmation Web
Noyau du langage JS 4. Les Conditions
36
Programmation Web
Noyau du langage JS 5. Les Boucles
37
Programmation Web
Noyau du langage JS 6. Les Fonctions
38
Programmation Web
Noyau du langage JS 7. Portée d’une variable Globale vs Locale
39
Programmation Web
D’abord, Il est important de Visuel

Les bases
HTML
Evénementconnaitre le langage JavaScript
(syntaxe, sémantique, etc.)
du langage
onclick (au clic),
JavaScript onload (au chargement de

la page), etc.
Changement visuel
Nous allons
décortiquer
40
Programmation Web
Visuel
Evénement
HTML
onclick (au clic),
la page), etc.
Changement visuel
Nous allons
décortiquer
41
Programmation Web
Visuel
Evénement
HTML
onclick (au clic),
Manipulation du DOM la page), etc.
Changement visuel
Il est important de comprendre Nous allons
décortiquer
le DOM, pour savoir comment
sélectionner un élément HTML
et comment le modifier. possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
42
Programmation Web
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 Web
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 Web
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 Web
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 Web
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 Web
Par identifiant
Par class
Par sélecteur CSS
48
Programmation Web
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 Web
document
HTML
h1 h2 h2 h2 p p
1 2
Je veux le Je peux le retrouver
modifier avec son id
3
On commence toujours par "document", car c’est lui la racine 50
Programmation Web
document
HTML
h1 h2 h2 h2 p p
1 2
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 Web
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
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 Web
Par identifiant
Par class
Par sélecteur CSS
53
Programmation Web
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 Web
document
HTML
h1 h2 h2 h2 p p
1 2
modifier avec le nom balise
55
Programmation Web
document
HTML
h1 h2 h2 h2 p p
1 2
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 Web
doTraitement()
Retrouver un élément HTML Par le nom de balise 4
document
HTML
h1 h2 h2 h2 p p
1 2
3
Même s’il y a un seul h1 dans notre page
HTML, la méthode getElementsByTagName
retourne toujours une collection.
élément h1, et pour le retrouver, on lit le
une collection commence de l’index 0) 57
Programmation Web
Par identifiant
Par class
Par sélecteur CSS
58
Programmation Web
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 Web
document
HTML
h1 h2 h2 h2 p p
1 2
modifier avec le nom classe
60
Programmation Web
document
HTML
h1 h2 h2 h2 p p
1 2
3
élément p, et pour le retrouver, on lit le
une collection commence de l’index 0)
61
Programmation Web
doTraitement()
Retrouver un élément HTML Par class 4
document
HTML
h1 h2 h2 h2 p p
1 2
3
élément p, et pour le retrouver, on lit le
une collection commence de l’index 0)
62
Programmation Web
Par identifiant
Par class
Par sélecteur CSS
63
Programmation Web
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 Web
1 2
modifier avec un Sélecteur CSS
65
Programmation Web
doTraitement()
3
1 2
modifier avec un Sélecteur CSS
66
Programmation Web
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 Web
1
Je veux les
modifier
68
Programmation Web
1 2
Je veux les Je peux les retrouver
modifier avec le nom Balise h2
69
Programmation Web
1 2
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 Web
doTraitement()
Retrouver plusieurs éléments HTML 4
1 2
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 Web
Par identifiant
Par class
Par sélecteur CSS
1- Retrouver l’élément HTML
72
Programmation Web
Le tout se fait généralement en 2 étapes :
Un élément HTML
Une fois l’élément

retrouvé, on peut faire des
opérations dessus
73
Programmation Web 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
Un élément HTML
Propriétés Méthodes
Une fois l’élément parentNode innerHTML style append() hasAttribute()

opérations dessus childNodes innerText remove() getAttribute()
firstChild attributs removeChild() setAttribute()
lastChild appendChild()
nextSibling replaceChild()
Les plus importantes
(Partie 2)
Voir d’autres ici: https://www.w3schools.com/jsref/dom_obj_all.asp
74
Programmation Web 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
Un élément HTML

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

75
Programmation Web
Un élément HTML

Ces propriétés permettent la
Nos opérations vont, donc, navigation dans l’arbre, par rapport setAttribute()
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()

76
Programmation Web
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 Web
Un élément HTML

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()
appeler une des ses

78
Programmation Web
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 Web
Un élément HTML

Nos opérations vont, donc, Il est possible d’accéder à setAttribute()
soit, modifier les valeurs certains attributs directement
de ses propriétés, ou lastChild avec leur nom appendChild()
appeler une des ses

80
Programmation Web HTML
Un élément HTML
Propriétés
attributs
Il est possible d’accéder à

certains attributs directement
avec leur nom
Console
81
Programmation Web
Un élément HTML
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.
appeler une des ses

82
Programmation Web
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 Web
Un élément HTML

appeler une des ses

84
Programmation Web
Un élément HTML
Une fois l’élément Rajoute du texte au

parentNode innerHTML style sans le
contenu existant, append() hasAttribute()
opérations dessus remplacer.
childNodes innerText remove() getAttribute()
appeler une des ses

85
Programmation Web
Un élément HTML
Méthodes
append()
Manière plus simple

de rajouter à la fin
86
Programmation Web
Un élément HTML

firstChild attributs
Permettent de supprimer/ removeChild()
de ses propriétés, ou rajouter/remplacer un
lastChild élément replaceChild()
appeler une des ses

87
Programmation Web
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 Web
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 Web
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 Web
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 Web
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()
élément enfant
92
Programmation Web
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()
élément enfant
93
Programmation Web
Un élément HTML

opérations dessus Permettent de d’accéder
childNodes innerText remove()
aux attributs de l’élément getAttribute()
appeler une des ses

94
Programmation Web
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 Web
Un élément HTML

appeler une des ses

96
Programmation Web
1. Notions de base du Web
DOM vs BOM
97
Programmation Web
5- Le BOM (Browser Object Model)
DOM
Rappelez-vous HTML
head body
…. p p
…. ….
Le DOM: Document Object Model
98
Programmation Web
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 Web
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 Web
window Et cet objet window a aussi

d’autres objets enfants
DOM
document screen location history navigator
HTML
head body
…. p p
…. ….
101
Programmation Web
BOM: Browser Object
Model
window
DOM
HTML
head body
…. p p
…. ….
102
Programmation Web
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 Web
DOM

Méthode
HTML
href()
head body
…. p p
…. ….
104
Programmation Web
DOM
Méthodes
back()
go()
HTML
forward()
head body
…. p p
…. ….
105
Programmation Web
DOM
Propriétés
platform
HTML
head body
…. p p
…. ….
106
Programmation Web
Quelques propriétés et méthodes intéressantes BOM: Browser Object
Model
window
DOM
HTML
https://www.w3schools.com/jsref/obj_window.asp
head body
…. p p
…. ….
107
Programmation Web
Visuel
Evénement
HTML
onclick (au clic),
Manipulation du DOM la page), etc.
Changement visuel
Il est important de comprendre Nous allons
décortiquer
le DOM, pour savoir comment
sélectionner un élément HTML
et comment le modifier. possibles, comme ce qui peut se faire dans Ou, on modifie le style, pour, par exemple,
108
Programmation Web
Visuel
Evénement
HTML
onclick (au clic),
la page), etc.
Changement visuel
Nous allons
décortiquer
109
Programmation Web
Visuel
Evénement
HTML
onclick (au clic),
la page), etc.
Changement visuel
Nous allons
décortiquer
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.
Il est
important de connaitre
affectations, les événements
comparaisons, tableaux, etc.
possibles, pour maitriser l’interaction avec
l’utilisateur
110
Programmation Web 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
Rappelez-vous
HTML
le "lorsque l’utilisateur clique"
C’est un Evénement
112
Rappelez-vous
HTML
En JavaScript, cet événement

s’appel "onclick"
113
Rappelez-vous
HTML
Mais je le déclare où ??

s’appel "onclick"
114
Rappelez-vous
HTML
le "lorsque l’utilisateur clique" sur sur le bouton "Incrémenter"

s’appel "onclick"
115
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é
s’appel "onclick"
116
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
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
HTML
Au clic
Script JS
Au clic
….
119
Programmation Web
6- Les Evénements
HTML
Au survol
Passage de la
souris, sans clique
Au survol
….
clique
Evénement survol
onmouseover Mais il existe d’autres
événements possibles
120
Programmation Web
6- Les Evénements
HTML
Au survol
Passage de la
souris, sans clique
Au survol
….
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 Web
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 Web
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 Web
La suite ? Prochain cours
Site dynamique
(programmation
Les bases de données Chapitre 5 Chapitre 4 côté serveur)
Serveur
Web
Base de données
HTML
Chapitre 1
Site
CSS
Statique
Chapitre 2
Chapitre 3
Interactivité Navigateur
(programmation JavaScript Chapitre 0
côté client)
Introduction
124
Programmation Web
Merci
125

ProgWeb Cours ch3 JavaScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ProgWeb Cours ch3 JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 3

Dr. BOUBENIA Mohamed

…Mais, à eux seuls, ils ne

Ce scripts sera exécuté

Nous avons attaché à l’élément

Puis un changement visuel est

Nous pouvons aussi mettre une condition comme un

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

Consiste à mettre le script directement dans

Méthode 2:Dans un élément

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

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

Méthode 2:Dans un élément

Consiste à mettre le script dans un

Dans cet exemple, nous avons mis

et nous lui avons fait référence dans

D’abord, Il est important de Visuel

JavaScript onload (au chargement de

Caractéristiques Versions ECMAScript

maPage.html Outils de développement/Console

7. Portée d’une variable

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

Les affectations Les commentaires

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

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

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

Le tableau d’objets peut aussi être

Arithmétiques Logiques Rationnels

D’abord, Il est important de Visuel

JavaScript onload (au chargement de

Manipulation du DOM la page), etc.

Lorsque le navigateur charge une page Web,

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

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

Lorsque le navigateur charge une page Web,

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

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

Par le nom de balise

Par sélecteur CSS

Par le nom de balise

Par sélecteur CSS

Par le nom de balise

Par sélecteur CSS

Par le nom de balise

Par sélecteur CSS

Par le nom de balise

Par sélecteur CSS

Par le nom de balise

Par sélecteur CSS

1- Retrouver l’élément HTML

Une fois l’élément

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

firstChild attributs removeChild() setAttribute()

Les plus importantes

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

Les plus importantes

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

Les plus importantes

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

Les plus importantes

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

Les plus importantes

Il est possible d’accéder à