Scribd
Importer
25 vues30 pages

JavaScript2

Transféré par

Yvann Assale
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
25 vues30 pages

JavaScript2

Transféré par

Yvann Assale
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/ 30

Javascript

◼Le DOM (Document Object Model)


• Définit la structure d’une page Web et le moyen
d’interagir avec elle
• Structure d’une page Web

ASSALE Adjé Louis JavaScript 1


Javascript
◼Le DOM (Document Object Model)
• Structure d’une page Web
✓ Chaque entité de l’arborescence est appelée nœud (node). On a
2 types de nœuds :
◼ Ceux (en bleu) qui correspondent à des éléments HTML, comme
<body> ou <p>. Ils peuvent avoir des sous-nœuds appelés fils ou
enfants (children)
◼ Ceux (en rouge) qui correspondent au contenu textuel de la page. Ils ne
peuvent pas avoir de fils
✓ Dans Firefox, on peut visualiser la hiérarchie des éléments dans
le menu Développement Web puis onglet Inspecteur

ASSALE Adjé Louis JavaScript 2


Javascript
◼Le DOM (Document Object Model)
• DOM hiérarchie d’objets d’une page Web
✓ Objets du DOM disposent de propriétés et méthodes permettant
de les manipuler avec JavaScript
✓ Accès au DOM avec la variable document  à élément <html>
◼ Elle dispose des propriétés head et body permettant d’accéder
respectivement aux éléments <head> et <body>
◼ On peut écrire le code suivant dans un fichier .js
var h = document.head; //variable h contient l’objet head du DOM
console.log(h); // affichage dans la console de l’inspecteur
var b = document.body; //variable b contient ‘objet body du DOM
console.log(b); // affichage dans la console de l’inspecteur

ASSALE Adjé Louis JavaScript 3


Javascript
◼Le DOM (Document Object Model)
• DOM hiérarchie d’objets d’une page Web
✓ Type d’un nœud
◼ Propriété nodeType indique le type
document.ELEMENT_NODE pour un nœud élément (balise HTML)
document.TEXT_NODE pour un nœud textuel
if(document.body.nodeType === document.ELEMENT_NODE){
… console.log(body est un nœud élément); }
else {
… console.log(body est un nœud textuel); }
✓ Accès aux enfants d’un nœud
◼ Propriété childNodes : sa taille est donnée par length et on peut
parcourir la collection avec la boucle for
document.body.childNode[0]; // donne le 1er enfant de body
ASSALE Adjé Louis JavaScript 4
Javascript
◼Le DOM (Document Object Model)
• DOM hiérarchie d’objets d’une page Web
✓ Accès au parent d’un nœud
◼ Propriété parentNode renvoie nœud parent sous la forme d’objet DOM
◼ Pour le nœud document, la valeur de parentNode est null
var h1 = document.body.childNode[1];
console.log(h1.parentNode); // affiche le nœud body
console.log(document.parentNode); // affiche null
✓ Exercice : affichage d’un nœud enfant
◼ L'objectif de cet exercice est d'écrire une fonction qui affiche un nœud
enfant d'un objet du DOM. La fonction reçoit en paramètre l'objet du
DOM et l'indice du nœud enfant qu'elle doit afficher. Les cas d'erreur
(indice ou type de nœud incorrect) doivent être gérés

