TP4-2 jQuery
TP4-2 jQuery
-
Objectifs
- Etre capable d’utiliser les sélecteurs jQuery.
-
Exercice 01
-
Énoncé
- Créer une page HTML utilisant JQuery , appelée tp4-2.html, faisant apparaître la table de multiplication pour les entiers compris entre 1 et K
- Créer un fichier externe, tp4-2.js, et l’importer dans votre page html comme vu en cours. Déplacer le code contenu dans la balise script au sein de ce fichier.
- Créer un formulaire de contact (bootstrap4) qui contient les champs suivants:
- Cin
- Nom
- Téléphone
- Message
- Créer un bouton de soumission en fin de formulaire.
- Mise en forme de la page
- Ecrire le code JQuery qui permet colorer l’arrière plan de la page en gri
- Crér un bouton pour masquer puis afficher à nouveau le div dont id est "principal"
- Essayer les eets fadeOut puis fadeIn pour une durée de 1s (1000), appliqués au même div "principal"
- Ajouter un event listener « onclick » sur le bouton de soumission, appelant une fonction de vérification des champs.
- La fonction doit vérifier les champs suivants :
- Cin : que le nombre de caractères dans le numéro de cin soit correct (10), grâce à la propriété length
- pour la vérification du numéro de cin, vérifier que tous les caractères soient des chiffres.
- Email : que le caractère ‘@‘ soit présent dans le mail, grâce à la méthode includes( »);
- Téléphone : que le nombre de caractères dans le numéro de téléphone soit correct (10), grâce à la propriété length
- pour la vérification du numéro de téléphone, vérifier que tous les caractères soient des chiffres.
- Pour vérifier un champ, assurer vous qu’il a un id, et utiliser un sélecteur pour récupérer l’élément. La fonction .val(); permet de récupérer le contenu du champs dans une variable.
- En cas de champ mal formé, afficher un dialogue d’alerte indiquant quel champ est incorrect.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
