TP4-2 jQuery

TP4-2 jQuery

  1. Objectifs

    • Etre capable d’utiliser les sélecteurs jQuery.
  2. Exercice 01

    1. É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
        • Email
        • 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.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !






Abonnez vous à notre chaîne YouTube gratuitement