LIFAP5 - TP2 : Fonctions sur les tableaux, tests

Comme pour le TP1, un projet de départ vous est fourni. Il comprend un fichier LIFAP5-TP2.html qui charge LIFAP5-TP2.js. Le fichier LIFAP5-TP2.js comprend tout l'outillage de base pour la gestion des événements de LIFAP5-TP2.html. Copiez les deux fichiers sur votre compte, puis ouvrez LIFAP5-TP2.html dans firefox et éditez LIFAP5-TP2.js avec votre éditeur préféré pour répondre aux exercices suivants. Il vous faudra également copier sur votre compte les fichiers LIFAP5-TP2-test.html et LIFAP5-TP2-test.js.

Utilisez la console (F12) de firefox pour mettre au point vos programmes.


Exercice 1: Transformations de tableaux

Pour chacune des variables définies dans le programme suivant, essayer de prédire sa valeur puis vérifier dans la console Javascript de Firefox.

let tab = [1,2,3,4,5,6,7,8,9];

let t1 = tab
    .filter( n => n > 3 );

let t2 = tab
    .map( n => n + 10 );

let v1 = tab
    .some( n => n !== 3 && n % 3 === 0 ); 

let v2 = tab
    .some( n => n !== 5 && n % 5 === 0 );

let t3 = tab
    .filter( n => n % 2 === 0 )
    .map( n => 2 * n );

let t4 = tab
    .map( n => 2 * n )
    .filter( n => n % 2 === 0 );

let v3 = tab
    .reduce( (acc,n) => (acc + (n%2 === 0 ? n*n : 0)), 0 );

let v4 = tab
    .filter( n => n % 2 === 0 )
    .map( n => n*n )
    .reduce( (acc,n2) => acc+n2, 0 )

let v5 = tab
    .filter( n => n <= 4 )
    .reduce( (acc,n) => acc*n, 1 );

let v6 = tab 
    .filter( n => n % 3 === 0 )
    .map( n => ({ "v": n, "c": 1 }) )
    .reduce( (acc,o) => ({"s": acc.s + o.v,
                          "c": acc.c + o.c}),
             {"s": 0, "c": 0} );

let v7 = ( o => o.s / o.c )(v6);

Exercice 2: tests unitaires avec Mocha et Chai

La bibliothèque Mocha couplée avec Chai permet de tester du code Javascript. Elle permet en particulier d'automatiser l'exécution de tests et d'afficher les tests qui ont réussi / échoué.

Dans le cadre de ce TP, on utilisera le style assert (doc ici) de Chai.

Le fichier LIFAP5-TP2-test.htmltélécharger) vous est fourni et permet de lancer Mocha dans le navigateur en utilisant les tests définis dans LIFAP5-TP2-test.jstélécharger également).

Le fichier LIFAP5-TP2-test.js contient des tests pour la fonction garde_entiers_pairs définie dans LIFAP5-TP2.jstélécharger. Exécuter les tests en ouvrant simplement LIFAP5-TP2-test.html dans Firefox.

On constate que certains tests échouent. Recoder la fonction garde_entiers_pairs dans LIFAP5-TP2.js en utilisant la méthode filter des tableaux à la place de la boucle et vérifier que votre implémentation passe tous les tests avec succès. Corriger au besoin.


Exercice 3: Affichage de nouvelles

Cet exercice va consister à mettre en place un affichage pour des nouvelles stockées dans une structure JSON.

3.1 Structure de la liste de nouvelles et extraction des titres

Dans cet exercice, on s'interdira d'utiliser let et var: on n'utilisera que const.

On souhaite dans un premier temps afficher la liste des nouvelles classées par ordre de date décroissante. Pour y parvenir, il est proposer de suivre les étapes suivantes:

  1. Regarder le contenu de la constante donnees_exemple définie dans LIFAP5-TP2.js et essayer de comprendre comment sont représentées les nouvelles.
  2. Compléter la fonction trie_articles_date qui prend un tableau de nouvelles et renvoie un nouveau tableau trié par date décroissante. On pourra pour cela utiliser la méthode sort des tableaux précédée d'une copie effectuée grâce à Array.from.
  3. Tester votre fonction en ajoutant des tests dans LIFAP5-TP2-test.js (et en les lançant via LIFAP5-TP2-test.html).
  4. Compléter la fonction formate_titre qui prend une nouvelle et renvoie une chaîne de caractères contenant le titre de la nouvelle entouré d'une balise <li>.
  5. Compléter la fonction liste_nouvelles_html qui utilisera les méthodes des tableaux et les fonctions définies précédemment pour générer une chaîne de caractères contenant le code HTML permettant d'afficher la liste des titres de nouvelles classées par ordre de date décroissante. On pourra utiliser join au besoin.
  6. Vérifier que l'affichage se fait maintenant correctement dans LIFAP5-TP2.html en l'ouvrant avec Firefox

3.2 Boutons et événements

On souhaite pouvoir filtrer les nouvelles selon un mois et une année. Pour cela, on effectue les étapes suivantes:

  1. Compléter la fonction filtre_mois_annee dans le fichier LIFAP5-TP2.js qui filtre la liste des nouvelles selon le mois et l'année passés en arguments.
  2. Tester cette fonction via Mocha en ajoutant le nécessaire dans LIFAP5-TP2-test.js.
  3. Compléter la fonction maj_liste_nouvelles qui:
  4. Compléter la fonction init_3_2 en associant la fonction liste_nouvelles_html au bouton dont l'id est btn-upt-liste.
  5. Tester en essayant différentes valeurs dans la page LIFAP5-TP2.html.

Aide

3.3 Formulaire dynamique

On souhaite maintenant rendre plus interactif le changement de mois et d'année. Pour cela, on veut remplacer le formulaire par deux menus déroulants (élément select):

Aide