Ajouts d’ECMAScript 6 et 7

Master Internet, Données et Connaissances

Alexandre Niveau

Enseignement des technologies du Web

 

Ajouts d’ECMAScript 6 et 7

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 — Nouveautés ECMAScript #

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

  1. Faire en sorte que lorsque la page est appelée avec le paramètre items=n, avec n un entier, la page affiche une liste de n items (quelconques).
  2. Lorsque l'on clique sur un item, l'item symétrique par rapport au centre de la liste doit s'afficher en rouge. Par exemple, cliquer sur le deuxième item doit passer l'avant-dernier en rouge. NB: interdiction de parcourir la liste en entier !
  3. Écrire un générateur powersOfTwo qui énumère toutes les puissances de 2.
  4. É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.
  5. É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 ».
  6. 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.
  7. Modifier la méthode saluer() pour que le nom de famille soit écrit en capitales.
  8. 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).
  9. 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.
  10. Ajouter un identifiant unique aux instances de Person.
  11. 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() ?
  12. 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 2 — 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).