Introduction à JavaScript

M. BOUMEDIENE

Institut National des Télécommunications et des Technologies

de l’Information et de la Communication
e-mail: mboumediene[at][Link]

xx xx 2020

1/28 Mohammed Boumediene JavaScript

 Plan

1 Présentation de JavaScript

2 Fenêtre

3 DOM HTML

4 Gestion des évènements

2/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Plan

1 Présentation de JavaScript

2 Fenêtre

3 DOM HTML

4 Gestion des évènements

3/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.
Le code est interprété localement par le navigateur du client.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.
Le code est interprété localement par le navigateur du client.
Un code JavaScript permet par exemple d’afficher des messages,
vérifier les formulaires en contrôlant les données saisies par les utilisateurs,
assurer les animations, etc.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.
Le code est interprété localement par le navigateur du client.
Un code JavaScript permet par exemple d’afficher des messages,
vérifier les formulaires en contrôlant les données saisies par les utilisateurs,
assurer les animations, etc.

Historique
En 1995, Brendan Eich invente JavaScript (Netscape).

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.
Le code est interprété localement par le navigateur du client.
Un code JavaScript permet par exemple d’afficher des messages,
vérifier les formulaires en contrôlant les données saisies par les utilisateurs,
assurer les animations, etc.

Historique
En 1995, Brendan Eich invente JavaScript (Netscape).
Microsoft ne tarde pas à développer son propre langage Script nommé JScript.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.
Le code est interprété localement par le navigateur du client.
Un code JavaScript permet par exemple d’afficher des messages,
vérifier les formulaires en contrôlant les données saisies par les utilisateurs,
assurer les animations, etc.

Historique
En 1995, Brendan Eich invente JavaScript (Netscape).
Microsoft ne tarde pas à développer son propre langage Script nommé JScript.
JavaScript a été standardisé par l’organisme de régulation ECMAScript.

4/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Intérêt et historique
Pourquoi JavaScript ?
CSS permet une mise en forme automatique des pages HTML.
HTML et CSS, n’assurent pas l’interaction avec les utilisateurs, ni le traitement de
leurs donnés. =⇒ JavaScript.
JavaScript est un langage de script côté client.
Le code est interprété localement par le navigateur du client.
Un code JavaScript permet par exemple d’afficher des messages,
vérifier les formulaires en contrôlant les données saisies par les utilisateurs,
assurer les animations, etc.

Historique
En 1995, Brendan Eich invente JavaScript (Netscape).
Microsoft ne tarde pas à développer son propre langage Script nommé JScript.
JavaScript a été standardisé par l’organisme de régulation ECMAScript.
En 2014, la version 6 (ES 6) a été publiée.
4/28 Mohammed Boumediene JavaScript
 Présentation de JavaScript

Où écrire le code JS
Interne, Externe
Un code JavaScript (JS) est intégré dans une page HTML via la balise <script>.

1 <!DOCTYPE h t m l>
2 <html>
3 <head>
4 <meta http−equiv= " c o n t e n t − t y p e " c o n t e n t = " t e x t / h t m l ;
5 c h a r s e t = u t f − 8 ">
6 <t i t l e>J a v a S c r i p t</ t i t l e>
7 <!−− S c r i p t I n t e r n e −−>
8 <s c r i p t type= " t e x t / j a v a s c r i p t ">
9 // C e c i e s t un c o m m e n t a i r e s u r une s e u l e l i g n e
0 function s c r i p t I n t e r n e () {
1 window . a l e r t ( " A p p e l v e r s un s c r i p t i n t e r n e ! " ) ;
2 }
3 </ s c r i p t>
4 </ head>

5/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Où écrire le code JS
Interne, Externe
Un code JavaScript (JS) est intégré dans une page HTML via la balise <script>.
Déclarée dans l’en-tête (head) et/ou le corps (body) de la page.

