Introduction aux évènements

Exercice 1 — Formulaires et Javascript #

https://dev-LOGIN.users.info.unicaen.fr/TW2-2024/TP06/ex1/form.html

<meta name="author" content="LOGIN" />

Une page HTML contient un formulaire pour saisir un prénom et une date de naissance. La page web est donnée dans le fichier js-forms.zip.

L'objectif de l'exercice est d'utiliser Javascript pour vérifier les données saisies et empêcher l'envoi des données si elles sont incomplètes ou de format incorrect. Par défaut les données sont envoyées sur une page du serveur ensweb qui affiche ce qui a été reçu par le serveur.

1- Initialisation des évènements

L'envoi des données du formulaire peut être provoqué par un clic sur le bouton Envoyer, mais aussi par l'appui sur la touche Entrée lorsque le curseur est dans un des champs de saisie. Tester ces deux méthodes : vous arrivez sur la page qui affiche ce que le serveur a reçu.

Pour capter le déclenchement de l'envoi des données, l'élément formulaire <form> peut capter l'évènement submit.

Dans la fonction init(), écrire le code pour que le formulaire capte l'évènement submit
(ne pas capter le clic sur le bouton).
La fonction verifier doit être alors appelée lorsque l'évènement est capté.
Écrire le code pour que l'envoi des données soit bloqué (dans tous les cas).

Attention : on peut aussi capter le clic sur le bouton submit du formulaire, mais ce n'est pas la bonne pratique et ça ne marche pas bien sur un navigateur un peu ancien (ça ne captera pas le cas où on utilise la touche Entrée).

Tester : tant que vous arrivez sur la page qui affiche ce que le serveur a reçu cela signifie que ça ne marche pas, inutile d'aller plus loin.

2- Vérification du prénom

Compléter le script pour que les données soient bloquées si le champ du prénom est vide. Dans ce cas un message d'erreur est affiché dans l'élément déjà présent dans le HTML (attention avec la CSS cet élément n'est pas affiché par défaut).

Indication : pour obtenir la valeur saisie par l'utilisateur, il faut utiliser la proriété elt.value où elt est l'objet Javascript correspondant au nœud input.

Attention il faut aussi que ce soit bloqué si le champ ne contient que des espaces. Dans tous les cas, on pourra d'ailleurs éliminer les espaces en début et fin du champ de saisie avec la méthode trim.

3- Vérification de la date

Suivant le même principe, vérifier que les données saisies pour la date de naissance sont bien des entiers compris entre 1 et 31 pour le jour, entre 1 et 12 pour le mois et, pour l'année, entre 1900 et l'année en cours (ne pas mettre 2025 en dur !). Si ce n'est pas le cas, alors bloquer l'envoi des données et afficher un message d'erreur dans l'élément présent pour cela.

Penser là encore à éliminer les espaces.

Tester tous les cas : penser à essayer en modifiant diverses valeurs de dates incorrectes. Vérifier aussi que les messages sont bien réinitialisés à chaque vérification lorsque l'on fait des saisies successives.

Indications :

• pour déterminer si la chaine saisie correspond à un entier :
  1. créer tout d'abord un objet Number à partir du texte saisi. Si cela ne correspond pas à un nombre, alors la valeur NaN (Not a Number) est renvoyée.
  2. ensuite transformer cet objet Number en son type primitif (i.e. entier si l'objet représente un entier) avec la méthode valueOf
  3. enfin utiliser la méthode isInteger pour voir si la valeur est bien un entier
• pour avoir l'année en cours on peut utiliser getFullYear. Le script pourra alors encore fonctionner en 2025 et plus !

Exercice 2 — Un lexique en Javascript #

https://dev-LOGIN.users.info.unicaen.fr/TW2-2024/TP06/ex2/lexique.html

<meta name="author" content="LOGIN" />

Une page HTML contient des acronymes que l'on souhaite pouvoir expliciter à l'aide d'un lexique (voir captures ci-dessous). Lorsque l'utilisateur clique sur un acronyme, la signification de celui-ci est affichée dans une division d'identifiant lexique. La liste des acronymes et leur explication est stockée dans un objet Javascript. Le fichier HTML de la page web, le fichier JS des définitions et le fichier JS (vide) du TP sont donnés dans le fichier lexique.zip.

Les acronymes sont placés dans des balises abbr (abbréviation) car la balise acronym n'existe plus en HTML5.

1- Initialisation des évènements

Dans la balise script placée en fin de body (pour que le DOM soit bien construit), écrire le code pour que toutes les balises abbr captent le clic et que le clic déclenche la fonction expliquer. Dans le fichier lexique.js, écrire la fonction expliquer en commençant par afficher en console l'élément abbr qui a capté le clic puis le terme à expliquer qui déduit à partir de cet élément.

2- Affichage des définitions

À partir des données de l'objet lexique, afficher dans la division d'identifiant lexique la définition de l'acronyme cliqué. Les définitions s'affichent les unes à la suite des autres.

3- Affichage des liens

Ajouter un lien s'il y en a un pour l'acronyme à expliquer. Pour cela, on pourra vérifier si une URL est donnée en utilisant la méthode Object.hasOwn() de la classe Object.

4- Améliorations

Améliorer le système :

1. on peut remettre à zéro le lexique : un bouton à cet effet sera affiché après les définitions (voir captures ci-dessus). Le bouton ne doit pas apparaître si aucune définition n'est affichée
   Attention l'élément <button> doit aussi disparaitre quand on remet à zéro.
2. on ne veut pas que la même définition soit affichée 2 fois : si on clique sur un acronyme dont la définition est déjà affichée alors rien ne se passe