Module : JavaScript (M105)
TP
Année de Formation 2023/2024
Filière : Développement digital Groupe : DEV 102 - DEV 104 Niveau : 1ère année
Exercice 1:
- Créez un fichier HTML avec une structure simple pour une liste de tâches.
Ajoutez un champ de saisie pour ajouter des tâches, un bouton pour ajouter
des tâches, et une liste non ordonnée (<ul>) vide pour afficher les tâches.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste de Tâches</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Liste de Tâches</h1>
<input type="text" id="nouvelleTache" placeholder="Ajouter une nouvelle tâche">
<button id="ajouterTache">Ajouter</button>
<ul id="listeTaches">
<!-- La liste des tâches sera affichée ici -->
</ul>
</body>
</html>
- Créez un fichier JavaScript (script.js) pour implémenter la logique jQuery.
Ajoutez le code jQuery nécessaire pour permettre l'ajout de nouvelles tâches à
la liste.
$(document).ready(function() {
// Code jQuery ici
});
- Ajoutez quelques tâches pour vous assurer que tout fonctionne correctement.
Exercice 2:
- Créez un fichier HTML avec une structure de base pour une galerie d'images.
Ajoutez quelques images à afficher dans la galerie.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galerie d'Images</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<style>
.gallery-container {
text-align: center;
}
.gallery img {
max-width: 100%;
height: auto;
display: none;
}
</style>
</head>
<body>
<h1>Galerie d'Images</h1>
<div class="gallery-container">
<div class="gallery">
<!-- Les images seront affichées ici -->
</div>
<button id="prev">Précédent</button>
<button id="next">Suivant</button>
</div>
</body>
</html>
- Dans le fichier JavaScript (script.js), ajoutez le code jQuery nécessaire pour
implémenter la galerie d'images. Assurez-vous que les boutons "Précédent" et
"Suivant" permettent de naviguer entre les images.
- Ouvrez le fichier HTML dans un navigateur et testez votre galerie d'images.
Assurez-vous que les boutons "Précédent" et "Suivant" fonctionnent comme
prévu.
Exercice 3:
- Créez un fichier HTML avec une structure pour un formulaire de contact.
Ajoutez des champs pour le nom, l'e-mail, le message, et un bouton d'envoi.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire de Contact</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<style>
.error {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<h1>Formulaire de Contact</h1>
<form id="contactForm">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<div class="error" id="errorNom"></div>
<label for="email">E-mail :</label>
<input type="email" id="email" name="email">
<div class="error" id="errorEmail"></div>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
<div class="error" id="errorMessage"></div>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
- Dans le fichier JavaScript (script.js), ajoutez le code jQuery nécessaire pour
valider les champs du formulaire avant de les soumettre.
- Ouvrez le fichier HTML dans un navigateur, remplissez le formulaire de
contact et assurez-vous que les messages d'erreur s'affichent correctement
en cas de champ non valide.
Exercice 4:
- Créez un fichier HTML avec une structure simple comprenant un bouton et un
élément à afficher/cacher.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Afficher/Cacher avec jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Afficher/Cacher un Élément</h1>
<button id="toggleButton">Afficher/Cacher</button>
<div id="elementToToggle">
<p>Ceci est l'élément à afficher/cacher.</p>
</div>
</body>
</html>
- Dans le fichier JavaScript (script.js), ajoutez le code jQuery nécessaire pour
implémenter la fonctionnalité de "toggle". L'idée est que chaque clic sur le
bouton devrait afficher ou cacher l'élément.
- Ouvrez le fichier HTML dans un navigateur, cliquez sur le bouton
"Afficher/Cacher" et assurez-vous que l'élément à l'intérieur du conteneur est
visible ou caché en alternance.