1 <!DOCTYPE h t m l>
2 <html>
3 <head>
4 <meta http−equiv= " c o n t e n t − t y p e " c o n t e n t = " t e x t / h t m l ;
5 c h a r s e t = u t f − 8 ">
6 <t i t l e>J a v a S c r i p t</ t i t l e>
7 <!−− S c r i p t I n t e r n e −−>
8 <s c r i p t type= " t e x t / j a v a s c r i p t ">
9 // C e c i e s t un c o m m e n t a i r e s u r une s e u l e l i g n e
0 function s c r i p t I n t e r n e () {
1 window . a l e r t ( " A p p e l v e r s un s c r i p t i n t e r n e ! " ) ;
2 }
3 </ s c r i p t>
4 </ head>

5/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Où écrire le code JS
Interne, Externe
Un code JavaScript (JS) est intégré dans une page HTML via la balise <script>.
Déclarée dans l’en-tête (head) et/ou le corps (body) de la page.

1 <s c r i p t type= " t e x t / j a v a s c r i p t ">

2 /∗ C e c i e s t un c o m m e n t a i r e s u r
3 plusieurs lignes . . . . . . . ∗ /
4
5 /∗ a j o u t du c o n t e n u d a n s l a page ∗/
6 document . w r i t e ( " B i e n v e n u e au c o u r s JS " ) ;
7
8 function scriptInterne2 () {
9 window . a l e r t ( " A p p e l v e r s un s c r i p t i n t e r n e 2 ! " ) ;
0 }
1 </ s c r i p t>
2 <!−− S c r i p t E x t e r n e −−>
3 <s c r i p t type= " t e x t / j a v a s c r i p t " src= " s c r i p t E x t e r n e 1 . j s "></ s c r i p t>
4 </b ody>

5/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Où écrire le code JS
Interne, Externe
Un code JavaScript (JS) est intégré dans une page HTML via la balise <script>.
Déclarée dans l’en-tête (head) et/ou le corps (body) de la page.
Le script peut être interne ou externe à la page =⇒ détails voir "Page_JS1.html"

1 <s c r i p t type= " t e x t / j a v a s c r i p t ">

2 /∗ C e c i e s t un c o m m e n t a i r e s u r
3 plusieurs lignes . . . . . . . ∗ /
4
5 /∗ a j o u t du c o n t e n u d a n s l a page ∗/
6 document . w r i t e ( " B i e n v e n u e au c o u r s JS " ) ;
7
8 function scriptInterne2 () {
9 window . a l e r t ( " A p p e l v e r s un s c r i p t i n t e r n e 2 ! " ) ;
0 }
1 </ s c r i p t>
2 <!−− S c r i p t E x t e r n e −−>
3 <s c r i p t type= " t e x t / j a v a s c r i p t " src= " s c r i p t E x t e r n e 1 . j s "></ s c r i p t>
4 </b ody>

5/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Syntaxe
Variables
Les variables sont déclarées avec le mot clé var mais sans spécifier de type

1 v a r y = 6 . 2 6 ; // nombre r é e l

1 v a r m o d e l e = [ " p o l o " , " g o l f " , " p a s s a t " ] ; // t a b l e a u

6/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Syntaxe
Variables
Les variables sont déclarées avec le mot clé var mais sans spécifier de type

1 v a r y = 6 . 2 6 ; // nombre r é e l

1 v a r m o d e l e = [ " p o l o " , " g o l f " , " p a s s a t " ] ; // t a b l e a u

C’est à l’interpréteur de déduire automatiquement le type des variables.

Type Description
nombre entier, réel
chaîne de caractères texte
objet objet et ses propriétés
boolean true ou false
tableau le premier élément a l’indice 0
undefined variable sans valeur

6/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Déclaration de variables

