Accueil > Intranet Michel Buffa > Web 2.0 2010 > Séance 2 : DOM et ECMAScript, Ajax

Séance 2 : DOM et ECMAScript, Ajax

De $1

Support de cours

Travail à faire

Manipulation du DOM et gestion d'évènements

Pendant la première heure de ce TP vous allez vous familiariser avec les différentes méthodes du DOM. Toute cette partie se fera en Javascript/HTML et dans Firefox 3.5 minimum.

Pour vous simplifier la tâche, vous pouvez installer les addons suivants :

Liens utiles :

Base du DOM

Vous trouverez ci-dessous une base HTML pour les exercices du TP.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Manipulation DOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function addListItem(){}
</head>
<body>
<h1>Manipulation du DOM</h1>
<h2>Insertion d'éléments</h2>
Ajouter des éléments dans une liste HTML
<ul id="myList">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>
<a href="javascript:addListItem()">Ajouter un élément à la liste</a>

<h2>Parcours d'éléments</h2>
<p>Le DOM est un modèle objet.</p>
<p>Il permet d'interagir avec n'importe quelle partie du document.</p>
<p>Il existe de nombreux moyens de parcourir le document. Avec les noms de balises, avec les attributs, les ID.</p>
<p>Néanmoins, attention, le DOM n'est pas implémenté de la même manière dans tous les navigateurs. Certains navigateurs comme IE6 et IE7 ne respectent pas la norme.</p>
</body>
</html>
Exercice n°1 : Parcourir le DOM

A partir du code précédent, créez un script qui liste et affiche le contenu de toutes les balises <p> comprises dans la page.

Vous pourrez vous aider des fonctions :

  • document.getElementsByTagName
  • element.firstChild
  • element.nodeValue
Exercice n°2 : Modifier le DOM

A partir de la même page HTML, créez un script qui insère dynamiquement un élement <li> dans la liste "myList" et qui créé le label en fonction du nombre de <li> existants dans la page.

Vous pourrez vous aider des fonctions :

  • document.getElementById
  • document.createElement
  • document.createTextNode
  • document.getElementsByTagName
  • element.appendChild

Sérialisation et Parsing

Exercice n°3 : Sérialisation XML

Créez un script qui sérialise l'objet document.body de la page HTML précédente.

Vous pourrez vous aider de :

L'objetXMLSerializer et de sa méthodeserializeToString

Exercice n°4 : Parsing DOM

Créez un script qui parse la chaîne suivante et qui génère une liste <ul> avec les noms contenus dans l'attribut "name".

<people>
  <person name="Napoleon Bonaparte" gender="male"/>
  <person name="Cleopatra" gender="female"/>
  <person name="Julius Caesar" gender="male"/>
  <person name="Ferdinand Magellan" gender="male"/>
  <person name="Laura Secord" gender="female"/>
</people>

Vous pourrez vous aider de :

  • L'objet DOMParser et de sa méthode parseFromString
  • De la méthode element.innerHTML

DOM Traversal

Exercice n°5 : NodeIterator

Créez un script qui utilise un NoteIterator qui sélectionne tous les noeuds text dans le document.body et qui les affiche à l'écran.

Un nodeIterator se créé de la manière suivante :

var nodeIterator = document.createNodeIterator(
    document.body, 
    NodeFilter.SHOW_ALL, 
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false 
);

Vous pourrez utiliser :

  • element.nodeType pour déterminer le type de noeud
  • nodeIterator.nextNode()
Exercice n°6 : TreeWalker

Même exercice mais avec un TreeWalker qui sélectionne tous les noeuds element dans le document.body et qui les affiche à l'écran.

var treeWalker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_ALL, 
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, 
    false 
);

DOM Events

Exercice n°7 : Utilisation des évènements natifs

A partir du code de l'exercice n°2, ajoutez des listeners sur les <li> de la liste "myList" pour les évènements "click" et "dblclick".
Créez ensuite un script qui :

  • lors d'un double click : affiche une popup contenant le label de l'élément cliqué.
  • lors d'un ctrl+click : supprime l'item cliqué.

 

Création d'un client Ajax

XmlHttpRequest

Exemple de requête synchrone
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', false); 
req.send(null);
if(req.status == 200)
alert(req.responseText);
Exemple de requête asynchrone
var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      alert(req.responseText);
     else
      alert("Erreur pendant le chargement de la page.\n");
  }
};
req.send(null);

Pour s'exécuter correctement, la requête AJAX doit être effectuée à partir d'un fichier chargé en http://.
Les scripts précédents ne fonctionneront pas si vous les ouvrez dans le navigateur avec le protocole file://

Editeur de tags

A partir du BMServ qui a été fourni lors du premier TP :

  • Dans le répertoire "res" du projet BMServ, ajoutez une page nommée "ajax.html" qui interroge en AJAX Asynchrone le service http://localhost:9998/tag/all et qui remplit une table avec la liste de tous les tags.

Ensuite reprenez le formulaire "/res/addbookmark.html" :

  • Ajoutez un champ "tag"
  • Créez le script qui, au chargmement du formulaire, va chercher (en Ajax) la liste des tags et qui remplit le formulaire avec une balise (comme <input type="checkbox"> par exemple) pour chaque tag.
  • Mettez ensuite à jour la méthode create de la ressource bmserv.resources.BookmarkRessouce de manière à ce que les tags sélectionnés soient pris en compte et soient ajoutés sous forme de Taggings via la méthode Server.tgh.createTagging(...).

Pour toute question...

Vous pouvez joindre Nicolas.Delaforge[at]sophia.inria.fr ou micbuffa[at]gmail.com.

FichierTailleDateAttaché par 
 Cours-DOM-JS-AJAX.pdf
Support de cours
395.28 Ko22:50, 8 Fév 2010NicolasDelaforgeActions
Images (2)
Voir 1 - 2 sur 2 images | Voir tout
Diagramme de classes DOM Level 2
Diagramme de classes DOM Level 2
W3C-DOM-L...  Actions
Propagation des évènements dans le DOM
Propagation des évènements dans le DOM
xfe_0701....  Actions
Commentaires (0)
Vous devez être connecté pour poster un commentaire.