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 TP fait suite au TP2, le point de départ (i.e. les fichiers ci-dessus) correspond à quelques détails près aux fichiers attendus 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.

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 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 chargeDonnees("nomFichier.json", callback) charge un fichier, 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.

Remplacer l'appel à maj_annees(donnees_exemple) dans init_menus pour charger les nouvelles contenues dans le fichier nouvelles.jsontélécharger) en utilisant chargeDonnees. On utilisera maj_annees dans le callback passé en paramètre de chargeDonnees et on s'interdira de faire une affectation sur la constante donnees_exemple.

L'affichage des nouvelles filtrées est-il correct ? Expliquer pourquoi.

Aide


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

Déplacer la constante donnees_exemple dans le fichier LIFAP5-TP3-test.js. Sa valeur n'est plus disponible dans LIFAP5-TP3.js : la page ne sera plus fonctionnelle et des erreurs javascript seront affichées dans la console.

À 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 : il faut donc ajouter un argument dans toutes les fonctions qui utilisaient donnees_exemple pour les rendre paramétriques et corriger les appels à ces fonctions pour passer le paramètre. Suivez les erreurs de la console pour y parvenir.

Attention à la gestion des événements: il faudra bien réfléchir à ce que l'on range dans les champs onchange des menus. On y place normalement une fonction qui n'attend pas d'arguments : cette fonction doit accéder aux nouvelles courantes, il faudra donc 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.

Ajouter à la page un menu déroulant supplémentaire permettant de choisir la liste de nouvelles à consulter. Un choix dans ce menu déclenchera le chargement des données correspondant à la bonne liste de nouvelles.

On utilisera directement l'API fetch vue en cours au lieu de la fonction chargeDonnees afin d'afficher un message d'erreur à l'utilisateur en cas de problème de chargement.