1 var x = 5; // nombre e n t i e r
2 v a r y = 6 . 2 6 ; // nombre r é e l
3 v a r z = 11 e3 ; // nombre r é e l
4
5 v a r prenom = "Ahmed" , nom = " Ben D a l i " ; // cha î ne de c a r a c t è r e s
6
7 v a r objetNom = { prenom : "Ahmed" , nom : " Ben D a l i " } ; // o b j e t
8
9 v a r t e s t 1 = t r u e , t e s t 2 = f a l s e ; // b o o l e a n
0
1 v a r m o d e l e = [ " p o l o " , " g o l f " , " p a s s a t " ] ; // t a b l e a u
2 v a r m1 = m [ 0 ] ; // p r e m i e r é l é ment
3
4 var v a r i a b l e ; /∗ v a r i a b l e non d é f i n i e ∗/
5
6 v a r p e r s o n n e = "Ahmed W a l i " , v e h i c u l e = " P o l o " , p r i x = 2 0 0 0 ;

7/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Syntaxe

Fonctions
La déclaration s’effectue à l’aide du mot clé function où les instructions sont
délimitées par des accolades.

1 f u n c t i o n nom ( p a r a m e t e r e 1 , p a r a m e t e r e 2 , p a r a m e t e r e 3 , ...) {
2 /∗ m e t t r e i c i l e c o d e à e x é c u t e r ∗/
3 }

8/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Syntaxe

Fonctions
La déclaration s’effectue à l’aide du mot clé function où les instructions sont
délimitées par des accolades.

1 f u n c t i o n nom ( p a r a m e t e r e 1 , p a r a m e t e r e 2 , p a r a m e t e r e 3 , ...) {
2 /∗ m e t t r e i c i l e c o d e à e x é c u t e r ∗/
3 }

La présence du mot clé return signifie le retour de résultat.

8/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Syntaxe

Fonctions
La déclaration s’effectue à l’aide du mot clé function où les instructions sont
délimitées par des accolades.

1 f u n c t i o n nom ( p a r a m e t e r e 1 , p a r a m e t e r e 2 , p a r a m e t e r e 3 , ...) {
2 /∗ m e t t r e i c i l e c o d e à e x é c u t e r ∗/
3 }

La présence du mot clé return signifie le retour de résultat.

Le type des paramètres et du résultat sera déduit automatiquement par
l’interpréteur =⇒ détails voir [Link].

1 f u n c t i o n maFonction ( x , y ) {
2 var z = x ∗ y ;
3 return z ;
4 }

8/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Instruction conditionnelle

1 var x = 10;
2
3 i f ( x > 0) {
4 /∗ b l o c i f ∗/
5 a l e r t ( " l e nombre e s t s u p é r i e u r à z é r o " ) ;
6 } else {
7 /∗ b l o c e l s e ∗/
8 a l e r t ( " l e nombre e s t i n f é r i e u r ou é g a l à z é r o " ) ;
9 }

9/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Boucles for

1 v a r p e r s o n n e = {nom : " Ben D a l i " , prenom : "Ahmed" , ag e : 2 1 } ;

2
3 var text = " " ;
4 var x ;
5 for ( x in personne ) {
6 t e x t e += p e r s o n n e [ x ] + " " ;
7 }

Une variante de for est la boucle for/in. Cette dernière parcourt un objet en accédant à
toutes ses propriétés.
1 v a r p e r s o n n e = {nom : " Ben D a l i " , prenom : "Ahmed" , ag e : 2 1 } ;
2
3 var text = " " ;
4 var x ;
5 for ( x in personne ) {
6 t e x t e += p e r s o n n e [ x ] + " " ;
7 }

10/28 Mohammed Boumediene JavaScript

 Présentation de JavaScript

Boucles while

La boucle while répète l’exécution d’une partie du code tant que la condition est vraie.
1 v a r i = 0 , t e x t e =" " ;
2 w h i l e ( i < 10) {
3 t e x t e += " Le nombre e s t "+ i + "<br>" ;
4 i ++;
5 }

Une variante de la boucle while est la boucle do/while. Cette dernière s’exécute au
moins une fois avant même d’évaluer la condition.
1 v a r i = 0 , t e x t e =" " ;
2 do {
3 t e x t e += " Le nombre e s t "+ i + "<br>" ;
4 i ++;
5 } w h i l e ( i < 10) ;

