Exercices les évènements en JavaScript : Série 01
Exercices les évènements en JavaScript : Série 01
-
Exercice 01
-
Énoncé
-
Objectif de l’exercice :
- Placer une image dans un lien <a>. Installer un gestionnaire d’événement qui permet de changer l’image lorsque le pointeur de la souris se trouve sur ce lien.
- Revenir à l’image d’origine lorsque le pointeur de la souris quitte ce lien.
- Le gestionnaire d’événement sera réalisé par une seule et unique fonction qui recevra en argument l’action à réaliser.
-
Instructions :
- Créez un fichier HTML nommé
index.html. - Ajoutez un lien vers un fichier CSS externe.
- Créez un lien <a> avec un id de votre choix.
- À l’intérieur du lien <a>, placez une image avec un id de votre choix. Assurez-vous que l’image a un attribut src initial.
- Créez un fichier JavaScript nommé
script.js. - Écrivez une fonction qui prend en argument l’action à réaliser (par exemple, « survol » ou « quitter »).
- À l’intérieur de cette fonction, utilisez JavaScript pour changer l’image en conséquence en modifiant l’attribut src de l’image.
- Ajoutez des gestionnaires d’événements pour le survol (mouseenter) et la sortie (mouseleave) du lien. Ces gestionnaires devraient appeler la fonction que vous avez créée en passant l’action appropriée.
- Créez un fichier CSS nommé
styles.css. - Dans ce fichier CSS, ajoutez les styles nécessaires pour centrer l’image dans un div avec une bordure arrondie au milieu de la page. De plus, assurez-vous que l’image est correctement dimensionnée et qu’elle a un effet en 3D au survol du lien.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
-
Objectif de l’exercice :
- Écrire un script JavaScript qui crée, au chargement de la page, une nouvelle fenêtre pop-up qui se fermera automatiquement au bout de 20 secondes.
- Le script affichera également un compteur de 20 à 0 en couleur bleue, et lorsque la valeur du compteur atteint 5, la couleur devra changer pour devenir rouge.
-
Instructions :
- Créez un fichier HTML nommé
index.html. - Ajoutez une balise h1 pour afficher « Compteur : « .
- Ajoutez une div avec un identifiant de votre choix pour afficher le compteur.
- Incluez un lien vers un fichier CSS externe.
- Incluez un lien vers un fichier JavaScript externe.
- Créez un fichier CSS nommé
styles.css. - Ajoutez des styles pour centrer le contenu de la page et définir la taille et la couleur du compteur.
- Créez un fichier JavaScript nommé
script.js. - Utilisez JavaScript pour créer une nouvelle fenêtre pop-up lorsque la page est chargée.
- Affichez un compteur qui démarre à 20 et se décrémente d’une unité par seconde.
- Changez la couleur du compteur en bleu.
- Lorsque la valeur du compteur atteint 5, changez la couleur en rouge.
- Après 20 secondes, fermez automatiquement la fenêtre pop-up.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 03
-
Énoncé
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 04
-
Énoncé
-
Objectif de l’exercice :
- Écrire un ensemble de trois fichiers (HTML, CSS et JavaScript) qui permettent de créer une application interactive pour déplacer un bloc à l’écran en utilisant les touches fléchées du clavier.
- L’application doit également prendre en compte la vitesse de déplacement définie par l’utilisateur dans des zones de saisie pour chaque axe.
-
Instructions :
- Créez un fichier HTML nommé
index.html. - Incluez une zone de visualisation où le bloc sera déplacé.
- Ajoutez des zones de saisie pour définir la vitesse de déplacement sur les axes X et Y.
- Incluez des liens vers des fichiers CSS et JavaScript externes.
- Créez un fichier CSS nommé
styles.css. - Ajoutez des styles pour centrer le contenu et définir l’apparence du bloc à déplacer.
- Créez un fichier JavaScript nommé
script.js. - Écrivez le code JavaScript qui permet de déplacer le bloc en fonction des touches fléchées du clavier.
- Utilisez les valeurs de vitesse définies par l’utilisateur pour ajuster la vitesse de déplacement.
- Affichez le sens de déplacement dans la console.
- Gérez l’affichage des coordonnées de la souris et les informations sur les touches dans la barre d’état du navigateur.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
