LIFAP5 - TP3 : Interactions serveur asynchrones

Comme dans les TP précédents, il faut télécharger et ouvrir localement les fichiers suivants, l'ensemble des fichiers est disponible dans l'archive LIFAP5-TP3-fichiers.zip.

On aura également besoin des fichiers de données suivantes :

Ce TP3 fait suite au TP2, le point de départ (i.e. les fichiers ci-dessus) correspond à peu près au résultat attendu en fin de TP2 où on a une page d'affichage des nouvelles avec un filtre sur le mois et l'année souhaités. L'objectif du présent TP3 est de réorganiser le code pour pouvoir gérer un tableau de nouvelle obtenu de façon asynchrone, alors que dans le TP2 ces nouvelles étaient stockés dans un constante.

Dans ce TP, on s'interdira d'utiliser let et var ainsi que les boucles (for et while). Globalement, il s'agit d'écrire un programme le plus fonctionnellement possible, avec un maximum de d'initialisation const, sans utiliser d'affectation et en utilisant les fonctions map, reduce et filter des tableaux.


Exercice 0: chargement de nouvelles

Cet exercice est une prise en main du code de départ.


Exercice 1: chargement dynamique des nouvelles : prise en main

Au lieu d'utiliser une liste de nouvelles statique, fournie directement dans le code javascript par la constante globale donnees_exemple, on va vouloir charger dynamiquement les nouvelles.

La fonction fournie charge_donnees(url, callback) charge, de façon asynchrone, le fichier json à l'adresse url, puis appelle la fonction callback en lui passant en argument le contenu du fichier chargé. Cette fonction utilise l'API fetch vue en cours et pourra servir d'exemple pour les exercices suivants.

Aide


Exercice 2: Passage d'information via des fermetures : se passer de donnees_exemple

À la fin de cet exercice, l'affichage des nouvelles doit être fonctionnel et utiliser les bonnes données chargées dynamiquement sans utiliser de variables globales.

Attention à la gestion des événements: il faut bien réfléchir à ce que l'on range dans les champs onchange des menus. On y place une fonction qui n'attend pas d'arguments et qui empilée dans la task queue du navigateur : comme cette fonction doit accéder aux nouvelles courantes, il faut utiliser une fermeture qui va capturer ces nouvelles.


Exercice 3: Affichage du contenu des nouvelles

Pour le moment, on affiche juste la liste des titres des nouvelles. On souhaite en afficher aussi le contenu, mais seulement lorsque l'on clique sur le titre de la nouvelle. On souhaite également que l'affichage d'un contenu masque les autres contenus. Pour cela on propose de procéder de la manière suivante:

Aide


Exercice 4: pour aller plus loin : l'annuaire de nouvelles

Le fichier annuaire.jsontélécharger) contient une structure JSON avec des listes de nouvelles. Lire et comprendre ce fichier.

On pourra utiliser directement l'API fetch vue en cours au lieu de la fonction charge_donnees afin d'afficher un message d'erreur à l'utilisateur en cas de problème de chargement. On peut aussi modifier charge_donnees.