11/28 Mohammed Boumediene JavaScript

 Fenêtre

Plan

1 Présentation de JavaScript

2 Fenêtre

3 DOM HTML

4 Gestion des évènements

12/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur
Pour JavaScript plusieurs objets constituent la fenêtre du navigateur c.-a.-d.
l’objet window

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur
Pour JavaScript plusieurs objets constituent la fenêtre du navigateur c.-a.-d.
l’objet window
1 location : procure des informations sur l’URL de la page visitée.

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur
Pour JavaScript plusieurs objets constituent la fenêtre du navigateur c.-a.-d.
l’objet window
1 location : procure des informations sur l’URL de la page visitée.
2 history : représente l’historique du navigateur.

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur
Pour JavaScript plusieurs objets constituent la fenêtre du navigateur c.-a.-d.
l’objet window
1 location : procure des informations sur l’URL de la page visitée.
2 history : représente l’historique du navigateur.
3 navigator : regroupe des informations sur le navigateur du visiteur.

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur
Pour JavaScript plusieurs objets constituent la fenêtre du navigateur c.-a.-d.
l’objet window
1 location : procure des informations sur l’URL de la page visitée.
2 history : représente l’historique du navigateur.
3 navigator : regroupe des informations sur le navigateur du visiteur.
4 popup : pour interagir avec les utilisateurs.

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Objets de la fenêtre

window
JavaScript est un langage côté client ⇒ exécuter par le navigateur
Pour JavaScript plusieurs objets constituent la fenêtre du navigateur c.-a.-d.
l’objet window
1 location : procure des informations sur l’URL de la page visitée.
2 history : représente l’historique du navigateur.
3 navigator : regroupe des informations sur le navigateur du visiteur.
4 popup : pour interagir avec les utilisateurs.
5 document : une arborescence d’objets représentant la page HTML.

13/28 Mohammed Boumediene JavaScript

 Fenêtre

Location
L’objet location procure des informations sur l’URL de la page visitée : adresse, port,
protocole, etc.

14/28 Mohammed Boumediene JavaScript

 Fenêtre

Location
L’objet location procure des informations sur l’URL de la page visitée : adresse, port,
protocole, etc.

Table 1: Propriétés/Méthodes de l’objet location

Propriété/Méthodes Description
href URL de la page visitée
hostname domaine de la page
pathname chemin et nom du fichier de la page
protocol protocole utilisé
assign(...) charger une nouvelle page

14/28 Mohammed Boumediene JavaScript

 Fenêtre

Location
L’objet location procure des informations sur l’URL de la page visitée : adresse, port,
protocole, etc.

Table 1: Propriétés/Méthodes de l’objet location

Propriété/Méthodes Description
href URL de la page visitée
hostname domaine de la page
pathname chemin et nom du fichier de la page
protocol protocole utilisé
assign(...) charger une nouvelle page

1 t e x t += " Hostname : "+l o c a t i o n . hostname+"<br>" ;

2 t e x t += " Pathname : "+l o c a t i o n . pathname+"<br>" ;
3 t e x t += " P r o t o c o l e : "+l o c a t i o n . p r o t o c o l+"<br>" ;

1 l o c a t i o n . a s s i g n ( " h t t p s : / /www . w 3 s c h o o l s . com " ) ; // a f f i c h e r

www . w 3 s c h o o l s . com

=⇒ détails voir "Page_JS4.html"

14/28 Mohammed Boumediene JavaScript
 Fenêtre

History

L’objet history représente l’historique du navigateur ce qui permet l’accès aux URL
précédentes et suivantes.

15/28 Mohammed Boumediene JavaScript

 Fenêtre

History

L’objet history représente l’historique du navigateur ce qui permet l’accès aux URL
précédentes et suivantes.

Table 2: Méthodes de l’objet location

Méthodes Description
back retourner à l’URL précédente
farward aller à l’URL suivante
go Accéder à l’URL en indiquant la position de la page dans
l’historique. go(-1) est similaire à back(), go(1) est similaire à
farward()

