Scribd
Importer
21 vues2 pages

JS Events

Le document décrit 10 exercices sur les événements JavaScript. Chaque exercice présente une tâche interactive différente impliquant des événements tels que click, change, submit.

Transféré par

yamina ghobni
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
21 vues2 pages

JS Events

Le document décrit 10 exercices sur les événements JavaScript. Chaque exercice présente une tâche interactive différente impliquant des événements tels que click, change, submit.

Transféré par

yamina ghobni
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
Vous êtes sur la page 1/ 2

Dr .

Yamina GHOBNI
Polytechnique Sousse
JS-Les événements

Exercice 1 : Bouton qui affiche une alerte

Créez une page HTML avec un bouton. Ajoutez un événement click au bouton qui affiche une
alerte lorsque le bouton est cliqué.

Exercice 2 : Changement de couleur

Ajoutez deux boutons à votre page HTML. Lorsque le premier bouton est cliqué, changez la
couleur de fond de la page en rouge. Lorsque le deuxième bouton est cliqué, changez la couleur
de fond en vert.

Exercice 3 : Suivi de la position de la souris

Créez une page avec un élément div. Ajoutez un événement mousemove à cet élément, et
affichez les coordonnées de la souris à l'intérieur de cet élément.

Exercice 4 : Validation de formulaire

Créez un formulaire avec un champ texte et un bouton "Valider". Ajoutez un événement submit
au formulaire qui vérifie si le champ texte est vide. Si c'est le cas, affichez une alerte indiquant
que le champ est obligatoire.

Exercice 5 : Toggle d'une classe CSS

Créez une liste d'éléments (par exemple, des paragraphes) et ajoutez un événement click à
chacun d'eux. Lorsque l'utilisateur clique sur un élément, basculez une classe CSS pour changer
son style (par exemple, la couleur du texte).

Exercice 6 : Menu déroulant

Créez un menu déroulant (élément select) avec plusieurs options. Ajoutez un événement
change qui affiche l'option sélectionnée dans la console.

Exercice 7 : Compteur de clics

Créez un bouton et un élément de texte. À chaque clic sur le bouton, incrémentez un compteur
et mettez à jour le texte pour afficher le nombre de clics actuel.

Exercice 8 : Clavier interactif

Ajoutez un événement keydown à la page. Affichez dans la console la touche du clavier sur
laquelle l'utilisateur appuie.
Dr .Yamina GHOBNI
Polytechnique Sousse
Exercice 9 : Gestion des fenêtres

Créez une page avec un bouton "Ouvrir fenêtre". Ajoutez un événement click qui ouvre une
nouvelle fenêtre avec une taille spécifiée.

Exercice 10 : Drag and Drop

Créez deux éléments div, l'un draggable et l'autre qui sert de zone de dépôt. Ajoutez des
événements dragstart, dragover, et drop pour permettre le glisser-déposer entre ces deux
éléments.

Vous aimerez peut-être aussi