Créer des éléments avec le DOM

Travail personnel

Exercice 1 — Créer des élements dans le DOM #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/2020/TW2/TP04/ex1/creation.html

(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETU" />

en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

L'archive creation.zip contient une page web creation.html et un fichier Javascript creation.js.

Compléter la fonction creationDom() pour exécuter les points ci-dessous. Vous ne pouvez pas modifier le fichier HTML !, c'est donc Javascript qui modifie l'arbre DOM et ainso l'affichage de la page.

Note : faire un dessin de l'arbre DOM correspondant au document sur lequel vous travaillez (ou une partie de celui-ci) est un bon moyen de se rendre compte des opérations à effectuer sur l'arbre DOM du document.

Supprimer le dernier item de la liste d'identifiant liste (voir remove() ou removeChild())
Ajouter un item à la fin de la liste ul
Ajouter un titre de niveau 1 au tout début de la page c'est à dire en premier fils de body (voir insertBefore())
Ajouter un paragraphe avant l'élément figure. On pourra à nouveau utiliser insertBefore ou bien tester avec before().
Modifier (par Javascript) le style de tous les items de liste à puce en leur mettant un fond jaune.
Attention il faut récupérér tous les éléments à modifier et faire une boucle pour modifier leur style un à un.

Exercice 2 — Notes de bas de page #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/2020/TW2/TP04/ex2/notes.html

(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETU" />

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Récupérer cette page HTML (archive). Certains morceaux du texte sont considérés comme des notes de bas de page : ils sont simplement entourés d'un span avec une classe note. Nous allons écrire le code JavaScript permettant de gérer ces notes et de les afficher en bas de page (un peu comme le fait LaTeX avec la commande \footnote{}).

Partie 1

Créer un fichier Javascript externe et le lier à votre page web
Dans ce fichier, créer une fonction afficherNotes sans argument et qui fait pour commencer un console.log(document.getElementById("notes"));
Ajouter en fin du body un script qui appelle la fonction afficherNotes.
Tester si ça marche bien sans erreur.
Écrire dans la fonction afficherNotes le code qui cache les notes.
Compléter pour que les notes apparaissent alors sous fome d'une liste numérotée dans la section d'identifiant notes comme sur la capture ci-dessous.

Affichage des notes en bas de page
Compléter pour que le numéro de la note apparaisse entre crochets dans le fil du texte (à la place du span comme ci-dessous.

Affichage du n° dans le texte

Partie 2 - Amélioration

Ajouter dans le texte des liens vers la note correspondante et inversement ajouter à chaque note un lien pour revenir à l'appel de la note dans le texte.

Optionnel : ajouter un mode « notes de marge », dans lequel chaque note est affichée en petit, dans une des marges, au niveau de l'appel de note correspondant, comme par sur l'exemple ci-dessous.

Exemple de notes de marge
Source image Wikisource