15/28 Mohammed Boumediene JavaScript

 Fenêtre

History

L’objet history représente l’historique du navigateur ce qui permet l’accès aux URL
précédentes et suivantes.

Table 2: Méthodes de l’objet location

Méthodes Description
back retourner à l’URL précédente
farward aller à l’URL suivante
go Accéder à l’URL en indiquant la position de la page dans
l’historique. go(-1) est similaire à back(), go(1) est similaire à
farward()

1 h i s t o r y . b a c k ( ) ; // a f f i c h e r l a page p r é c é d e n t e

1 h i s t o r y . go ( 1 ) ; // a f f i c h e r l a page s u i v a n t e

=⇒ détails voir "Page_JS5.html"

15/28 Mohammed Boumediene JavaScript

 Fenêtre

Navigator

L’objet navigator regroupe des informations sur le navigateur du visiteur.

16/28 Mohammed Boumediene JavaScript

 Fenêtre

Navigator

L’objet navigator regroupe des informations sur le navigateur du visiteur.

Table 3: Propriétés de l’objet navigator

Propriétés Description
appName nom du navigateur
appVersion version du navigateur
platform plate-forme du navigateur (système d’exploitation)
language langue du navigateur

16/28 Mohammed Boumediene JavaScript

 Fenêtre

Navigator

L’objet navigator regroupe des informations sur le navigateur du visiteur.

Table 3: Propriétés de l’objet navigator

Propriétés Description
appName nom du navigateur
appVersion version du navigateur
platform plate-forme du navigateur (système d’exploitation)
language langue du navigateur

1 var t e x t = " N a v i g a t o r : "+n a v i g a t o r . appName+"<br>" ;

2 text += " V e r s i o n : "+n a v i g a t o r . a p p V e r s i o n+"<br>" ;
3 text += " P l a t e −f o r m e : "+n a v i g a t o r . p l a t f o r m+"<br>" ;
4 text += " Langue : "+n a v i g a t o r . l a n g u a g e+"<br>" ;

=⇒ détails voir "Page_JS6.html".

16/28 Mohammed Boumediene JavaScript

 Fenêtre

Popup

JavaScript dispose de trois types de boîtes de dialogue communément dites popup :

17/28 Mohammed Boumediene JavaScript

 Fenêtre

Popup

JavaScript dispose de trois types de boîtes de dialogue communément dites popup :

alert() : affiche un message d’information ou signale une erreur.

17/28 Mohammed Boumediene JavaScript

 Fenêtre

Popup

JavaScript dispose de trois types de boîtes de dialogue communément dites popup :

alert() : affiche un message d’information ou signale une erreur.
confirm() : affiche une boîte de dialogue de confirmation.

17/28 Mohammed Boumediene JavaScript

 Fenêtre

Popup

JavaScript dispose de trois types de boîtes de dialogue communément dites popup :

alert() : affiche un message d’information ou signale une erreur.
confirm() : affiche une boîte de dialogue de confirmation.
prompt() : récupère la saisie de l’utilisation.

17/28 Mohammed Boumediene JavaScript

 Fenêtre

Popup

JavaScript dispose de trois types de boîtes de dialogue communément dites popup :

alert() : affiche un message d’information ou signale une erreur.
confirm() : affiche une boîte de dialogue de confirmation.
prompt() : récupère la saisie de l’utilisation.

1 a l e r t ( " C e c i e s t une bo î t e de d i a l o g u e A l e r t " ) ;

1 var text ;
2 i f ( c o n f i r m ( " Appuyez un b o u t o n ! " ) == t r u e )
3 t e x t = " Vous a v e z appuy é OK! " ;
4 else
5 t e x t = " Vous a v e z appuy é C a n c e l ! " ;

=⇒ détails voir "Page_JS7.html".

17/28 Mohammed Boumediene JavaScript

 DOM HTML

Plan

1 Présentation de JavaScript

2 Fenêtre

3 DOM HTML

4 Gestion des évènements

18/28 Mohammed Boumediene JavaScript

 DOM HTML

