[go: up one dir, main page]
Scribd
Importer
280 vues86 pages

Cours Java Script 2

Ce document décrit plusieurs méthodes en JavaScript pour récupérer des éléments HTML dans le DOM, notamment selon leur identifiant, nom de balise, classe, attribut ou sélecteur CSS. Il fournit des exemples de code pour chacune de ces méthodes.

Transféré par

Mariem Selmi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
280 vues86 pages

Cours Java Script 2

Ce document décrit plusieurs méthodes en JavaScript pour récupérer des éléments HTML dans le DOM, notamment selon leur identifiant, nom de balise, classe, attribut ou sélecteur CSS. Il fournit des exemples de code pour chacune de ces méthodes.

Transféré par

Mariem Selmi
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 86

JavaScript et le DOM

Ahmed Badreddine

Docteur Ingenieur en Génie Logiciel

Ahmed.badreddine@sesame.com.tn

H & H: Research and Training 1 / 51


Plan
1 Introduction
2 Récupérer un élément HTML
3 Récupérer/modifier l’attribut d’un élément HTML
4 Récupérer/modifier le contenu d’un élément HTML
5 Le parent et les enfants d’un élément HTML
6 Ajouter un nouvel élément HTML
7 Autres opérations sur les éléments HTML
8 Modifier les propriétés CSS d’un élément HTML
9 Les évènements
Associer un évènement à un élément
Supprimer un évènement
Annuler un évènement
Arrêter la propagation

H & H: Research and Training 2 / 51


Introduction

JavaScript
JavaScript nous permet, via des objets prédéfinis, d’avoir des informations sur

le visiteur

son navigateur

la structure de la page (document) qu’il consulte

son écran

...

H & H: Research and Training 3 / 51


Introduction

JavaScript
JavaScript nous permet, via des objets prédéfinis, d’avoir des informations sur

le visiteur

son navigateur

la structure de la page (document) qu’il consulte

son écran

...

window

document location navigator screen

H & H: Research and Training 3 / 51


Introduction

JavaScript

L’objet Window contient


quatre autres objets importants : document, location,
navigator, screen
des méthodes basiques comme alert, confirm
les objets comme String, Date, Math...
toute variable, objet... définis par le développeur
...

H & H: Research and Training 4 / 51


Introduction

JavaScript
L’objet document contient
contentType : text/html, text/xml...
toutes les balises HTML constituant le document (DOM)
les attributs et leurs valeurs
...

H & H: Research and Training 5 / 51


Introduction

JavaScript
L’objet document contient
contentType : text/html, text/xml...
toutes les balises HTML constituant le document (DOM)
les attributs et leurs valeurs
...

L’objet location contient


hostname : localhost...
port : 3000
protocol : http
...
H & H: Research and Training 5 / 51
Introduction

JavaScript
L’objet navigator contient
language : fr FR...
connection : 4G
cookieEnabled : true
...

H & H: Research and Training 6 / 51


Introduction

JavaScript
L’objet navigator contient
language : fr FR...
connection : 4G
cookieEnabled : true
...

L’objet screen contient


height
width
orientation
...
H & H: Research and Training 6 / 51
Introduction

JavaScript
DOM : Document Object Model
Interface de programmation (API) pour les documents XML et
HTML
Graphiquement, ça correspond à un arbre dont les nœuds sont
les balises HTML
Avant standardisation par le W3C, chaque navigateur avait son
propre DOM.
Utilisé par les scripts pour modifier un document HTML en
ajoutant un nœud
modifiant un autre
remplaçant un premier par un deuxième
supprimant un autre

H & H: Research and Training 7 / 51


Récupérer un élément HTML

JavaScript

Plusieurs méthodes pour récupérer un élément HTML


selon l’identifiant : .getElementById()
selon le nom de la classe : .getElementsByClassName()
selon le nom de la balise.getElementsByTagName()
selon l’attribut name : .getElementsByName()
selon un sélecteur CSS : .querySelectorAll() ou
.querySelector()

H & H: Research and Training 8 / 51


Récupérer un élément HTML

JavaScript
Considérons la page HTML suivante
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My JS Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id=container>
Considérons les paragraphes suivants :
<p class=blue name=parConteneur> bonjour </p>
<p class=red name=parConteneur> bonsoir, voici
<a href="https://sites.google.com/view/ahmedbadreddine/home?authuser=0"> ma
page</a> </p>
<p class=blue name=parConteneur> salut </p>
</div>
<script src="file.js"></script>
</body>
</html>
H & H: Research and Training 9 / 51
Récupérer un élément HTML

