¶ Programmation événementielle en JavaScript
L'objectif de cette activité est de construire des interfaces plus complètes à l'aide du langage HTML, CSS et JavaScript.
¶ Exercice 1 - Survol d'un élément
Dans cet exercice, vous avez à disposition un fichier HTML composé d'un élément <div>. On souhaite ajouter l'effet suivant :
-
Par défaut, le premier bloc est rouge avec le texte « Survol moi ! » et le second bloc est vert avec le texte « Clic moi ! ».
-
Lorsqu'on survole le premier bloc avec la souris, le bloc devient bleu et le texte est mis à jour avec « Survol en cours ! »
-
Lorsqu'on clique une seule fois sur le second bloc, le texte du bloc devient bleu et le texte est mis à jour avec « Clic effectué»
-
Lorsqu'on double-clique sur le second bloc, le bloc se remet à zéro.
Question 1 - Télécharger le fichier HTML ci-dessous.
Question 2 - Créer un fichier survol-click.js permettant d'obtenir cette animation
¶ Exercice 2 - Un compteur
L'objectif de cet exercice de réaliser un compteur. Ce compteur peut augmenter, diminuer et être remis à zéro à l'aide de 3 boutons.
Question 1 - Télécharger le fichier HTML ci-dessous.
Question 2 - Créer un fichier compteur.js permettant d'obtenir cette animation.
Vous pouvez utiliser la fonction bloc.textContent pour récupérer la valeur présente dans les balises
¶ Exercice 3 - Un défilement d'images
L'objectif de cet exercice est de construire une page permettant d'afficher une suite de 6 images.
Voici quelques indications sur les fonctionnalités de la page :
- Les images sont affichées les une à la suite des autres.
- Le numéro de l'image est également affiché sur la page.
- Deux boutons permettent de passer à l'image suivante et à l'image précédente. Les images tournent en boucle.
- Un bouton « Start »permet de démarrer le défilement automatique des images avec un changement toutes les secondes. La valeur de est indiquée dans un champ de saisie.
- Une fois la lecture automatique lancée, le texte du bouton de démarrage est remplacé par « Stop ». Ce bouton permet alors de mettre fin à la lecture automatique.
Question 1 - Télécharger le fichier HTML ci-dessous.
Question 2 - Créer un fichier permettant d'obtenir cette animation. Voici quelques pistes de réflexions :
- Vous pouvez stocker les chemins des images dans un tableau.
let x = setInterval(function, 1000 )permet d'exécuter une fonction selon un intervalle de temps précis en millisecondes.- La fonction
clearInterval(x)permet d'arrêter l'exécution de la fonction.
¶ Exercice 4 - Mot de passe
L'objectif de cet exercice est de construire une page permettant de tester et de générer des mots de passe.
- La partie gauche permet de tester la force d'un mot de passe. L'affichage se met à jour en tant réel, directement quand l'utilisateur entre un mot de passe.
- La partie droite permet de générer un mot de passe selon les choix de l'utilisateur.
Question 1 - Télécharger le fichier HTML ci-dessous.
Question 2 - Créer un fichier permettant d'obtenir cette animation. Voici quelques pistes de réflexions :
- La fonction
includespermet de savoir si un élément est présent dans un tableau (équivalent duinen Python).
const MAJ = "ABCEDFGHIJKLMNOPQRSTUVWXYZ";
MAJ.includes("a") //Renvoie false
- La fonction
Math.random()renvoie un nombre aléatoire compris entre 0 inclus et 1 exclu. - L'évènement
inputpermet de savoir quand un formulaire est modifié.
Voici les différents cas possibles de sécurité :
- Faible : Nombre de caractères inférieurs à 7 ou l'absence de lettres majuscules, de caractères spéciaux ou de chiffres.
- Moyenne : Nombre de caractères entre 7 et 12 et au moins 1 lettre majuscule, 1 caractère spécial et 1 chiffre.
- Forte : Nombre de caractères supérieur à 12 et au moins 3 lettres majuscules, 3 caractères spéciaux et 3 chiffres.
¶ Exercice 5 - Convertisseur
L'objectif de cet exercice est de construire une page permettant de réaliser des conversions en base 2, 10 et 16.
L'utilisateur entre un nombre dans le champ du formulaire qu'il souhaite. Cela met à jour et convertit automatiquement la valeur et l'indique dans les autres champs.
Question 1 - Télécharger le fichier HTML ci-dessous.
Question 2 - Créer un fichier permettant d'obtenir cette animation. Voici quelques pistes de réflexions :
- La fonction
parseInt("1010", x)permet de convertir un nombre de la base x à la base 10. - L'instruction
(15).toString(x)permet de convertir un nombre de la base 10 à la base x.