Interactions Javascript : évènements et DOM

Licence Informatique 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Notes de cours

Exercice 1 — Faire du sport et du Javascript #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW2/TP06/ex1/sports.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Une page HTML contient la liste des 10 sports les plus pratiqués en France en 2016 (en nombre de licenciés, source Les Héros du Sport). Pour chaque sport, on souhaite afficher des information sur celui-ci dans la colonne de droite de la page.

Lorsque l'utilisateur clique sur un sport, les informations sont affichée dans l'élément aside d'identifiant info. La liste des sports et leurs données sont stockées dans un objet Javascript inclus dans le fichier sportsData.js. Le fichier sports.zip inclut les fichiers HTML, JS et images pour démarrer.

Partie 1

Version de base

La première version se contente d'afficher le nombre de licenciés, en utilisant l'objet sportsV1. Pour obtenir la clé de l'objet sportsV1 à utiliser (qui est le nom du sport tout en minuscules et sans accents), on pourra prendre le texte du li cliqué, le transformer en minuscules avec la méthode toLowerCase() puis remplacer les caractères é par le caractère e (c'est le seul caractère accentué qui figure ici) avec la méthode replace.

Version de base
Version de base : affichage du nombre de licenciés

Améliorations

Pour l'instant il est possible d'afficher N fois la même information mais il n'est pas possible de remettre à zéro la zone de droite. Deux améliorations sont donc à apporter :

  1. Faire en sorte qu'une information ne puisse être affichée qu'une et une seule fois
  2. Ajouter un bouton pour vider la zone des informations. Attention ce bouton ne doit exister qu'après la première info affichée.
Version améliorée
Version améliorée : pas d'affichage multiple et bouton reset

Partie 2

À ne commencer que si la partie 1 est terminée et fonctionne sans erreurs.

On remplace les données sur chaque sport par l'objet l'objet sportsV2 (inclus lui aussi dans le fichier sportsData.js).

Suivant le même principe, compléter vos programmes pour que l'affichage soit similaire à celui ci-dessous en exploitant les données de l'objet l'objet sportsV2. Attention tous les sports ne contiennent pas les 2 informations site web et logo (le nombre de licenciés est lui toujours présent). Pour savoir si un objet contient une propriété donnée, on pourra utiliser la méthode hasOwnProperty().

Mise en forme : pensez à utiliser CSS !! Vous pouvez tout à fait ajouter dans le fichier CSS les sélecteur (classes, etc) nécessaires à la mise en forme des différents éléments créés par Javascript (et assigner des classes à ces éléments avec Javscript). Cela évite d'avoir trop de lignes de code du type xyz.style.maPropriété = valeur

Version avec plus d'informations
Version finale : nombre de licenciés, site web et logo