Scribd
Importer
14 vues2 pages

Gérer événements et validation JS

Ce document présente des exercices de programmation en JavaScript, axés sur la gestion des événements et la validation des formulaires. Les exercices incluent la modification d'une liste de sélection pour changer la couleur d'arrière-plan, la création d'une page web réactive avec des événements de clic et de survol, et la validation d'un formulaire d'inscription avec des exigences spécifiques pour chaque champ. Les instructions détaillent les éléments HTML nécessaires et les fonctionnalités JavaScript à implémenter.

Transféré par

jadjunior66
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
14 vues2 pages

Gérer événements et validation JS

Ce document présente des exercices de programmation en JavaScript, axés sur la gestion des événements et la validation des formulaires. Les exercices incluent la modification d'une liste de sélection pour changer la couleur d'arrière-plan, la création d'une page web réactive avec des événements de clic et de survol, et la validation d'un formulaire d'inscription avec des exigences spécifiques pour chaque champ. Les instructions détaillent les éléments HTML nécessaires et les fonctionnalités JavaScript à implémenter.

Transféré par

jadjunior66
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL

INSTITUT SPECIALISE DE GESTION ET D'INFORMATIQUE MARRAKECH

Programmation en Javascript
TP 8: Gérer les évènements & Validation des formulaires
Exercice 1:

Soit l’exercice 2 du TD précédent :


Modifier le code HTML pour remplacer les boutons par une liste de sélection avec les valeurs suivantes :
Jaune, Vert, Rouge, Noir
Quand on change la sélection dans la liste, la couleur d’arrière-plan change également.

1. A quel évènement de la liste doit on associer le code javascript ?


2. Ecrire le code Javascript correspondant.

Exercice 2:

Le but de cet exercice est de créer une page web simple qui réagit à différents événements déclenchés par
l'utilisateur.
Créez une page HTML avec les éléments suivants :

Un bouton avec le texte "Cliquez-moi !" (ID : "myButton").


Un paragraphe vide (ID : "message") pour afficher les messages d'événement.
Utilisez JavaScript pour implémenter les fonctionnalités suivantes :

 Lorsque l'utilisateur clique sur le bouton, affichez le message "Le bouton a été cliqué !" dans le
paragraphe.
 Lorsque l'utilisateur survole le bouton, changez sa couleur de fond en jaune.
 Lorsque l'utilisateur arrête de survoler le bouton, rétablissez sa couleur de fond d'origine.
 Instructions supplémentaires :

Utilisez les événements click, mouseover et mouseout pour détecter les actions de l'utilisateur.

Exercice 3:

Le but de cet exercice est de créer un formulaire d'inscription avec des champs pour le nom, l'email, le
numéro de téléphone et le mot de passe. L'objectif est de valider chaque champ lors de la soumission du
formulaire.

Créez un formulaire HTML avec les champs suivants :

1
OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL
INSTITUT SPECIALISE DE GESTION ET D'INFORMATIQUE MARRAKECH
 Nom : Champ de texte (obligatoire, au moins 3 caractères)
 Email : Champ d'email (obligatoire, format valide)
 Téléphone : Champ numérique (obligatoire, exactement 10 chiffres)
 Mot de passe : Champ de mot de passe (obligatoire, au moins 6 caractères)
 Bouton de soumission : Permettant de soumettre le formulaire

Utilisez JavaScript pour valider les champs suivants :

 Nom : Doit contenir au moins 3 caractères.


 Email : Doit être au format valide (exemple@[Link]).
 Téléphone : Doit contenir exactement 10 chiffres.
 Mot de passe : Doit contenir au moins 6 caractères.
 Affichez un message d'erreur approprié sous chaque champ en cas de validation incorrecte.

 Empêchez la soumission du formulaire si au moins un champ n'est pas valide.

 Si tous les champs sont valides, affichez une alerte indiquant que le formulaire a été soumis avec
succès.

Vous aimerez peut-être aussi