tp4-web-persistance-l3-miage

L3 MIAGE	TP 4 (2 séances)	I. Mirbel & M. Winter
L3 Web Persistance	Révisions Javascript	Année 2017-2018

Objectifs du TP

Revoir la manipulation des objets du DOM
Revoir la gestion des événements

Sujet : Ecrire un script qui génère à la volée une table des matières du document dans lequel il est inséré. Pour ce faire, vous suivrez les étapes décrites ci-dessous.

Soit le fichier html exemple :

<!DOCTYPE html>
<html lang="fr">

  <head>
    <title>Document de test</title>
    <script src="./toc.js"></script>
    <meta charset="ISO-8859-1" />
  </head>

  <body>
    <h1>Introduction</h1>
    <p> bla </p>
    <h1>Section 1</h1>
    <h2>Section 1.1</h2>
    <p> bla </p>
    <h2>Section 1.2</h2>
    <p> bla </p>
    <h1>Section 2</h1>
    <p> bla </p>
    <h1>Section 3</h1>
    <p> bla </p>
    <h1 id="ccl">Conclusion</h1>
    <p> bla </p>
  </body>

</html>

Etape 1 : Table des matière basique

Ecrire une fonction, par exemple toc(), qui, à partir des balises de niveau 1 (h1) trouvées dans le document, génère une table html en début de document dans laquelle sont listés tous les titres de niveau 1 du document.

Vous prendrez soin d'inclure votre fonction dans un fichier d'extension .js dédié et d'inclure ce fichier à votre document test en utilisant la balise script avec l'attribut src.

Voici quelques méthodes qui pourront vous être utiles pour réaliser cette partie du TP :

var element = document.createElement(tagName);
var elements = document.getElementsByTagName(name);
var aChild = element.appendChild(aChild);
var insertedNode = parentNode.insertBefore(newNode, referenceNode);

Les propriétés suivantes pourront également être utiles :

var content = element.innerHTML;

Enfin, le gestionnaire d'événement suivant devra aussi être utilisé afin de ne commencer votre traitement que lorsque l'ensemble du document sera chargé en mémoire :

window.onload = funcRef;

Etape 2 : Table des matières navigable

Ecrire une deuxième version de cette fonction dans laquelle chaque élément de la table est encapsulé dans une balise de type a et contient un attribut href permettant de naviguer depuis la table des matières jusqu'au titre de niveau 1 sélectionné.

Pour cela, il faudra s'assurer que chaque titre de niveau 1 est bien identifié de façon unique dans le document par un attribut id (comme le titre Conclusion dans le document test donné en exemple). Dans le cas contraire, la fonction toc() doit générer cet id.

La propriété suivante pourra donc être utile pour réaliser cette partie du TP :

var id = element.id;

Etape 3 : Mise en évidence du titre sélectionné

Ecrire une troisième version de la fonction toc() qui permet de changer dynamiquement le style du titre de niveau 1 lorsque la souris passe sur la référence à ce titre dans la table des matières. Par exemple, la couleur de fond du titre pourrait devenir rouge le temps durant lequel la souris est positionnée sur la référence à ce titre dans la table des matières et redevenir incolore lorsque la souris est déplacée.

Pour réaliser cette nouvelle version de la fonction toc(), la méthode EventTarget.addEventListener() vous sera certainement utile, ainsi que les événements mouseover et mouseleave.

L'ajout d'éléments de feuille de style devra être réalisé de façon dynamique en ajoutant une balise style dans l'entête (head) du document. Elle vous servira à définir le style du titre sélectionné (par exemple fond rouge). Toujours dans le script, un attribut de votre choix (donc préfixé par data- par convention) pourra être dynamiquement affecté au titre de niveau 1 sélectionné (à l'aide de la méthode setAttribute) afin que le style ad-hoc puisse lui être appliqué le temps de la sélection.

Etape 4 : Traitement des titres de niveau 2

Ecrire une quatrième version de la fonction toc() qui génère une table des matières à partir des titres de niveau 1 et des titres de niveau 2. Les éléments de style associés aux titres de niveau 1 et aux titres de niveau 2 seront différents. Par exemple, la couleur de fond du titre pourrait devenir rouge pour les titres de niveau 1 et vert pour les titres de niveau 2.

Pour ce faire, les propriétés nextSibling et tagName pourront vous être utiles.

Si vous ne l'avez pas fait, factoriser le code qui installe les écouteurs et change dynamiquement l'affichage des titres sélectionnés pour les titres de niveau 1 et de niveau 2 dans une seule fonction, dont l'un des paramètres sera le niveau du titre (h1 ou h2).

Année 2017-2018

TP Web Persistance L3 MIAGE UNS

I. Mirbel & M. Winter