Exercices les évènements en JavaScript : Série 01

Énoncé

1. 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.

2. 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 !

Énoncé

1. 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.

2. 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 !

Énoncé

Solution

• Essayez de faire l'exercice de votre côté avant de regarder la Solution !

Énoncé

1. 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.

2. 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 !