Ce TP vise à vous remettre dans le bain de JavaScript
et à vous faire expérimenter certaines « nouveautés » (relatives),
introduites depuis 2015 et maintenant utilisables sur tous les navigateurs
modernes.
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.
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.
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.
Exemple de rendu
(exemple de rendu).
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.
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 :
Regarder et essayer « à la main » les différents services présentés sur la page.
Faire une page HTML qui affiche en Ajax la liste des régions de France (geonameId 3017382).
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.)
Ajouter un bouton ou un lien pour permettre à l'internaute de remonter dans la hiérarchie à partir du lieu courant.
Optionnel : ajouter un bouton ou un lien qui permet de lister les voisins géographiques du lieu courant.
Optionnel : ajouter un champ texte, pour pouvoir commencer l'exploration à partir du résultat d'une recherche.
Créer une page HTML vide qui appelle un script JS, et répondre aux questions suivantes.
É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().
É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 !
É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.
É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 ».
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.
Modifier la méthode saluer() pour que le nom de famille soit écrit en capitales.
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).
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.
Ajouter un identifiant unique aux instances de Person.
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() ?
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.
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).