ASSALE Adjé Louis JavaScript 5


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Limite du parcours du DOM nœud par nœud
◼ Code de sélection devient difficile à lire lorsque la page se complexifie
✓ Sélection d’éléments peut se faire
◼ Par son attribut id
◼ Par son attribut class
◼ Par sa balise
◼ Par un sélecteur CSS
◼ Par attribut name sur certains éléments
✓ Sélection d’un élément selon son identifiant
◼ Méthode getElementById("nom_id") renvoie l’unique élément dont l’id
est passé en paramètre : document.getElementById("toto");
ASSALE Adjé Louis JavaScript 6
Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Sélection d’un élément par la classe ou la balise
◼ Méthode getElementsByClassName("nom_class") sélectionne les
éléments dont la classe est fournie en paramètre :
document.getElemenstByClassName("remarque");
◼ Méthode getElementsByTagName("nom_balise") renvoie la liste des
éléments qui portent le nom de la balise :
document.getElemenstByTagName("div");
✓ Sélection par sélecteurs CSS
◼ Méthodes querySelectorAll sélectionne les éléments retenus par le
sélecteur CSS fourni en paramètre – querySelector est similaire mais le
fournit que le 1er élément : document.querySelectorAll ("div. exercice img");
//tous les éléments <img> emboités dans un élément div de classe exercice
ASSALE Adjé Louis JavaScript 7
Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Propriétés d’éléments sélectionnés manipulables
◼ Attributs
◼ Contenu
◼ Style CSS
◼ Classes
✓ Manipulations des attributs
◼ Les attributs HTML sont des propriétés
◼ Même nom, en minuscule, avec « conversion camelback »

◼ L’attribut class devient className

◼ La valeur peut être string, number ou boolean

ASSALE Adjé Louis JavaScript 8


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations des attributs
◼ Méthode getAttribute renvoie la valeur de l’attribut passé en paramètre
◼ document.querySelector("a").getAttribute("href");

◼ Certains attributs sont directement accessibles sous forme de

propriétés tels que id, href et value


◼ document.querySelector("ul").id);

◼ Méthode setAttribute définit la valeur de l’un des attributs d’1 élément.


Elle prend en paramètre le nom et la valeur de cet attribut
◼ document.querySelector("h1").setAttribute("id", "titre");

◼ Ou document.querySelector("h1").id = "titre";

ASSALE Adjé Louis JavaScript 9


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations des classes
◼ propriété classList renvoie la liste des classes d’un élément
◼ // Liste des classes de l'élément identifié par "antiques"

var classes = document.getElementById("antiques").classList;


console.log(classes.length); // Affiche le nombre de classes
console.log(classes[0]); // Affiche le nom de la 1ère classe
◼ Méthode contains de classList teste la présence d’une classe dans la liste
◼ if(document.getElementById("antiques").classList.contains("toto"))

