Scribd
Importer
3 vues3 pages

TP Web : Projets HTML/JavaScript

Le document présente un TP de développement web axé sur le frontend utilisant HTML et JavaScript. Il comprend une série d'exercices pratiques tels que le changement de style au clic, la création d'un formulaire de validation, un calculateur, un carousel d'images, et d'autres fonctionnalités interactives. Les étudiants sont invités à appliquer leurs compétences en JavaScript pour manipuler le DOM et créer des interfaces utilisateur dynamiques.

Transféré par

othmaneelfihi1234
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
3 vues3 pages

TP Web : Projets HTML/JavaScript

Le document présente un TP de développement web axé sur le frontend utilisant HTML et JavaScript. Il comprend une série d'exercices pratiques tels que le changement de style au clic, la création d'un formulaire de validation, un calculateur, un carousel d'images, et d'autres fonctionnalités interactives. Les étudiants sont invités à appliquer leurs compétences en JavaScript pour manipuler le DOM et créer des interfaces utilisateur dynamiques.

Transféré par

othmaneelfihi1234
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

TP : N°2 Module : Dev.

Web
Prof : Youness IDRISSI KHAMLICHI

TP 2 : Frontend HTML/JavaScript
1. Changer de style au clic : Créer un bouton qui change la couleur de fond
d'une div en cliquant dessus. Utiliser JavaScript pour manipuler le style
CSS de la div.
2. Afficher/Masquer le texte : Ajouter un bouton qui masque et affiche un
paragraphe de texte en cliquant dessus. Alterner entre les états "Afficher"
et "Masquer".
3. Formulaire de validation : Créer un formulaire avec des champs de texte
(nom, email) et un bouton "Soumettre". Utiliser JavaScript pour valider que
les champs sont remplis avant d'envoyer le formulaire.
4. Calculateur :
1. Créer une interface avec deux champs de saisie pour les nombres et
des boutons pour les opérations (+, -, *, /). Utiliser JavaScript pour
afficher le résultat de l’opération choisie.
2. Créer une calculatrice ci-dessous :

5. Carousel d'images : Créer une petite galerie d'images et utiliser


JavaScript pour naviguer entre les images avec des boutons "Suivant" et
"Précédent".
6. Menu déroulant animé : Créer un menu déroulant en utilisant HTML,
CSS et JavaScript pour l’ouvrir ou le fermer lorsqu’on clique sur le titre du
menu.
7. Timer en temps réel : Utiliser setInterval pour créer un chronomètre qui
affiche le temps écoulé depuis que la page a été chargée.

ENSA Fès Page 1|3


TP : N°2 Module : Dev. Web
Prof : Youness IDRISSI KHAMLICHI

8. Événements de souris : Créer une div qui change de couleur lorsque


l’utilisateur passe la souris dessus et reprend sa couleur d'origine lorsque la
souris quitte la div.

9. To-do list interactive : Créer une liste de tâches avec un champ de saisie
pour ajouter une tâche, et des boutons pour marquer chaque tâche comme
faite ou la supprimer. Utiliser JavaScript pour gérer l’ajout et la suppression
d’éléments.

10. Modal de notification : Créer une modale (boîte de dialogue) avec HTML
et CSS. Utiliser JavaScript pour afficher la modale lorsque l’utilisateur
clique sur un bouton "Ouvrir" et pour la fermer en cliquant sur un bouton
"Fermer" dans la modale.
11. Filtrage de tableau : Créer une liste de produits ou d'articles et utiliser un
champ de recherche pour filtrer les éléments en fonction des caractères
tapés.

ENSA Fès Page 2|3


TP : N°2 Module : Dev. Web
Prof : Youness IDRISSI KHAMLICHI

12. Responsive avec JavaScript : Modifier dynamiquement le layout d’une


page (ex. : ajouter ou masquer des éléments) en fonction de la largeur de
l'écran. Utiliser JavaScript pour écouter l'événement resize et adapter le
contenu.

13. Animation de barre de progression : Créer une barre de progression qui


se remplit progressivement lorsqu'on clique sur un bouton. Utiliser
JavaScript pour gérer l’animation et mettre à jour la barre.

14. Drag and Drop : Implémenter un petit exemple de glisser-déposer,


permettant à l'utilisateur de déplacer des éléments d’une div vers une autre.

15. Thème clair/sombre : Ajouter un bouton pour basculer entre un thème


clair et un thème sombre pour la page. Utiliser JavaScript pour gérer le
changement de classes et mémoriser la préférence de l’utilisateur dans le
localStorage.

ENSA Fès Page 3|3

Vous aimerez peut-être aussi