Rappels sur JavaScript et DOM

Licence Informatique, semestre 6

Jean-Marc LecarpentierPascal Vanier

Enseignement des technologies du Web

 

Rappels sur JavaScript et DOM

Notes de cours

Travail personnel

Objectifs

Ce TP tente de remplir les objectifs suivants, pas forcément compatibles :

  • initier à JavaScript les étudiant·es n'en ayant jamais fait
  • rafraîchir la mémoire des autres, sans les ennuyer (notamment les ex-L1)
  • aller un peu plus loin qu'en L1, sans trop perdre les néophytes

Précisons, au cas où, que les TP doivent être faits sans utiliser de bibliothèque externe : en particulier, si vous avez l'habitude d'utiliser jQuery, c'est l'occasion de vous replonger dans le JavaScript de base.

Exercice 1 — Prise en main de JavaScript et callbacks #

Cet exercice vise à vous faire manipuler une des choses les plus importantes en JavaScript, l'utilisation de fonctions comme callbacks, et rencontrer les problèmes des clôtures. Les débutant·e·s découvriront au passage les fondamentaux du langage (instructions de contrôle, variables et fonctions, tableaux…), mais les autres doivent aussi faire l'exercice pour de vrai (il y a des aspects pas évidents).

Hello world

  1. Créer un fichier HTML avec le contenu suivant :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello world</title>
    <script>
    "use strict";
    
    alert("Hello, world!");
    console.log("Im in ur console");
    
    </script>
    </head>
    <body><p>Ouvrir la console pour voir le résultat</p></body>
    </html>
  2. Ouvrir la page HTML avec un navigateur (depuis le web ou en local, ça devrait fonctionner de manière identique) : vous devriez avoir un message pop-up, et si vous ouvrez la console (control-shift-K sous Firefox), vous devriez voir le message correspondant.
  3. Ajouter à la fin du script le code suivant :
    x = 3;
    console.log(x);
    Pourquoi cela ne marche-t-il pas ? Que faut-il faire pour que ça marche ?
  4. Supprimer le contenu du script, et écrire une fonction saluer qui écrit « Hello, world! » dans la console.
  5. Appeler la fonction saluer 100 fois à l'aide d'une boucle : vous devriez constater que la console n'affiche pas le message 100 fois, mais se contente d'incrémenter un compteur (en rouge à droite), pour dire « ce message est apparu tant de fois ».
  6. Faire en sorte que le script attende 3 secondes avant d'appeler la fonction saluer.
  7. Faire en sorte que le script affiche un autre message (de votre choix) au bout de 5 secondes.
  8. Si ce n'est déjà fait, utiliser une fonction anonyme pour faire la question précédente.

Étoiles

  1. Dans un nouveau script (reprendre le fichier HTML précédent — ne pas oublier l'utilisation du mode strict !), écrire une fonction etoiles(n) qui affiche n astérisques dans la console (par exemple ****** pour n=6).
  2. Faire en sorte que le script attende 5 secondes puis affiche 17 astérisques dans la console. Si vous avez du mal, inspirez-vous de ce que vous avez fait dans la partie précédente.

Chanson

  1. Dans un nouveau script, créer un tableau chanson contenant quelques paroles d'une chanson, sous forme de plusieurs chaînes de caractères (une par vers). Ajouter une chaîne pour l'artiste à la fin du tableau.
  2. Faire en sorte que le script affiche le premier vers au bout d'une seconde, le second au bout de deux secondes, etc., mais n'affiche pas l'artiste. Si vous avez des problèmes, vérifiez comment vous avez déclaré la variable qui parcourt le tableau : avec let ou avec var ?

Exercice 2 — Manipulation des événements du DOM #

L'archive dom.zip contient un fichier HTML, un fichier CSS, et un fichier JS. Vous devez faire les exercices suivants en modifiant uniquement le fichier JS, et sans utiliser de bibliothèques externes.

Modifier le DOM avec les événements

On modifie l'apparence et le contenu de la section intitulée « une section bidon », en fonctions des actions de l'internaute.

  1. Faire en sorte que cliquer sur le paragraphe d'identifiant « toto » ajoute un cadre vert autour du premier item de la liste d'identifiant « bidon ».
  2. Passer la souris sur le mot en emphase dans toto duplique le deuxième item de la liste.
  3. Cliquer sur un item de la liste supprime l'item après avoir écrit son contenu dans la division d'identifiant « sortie ».
  4. Modifier le code pour qu'à la suppression d'un item, la page affiche une alerte indiquant « L'item numéro i a été supprimé » (avec i le numéro de l'item dans la liste).
  5. Appuyer sur la touche « A » du clavier permet d'ajouter un item à la liste. Utiliser la fonction prompt pour demander à l'internaute de rentrer le texte du nouvel item.
  6. Si ce n'est déjà fait, faire en sorte que les items nouvellement dupliqués ou ajoutés soient également supprimés quand on clique dessus… et vérifier que c'est toujours le cas pour les anciens items.

Optionnel : pour aller un peu plus loin

  1. Cliquer sur la citation de Wikipédia change sa couleur de fond, en suivant un cycle jaune → orange → vert → bleu.
  2. Cliquer sur un des items de la liste dans la dernière section déplace cet item en tête de la liste.
  3. Cliquer sur les titres de niveau h2 doit cacher toute la section correspondante, en laissant le titre apparent. Un deuxième clic affiche la section de nouveau.
  4. Au survol d'un titre de niveau h2, changer ses couleurs et ajouter un petit texte « cliquer pour cacher » ou « cliquer pour afficher » selon le cas.

Exercice 3 — Les boîtes #

On va manipuler cette page HTML, qui contient des boîtes de différentes classes. Télécharger l'archive contenant le HTML, le CSS et un fichier JS vide. Sans modifier le HTML ni le CSS, écrire le code JavaScript qui commence par écrire dans chaque boîte le nom de ses classes (dans le span de classe etiquette), puis qui donne aux boîtes le comportement suivant :

  • un clic sur une boîte de classe compte incrémente le compteur (division d'identifiant « compteur ») ;
  • survoler une boîte de classe verte la fait passer à la classe rouge (et inversement) ;
  • les boîtes de classe fantome disparaissent si on clique dessus (le fichier CSS prévoit une classe hidden) ;
  • cliquer sur une boîte de classe revelateur fait réapparaître toutes les boîtes fantome disparues ;
  • cliquer sur une boîte de classe copieur duplique la dernière boîte sur laquelle on a cliqué, et place cette nouvelle boîte à la fin.

Optionnel : les boîtes dupliquées par les copieurs ont-elles le comportement attendu ? Si non, modifiez votre code pour que ce soit le cas.