TD 7 : Javascript - jQuery
Ce TD / TME a pour objectif de mettre en pratique les notions vues en cours sur le langage
Javascript et la manipulation des éléments de la page, notamment par utilisation de la librairie
jQuery1 .
7.1 Formulaires de connexion / enregistrement
Il s’agit ici de mettre en place des méthodes permettant la gestion des formulaires de connexion et
d’enregistrement. Plutôt que de surchager le serveur, on prendra le soin de vérifier ce qui peut l’être
en local avant transmission des informations.
Question 1. Grâce au gestionnaire d’évènement onSubmit du formulaire, écrire une fonction de
vérification des informations saisies pour l’ouverture de session (champs remplis et tailles chaînes
limitées à 20 caractères). Si tout se passe bien le système appelle une méthode connecte s’occupant
de la connexion effective de l’utilisateur auprès du serveur. En cas de problème, le site affichera un
message d’erreur adapté (voir Fig. 1).
Figure 1: Message d’erreur lors d’une problème de connexion.
Question 2. Même chose pour le formulaire d’enregistrement (des vérifications supplémentaires
concernent ici une longueur minimale de 8 caractères pour le mot de passe et la correspondance
entre les deux saisis).
7.2 Tout en un
Dans l’état actuel, nous avons trois fichiers html, un pour la connexion, un pour l’enregistrement et
un pour l’affichage des messages. Le fait de disposer de 3 fichiers distincts est une possibilité mais
complique quelque peu les navigations entre les pages, car il faut mettre en place des mécanismes
de transmission des informations (notamment la clé de session par exemple). L’objectif ici est de
tout regrouper en un seul fichier nommé [Link], qui est une coquille vide lors du chargement
initial, mais que des codes javascript remplissent pour afficher les différents panneaux du site.
Question 1. Donner le code d’une méthode makeConnexionPanel permettant l’affichage du pan-
neau de connexion
Question 2. Donner le code d’une méthode makeEnregistrementPanel permettant l’affichage du
panneau d’inscription
Question 3. Dire quoi modifier dans la méthode makeMainPanel pour l’affichage du panneau
principal (plutôt que l’affichage d’une boîte de dialogue tel que c’est le cas actuellement). Dire
également les modifications à effectuer pour que ce panneau contienne les 10 messages les plus
récents à afficher sur la page.
Question 4. Donner les codes de méthodes nécessaires pour la liaison des dfférents panneaux (du
chargement à l’affichage des messages sur le panneau principal)
7.3 Affichage des commentaires
Il s’agit ici de donner le code des méthodes permettant d’afficher les commentaires liés à un message
1
[Link]
1. TD 7 : JAVASCRIPT - JQUERY TD 7
Figure 2: Développement de messages
Question 1. Donner la méthode developpeMessage permettant d’afficher les commentaires liés à
un message
Question 2. Donner la méthode replieMessage permettant de cacher les commentaires liés à un
message
Question 3. Donner la méthode newComment permettant de publier un nouveau commentaire
pour un message
7.4 Gestion des abonnements
Question 1. Écrire les méthodes follow et stopFollow permettant de s’abonner ou se désabonner
d’un utilisateur
7.5 Chargement itératif des messages
Lors de l’ouverture d’une page, on ne souhaite pas charger tous les messages candidats pour être
affichés, car cela devient vite impossible lorsque le nombre de messages sur le serveur devient con-
séquent (complexité pour le navigateur, surcharge pour le serveur, problèmes de bande passante).
La plupart du temps les utilisateurs ne regardent que les premiers messages de la page. On veut
donc économiser des ressources en n’affichant à chaque ouverture de page que les 10 premiers mes-
sages, les suivants n’étant chargés que si cela est utile, lorsque l’utilisateur fait descendre sa barre
de défilement jusqu’au dernier message affiché.
Pour ce faire nous utiliserons un plugin JQuery, [Link], que l’on peut trouver dans le
repertoire /V rac/lamprier/3I017 de la PPTI (prendre cette version plutôt qu’une trouvée sur le
Web car on y a fait 2-3 modifs pour rendre les choses plus pratiques). Cette librairie javascript
permet d’écouter les "apparitions" d’éléments choisis. Lorsque ces éléments sont affichés à l’écran,
une fonction spécifique est déclenchée. Cela se fait en plusieurs étapes :
1. Sélection, selon un selecteur JQuery, des objets du DOM dont l’évènement d’apparition à
l’écran nous intéresse: $(selecteur).appear();
2. Ecriture d’une fonction à déclencher sur un ensemble d’objets $appeared lorsqu’ils apparais-
sent à l’écran ($appeared est un objet JQuery contenant la liste des éléments, répondant au
sélecteur déclaré à l’étape 1, apparus à l’écran): function fappeared(event, $affected) ...
3. Déclaration d’un écouteur d’évènement d’appariton d’éléments sur la page et attachement de
la fonction à déclencher: $(’body’).on(’appear’, fappeared);
4. Retrait éventuel de tous les éléments de la liste des éléments écoutés: $.clear_appear().
Question 1. Se servir de cette librairie pour mettre en place le chargement itératif des messages