Embed Size (px)
Citation preview
JAVASCRIPT DOM - EVENTS
+
DOM = Document Object Model• API (Application Programming Interface) pour la
manipulation de HTML / XML •Définit la structure logique des documents•Définit la façon d’y accéder, de la manipuler
→ Créer des documents → Parcourir leur structure → Ajouter, effacer, modifier des éléments→ Ajouter, effacer, modifier leur contenu
Voici le code source d’une page simple : Et sont schéma :
<html> <head>
<title>Un titre</title> </head> <body>
<p> Un essai <em>de texte</em>.</p> </body> </html>
Accéder aux éléments :L'objet document possède trois méthodes principales :
- getElementById(); Cette méthode permet d'accéder à un élément en connaissant son Id qui est simplement l'attribut id de l'élément.
- getElementsByTagName(); Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments de la même famille.
- getElementsByName() ; Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments pourtant le même nom (attribut name).
Editer et modifier les éléments :
Pour interagir avec les attributs, l'objet Element nous fournit deux méthodes, getAttribute() et setAttribute() permettant respectivement de récupérer et d'éditer un attribut.
Soit directement avec les propriétés adéquates.
<body onload = "init()"><a id="yahoo" href="http://www.yahoo.com">YAHOO</a><script>function init(){var link = document.getElementById("yahoo");
var href = link.getAttribute('href'); // On récupère l'attribut « href »alert(href);link.href = 'http://www.google.com';
// On édite l'attribut « href » }
</script></body>
Comment agir sur une page ?
- document.write() : écrire directement dans le document. C’est peu utilisé car cela remplace souvent tout le contenu de la page par le nouveau contenu.
- innerHTML : la méthode la plus couramment utilisé sera de modifier le contenu HTML d’une balise quelconque.
- createElement : la méthode createElement () crée un noeudd'élément avec le nom spécifié. Une fois l'élément créé, utilisez la méthode .appendChild() ou .insertBefore() pour l'insérer dans le document.
Créer et insérer des éléments :
Avec le DOM, l'ajout d'un élément HTML se fait en trois temps :
- on crée l'élément ;
- on lui affecte des attributs ;
- on l'insère dans le document, et ce n'est qu'à ce moment-là qu'il sera « ajouté ».
Exemple : <!DOCTYPE html><html><body><p>Cliquez sur le bouton pour créer un élément BUTTON avec du texte.</p><button onclick="maFonction()">Try it</button><div id="BTN">ici</div><script>function maFonction() {
// on identifie l’emplacement du futur boutonvar Element = document.getElementById("BTN");// on crée le bouton var btn = document.createElement("BUTTON");btn.style.backgroundColor= 'red';// on crée le texte du boutonvar t = document.createTextNode("CLICK ME");// on insère le texte du boutonbtn.appendChild(t);// on insère le boutonElement.appendChild(btn);}
</script></body></html>
Les événements :Javascript est dépendant des événements qui se produisent lors d'actions diverses sur les objets d'un document HTML.
- onLoad;
- onClick
- onMouseover
- onMouseout
- ...
addEventListener permet l'assignation de gestionnaires d'évènements sur un élément cible. La cible d'un évènement peut être un nœud dans un document, le document lui-même, un élément window ou un objet XMLHttpRequest.
Pourquoi utiliser addEventListener :
addEventListener est la manière d'enregistrer un écouteur telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :
• Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement.
• Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture ou propagation).
• Elle fonctionne sur tout élément DOM, pas uniquement les éléments HTML.
Exemple :<!DOCTYPE html><html><body><p>Exemple utilisation addEventListener() sur un bouton.</p><button id="monBtn">Try it</button><p id="demo"></p><script>var x = document.getElementById("monBtn");x.addEventListener("mouseover", FonctionOver);x.addEventListener("click", FonctionClick);x.addEventListener("mouseout", FonctionOut);
function FonctionOver() {document.getElementById("demo").innerHTML += "Moused over!<br>";}
function FonctionClick() {document.getElementById("demo").innerHTML += "Clicked!<br>";}
function FonctionOut() {document.getElementById("demo").innerHTML += "Moused out!<br>";}
</script></body></html>
TPJS – Etudiant :
Au lancement de la page « TPJs.html » du dossier « TPJS – Etudiant », une fenêtre alert() s'ouvre avec le message « YES ».
Vous devez compléter les pages « Codes.js » et « Style.css » pour obtenir le fonctionnement suivant :
Au lancement de la page :
Vous devez compléter les pages « Codes.js » et « Style.css » pour obtenir le fonctionnement suivant :
Après avoir complété le formulaire et cliqué sur le bouton « Valider » :
Vous devez compléter les pages « Codes.js » et « Style.css » pour obtenir le fonctionnement suivant :
Après avoir complété le formulaire et cliqué à nouveau sur le bouton « Valider » :
