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
(voirremove()
ouremoveChild()
) - 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
(voirinsertBefore()
) - Ajouter un paragraphe avant l'élément figure. On pourra à nouveau utiliser
insertBefore
ou bien tester avecbefore()
. - 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" />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.
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 unconsole.log(document.getElementById("notes"));
- Ajouter en fin du
body
un script qui appelle la fonctionafficherNotes
.
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.

Source image Wikisource