JavaScript

Contenu de style.css
.red {
color: red;
}

.blue {
color: blue;
}

.green {
color: green;
}

H & H: Research and Training 10 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon son id, on ajoute dans file.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);

H & H: Research and Training 11 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon son id, on ajoute dans file.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);

Ou sans passer par l’objet window


var container = document.getElementById("container");
console.log(container.innerHTML);

H & H: Research and Training 11 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon son id, on ajoute dans file.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);

Ou sans passer par l’objet window


var container = document.getElementById("container");
console.log(container.innerHTML);

Récupérer des éléments selon le nom de la balise


var paragraphes = document.getElementsByTagName("p");
for (let paragraphe of paragraphes)
console.log(paragraphe.innerHTML);

H & H: Research and Training 11 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon son id, on ajoute dans file.js
var container = window.document.getElementById("container");
console.log(container.innerHTML);

Ou sans passer par l’objet window


var container = document.getElementById("container");
console.log(container.innerHTML);

Récupérer des éléments selon le nom de la balise


var paragraphes = document.getElementsByTagName("p");
for (let paragraphe of paragraphes)
console.log(paragraphe.innerHTML);

Ou encore
var paragraphes = container.getElementsByTagName("p");
for (let paragraphe of paragraphes)
console.log(paragraphe.innerHTML);

H & H: Research and Training 11 / 51


Récupérer un élément HTML

JavaScript

Récupérer un élément selon sa classe


var bleus = document.getElementsByClassName("blue");
for (let bleu of bleus)
console.log(bleu.innerHTML);

H & H: Research and Training 12 / 51


Récupérer un élément HTML

JavaScript

Récupérer un élément selon sa classe


var bleus = document.getElementsByClassName("blue");
for (let bleu of bleus)
console.log(bleu.innerHTML);

Ou aussi
var bleus = container.getElementsByClassName("blue");
for (let bleu of bleus)
console.log(bleu.innerHTML);

H & H: Research and Training 12 / 51


Récupérer un élément HTML

JavaScript

Récupérer un élément selon la valeur de son attribut name