{ …
◼ Méthodes add et remove ajoute ou supprime une classe à un élément
◼ var titreElt = document.querySelector("h1"); // Accès au 1er titre h1
titreElt.classList.remove("debut"); // Supprime la classe "debut"
titreElt.classList.add("titre"); // Ajoute la classe "titre" 10
Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations du contenu
◼ propriété innerHTML renvoie ou modifie le contenu HTML d’1 élément
◼ // Le contenu HTML de l'élément identifié par "contenu"

console.log(document.getElementById("contenu").innerHTML);
◼ // Modification du contenu HTML de la liste : ajout d'un langage

document.getElementById("langages").innerHTML += '<li
id="c">C</li>’;
◼ Propriété textContent renvoie ou modifie le contenu textuel d’1 élément
◼ // Le contenu textuel de l'élément identifié par "contenu"

console.log(document.getElementById("contenu").textContent);
◼ // Modification du contenu textuel du premier titre

document.querySelector("h1").textContent += " de
programmation"; 11
Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations des propriétés CSS
◼ propriété style permet d’agir sur les propriétés CSS d’1 élément
◼ Ne permet pas d’accéder aux valeurs des propriétés définies dans

une feuille de style, seulement aux propriétés définies dans HTML


ou via style
◼ On utilise directement le nom de la propriété CSS après

« conversion camelback » si nécessaire ➔ font-size  fontSize,


border-right-style  borderRightStyle, etc.
◼ Les valeurs sont toujours en chaines de caractères

◼ Les unités doivent être précisées

ASSALE Adjé Louis JavaScript 12


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations des propriétés CSS
◼ Exemples :

ASSALE Adjé Louis JavaScript 13


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations de style « calculé »
◼ Méthode getComputedStyle de l’objet window permet d’obtenir les
valeurs des propriétés CSS appliquées par le navigateur
◼ Les propriétés CSS ont le même nom que précédemment – pas de

raccourci autorisé : margin interdit, utiliser marginLeft, …


◼ Elles sont en lecture seule

◼ Elles s’expriment en unités absolue (px)

ASSALE Adjé Louis JavaScript 14


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Manipulations de style « calculé »
◼ Exemple :

ASSALE Adjé Louis JavaScript 15


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Le type Node
◼ Nœuds sélectionnés par getElementById, …, sont de type Node
◼ Un objet Node dispose des propriétés :
◼ nodeName : nom du nœud (balise en majuscule)

◼ nodeType : type du nœud défini par les constantes prédéfinies

Node.ELEMENT_NODE (=1), Node.TEXT_Node(=3)


◼ nodeValue : null si le nœud est un élément, le contenu pour un

nœud texte
◼ parentNode : le nœud parent du nœud courant

◼ childNodes : la liste (NodeList) des fils du nœud courant

◼ firstChild, lastChild : le 1er et le dernier des nœuds fils

◼ previouSibling, nextSbling : le nœud frère précédent/suivant


ASSALE Adjé Louis JavaScript 16
Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Création d’un élément (nœud)
◼ Méthode createElement de l’objet document renvoie élément créé (non
inséré dans le DOM) sous la forme d’objet stocké dans une variable
◼ var elt = document.createElement("li"); // Création d’1 élément li

◼ Définition informations de l’élément (contenu, identifiant, classe, …)


◼ elt.id = "python"; // Définition de son identifiant

elt.textContent = "Python"; // Définition de son contenu textuel


◼ Insertion avec méthodes nœudParent.appendChild(nœudAjouté) ou
nœudParent.insertBefore(nœudInséré, nœudRéférence)
◼ document.getElementById("langages").appendChild(elt); //

Insertion l’élément comme nouveau fils de l’élément dont l’id est


"langages"
ASSALE Adjé Louis JavaScript 17
Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Création d’un élément (nœud)
◼ Méthode createTextNode de l’objet document crée un nœud de type
texte, ensuite on ajoute le nœud texte à l’élément avec appendChild
◼ var rubyElt = document.createElement("li"); // Création élément li

rubyElt.id = "ruby"; // Définition de son identifiant


rubyElt.appendChild(document.createTextNode("Ruby")); //
Définition de son contenu textuel
◼ Méthode insertAdjacentHTML, insertAdjacentElement définissent
position exacte de nouveau nœud, appelé sur un élément existant avec 2
paramètres : 1 – chaine contenant la position , 2- une chaine de
caractères (à analyser en tant que HTML/ XML) ou l’élément à insérer

ASSALE Adjé Louis JavaScript 18


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Création d’un élément (nœud)
◼ Méthode insertAdjacentHTML, insertAdjacentElement - valeurs du
paramètre position :
◼ beforebegin : avant l’élément existant lui-même

◼ afterbegin : juste à l’intérieur de l’élément existant, avant son

premier enfant
◼ beforeend : juste à l’intérieur de l’élément existant, après son

dernier enfant
◼ afterend : après l’élément existant lui-même

◼ Les positions beforebegin et afterend ne fonctionnent que si le

nœud est dans l’arbre et s’il possède un élément parent

ASSALE Adjé Louis JavaScript 19


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Création d’un élément (nœud)
◼ Exemples
◼ // Ajout d'un élément au tout début de la liste de id "langages"

document.getElementById('langages').insertAdjacentHTML("after
Begin", '<li id="javascript">JavaScript</li>’);
◼ var tempDiv = document.createElement('div’);

tempDiv.style.backgroundColor = randomColor();
if (activeElem) {
activeElem.insertAdjacentElement('beforebegin',tempDiv); }

ASSALE Adjé Louis JavaScript 20


Javascript
◼Le DOM (Document Object Model)
• Manipulation du DOM
✓ Suppression et remplacement d’élément (nœud)
◼ Méthode parent.removeChild(nœud) supprime nœud des fils du parent
◼ // Suppression de l'élément identifié par "bash"

document.getElementById("langages").removeChild(document.get
ElementById("bash"));
◼ Méthode parent.replaceChild(remplaçant, remplacé)
◼ var bashElt = document.createElement("li"); // Crée élément li

bashElt.id = "bash"; // Définition de son identifiant


bashElt.textContent = "Bash"; // Définition de son contenu textuel
// Remplace élément identifié par "perl" par le nouvel élément
document.getElementById("langages").replaceChild(bashElt,
document.getElementById("perl"));
ASSALE Adjé Louis JavaScript 21
Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ Produits par des actions sur des éléments
◼ Différents types d’évènements
◼ Action de l’utilisateur via le clavier ou la souris : click, keypress,

keyup, mouseover, etc.


◼ Changement d’état : change, focus

◼ Chargement d’élément : load

✓ Programmation événementielle consiste à


◼ Lier une fonction à l’occurrence d’un événement sur un élément
◼ On parle d’abonnement de la fonction à l’élément pour l’événement

◼ fonction déclenchée lorsque événement se produit sur cet élément.

fonction attachée à événement est appelée fonction « gestionnaire


d’événement » - event handler – ou « d’écoute » event listener
Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ Programmation événementielle
◼ Méthode d’abonnement addEventListener
◼ Permet d’abonner à l’objet sur lequel elle est invoquée une fonction

pour l’événement précisé : objet.addEventListener(eventType,


listenerFunction)
- objet : objet ciblé : window ou un élément de la page
- eventType : chaine de caractères désignant le type d’événement
"click", "load", "change", "mouseover", "keypress", etc.
- listenerFunction : la fonction listener qui sera appelée lorsque
l’événement se produit
◼ Méthode removeEventListener désabonne de l’objet sur lequel elle est
invoquée une fonction pour un événement : objet.removeEventListener(
eventType, listenerFunction)
ASSALE Adjé Louis JavaScript 23
Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ Programmation événementielle
◼ Méthode d’abonnement addEventListener. Exemple:

ASSALE Adjé Louis JavaScript 24


Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ méthodologie
◼ Placer les fonctions JavaScript à part de l’HTML
◼ Définir une fonction chargée de mettre en place les abonnements
◼ Récupérer l’élément ciblé

◼ Abonner la fonction listener pour l’événement voulu

◼ Déclencher cette fonction


◼ Doit être fait lorsque page complètement chargée → utiliser

événement load sur window


◼ Sur un élément donné on peut avoir
◼ Plusieurs abonnements pour différents événements

◼ Plusieurs abonnements pour le même événement

ASSALE Adjé Louis JavaScript 25


Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ méthodologie

ASSALE Adjé Louis JavaScript 26


Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ Complément sur fonction d’écoute
◼ Dans une fonction listener, la variable this est définie et désigne l’objet
qui a déclenché l’événement
◼ Un objet event est créé pour chaque événement. Cet objet est passé en
paramètre lors du déclenchement de la fonction listener associée
◼ Objet event (dont type varie selon événement) possède des propriétés
◼ clientX, clientY – screenX, screenY – pageX, pageY coordonnées

de l’événement par rapport au navigateur – écran ou page


◼ altKey, ctrlKey, shiftKey l’une des touches Alt, Ctrl ou Shift était

pressée lors de l’événement


◼ keyCode information sur la touche appuyée

◼ target la cible de l’événement (== this)


ASSALE Adjé Louis JavaScript 27
Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ Fonctions listener et paramètres
◼ 2nd paramètre de addEventListener est la fonction d’écoute, c’est une
valeur de type fonction et pas un appel de fonction
◼ Problème : comment faire pour que la listener function soit paramétrée
◼ Par exemple :
◼ On dispose des document avec des images

◼ Lors du clic sur une image on veut déclencher une action

◼ Les actions sont similaires pour toutes les images mais dépendent
du « numéro » de l’image

ASSALE Adjé Louis JavaScript 28


Javascript
◼Le DOM (Document Object Model)
• Les évènements
✓ Fonctions listener et paramètres
◼ Solution créer une fonction qui calcule des listeners et l’appeler comme
paramètre de addEventListener

ASSALE Adjé Louis JavaScript 29


Javascript
◼Travaux pratiques N2
• Exercices 1 à 10 du fichier Exercices JavaScript DOM

ASSALE Adjé Louis JavaScript 30

Vous aimerez peut-être aussi