Document Object Model - DOM

DOM
Une fois la page web chargée par le navigateur, ce dernier crée un modèle appelée
DOM (Document Object Model).

19/28 Mohammed Boumediene JavaScript

 DOM HTML

Document Object Model - DOM

DOM
Une fois la page web chargée par le navigateur, ce dernier crée un modèle appelée
DOM (Document Object Model).
Le DOM HTML est une arborescence d’objets représentant la page HTML.

19/28 Mohammed Boumediene JavaScript

 DOM HTML

Document Object Model - DOM

DOM
Une fois la page web chargée par le navigateur, ce dernier crée un modèle appelée
DOM (Document Object Model).
Le DOM HTML est une arborescence d’objets représentant la page HTML.
Chaque noeud de l’arbre représente un élément HTML.

19/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,
modifier les attributs HTML,

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,
modifier les attributs HTML,
modifier les styles CSS internes à la page,

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,
modifier les attributs HTML,
modifier les styles CSS internes à la page,
supprimer des éléments ainsi que des attributs HTML de la page,

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,
modifier les attributs HTML,
modifier les styles CSS internes à la page,
supprimer des éléments ainsi que des attributs HTML de la page,
ajouter de nouveaux éléments et attributs,

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,
modifier les attributs HTML,
modifier les styles CSS internes à la page,
supprimer des éléments ainsi que des attributs HTML de la page,
ajouter de nouveaux éléments et attributs,
intercepter les évènements HTML de la page,

20/28 Mohammed Boumediene JavaScript

 DOM HTML

A quoi sert le DOM ?

DOM
C’est via ce DOM que JavaScript interagit avec la page HTML afin de :
modifier les éléments HTML,
modifier les attributs HTML,
modifier les styles CSS internes à la page,
supprimer des éléments ainsi que des attributs HTML de la page,
ajouter de nouveaux éléments et attributs,
intercepter les évènements HTML de la page,
définir de nouveaux évènements HTML.

20/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément
[Link](type) : recherche par type (nom_balise)

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément
[Link](type) : recherche par type (nom_balise)
⇒retourne un tableau d’éléments

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément
[Link](type) : recherche par type (nom_balise)
⇒retourne un tableau d’éléments
[Link](class) : recherche par classe (class)

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément
[Link](type) : recherche par type (nom_balise)
⇒retourne un tableau d’éléments
[Link](class) : recherche par classe (class)
⇒retourne un tableau d’éléments

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément
[Link](type) : recherche par type (nom_balise)
⇒retourne un tableau d’éléments
[Link](class) : recherche par classe (class)
⇒retourne un tableau d’éléments
[Link](name) : recherche par nom (name)

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (1)

Rechercher un élément HTML

La page HTML est représentée par l’objet document qui est la racine de
l’arborescence des objets.
Quatre méthodes permettent la recherche d’un élément HTML au sein de la page.
[Link](id) : recherche par identifiant (id)
⇒retourne un seul élément
[Link](type) : recherche par type (nom_balise)
⇒retourne un tableau d’éléments
[Link](class) : recherche par classe (class)
⇒retourne un tableau d’éléments
[Link](name) : recherche par nom (name)
⇒retourne un tableau d’éléments

21/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (2)

Exemple
Body de la page :

1 <p id= " c o u r s ">T e c h n o l o g i e s web 1 :</p>

2 <u l>
3 < l i >HTML</ l i >
4 < l i >CSS</ l i >
5 < l i id= " JS ">J a v a S c r i p t</ l i >
6 </u l>

La recherche d’élément HTML par JS :

1 v a r x = document . getElementsByTagName ( " L I " ) ; // r e t o u r n e un

t a b l e a u d e s é l é ments L I
2 v a r y = x [ 2 ] ; // l e t r o i s i ème é l é ment
1 v a r z = document . g e t E l e m e n t B y I d ( " JS " ) ; // r e t o u r n e un s e u l é l é
ment a y a n t i d = " JS "

