Créer des éléments avec le DOM

Licence Informatique 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Notes de cours

Exercice 1 — Des couleurs au 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/TW2/TP04/ex1/couleurs.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="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

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 couleurs.zip contient une page web couleurs.html dans laquelle un script contient la liste de couleurs suivantes, chaque couleur étant un objet :

 let mesCouleurs = [{
		"name": "red",
		"hex": "#f00"
	},
	{
		"name": "green",
		"hex": "#0f0"
	},
	{
		"name": "blue",
		"hex": "#00f"
	},
	{
		"name": "cyan",
		"hex": "#0ff"
	},
	{
		"name": "magenta",
		"hex": "#f0f"
	},
	{
		"name": "yellow",
		"hex": "#ff0"
	},
	{
		"name": "black",
		"hex": "#000"
	}
]

Parcourir le tableau mesCouleurs pour créer l'affichage des couleurs et de leurs noms, par exemple :
couleurs JSON

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/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="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

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.

  1. Faire en sorte que les notes n'apparaissent pas dans le texte, mais en dessous, avec des numéros et une police de taille réduite.
  2. Ajouter dans le texte des liens vers les notes (par exemple sous forme d'exposant, ou avec des crochets) ; ajouter dans chaque note un lien pour revenir à l'appel de la note dans le texte.
  3. Lors du chargement de la page, demander à l'internaute (avec un prompt) le mode d'affichage désiré : notes supprimées, notes en bas de page, ou notes laissées dans le texte avec des parenthèses autour. Pour faire cela proprement, il faudra prévoir trois fonctions différentes de traitement des notes, et appeler la bonne suite en fonction de ce que renvoie le prompt.
  4. 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.