var parConteneurs = document.getElementsByName("
parConteneur");
console.log(parConteneurs);

H & H: Research and Training 13 / 51


Récupérer un élément HTML

JavaScript

Récupérer un élément selon la valeur de son attribut name


var parConteneurs = document.getElementsByName("
parConteneur");
console.log(parConteneurs);

Ou aussi
for (let parConteneur of parConteneurs)
console.log(parConteneur.innerHTML);

H & H: Research and Training 13 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon un sélecteur CSS 3
var pbleus = document.querySelectorAll("p.blue");
for (let bleu of pbleus)
console.log(bleu.innerHTML);

H & H: Research and Training 14 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon un sélecteur CSS 3
var pbleus = document.querySelectorAll("p.blue");
for (let bleu of pbleus)
console.log(bleu.innerHTML);

Récupérer le premier élément selon un sélecteur CSS 3


var pbleu = document.querySelector("p.blue");
console.log(pbleu.innerHTML);

H & H: Research and Training 14 / 51


Récupérer un élément HTML

JavaScript
Récupérer un élément selon un sélecteur CSS 3
var pbleus = document.querySelectorAll("p.blue");
for (let bleu of pbleus)
console.log(bleu.innerHTML);

Récupérer le premier élément selon un sélecteur CSS 3


var pbleu = document.querySelector("p.blue");
console.log(pbleu.innerHTML);

Ceci déclenche une erreur


var prouges = document.querySelector("p.red");
for (let rouge of prouges)
console.log(rouge.innerHTML);

H & H: Research and Training 14 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Récupérer l’attribut d’un élément HTML
var lien = document.querySelector(’a’);
var href = lien.getAttribute(’href’);
console.log(href);

H & H: Research and Training 15 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Récupérer l’attribut d’un élément HTML
var lien = document.querySelector(’a’);
var href = lien.getAttribute(’href’);
console.log(href);

Modifier l’attribut d’un élément HTML


lien.setAttribute(’href’, ’https://www.w3schools.com’);
console.log(lien);

H & H: Research and Training 15 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Récupérer l’attribut d’un élément HTML
var lien = document.querySelector(’a’);
var href = lien.getAttribute(’href’);
console.log(href);

Modifier l’attribut d’un élément HTML


lien.setAttribute(’href’, ’https://www.w3schools.com’);
console.log(lien);

Supprimer l’attribut d’un élément HTML


lien.removeAttribute(’href’);

H & H: Research and Training 15 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Pour certains attributs comme href, on peut accéder directement


à la valeur via son nom
var lien = document.querySelector(’a’);
var href = lien.href;
console.log(href);

H & H: Research and Training 16 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Pour certains attributs comme href, on peut accéder directement


à la valeur via son nom
var lien = document.querySelector(’a’);
var href = lien.href;
console.log(href);

Modifier l’attribut d’un élément HTML


lien.href = ’https://www.w3schools.com’;
console.log(lien);

H & H: Research and Training 16 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Remarques

Les attributs class et for sont des mots clés réservés en JS, on
ne peut donc les utiliser pour modifier leurs valeurs HTML.

H & H: Research and Training 17 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Remarques

Les attributs class et for sont des mots clés réservés en JS, on
ne peut donc les utiliser pour modifier leurs valeurs HTML.

Solution
Utiliser className ou classList pour l’attribut class
Et forHtml pour l’attribut for

H & H: Research and Training 17 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Récupérer la classe d’un élément HTML


var container = document.getElementById("container");
console.log(container.className);

H & H: Research and Training 18 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Récupérer la classe d’un élément HTML


var container = document.getElementById("container");
console.log(container.className);

Modifier une classe d’un élément HTML


container.className = "blue";
console.log(container.className);

H & H: Research and Training 18 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Récupérer la classe d’un élément HTML


var container = document.getElementById("container");
console.log(container.className);

Modifier une classe d’un élément HTML


container.className = "blue";
console.log(container.className);

Ajouter une nouvelle classe à un élément HTML


container.className += " red";
console.log(container.className);

H & H: Research and Training 18 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Récupérer la liste des classes d’un élément HTML
var container = document.getElementById("container");
var list = container.classList;
console.log(list);

H & H: Research and Training 19 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Récupérer la liste des classes d’un élément HTML
var container = document.getElementById("container");
var list = container.classList;
console.log(list);

Ajouter une classe à un élément HTML


var container = document.getElementById("container");
var list = container.classList;
list.add(’green’);
console.log(list);

H & H: Research and Training 19 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Récupérer la liste des classes d’un élément HTML
var container = document.getElementById("container");
var list = container.classList;
console.log(list);

Ajouter une classe à un élément HTML


var container = document.getElementById("container");
var list = container.classList;
list.add(’green’);
console.log(list);

Ajouter des classes à un élément HTML


var container = document.getElementById("container");
var list = container.classList;
list.add(’red’,"blue");
console.log(list);

H & H: Research and Training 19 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Supprimer une classe d’un élément HTML
list.remove(’red’);
console.log(list);

H & H: Research and Training 20 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Supprimer une classe d’un élément HTML
list.remove(’red’);
console.log(list);

Supprimer plusieurs classes d’un élément HTML


list.remove(’red’,’green’);
console.log(list);

H & H: Research and Training 20 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript
Supprimer une classe d’un élément HTML
list.remove(’red’);
console.log(list);

Supprimer plusieurs classes d’un élément HTML


list.remove(’red’,’green’);
console.log(list);

Supprimer une classe si elle existe, sinon l’ajouter


list.toggle(’red’);
console.log(list);

H & H: Research and Training 20 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Autres méthodes de classList


length : retourne le nombre de classes.
contains(classe) : retourne true si classe appartient à
classList, false sinon.
item(i) : retourne la classe d’indice i si i est inférieur à la
longueur de la liste, null sinon.

H & H: Research and Training 21 / 51


Récupérer/modifier l’attribut d’un élément HTML

JavaScript

Les attributs d’un formulaire


value : pour récupérer la valeur saisie dans une zone de saisie
(input, textarea...)
checked : pour déterminer si une case à cocher ou un bouton
radio a été coché ou non (true ou false)
...

H & H: Research and Training 22 / 51


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Récupérer le contenu d’un élément HTML (y compris les balises)


var container = document.getElementById("container");
console.log(container.innerHTML);

H & H: Research and Training 23 / 51


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Récupérer le contenu d’un élément HTML (y compris les balises)


var container = document.getElementById("container");
console.log(container.innerHTML);

Récupérer le contenu d’un élément HTML (sans les balises)


var container = document.getElementById("container");
console.log(container.textContent);

H & H: Research and Training 23 / 51


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Modifier le contenu d’un élément HTML avec innerHTML


var container = document.getElementById("container");
container.innerHTML += "<p> hello </p>";
console.log(container.innerHTML);

H & H: Research and Training 24 / 51


Récupérer/modifier le contenu d’un élément HTML

JavaScript

Modifier le contenu d’un élément HTML avec innerHTML


var container = document.getElementById("container");
container.innerHTML += "<p> hello </p>";
console.log(container.innerHTML);

Récupérer le contenu d’un élément HTML avec textContent


var container = document.getElementById("container");
container.textContent += "<p> hello </p>";
console.log(container.textContent);
console.log(container.innerHTML);

H & H: Research and Training 24 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer le parent d’un élément HTML (l’objet)


var container = document.getElementById("container");
var parent = container.parentNode;
console.log(parent);

H & H: Research and Training 25 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer le parent d’un élément HTML (l’objet)


var container = document.getElementById("container");
var parent = container.parentNode;
console.log(parent);

Récupérer le parent d’un élément HTML (le nom)


var container = document.getElementById("container");
var parent = container.parentNode;
console.log(parent.nodeName);

H & H: Research and Training 25 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer le premier élément fils d’un élément HTML


var container = document.getElementById("container");
var premierFils = container.firstElementChild;
console.log(premierFils.nodeName);

H & H: Research and Training 26 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer le premier élément fils d’un élément HTML


var container = document.getElementById("container");
var premierFils = container.firstElementChild;
console.log(premierFils.nodeName);

Récupérer le dernier élément fils d’un élément HTML


var container = document.getElementById("container");
var dernierFils = container.lastElementChild;
console.log(dernierFils.nodeName);

H & H: Research and Training 26 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer le premier fils (élément, texte ou autre) d’un élément HTML


var container = document.getElementById("container");
var premierFils = container.firstChild;
console.log(premierFils.nodeName);

H & H: Research and Training 27 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer le premier fils (élément, texte ou autre) d’un élément HTML


var container = document.getElementById("container");
var premierFils = container.firstChild;
console.log(premierFils.nodeName);

Récupérer le dernier fils (élément, texte ou autre) d’un élément HTML


var container = document.getElementById("container");
var dernierFils = container.lastChild;
console.log(dernierFils.nodeName);

H & H: Research and Training 27 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer tous les enfants (élément, texte ou autre) d’un élément


HTML
var enfants = container.childNodes;
for(let enfant of enfants)
console.log(enfant);

H & H: Research and Training 28 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Récupérer tous les enfants (élément, texte ou autre) d’un élément


HTML
var enfants = container.childNodes;
for(let enfant of enfants)
console.log(enfant);

Récupérer tous les éléments enfants d’un élément HTML


var enfants = container.children;
for(let enfant of enfants)
console.log(enfant);

H & H: Research and Training 28 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Enfants suivant et précédent


previousSibling
nextSibling
previousElementSibling
nextElementSibling

H & H: Research and Training 29 / 51


Le parent et les enfants d’un élément HTML

JavaScript

Enfants suivant et précédent


previousSibling
nextSibling
previousElementSibling
nextElementSibling

Attention
À chaque appel d’une de méthodes précédentes, le pointeur passe à
l’élément suivant (ou précédent).

H & H: Research and Training 29 / 51


Ajouter un nouvel élément HTML

JavaScript

Étapes

Créer l’élément
Préparer ses attributs [et valeurs]
L’ajouter au document

H & H: Research and Training 30 / 51


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = document.createElement("p");

H & H: Research and Training 31 / 51


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = document.createElement("p");

Préparer ses attributs [et valeurs]


par.id = "intro";
par.setAttribute("class", "blue");
var text = document.createTextNode("JS paragraph");
par.appendChild(text);

H & H: Research and Training 31 / 51


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = document.createElement("p");

Préparer ses attributs [et valeurs]


par.id = "intro";
par.setAttribute("class", "blue");
var text = document.createTextNode("JS paragraph");
par.appendChild(text);

Ajouter l’élément au DOM


var container = document.getElementById("container");
container.appendChild(par);

H & H: Research and Training 31 / 51


Ajouter un nouvel élément HTML

JavaScript
Créer un élément de type p
var par = document.createElement("p");

Préparer ses attributs [et valeurs]


par.id = "intro";
par.setAttribute("class", "blue");
var text = document.createTextNode("JS paragraph");
par.appendChild(text);

Ajouter l’élément au DOM


var container = document.getElementById("container");
container.appendChild(par);

appendChild() ajoute l’élément comme dernier fils de conteneur


H & H: Research and Training 31 / 51
Ajouter un nouvel élément HTML

JavaScript

On peut aussi utiliser

.insertBefore(newnode, existingnode) : pour insérer


newnode avant existingnode

H & H: Research and Training 32 / 51


Ajouter un nouvel élément HTML

JavaScript

La méthode insertAdjacentHTML(position, text)


permet d’insérer un texte HTML (text), dans une position spécifiée
(position)
afterbegin,
afterend,
beforebegin,
beforeend.

H & H: Research and Training 33 / 51


Ajouter un nouvel élément HTML

JavaScript
Exemple : HTML Le fichier style.css

<!DOCTYPE html> .skyblue {


<html> background-color:
<head> skyblue;
<title> float et clear </title> }
<link rel="stylesheet" href="style.css"> .pink {
</head> background-color: pink;
<body> }
<p id=first> .green {
bonjour background-color: green;
</p> }
<script src="file.js"></script>
</body>
</html>

Le script script.js
var p = document.getElementById(’first’);
p.insertAdjacentHTML("afterbegin","<p class=skyblue> afterbegin </p>");
p.insertAdjacentHTML("afterend","<p class=pink> afterend </p>");
p.insertAdjacentHTML("beforebegin","<p class=pink> beforebegin </p>");
p.insertAdjacentHTML("beforeend","<p class=skyblue> beforeend </p>");

H & H: Research and Training 34 / 51


Ajouter un nouvel élément HTML

JavaScript
Le résultat

beforebegin

afterbegin

bonjour

beforeend

afterend

H & H: Research and Training 35 / 51


Autres opérations sur les éléments HTML

JavaScript

Quelques opérations
replaceChild : pour remplacer un nœud
cloneNode() : pour cloner un nœud
removeChild() : pour supprimer un nœud fils
hasChildNodes() : pour vérifier l’existence d’au moins un
nœud enfant

H & H: Research and Training 36 / 51


Modifier les propriétés CSS d’un élément HTML

JavaScript
Modifier la couleur
var container = document.getElementById("container");
container.style.color = "red";

H & H: Research and Training 37 / 51


Modifier les propriétés CSS d’un élément HTML

JavaScript
Modifier la couleur
var container = document.getElementById("container");
container.style.color = "red";

Pour les propriétés CSS composées de deux mots séparés par -, il faut
supprimer - mettre la propriété en camelCase
var container = document.getElementById("container");
container.style.backgroundColor = "red";

H & H: Research and Training 37 / 51


Modifier les propriétés CSS d’un élément HTML

JavaScript
Modifier la couleur
var container = document.getElementById("container");
container.style.color = "red";

Pour les propriétés CSS composées de deux mots séparés par -, il faut
supprimer - mettre la propriété en camelCase
var container = document.getElementById("container");
container.style.backgroundColor = "red";

Remarque
Un élément HTML qui a une classe red qui modifie la couleur de fond en
rouge n’a pas forcément la valeur red attribuée au
style.backgroundColor
H & H: Research and Training 37 / 51
Les évènements

JavaScript

Quelques évènements

click et dblclick : clic et double clic

mouseover, mouseout, mousedown, mouseup et mousemove : mouvement de


la souris
keyup, keydown et keypress : touches de clavier

focus et blur : ciblage et annulation de ciblage

change, input et select : pour les éléments d’un formulaire

reset et submit : pour la ré-initialisation et la soumission de formulaire

load : chargement de la fenêtre

scroll : évènement lié au mouvement du scroll

...

H & H: Research and Training 38 / 51


Les évènements Associer un évènement à un élément

JavaScript

Deux façons différentes pour installer un écouteur d’évènement

comme attribut d’une balise HTML en précédant le nom


d’évènement par le préfixe on ayant comme valeur le nom d’une
fonction JavaScript
dans le fichier JavaScript avec la méthode
addEventListener()

H & H: Research and Training 39 / 51


Les évènements Associer un évènement à un élément

JavaScript
Première méthode (la page HTML)
<!DOCTYPE html>
<html>
<head>
<title>Event Test</title>
</head>
<body>
<div id=container>
<input type=text id=nom >
<button onclick="direBonjour()" id=cliquer>
cliquer </button>
</div>
<script src="fichier.js"></script>
</body>
</html>

H & H: Research and Training 40 / 51


Les évènements Associer un évènement à un élément

JavaScript

Contenu du fichier.js
function direBonjour(){
var nom = document.getElementById(’nom’).value;
alert ("Bonjour " + nom);
}

H & H: Research and Training 41 / 51


Les évènements Associer un évènement à un élément

JavaScript

Deuxième méthode (la page HTML)


<!DOCTYPE html>
<html>
<head>
<title>Event Test</title>
</head>
<body>
<div id=container>
<input type=text id=nom >
<button id=cliquer> cliquer </button>
</div>
<script src="fichier.js"></script>
</body>
</html>

H & H: Research and Training 42 / 51


Les évènements Associer un évènement à un élément

JavaScript

Contenu du fichier.js
var cliquer = document.getElementById(’cliquer’);
cliquer.addEventListener(’click’, function() {
var nom = document.getElementById(’nom’).value;
alert ("Bonjour " + nom);
});

H & H: Research and Training 43 / 51


Les évènements Supprimer un évènement

JavaScript

Pour supprimer un évènement associé à un élément HTML


element.removeEventListener(event, nomFunction);

H & H: Research and Training 44 / 51


Les évènements Annuler un évènement

JavaScript
Considérons la page index.html suivante
<!DOCTYPE html>
<html>
<head>
<title>Prevent Event</title>
</head>
<body>
<div>
Saisir seulement des caractères alphabétiques en
minuscule :
<input type="text" id="nom">
</div>
<script src="fichier.js"></script>
</body>
</html>

H & H: Research and Training 45 / 51


Les évènements Annuler un évènement

JavaScript

Pour annuler une saisie qui n’est pas en minuscule


var nom = document.getElementById(’nom’);

nom.addEventListener(’keypress’,function(event){

var charCode = event.charCode;

if (charCode < 97 || charCode > 122) {


event.preventDefault();
alert("Merci de tout écrire en minuscule");
}
});

H & H: Research and Training 46 / 51


Les évènements Annuler un évènement

JavaScript

On ne peut annuler que certains évènements


saisir un texte
cliquer sur une case à cocher
soumettre un formulaire
cliquer sur un lien
glisser un élément (drag and drop)

H & H: Research and Training 47 / 51


Les évènements Arrêter la propagation

JavaScript
Considérons la page index.html suivante
<!DOCTYPE html>
<html>
<head>
<title>Stop propagation</title>
<style>
div {
padding: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div style="background-color:gold" onclick="jaune()" >
Parent
<div style="background-color:teal" onclick="vert()" >
Fils
</div>
</div>
<script src="fichier.js"></script>
</body>
</html>

H & H: Research and Training 48 / 51


Les évènements Arrêter la propagation

Les deux div parent et fils

Parent

Fils

H & H: Research and Training 49 / 51


Les évènements Arrêter la propagation

Les deux div parent et fils

Parent

Fils

Code JavaScript de vert() et jaune()


function vert(){
alert("vert");
}
function jaune(){
alert("jaune");
}

H & H: Research and Training 49 / 51


Les évènements Arrêter la propagation

JavaScript

Constats
En cliquant sur le jaune, jaune est affiché
En cliquant sur le vert, jaune et vert sont affichés

H & H: Research and Training 50 / 51


Les évènements Arrêter la propagation

JavaScript

Constats
En cliquant sur le jaune, jaune est affiché
En cliquant sur le vert, jaune et vert sont affichés

Solution
Utiliser la méthode stopPropagation

H & H: Research and Training 50 / 51


Les évènements Arrêter la propagation

JavaScript
Nouveau code de la fonction vert() (pas de changement pour jaune())
function vert(event){
alert("vert");
event.stopPropagation();
}

function jaune(){
alert("jaune");
}

H & H: Research and Training 51 / 51


Les évènements Arrêter la propagation

JavaScript
Nouveau code de la fonction vert() (pas de changement pour jaune())
function vert(event){
alert("vert");
event.stopPropagation();
}

function jaune(){
alert("jaune");
}

Une modification dans le HTML


<div style="background-color:gold" onclick="jaune()" >
Parent
<div style="background-color:teal" onclick="vert(event)">
Fils
</div>
</div>

H & H: Research and Training 51 / 51

Vous aimerez peut-être aussi