TP d’applications web : Javascript

Premiers tests

Ouvrez la console web de firefox ainsi que l’ardoise javascript et testez le code des transparents 4, 8, 10 et 24 (vous pouvez tester ligne par ligne, essayer des variantes...)

Clics et manipulations DOM

Téléchargez la page Manip11.html, placez-la dans un dossier et créez un fichier click.js dans le même dossier afin qu’il soit chargé lors de l’affichage de la page. Dans ce fichier :

1. Placer en tête la directive "use strict";
2. Définir une fonction deplace qui prend en paramètre un élément <li> (list item) et le place à la fin de la liste d’identifiant "cible". Tester cette fonction via la console javascript (vous pouvez créer un élément <li> à la main ou en récupérer un dans la page).
3. Définir une fonction addListeners() qui parcourt la liste des enfants de l’élément "source" et ajoute à chacun d’eux un attribut onclick comprenant une fonction chargée de placer l’élément dans la liste cible. Ajouter au script une ligne qui exécute cette fonction. Tester. Que se passe-t-il quand on clique sur les éléments de la deuxième liste ?
4. On souhaite maintenant qu’un clic sur un élément de la deuxième liste le remette dans la première liste. Modifier la fonction deplace pour obtenir ce comportement (en modifiant l’attribut onclick de l’élément déplacé). Faire en sorte que l’élément puisse indéfiniment passer d’une liste à l’autre quand on clique dessus.