Rappels et compléments JavaScript

Master Internet, Données et Connaissances

Alexandre Niveau

Enseignement des technologies du Web

 

Rappels et compléments JavaScript

Notes de cours

Travail personnel

Objectifs

Ce TP vise à vous remettre dans le bain de JavaScript et surtout à vous faire expérimenter certaines « nouveautés » (relatives), introduites depuis 2015 et maintenant utilisables sur tous les navigateurs modernes.

Exercice 1 — 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.

Exercice 2 — Récupération de couleurs #

On met à votre disposition un service JSON. À chaque appel, il renvoie un tableau contenant dix objets représentant des couleurs. Chaque couleur a un nom (attribut name) et un code hexadécimal (attribut hex). (Les noms et les codes hexa sont tirés aléatoirement à chaque appel.)

Télécharger l'archive de l'exercice : elle contient un fichier couleurs.html et un fichier couleurs.js vide. On ne modifiera que le fichier JS.

  1. Faire en sorte que chaque clic sur le bouton fasse appel au service et ajoute dix nouvelles couleurs dans la liste. Chaque item ajouté doit contenir le nom de la couleur et avoir pour couleur de fond la couleur elle-même, comme sur l'image suivante.
    Capture d'écran du résultat
    Exemple de rendu
    (exemple de rendu).
  2. Certaines couleurs sont trop sombres pour que le nom soit lisible. Faire en sorte qu'un clic sur une couleur affiche son nom en blanc, en utilisant la classe CSS prévue à cet effet.
  3. Optionnel (sort largement du cadre de l'exercice) : remplacer le clic sur un bouton par de l'infinite scrolling. Attention, l'infinite scrolling est rarement une solution adaptée d'un point de vue ergonomique.

Exercice 3 (optionnel) — Hiérarchie des lieux #

L'objectif de cet exercice est de manipuler les services web Geonames de hiérarchie des lieux. L'accès en HTTPS à Geonames est payant, et comme votre espace personnel n'est accessible qu'en HTTPS, la version de base ne peut pas fonctionner. Vous utiliserez donc un proxy local, dont voici la documentation.

Attention :

  1. Regarder et essayer « à la main » les différents services présentés sur la page.
  2. Faire une page HTML qui affiche en Ajax la liste des régions de France (geonameId 3017382).
  3. Faire en sorte que cliquer sur un item remplace la liste courante par la liste des « fils » de cet item (par exemple, cliquer sur une région fait apparaître la liste des départements, etc.)
  4. Ajouter un bouton ou un lien pour permettre à l'internaute de remonter dans la hiérarchie à partir du lieu courant.
  5. Optionnel : ajouter un bouton ou un lien qui permet de lister les voisins géographiques du lieu courant.
  6. Optionnel : ajouter un champ texte, pour pouvoir commencer l'exploration à partir du résultat d'une recherche.

Exercice 4 — Nouveautés ECMAScript #

Créer une page HTML vide qui appelle un script JS, et répondre aux questions suivantes.

  1. Écrire un générateur someStrings qui génère trois ou quatre chaînes de caractères quelconques. Afficher les valeurs générées par ce générateur avec une boucle for…of, puis avec des appels directs à la méthode next().
  2. Écrire maintenant un générateur powersOfTwo qui énumère toutes les puissances de 2. Attention, il s'agit d'un générateur infini : ne pas l'utiliser sans précaution dans une boucle !
  3. Écrire un générateur powersOfN, avec un argument optionnel n qui prend la valeur 2 par défaut. Il doit énumérer les puissances de n.
  4. Écrire une fonction formatAsList prenant un paramètre formatFunction suivi d'un nombre quelconque de paramètres. Le paramètre formatFunction doit être une fonction prenant un paramètre et renvoyant une chaîne de caractères. La fonction fonction formatAsList doit ajouter à la page une liste HTML contenant un item pour chaque paramètre, dont le contenu textuel est donné par l'appel de formatFunction. Par exemple, formatAsList(function (p) { return p.substr(0, 4); }, "bonjour", "au revoir") crée une liste avec les deux items « bonj » et « au r ».
  5. Créer une classe Person ayant pour attributs un nom, un prénom, et une date de naissance, et une méthode saluer() qui renvoie une chaîne de caractères du genre « Salut, moi c'est Toto Dupont ». On utilisera un template literal.
  6. Modifier la méthode saluer() pour que le nom de famille soit écrit en capitales.
  7. Modifier la classe pour que les instances disposent d'une propriété permettant de récupérer l'âge de la personne (en années).
  8. Créer un tableau d'instances de Person (au moins trois) et utiliser formatAsList pour afficher toutes leurs salutations. On utilisera une « arrow function » pour le paramètre formatFunction.
  9. Ajouter un identifiant unique aux instances de Person.
  10. Ajouter un attribut friends à Person. Cet attribut va contenir la « liste » des amis de la personne. Il faudra faire en sorte que chaque personne ne soit présente qu'une seule fois parmi les amis, même si elle est ajoutée plusieurs fois. Choisir un bon type pour friends ; est-il possible d'utiliser Set() ?
  11. On doit pouvoir ajouter des amis avec la méthode addFriends qui prend un nombre quelconque de personnes en paramètre. Les paramètres doivent être parcourus avec la méthode forEach des tableaux. Comparer ce qui se passe si on donne au forEach une fonction anonyme ou une arrow function, et expliquer.

Exercice 5 — Emploi du temps #

Le but de cet exercice est de faire une mini-application permettant d'afficher l'emploi du temps de plusieurs personnes. Consignes :

  • Pour simplifier, on mettra les données en dur dans le script.
  • Il doit y avoir plusieurs « journées » (pas besoin de leur associer des dates), sur lesquelles des activités peuvent avoir lieu pour diverses personnes.
  • Les activités ont un nom, un jour, une heure de début et une durée, et peuvent concerner plusieurs personnes.
  • Pour chaque journée, l'appli doit montrer les planning des différentes personnes côte-à-côte.
  • Un paramètre persons dans l'URL permet de filtrer les personnes à montrer (et leur ordre), et un paramètre days les jours.
  • Pour l'affichage, vous êtes libres de choisir votre méthode. Vous pouvez considérer que les données seront forcément cohérentes.
  • Optionnel :
    • Faire en sorte que si des personnes côte-à-côte ont une activité commune, la « boîte » contenant l'activité soit commune à toutes ces personnes (le nom n'est écrit qu'une seule fois).
    • Faire en sorte que l'on puisse réordonner et filtrer les colonnes à la souris (cela doit modifier l'URL en temps réel dans la barre d'adresse).
    • Faire en sorte que l'affichage fonctionne même si les données sont « incohérentes » (activités se chevauchant pour une même personne).