jQuery

TP3 jQuery

Un cours complet pour maîtriser TP3 jQuery.

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

Exercice 01 (Agrandir/réduire une image avec jQuery)
- Énoncé
  - Nous voulons créer un script qui récupère les dimensions d'une image et qui agrandit ou diminue cette image selon que l'on clique sur le bouton "agrandir" ou sur le bouton "réduire".
- Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 02 (Agrandir/réduire la police d'un texte)
- Énoncé
  - Créer un document HTML puis, dans une balise <div> avec un attribut id, écrire le texte suivant :
    - Comme son nom l’indique, c’est quelque chose, une action plus précisément, qui survient à la suite d’un déclencheur spécifique.
    - Il s’agit d’une action utilisateur. Lorsque vous cliquez sur un bouton pour ouvrir ou fermer une fenêtre, vous déclenchez un événement qui, en fonction de conditions requises, va exécuter le code chargé de réaliser l’action que vous avez demandée.
  - Créer deux éléments qui seront utilisés comme boutons ou liens : l’un pour l’agrandissement de la taille du texte et le second pour sa diminution.
  - Afficher la taille du texte devant chaque élément.
- Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 03 (Événement souris)
- Énoncé
  - Créer une page HTML comportant une phrase, de couleur noire au chargement de la page.
  - Avec jQuery, la phrase doit prendre la couleur :
    - Bleu au passage de la souris ;
    - Vert en réponse à un clic ;
    - Rouge en réponse à un double clic.
- Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 04 (Carte d'anniversaire)
- Énoncé
  - Réalisez une petite "carte d'anniversaire" web amusante.
  - Construisez une page HTML5 "anniversaire.html" contenant :
    - Un message d'anniversaire évolutif.
    - Des liens vers les fichiers "anniversaire.css" et "anniversaire.js".
    - En haut de votre page, le message "Joyeux anniversaire", suivi de 3 petits paragraphes de vœux, qui se dévoilent un par un lorsque l'on clique sur le précédent.
    - Le message et les 3 paragraphes sont intégrés chacun dans une balise <div> comportant un id.
  - Dans le fichier CSS :
    - Positionnement et mise en forme des éléments.
    - Ajout de la police "Indie Flower".
    - Fichier de police à télécharger : Cliquez Ici et enregistrez le fichier dans votre dossier.
    - Code CSS à utiliser :
```
@font-face {
    font-family: 'Indie Flower';
    src: url('IndieFlower.ttf');
}
```
    - Télécharger l'image de fond : Cliquez Ici
    - Fichier son à télécharger : Cliquez Ici et enregistrez le fichier dans votre dossier.
  - Dans le fichier jQuery :
    - Effet hide() sur les 3 paragraphes pour qu'ils ne soient pas visibles au départ.
    - Affichage successif des paragraphes avec l'événement click.
    - Ajout de l'audio : Une fois que l'utilisateur a cliqué sur le dernier paragraphe, un gros effet sonore doit se faire entendre.
    - Changement de l'image d’arrière-plan : Une fois que l'utilisateur a cliqué sur le dernier paragraphe, l'arrière-plan se change avec une image d'anniversaire (que vous pouvez chercher sur le web).
  - Le schéma suivant récapitule le processus de déclenchement :
- Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 05 (Cocher tout)
- Énoncé
  - Réaliser une page HTML suivant le modèle donné ci-dessous.
  - Créer un script jQuery qui offre la possibilité à l’utilisateur d’activer toutes les cases à cocher en une seule action.
- Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !
Exercice 06 (Bouton Radio)
- Énoncé
  - Réaliser une page HTML suivant le modèle donné ci-dessous.
  - Créer un script jQuery qui offre la possibilité à l’utilisateur de récupérer la valeur du bouton radio coché en cliquant sur le bouton.
  - La valeur retournée est affichée en gras.
- Solution
  - Essayez de faire l'exercice de votre côté avant de regarder la Solution !