=⇒ détails voir "Page_JS9.html"

22/28 Mohammed Boumediene JavaScript
 DOM HTML

DOM et les éléments HTML (3)

Création d’un élément HTML
La création d’un nouveau élément (element) s’effectue via la méthode
createElement(element) de l’objet document.

1 v a r t i t r e = document . c r e a t e E l e m e n t ( " h3 " ) ;

23/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (3)

Création d’un élément HTML
La création d’un nouveau élément (element) s’effectue via la méthode
createElement(element) de l’objet document.

1 v a r t i t r e = document . c r e a t e E l e m e n t ( " h3 " ) ;

Modifier un élément HTML (element)

son contenu via la propriété innerHTML ⇒ [Link]
1 t i t r e . innerHTML = " n o u v e a u t i t r e " ;

23/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (3)

Création d’un élément HTML
La création d’un nouveau élément (element) s’effectue via la méthode
createElement(element) de l’objet document.

1 v a r t i t r e = document . c r e a t e E l e m e n t ( " h3 " ) ;

Modifier un élément HTML (element)

son contenu via la propriété innerHTML ⇒ [Link]
1 t i t r e . innerHTML = " n o u v e a u t i t r e " ;

un attribut donné ⇒ [Link](attribute, nouvelle valeur)

1 t i t r e . s e t A t t r i b u t e ( " c l a s s " , " t3 " ) ;

23/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (3)

Création d’un élément HTML
La création d’un nouveau élément (element) s’effectue via la méthode
createElement(element) de l’objet document.

1 v a r t i t r e = document . c r e a t e E l e m e n t ( " h3 " ) ;

Modifier un élément HTML (element)

son contenu via la propriété innerHTML ⇒ [Link]
1 t i t r e . innerHTML = " n o u v e a u t i t r e " ;

un attribut donné ⇒ [Link](attribute, nouvelle valeur)

1 t i t r e . s e t A t t r i b u t e ( " c l a s s " , " t3 " ) ;

son style ⇒ [Link] = nouveau style

1 t i t r e . s t y l e . color = " blue " ;

=⇒ détails voir "Page_JS10.html"

23/28 Mohammed Boumediene JavaScript
 DOM HTML

DOM et les éléments HTML (4)

Modifier les enfants d’un éléments HTML
Un élément HTML peut contenir d’autres éléments c.-à.-d. des éléments enfants.
Ces derniers sont listés par le tableau childNodes.

24/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (4)

Modifier les enfants d’un éléments HTML
Un élément HTML peut contenir d’autres éléments c.-à.-d. des éléments enfants.
Ces derniers sont listés par le tableau childNodes.
La gestion des enfants d’un élément (element) se fait par les méthodes suivantes :
[Link](child) : supprimer un enfant child,

24/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (4)

Modifier les enfants d’un éléments HTML
Un élément HTML peut contenir d’autres éléments c.-à.-d. des éléments enfants.
Ces derniers sont listés par le tableau childNodes.
La gestion des enfants d’un élément (element) se fait par les méthodes suivantes :
[Link](child) : supprimer un enfant child,
[Link](child) : ajout d’un nouvel enfant child,

24/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (4)

Modifier les enfants d’un éléments HTML
Un élément HTML peut contenir d’autres éléments c.-à.-d. des éléments enfants.
Ces derniers sont listés par le tableau childNodes.
La gestion des enfants d’un élément (element) se fait par les méthodes suivantes :
[Link](child) : supprimer un enfant child,
[Link](child) : ajout d’un nouvel enfant child,
[Link](child1, child2) : ajout de l’enfant child2 avant l’enfant child1,

24/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (4)

Modifier les enfants d’un éléments HTML
Un élément HTML peut contenir d’autres éléments c.-à.-d. des éléments enfants.
Ces derniers sont listés par le tableau childNodes.
La gestion des enfants d’un élément (element) se fait par les méthodes suivantes :
[Link](child) : supprimer un enfant child,
[Link](child) : ajout d’un nouvel enfant child,
[Link](child1, child2) : ajout de l’enfant child2 avant l’enfant child1,
[Link](new_child, old_child) : replacer l’enfant old_child par
new_child.

