DIU-EIL - Activité pratique “programmation Web”

Les fichiers sont disponibles dans l’archive DIU-EIL-WEB-fichiers.zip. Téléchargez puis ouvrez les fichiers DIU-EIL-WEB.html dans firefox et les fichiers DIU-EIL-WEB.js et DIU-EIL-WEB.css avec votre éditeur.

Documentation, outillage et bonne pratiques

Voir la section dans dans la présentation

Partie : découverte de JavaScript et de la programmation dans le navigateur (matin)

Exercice : outils du développeur, prise en main

Exercice : bases du langage et utilisation de la console

typeof "John";
typeof 3.14;
typeof NaN;
typeof false;

typeof {};
typeof {name:'John', age:34};
({}) instanceof Object;

typeof [1,2];
[1,2] instanceof Array;
[1,2] instanceof Object;

typeof new Date();
new Date() instanceof Date;
new Date() instanceof Object

typeof function () {};
typeof (() => {});
(() => {}) instanceof Function;
(() => {}) instanceof Object;

typeof un_truc;
typeof null;
typeof undefined;
let n = 42;
let b = false;
let s = "test";
let o = {name : "Romuald", age : 37};
let a = [0,1,1,2,3,5,8];
let f = function () {return 42;};

function test1(num, bool, str, obj, arr){
  num++;
  bool = !bool;
  str += "foo";
  obj.name = "Olivier";
  arr.push(13);
  
  console.log(num, bool, str, obj, arr);
}

// test1(n,b,s,o,a);

function test2(obj, arr, fun){
  obj= {foo : "bar"};
  arr = [42];
  fun = function () {return 0;};
  
  console.log(obj, arr, fun());
}

// test2(o,a,f);

Recommandations

Exercice : tests automatisés et linter

Recommandations

Exercice : associer des événements

Recommandations

Partie : interface dynamique (après-midi)

Cette partie consiste à mettre en place un affichage pour des nouvelles stockées dans une structure JSON. On devra définir les traitements sur la collection nouvelles_exemple puis associer ces traitements aux boutons de l’interface HTML pour les déclencher.

On recommande fortement, d’écrire les programmes dans le style le plus fonctionnel possible, sans variables globales, avec un maximum de d’initialisation const (sans affectation donc) et en utilisant les fonctions map et filter des tableaux au lieu des boucles (for et while). Ce n’est pas toujours possible, il s’agit de faire au mieux et de savoir ce que l’on fait.

Affichage de nouvelles formattées

On souhaite 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. Regardez le contenu de la constante nouvelles_exemple.
  2. Définissez la fonction trie_nouvelles_date qui prend un tableau de nouvelles et renvoie un nouveau tableau trié par date décroissante.
  3. Définissez 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>.
  4. Définissez 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 des titres de nouvelles classées par ordre de date décroissante.
  5. Utiliser le <div id="div-news"></div> pour y insérer le résultat de liste_nouvelles_html lors de l’événement DOMContentLoaded et vérifiez que l’affichage est correct
  6. (optionel) écrire les tests unitaires correspondant à vos fonctions

Recommandations

Formulaire dynamique

On souhaite maintenant rendre plus interactif l’affichage des nouvelles dans <div id="div-news"></div> en filtrant selon le mois et l’année sélectionnés deux menus déroulants (éléments select). La spécification du comportement est la suivante :

Tout d’abord on réalise un premier filtrage simple de la liste de nouvelles

  1. Définissez la fonction filtre_mois_annee(nouvelles, mois, annee) qui filtre une liste de nouvelles selon le mois et l’année passés en arguments.
  2. Définissez la fonction maj_liste_nouvelles(nouvelles) qui sera le handler onchange de l’élément select-month (c’est le pendant du onclick des boutons), ce handler aura le comportement suivant :

Maintenant, il faut initialiser correctement les listes déroulantes

  1. Définissez la fonction extraire_annees(nouvelles) qui extrait les années qui apparaissent dans une liste de nouvelle.
  2. Similairement, définissez la fonction extraire_mois_de_annee(nouvelles, annee) qui extrait les mois d’une année donnée qui apparaissent dans la liste de nouvelles
  3. A partir de la définition statique des listes déroulantes dans le fichier HTML, définissez une fonction init_select_annees(nouvelles) qui va générer les options de l’élément select-year
  4. De même, définir init_select_mois(nouvelles, annee) qui fait la même chose pour les mois de l’année sélectionnée
  5. Terminer les deux menus déroulants à l’initialisation de la page.

Recommandations

function eliminer_doublons(liste) {
  const asSet = new Set(liste);
  return Array.from(asSet.values());
}

Nouvelles asynchrones

On souhaite se passer de nouvelles_exemple et remplacer la constante par un téléchargement asynchrone des nouvelles. La fonction get_news(callback) vous est fournie pour cela. Cette fonction accède via HTTP à un fichier JSON sur un serveur web,interprète le contenu du fichier puis exécute la fonction callback passée en paramètre sur ce résultat.

La fonction get_news(callback) utilise l’API fetch qui est asynchone. On ne sait pas quand le serveur interrogé va renvoyer la donnée et on ne veut pas bloquer l’exécution du script (et donc te toute la page) à attendre sa réponse. La fonction get_news(callback) ne renvoie pas le contenu du fichier on doit lui passer en paramètre le traitement à effectuer dans le futur quand les données seront disponibles.

Ce style de programmation assez particulier empèche moralement l’utilisation de return : les fonctions ne renvoient plus de valeurs (ou en tous cas, pas le résultat du calcul) mais prennent en paramètre des fonctions appelées callbacks.

Recommandations

Partie : pour aller plus loin

L’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:

// prend une liste d'ID HTML id_contenus et les rens invisibles sur la page
// puis rend visible l'ID id_contenu_a_afficher (s'il existe)
function masque_affiche_contenus(id_contenus, id_contenu_a_afficher) {
  id_contenus.map((idc) => {
    document.getElementById(idc).style.display = 'none';
    return idc;
  });
  if (id_contenu_a_afficher !== undefined) {
    document.getElementById(id_contenu_a_afficher).style.display = 'block';
  }
}

Recommandations

Suivre la souris

Dans la feuille de style, une classe dot permet d’afficher un point. On va utiliser cette classe pour traquer le curseur de la souris en affichant le point dessous.