Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Langage de Script JavaScript
Partie 1 : Introduction
Pr. Mohammed SALIHOUN
m.salihoun@emsi.ma
3ème Année - Ingénierie en Informatique et Réseaux
15 octobre 2021
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 1 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Table of Contents
2. Introduction au Document
1. Introduction au langage
Object Model
JavaScript
- La fonction
- Programmation côté client
document.getElementById
- Le JavaScript (JS)
- L’arbre HTML
- Variables et types
- Le Document Object
- Les valeurs spéciales null et
Model (DOM)
undefined
- Obtenir les objets DOM en
- Les commentaires
JS
- Les boucles
- Contenu d’un objet DOM
- Opérateurs logiques
- Accéder aux propriétés d’un
- La forme if/else
objet DOM
- Les tableaux
- La propriété innerHTML
- Manipulation de chaînes
- Utilisation des objets DOM
- Les fonctions
- Modifier un objet DOM
- Programmation par Events
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 2 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Table of Contents
2. Introduction au Document
1. Introduction au langage
Object Model
JavaScript
- La fonction
- Programmation côté client
document.getElementById
- Le JavaScript (JS)
- L’arbre HTML
- Variables et types
- Le Document Object
- Les valeurs spéciales null et
Model (DOM)
undefined
- Obtenir les objets DOM en
- Les commentaires
JS
- Les boucles
- Contenu d’un objet DOM
- Opérateurs logiques
- Accéder aux propriétés d’un
- La forme if/else
objet DOM
- Les tableaux
- La propriété innerHTML
- Manipulation de chaînes
- Utilisation des objets DOM
- Les fonctions
- Modifier un objet DOM
- Programmation par Events
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 3 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Terminologie : Programmation côté client
Programmation côté client : le code s’exécute dans le navigateur
après avoir été envoyé (avec le HTML) par le serveur. La plupart
du temps, ce code manipule l’arbre HTML en fonction d’évènements
déclenchés par l’utilisateur (comme par exemple un clic).
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 4 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Le JavaScript (JS)
Un langage de script léger ("scripting language"), créé in 1995 par
Brendan Elch (le nom initial était LiveScript) afin de rendre les pages
HTML plus interactive :
• Insertion dynamique de code HTML
• Réaction à des évènements (chargement de page, clics, etc.)
• Lecture d’informations relatives au navigateur
• Calculs (par exemple validation de formulaire)
C’est un standard du web (mais pas supporté de la même manière
par tous les navigateurs).
Il peut être utilisé dans un navigateur mais aussi dans Adobe Acrobat,
Adobe Photoshop, des systèmes embarqués, le terminal,...
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 5 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
La balise <script>
HTML (modèle)
<script src="filename" type="text/javascript" ></script>
HTML (exemple)
<script src="example.js" type="text/javascript" ></script>
La balise script doit être placée dans l’élément head de la page
HTML . Le code JS se trouve normalement dans un fichier.js sé-
paré.
Il peut être placé dans le corps du document HTML (comme pour
CSS) :
• Mauvais style de programmation : on cherche à séparer le contenu
(HTML), la présentation (CSS) et le comportement (JS)
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 6 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Notre première fonction JS : alert
HTML (modèle)
alert("message") ;
HTML (exemple)
alert("IE6 detected. Suck-mode enabled") ;
alert() : Une commande JS qui fait apparaitre une boîte de dialogue
avec un message.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 7 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Notre deuxième fonction JS : prompt
HTML (modèle)
prompt("message") ;
HTML (exemple)
prompt("S’il vous plaît entrez votre nom") ;
prompt() : Une commande JS qui affiche une boîte de dialogue,
éventuellement avec un message, qui invite l’utilisateur à saisir un
texte.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 8 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Variables et types
JS (modèle)
let name = expression ;
JS (exemple)
let level = 23 ;
let accuracyRate = 0.99 ;
let name = "Pikachu" ;
Les variables sont déclarées avec le mot-clef let ou var . JS possède
des types de données (langage faiblement typé).
• Number , Boolean , String , Array , Object , Null ,
Undefined
• La fonction typeof() retourne le type d’une valeur.
• Conversion de type possible et parfois surprenante...
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 9 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Le type Number
JS (exemple)
let enrollment = 99 ;
let mediangrade = 2.8 ;
let credits = 5 + 4 + (2 * 3) ;
Les nombres regroupent les entiers et les réels (pas de int et de
double ).
Les mêmes operateurs : + , - , * , / , % , ++ , - - , = , += ,
-= , *= , /= , %=
Même précédence que les autres langages de programmation.
Beaucoup de conversions implicites : "2" * 3 donne 6 .
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 10 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Le type String
JS (exemple)
let nickName = "Sparky O’Sparkz" ; // "Sparky O’Sparks"
let fName = nickName.substring(0, nickName.indexOf(" ")) ; //
"Sparky"
let len = nickName.length ; // 15
let name = ’Pikachu’ ; // can use " " or ’ ’
Methods : charAt, charCodeAt, fromCharCode, indexOf, las-
tIndexOf, replace, split, substring, toLowerCase, toUpperCase
• charAt retourne une String d’une lettre (pas de type char).
• Length est une propriété (et non une méthode comme en Java).
• La concaténation des chaînes s’effectue avec l’opérateur + :
1 + 1 vaut 2 , mais "1" + 1 donne "11" .
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 11 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Le type String
Conversions entre nombres et Strings :
JS (exemple)
let count = 10 ; // 10
let stringedCount = "" + count ; //"10"
let puppyCount = count + " puppies, yay !" ; // "10 puppies, yay !"
let magicNum = parseInt("42 is the answer") ; // 42
let mystery = parseFloat("Am I a number ?") ; // NaN
TypeOf(Nan) = Number
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 12 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Le type String
Pour accéder aux caractères d’une String s, on peut utiliser s[index]
ou s.charAt(index) :
JS (exemple)
let firstLetter = puppyCount[0] ; // "1"
let fourthLetter = puppyCount.charAt(3) ; // "p"
let lastLetter = puppyCount.charAt(puppyCount.length - 1) ; //" !"
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 13 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Le type Booléen
JS (exemple)
let iLikeJS = true ;
let ieIsGood = "IE6" > 0 ; // false
if ("web dev is great") { /* true */ }
if (0) { /* false */ }
Toute valeur peut être utilisée comme un booléen :
• Valeurs fausses : false , 0 , 0.0 , NaN , "" , null et undefined
• Valeurs vraies : true et toutes les autres !
Conversion explicite d’une valeur en booléen :
• let boolValue = Boolean(otherValue) ;
• let boolValue = ! !(otherValue) ;
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 14 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Les valeurs spéciales null et undefined
JS (exemple)
let foo = null ;
let bar = 9 ;
let baz ;
/*
* foo vaut null
* bar vaut 9
* baz vaut undefined
*/
• undefined : la variable n’a pas été déclarée, elle n’existe pas.
• null : la variable existe et a reçu la valeur spéciale null.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 15 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
L’objet Math
JS (exemple)
let rand1to10 = Math.floor(Math.random() * 10 + 1) ;
let three = Math.floor(Math.PI) ;
Methods : abs, ceil, floor, log, max, min, pow, sqrt, random,
round, sin, cos, tan.
Propriétées : E , PI .
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 16 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Les commentaires
JS (exemple)
// commentaire sur une ligne
/* commentaire multi-line */
Identique à Java, C,...
Trois syntaxes :
• HTML : < !- - comment - ->
• CSS/Java/PHP/JS : /* comment */
• Java/PHP/JS : // comment
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 17 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
La boucle for
JS (modèle)
for (initialization ; condition ; update) {
statements ;
}
JS (exemple)
let sum = 0 ;
for (let i = 0 ; i < 100 ; i++) {
sum = sum + i ; // identique à sum += i ;
}
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 18 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
La boucle for
JS (exemple)
let s1 = "It’s a-me, Mario !" ;
let s2 = "" ;
for (let i = 0 ; i < s1.length ; i++) {
s2 += s1[i] + s1[i] ;
}
// s2 est égale à "IItt”ss aa- -mmee„ MMaarriioo ! !"
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 19 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
La boucle while
JS (Modèle 1)
while (condition) {
statements ;
}
JS (modèle 2)
do {
statements ;
} while (condition) ;
Les instructions break et continue existent et fonctionnent comme
en Java, C, etc...
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 20 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Opérateurs logiques
Relationnels : > , < , >= , <=
Logiques : && , || , !
Egalité : == , != , === , !==
1 La plupart des opérateurs logiques convertissent implicitement.
Par exemple, toutes ces expressions sont vraies :
• 5 < "7"
• 42 == 42.0
• "5.0" == 5
2 Les opérateurs === et !== sont les test d’égalité stricts :
la valeur et le type doivent être égaux. Par exemple
"5.0" === 5 vaut false
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 21 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
La forme if/else
JS (Modèle)
if (condition) {
statements ;
}else if (condition) {
statements ;
} else {
statements ;
}
• Même sructure qu’aux autres langage de programmation (Java,
C,...).
• JS accepte presque n’importe quelle valeur pour la condition.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 22 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Les tableaux
JS (Modèle)
let name = [] ; // tableau vide
let names = [value1, ... , valueN] ; // tableau avec contenu initial
names[index] = value ; // pour stocker une valeur
JS (Exemple)
let types = ["Electric", "Water", "Fire"] ;
let pokemon = [] ; // []
pokemon[0] = "Pikachu" ; // ["Pikachu"]
pokemon[1] = "Squirtle" ; // ["Pikachu", "Sqiurtle"]
pokemon[3] = "Magikarp" ; // ["Pikachu", "Sqiurtle", undefined,
"Magikarp"]
La propriété length donne la taille (dynamique).
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 23 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Les fonctions sur les tableaux
JS (Exemple)
let a = ["Mario", "Luigi"] ; // [Mario, Luigi]
a.push("Koopatroopa") ; // [Mario, Luigi, Koopatroopa]
a.unshift("Bowser") ; // [Bowser, Mario, Luigi, Koopatroopa]
a.pop() ; // [Bowser, Mario, Luigi]
a.shift() ; // [Mario, Luigi]
a.sort() ; // [Luigi, Mario]
Les tableaux remplacent les structures de données : liste, pile, file, ...
Methodes : concat, join, pop, push, reverse, shift, slice, sort,
splice, toString, unshift.
• push et pop ajoute/supprime par la fin.
• shift et unshift ajoute/supprime par le début.
• shift et pop retournent l’élément supprimé.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 24 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Manipulation de chaînes : split et join
JS (Exemple)
let s = "the quick brown fox" ;
let a = s.split(" ") ; // ["the", "quick", "brown", "fox"]
a.reverse() ; // ["fox", "brown", "quick", "the"]
s = a.join(" !") ; // "fox !brown !quick !the"
split éclate une String en un tableau par rapprt à un délimiteur
• Le délimiteur peut être une expression régulière :
let a = s.split(/[ \t]+/) ;
join fusionne le contenu d’un tableau en une String et en ajoutant
un délimiteur entre les éléments.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 25 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Definition de fonctions
JS (Modèle)
function name() {
statement ;
...
}
JS (Exemple)
function myFunction() {
alert("Hello World !") ;
}
Le code précédent pourrait être le contenu du fichier example.js lié à
une page HTML . La fonction peut être appelée lors d’un évènement.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 26 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Programmation par évènements
Contrairement à Java ou C, un code JS n’a pas de main , mais
réponds plutôt à un évènement.
Programmation par évènements : le code est exècuté suite à des
évènements utilisateur.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 27 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
Les handlers
HTML (Modèle)
<element attributes onclick="function() ;">...
JS (Exemple)
<div onclick="myFunction() ;">Click me !</div>
Output
Click me !
Les fonctions JS sont utilisées comme des handlers d’évènements.
En cas d’évènement sur l’élément, le handler (la fonction) est appelée
onclick un des (nombreux) évènement HTML disponibles.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 28 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au langage JavaScript
L’élément <button>
JS (Exemple)
<button onclick="myFunction() ;">Click me !</button>
Output
Le contenu de l’élément button soit c’est du texte ou bien une image.
Pour fabriquer un bouton actif il suffit de :
1 Choisissez un évènement (par exemple, le clic souris).
2 Ecrivez une fonction JS qui sera appelée lorsque l’évènement se
produit (le handler ).
3 Attachez la fonction (le handler ) à l’évènement du bouton.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 29 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Table of Contents
2. Introduction au Document
1. Introduction au langage
Object Model
JavaScript
- La fonction
- Programmation côté client
document.getElementById
- Le JavaScript (JS)
- L’arbre HTML
- Variables et types
- Le Document Object
- Les valeurs spéciales null et
Model (DOM)
undefined
- Obtenir les objets DOM en
- Les commentaires
JS
- Les boucles
- Contenu d’un objet DOM
- Opérateurs logiques
- Accéder aux propriétés d’un
- La forme if/else
objet DOM
- Les tableaux
- La propriété innerHTML
- Manipulation de chaînes
- Utilisation des objets DOM
- Les fonctions
- Modifier un objet DOM
- Programmation par Events
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 30 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
La fonction document.getElementById
Donne l’accès à un élément HTML via la valeur de son attribut id
(en HTML, la valeur de chaque attribut id doit être unique).
JS (Exemple)
let name = document.getElementById("id") ;
document.getElementById retourne l’objet DOM d’un élément HTML
ayant un id donné (notez qu’on omet le caractère # ).
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 31 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
La fonction document.getElementById
Donne l’accès à un élément HTML via la valeur de son attribut id.
HTML (Exemple)
<img id="pokeball" src="img/pokeball.jpg" alt="a pokeball" />
<button onclick="changeImage() ;">Click me !</button>
JS (Exemple)
function changeImage() {
let pokeballImg = document.getElementById("pokeball") ;
pokeballImg.src = "img/mystery.gif" ;
}
Output (Avant le Click)
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 32 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
La fonction document.getElementById
Donne l’accès à un élément HTML via la valeur de son attribut id.
HTML (Exemple)
<img id="pokeball" src="img/pokeball.jpg" alt="a pokeball" />
<button onclick="changeImage() ;">Click me !</button>
JS (Exemple)
function changeImage() {
let pokeballImg = document.getElementById("pokeball") ;
pokeballImg.src = "img/mystery.gif" ;
}
Output (Après le Click)
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 32 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
L’arbre HTML
Arbre HTML (Exemple) HTML (Exemple)
<html>
<head>
<title>...</title>
</head>
<body>
<h1>...</h1>
<div>
<p>...</p>
</div>
</body>
</html>
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 33 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Le Document Object Model (DOM)
Un ensemble d’objets JS liés à chaque éléments de la page HTML.
Chaque élément de la page HTML en cours corresponds à un objet
DOM.
Les fonctions JS peuvent manipuler ces objets et lire ou modifier les
attributs des éléments HTML correspondants :
• par exemple, tester si un INPUT de type RADIO a été coché.
Les fonctions JS peuvent changer ces objets et donc modifier les
éléments HTML correspondants :
• par exemple, insérer un nouveau texte dans le contenu d’un
élément DIV .
Les fonctions JS peuvent changer le style CSS des objets
• par exemple, changer la couleur du texte d’un élément P .
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 34 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Obtenir les objets DOM en JS
Il y a toujours plusieurs façons de récupérer l’objet DOM d’un élé-
ment HTML particulier en navigant dans l’arbre HTML.
La plupart du temps, on utilise les fonctions suivantes :
• via la valeur de l’attribut ID :
document.getElementyById(...)
• via un sélecteur CSS :
• document.querySelector(...)
• document.querySelectorAll(...)
On peut fabriquer de nouveaux éléments : document.createElement(...)
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 35 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Obtenir les objets DOM en JS
Dans le code HTML on a un élément P avec l’attribut id ayant la
valeur october :
HTML (Exemple)
<p id="october"></p>
Dans le code JS on peut récupérer l’objet DOM correspondant à cet
élément HTML :
JS (Exemple)
let pTag = document.getElementById("october") ;
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 36 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Contenu d’un objet DOM
Un objet DOM contient tous les attributs HTML de l’élément cor-
respondant. Par exemple :
HTML (Exemple)
<img src="images/puppy.png" alt="A fantastic puppy photo"/>
est lié à l’objet DOM (qu’on appelle par exemple puppyImg) qui a
les propriétés suivantes :
• puppyImg.src : la chaîne de caractères
"images/puppy.png" (définie par le HTML)
• puppyImg.alt : la chaîne de caractères
"A fantastic puppy photo" (définie par le HTML)
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 37 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Accéder aux propriétés d’un objet DOM
HTML (Exemple)
<p>See our <a href="sale.html" id="saleslink">Sales</a>
today !</p>
<img id="icon" src="images/borat.jpg" alt="Borat" />
<caption class="photo user-upload">Beauty.</caption>
JS (Exemple)
let icon = document.getElementById("icon") ;
let theLink = document.getElementById("saleslink") ;
let caption = document.querySelector("caption") ;
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 38 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Accéder aux propriétés d’un objet DOM
Propriété Description Exemple
icon.tagName est :
tagName nom de la balise HTML
"IMG"
la classe CSS classes caption.className est :
ClassName
de l’élément "photo user-upload"
l’URL qui donne accès au icon.src est :
src
fichier source de l’image "images/borat.jpg"
l’URL vers où le lien theLink.href est :
href
est dirigé "sale.html"
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 39 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
La propriété innerHTML
Tous les éléments DOM possèdent la propriété innerHTML qui donne
accès au contenu de l’élément (sous la forme d’un string) :
HTML (Exemple)
<ul id="thing">
<li>Thing 1</li>
<li>Thing 2</li>
</ul>
JS (Exemple)
let elm = document.querySelector("#thing li") ;
alert(elm.innerHTML) ; // "Thing 1"
L’expression document.querySelector("#thing li") sélection le pre-
mier élément LI contenu dans l’élément dont l’ id a la valeur "thing" .
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 40 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Utilisation des objets DOM
Si on change une ou plusieurs propriétés d’un objet DOM, le naviga-
teur rafraîchit automatiquement la page pour prendre en compte ce
changement.
C’est de cette façon qu’on donne un comportement à une page
HTML (qui sans quoi serait statique) :
• On utilise JS pour changer, en fonctions de certains évènements,
les propriétés de certains des objets DOM de la page.
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 41 / 42
Introduction au langage JavaScript
Introduction au Document Object Model EMSI - Rabat
Introduction au Document Object Model
Modifier un objet DOM
Avant l’exécution du JS, on a :
HTML (Exemple)
<a id="fb-link" href="http ://facebook.com">Facebook</a>
Après l’exécution du JS suivant :
JS (Exemple)
let link = document.getElementById("fb-link") ;
link.innerHTML = "FB"
On a :
JS (Exemple)
<a id="fb-link" href="http ://facebook.com">FB</a>
Pr. Mohammed SALIHOUN 15 octobre 2021 Partie 1 : Introduction 42 / 42