24/28 Mohammed Boumediene JavaScript

 DOM HTML

DOM et les éléments HTML (4)

Modifier les enfants d’un éléments HTML
Un élément HTML peut contenir d’autres éléments c.-à.-d. des éléments enfants.
Ces derniers sont listés par le tableau childNodes.
La gestion des enfants d’un élément (element) se fait par les méthodes suivantes :
[Link](child) : supprimer un enfant child,
[Link](child) : ajout d’un nouvel enfant child,
[Link](child1, child2) : ajout de l’enfant child2 avant l’enfant child1,
[Link](new_child, old_child) : replacer l’enfant old_child par
new_child.
1 v a r t i t r e = document . c r e a t e E l e m e n t ( " h3 " ) ; // c r é e r un é l é ment h3
2 t i t r e . innerHTML = " n o u v e a u t i t r e " ; // a j o u t e r un c o n t e n u
3 document . body . a p p e n d C h i l d ( t i t r e ) ; // a j o u t e r l é l é ment à body
4 v a r p a r a g r a p h e s = document . getElementsByTagName ( " p " ) ; // s é
l e c t i o n n e r l e s é l é ments p
5 document . body . r e m o v e C h i l d ( p a r a g r a p h e s [ 0 ] ) ; // s u p p r i m e r l e
p r e m i e r é l é ment p

=⇒ détails voir "Page_JS11.html"

24/28 Mohammed Boumediene JavaScript
 Gestion des évènements

Plan

1 Présentation de JavaScript

2 Fenêtre

3 DOM HTML

4 Gestion des évènements

25/28 Mohammed Boumediene JavaScript

 Gestion des évènements

Gestion des évènements

L’action de l’utilisateur : mouvement de la souris, le clic sur un lien par exemple, etc
=⇒ déclenche un évènement.

26/28 Mohammed Boumediene JavaScript

 Gestion des évènements

Gestion des évènements

L’action de l’utilisateur : mouvement de la souris, le clic sur un lien par exemple, etc
=⇒ déclenche un évènement.
=⇒ appel à une fonction communément nommée gestionnaire d’évènements

26/28 Mohammed Boumediene JavaScript

 Gestion des évènements

Gestion des évènements

L’action de l’utilisateur : mouvement de la souris, le clic sur un lien par exemple, etc
=⇒ déclenche un évènement.
=⇒ appel à une fonction communément nommée gestionnaire d’évènements
Pour affecter un gestionnaire d’évènements à un objet HTML, il suffit de
renseigner l’attribut correspondant à l’évènement par le nom de la fonction traitant
cet évènement.

1 <i nput type= " b u t t o n " v a l u e = " A l e r t " o n c l i c k = " g o A l e r t ( ) ">

1 function goAlert () {
2 a l e r t ( " C e c i e s t une bo î t e de d i a l o g u e A l e r t " ) ;
3 }

=⇒ détails voir "Page_JS7.html"

26/28 Mohammed Boumediene JavaScript

 Gestion des évènements

Gestion des évènements

Table 4: Évènement en JavaScript

Propriété Description
onclick clic simple
ondbclick clic double
onmousemove déplacement de la souris sur un élément
onmouseover entrée de la souris dans l’espace d’un élément
onmouseout sortie de l’espace d’un évènement
onmouseup relâchement du bouton de la souris après le clic
onmousedown action de clic avant de relâcher la souris
onkeydown touche du clavier entrain d’être appuyée
onkeyup touche du clavier relâchée
onkeypress touche du clavier appuyée
oninput changement dans une zone de saisie
onsubmit envoi d’un formulaire au serveur
onload page chargée
onfocus focus sur un élément
onblur perte du focus

27/28 Mohammed Boumediene JavaScript

 Gestion des évènements

Merci pour votre attention! Des Questions?

28/28 Mohammed Boumediene JavaScript