Conception de sites web dynamiques

TP5 -Javascript : objets, tableaux et évènements

Votre travail doit être accessible dans votre répertoire ~public_html/TP5/ avant le jeudi 28 février à 12h.

L'objectif est de réaliser une page web affichant les diplômes et compétences de personnes (des candidats à un poste, par exemple) enregistrées dans un tableau, comme indiqué sur la figure. Au lancement, la page affiche simplement la liste des prénoms et noms. Un clic sur le triangle devant un nom renverse le triangle et fait apparaître sous le nom les renseignements sur la personne. Un nouveau clic ramène à la présentation précédente.

Par ailleurs, une photo, vide initialement, est affichée dans un coin de la page. Le survol d'un nom avec la souris change la photo par celle de la personne et fait apparaître en rouge le nom. On revient à la situation initiale dès que la souris ne survole plus le nom.

Enfin, un lien permet de lancer une fenêtre de saisie d'un critère de sélection des personnes : une fois saisie la compétence recherchée, tous les renseignements de toutes les personnes correspondant au critère sont affichées.

Figure 1

Dans Firefox, si vous avez installé l'extension Web Developper, vous pouvez utiliser "l'ardoise javascript" pour tester des petits morceaux de code javascript.

1) Ecrire d'abord la page sans les aspects dynamiques. Pour cela :

2) Implémenter la gestion des événements comme indiqué supra. Pour cela, vous définirez trois fonctions :