Comme pour le TP1, un projet de départ vous est
fourni (archive zip).
Il comprend un fichier LIFAP5-TP2.html qui charge le fichier LIFAP5-TP2.js.
Le fichier LIFAP5-TP2.js comprend tout l’outillage de base pour la gestion des événements de LIFAP5-TP2.html.
Extraire le contenu de l’archive zip, puis ouvrez LIFAP5-TP2.html dans firefox et éditez LIFAP5-TP2.js avec votre éditeur préféré pour répondre aux exercices suivants.
Un peu plus tard dans le TP, on utilisera également les fichiers LIFAP5-TP2-test.html et LIFAP5-TP2-test.js.
Utilisez la console (F12) de firefox pour mettre au point vos programmes.
function f(n) {
return (n2) => n + n2;
}
let f3 = f(3);
console.log(f3(4));
console.log(f(2)(10));
let f5 = f(5);
let tab = [1, 2, 3];
console.log(tab.map(f5));
function f1() {
let tab = [];
for (var i = 0; i < 3; ++i) {
tab.push(() => i);
}
let t = tab.map((f) => f());
return t;
}
function f2() {
let tab = [];
for (var i = 0; i < 3; ++i) {
const j = i;
tab.push(() => j);
}
let t = tab.map((f) => f());
return t;
}
f2() précédente en utilisant une IIFE au lieu d’une déclaration const j.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);
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.html vous est fourni et permet de lancer Mocha dans le navigateur en utilisant les tests définis dans LIFAP5-TP2-test.js.
Le fichier LIFAP5-TP2-test.js contient des tests pour la fonction garde_entiers_pairs définie dans LIFAP5-TP2.js.
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.
Cet exercice va consister à mettre en place un affichage pour des nouvelles stockées dans une structure JSON.
On devra définir les traitements sur la collection donnees_exemple puis associer ces traitements aux boutons de l’interface HTML pour les déclencher.
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:
donnees_exemple définie dans LIFAP5-TP2.js et essayer de comprendre comment sont représentées les nouvelles.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.LIFAP5-TP2-test.js (et en les lançant via LIFAP5-TP2-test.html).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>.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.LIFAP5-TP2.html en l’ouvrant avec FirefoxOn souhaite pouvoir filtrer les nouvelles selon un mois et une année. Pour cela, on effectue les étapes suivantes:
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.LIFAP5-TP2-test.js.maj_liste_nouvelles qui:
input dont l’id est input-mois et l’année dans l’input dont l’id est input-annee.donnees_exemple grâce à filtre_mois_anneeliste_nouvelles_htmlid est elt-nouvellesinit_3_2 en associant la fonction liste_nouvelles_html au bouton dont l’id est btn-upt-liste.LIFAP5-TP2.html.substr et/ou split pour découper les dates en années et en mois.id, on peut utiliser document.getElementById().input on peut utiliser le champ value.div) on peut faire une affectation sur son champ innerHTML.onclick. Attention c’est la fonction et pas le résultat de son appel qu’il faut ranger dans onclick (sinon l’appel se fait au moment de l’affectation et pas au moment du click).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):
option du select.selected d’un élément option vaut true, c’est cette valeur qui sera présélectionnée dans le menu déroulant.value d’un élément select contient la valeur de l’option sélectionnée.onchange d’un élément select peut être utilisé pour enregister un callback qui sera appelé lors d’un choix dans le menu (c’est le pendant du onclick des boutons).Set (méthodes) peuvent être utilisés pour éviter les doublons.