L3 Informatique Année 2017-2018

Programmation Web
TP no 3 : Javascript et jQuery

Le but de ce TP est d’apprendre le langage Javascript et sa librairie JQuery. Les exercices

proposent de l’utiliser coté client pour dynamiser des pages Web.
Pour debugger vos programmes, vous aurez besoin d’utiliser la console javascript. On y accède
par le menu des outils de développement. Elle apparaı̂t généralement comme un volet sur la partie
inférieure de la fenêtre du navigateur, ou dans une fenêtre séparée. La méthode console.log(),
appelée dans un script, permet d’afficher une chaı̂ne de caractères dans la console. De plus la
console fournit un interprète javascript. Testez par exemple la méthode console.log() directe-
ment dans l’interprète de la console.

I) JQuery
JQuery est une librairie JavaScript facile à apprendre et qui va vous faciliter la programmation
en JavaScript. JQuery n’est en fait qu’un seul et unique fichier JavaScript, téléchargeable sur le
Web (http://jquery.com/download/) et qui porte l’extension .js.
JQuery est aussi herbergé par des content delivery networks, il est donc possible d’inclure JQuery
dans ses pages Web depuis un CDN :

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

1. Premiers pas avec JQuery.

Créez une page Web qui contient un paragraphe “ceci est un paragraphe”. En utilisant JQuery,
faites en sorte que lorsque la souris survole le paragraphe, le texte change pour devenir “ceci
n’est pas un paragraphe”.
2. Blocs et texte.
a. Créez une page web avec un header, un footer, et un bloc centré avec bordure rouge, avec
le message “Cliquez ici”.
b. Lorsqu’on passe la souris sur le bloc rouge, un message “Attention, vous entrez dans la
zone rouge” se manifeste dans la console.
c. Lorsqu’on presse le bouton de la souris sur le bloc rouge, la bordure du bloc devient verte
et un message vert “up” apparait dans le header, à la suite de ce qui y figurait déjà.
d. Lorsqu’on relâche le bouton de la souris la bordure du bloc redevient rouge et un message
rouge “down” apparait dans le footer, à la suite de ce qui y figurait déjà.
e. Lorsqu’on clique sur un mot du header ou du footer, “up” ou “down”, il disparaı̂t (mais
on ne supprime qu’un mot à la fois).
3. Effets
Créez un document HTML comportant une liste de trois éléments, et un bouton “Afficher”
juste au-dessus.
a. Attachez au document HTML un script qui fait en sorte que la liste ne soit pas affichée
au chargement et que, lorsqu’on clique le bouton, la liste déroule avec un effet.
b. Faire en sorte que lorsqu’on clique sur le bouton et que la liste apparaı̂t, le texte affiché
sur le bouton soit le mot “Masquer”. Lorsqu’on le clique à nouveau, la liste doit disparaitre
en douceur et le texte du bouton doit devenir “Afficher”.

1
L3 Informatique Année 2017-2018

c. Ajouter un paragraphe “Bonjour” de grande taille, pas visible, et un bouton “Bienvenue”.

À l’aide de la méthode animate(), faire en sorte que lorsqu’on clique sur ce bouton le
message “Bonjour” traverse lentement l’écran de gauche à droite, pour re-disparaitre en
traversant l’extrémité droite de la page. Modifier ensuite l’animation pour que le message
“Bonjour” s’arrête au centre de la page.
4. Faire défiler des images
a. Créez une page Web qui comporte un bloc d’identifiant “defile”, contenant une suite de
blocs, chacun contenant une image. Les images sont centrées dans la page, mais initiale-
ment non affichées.
b. À l’aide des sélecteurs JQuery, sélectionner les éléments img contenus dans le bloc “defile”
(sauvegarder la sélection dans une variable pour plus d’efficacité). Ensuite, à l’aide des
méthodes JQuery de parcours du DOM, sélectionner la première image (d’index 0) et faire
en sorte que seule cette image apparaisse à l’écran.
c. Ajouter un bouton “suivant” et faire en sorte que lorsqu’on clique sur ce bouton on passe
à l’image suivante (i.e celle contenue dans le bloc suivant), de façon circulaire.
d. Utiliser la fonction setInterval de javascript pour faire défiler automatiquement les
images toutes les 5 secondes.
e. Maintenant remplacer les changements d’image (un peu tristes) par les effets suivants :
– l’image précédente disparaı̂t lentement (effet fade), et ensuite la suivant apparait avec
l’effet inverse ;
– l’image suivante se déroule vers le bas (effet slide), et la précèdent disparait avec l’effet
inverse.
Dans les deux cas, attention à ce que l’image suivante n’apparaisse pas avant que la
première ait complètement disparu (dans le cas contraire, quel serait le problème ?).
f. Remplacer par un effet de “rotation” dans le changement d’image : l’image précédente
défile vers la gauche en sortant de la page, ensuite l’image suivante défile de la droite
vers le centre de la page pour prendre sa position. À cet effet, utiliser la fonction JQuery
animate() et des positions CSS relatives pour les images.
5. Tic-tac-toe (Bonus) À l’aide des techniques étudiées (html, css, javascript/jQuery), réalisez
un jeu de Tic-tac-toe (utilisateur contre ordinateur).

II) JQuery et formulaires

6. Formulaire d’inscription
a. Créer une page html avec une feuille de style associée.
b. Créer un formulaire avec les champs suivants et les labels associés :
– état civil (M. ou Mme) ;
– nom ;
– prénom ;
– nom complet (désactivé) ;
– date de naissance ;
– niveau en javascript ;
– couleur préférée ;
– mot de passe ;
– mot de passe (confirmation) ;
– afficher le mot de passe (oui ou non) ;

2
L3 Informatique Année 2017-2018

– description (texte) ;
– bouton réinitialiser (pour réinitialiser le formulaire) ;
– bouton envoyer (pour envoyer le formulaire).

6. A l’aide de jQuery, faites en sorte que le champs ”Nom complet” change de

c. En HTML5 seulvaleur(attributs deet
min
en fonction à spécifier
max,civil,
l’état du nom,àetladumain pour l’instant), faire en sorte
prénom.
que le champ « date de naissance » ne puisse contenir que des dates entre aujourd’hui et
7. A l’aide de jQuery, faites en sorte que la valeur numérique du champs ”Niveau
il y a 100 ans.
en javascript” apparaisse à côté de celui-ci.
8. CSS,
d. À l’aide du A l’aide de jQuery,
créer faites
une mise enen sorte
page que lorsque
similaire l’onde
à celle sélectionne
la figure l’option ”Afficher
ci-dessus.
mot de passe”,onlesutilisera
e. À partir de maintenant, deux champs
jQueryprécédents
pour lesaffichent le qui
questions mot suivent.
de passe en clair.
Le champ9.« Anom l’aide de jQuery, faites en sorte que le bouton ”Envoyer” soit désactivé lorsque
complet » doit changer de valeur en fonction de l’état civil, du nom et
l’un des champs n’est pas rempli.
du prénom (p. ex. si l’utilisateur a entré respectivement « M. », « Dupont » et « Toto »,
10. A l’aide de jQuery, faites en sorte que les noms des champs vides apparaissent
il faudra afficher « M. Toto Dupont »).
en rouge.
f. La valeur11.
numérique
A l’aide dedujQuery,
champfaites
« niveau en que
en sorte javascript » doit
le bouton apparaı̂tre
”Envoyer” à côté de
soit désactivé si celui-ci.
les
champs ”Mot
g. Lorsqu’on sélectionne de passe”
l’option et ”Mot le
« afficher de mot
passede
(confirmation)” ne contiennent
passe », les deux pas la
champs précédents
même valeur.
affichent le mot de passe en clair.
12. A l’aide de jQuery, faites en sorte que le nom du champs ”Mot de passe (confir-
h. Le bouton « mation)”
envoyer apparaisse
» est désactivé lorsque
en rouge tant l’un
qu’il des champs
est vide n’est
ou que sonpas rempli.
contenu n’est pas
égal à celui
i. Le nom des champs du apparaı̂t
vides champs ”Mot de passe”.
en rouge.
13.« envoyer
j. Le bouton A l’aide de jQuery,
» est faites en
désactivé sorte les
lorsque quedeux
le champs ”Date
champs de naissance”
« mot de passe »nenepuisse
coı̈ncident
contenir que des dates entre aujourd’hui et il y a 100 ans, en générant la date
pas.
du jour avec javascript.
k. Le champ mot
14.« A de de
l’aide passe (confirmation)
jQuery, apparaı̂t
faites en sorte»que, enl’on
lorsque rouge tantleque
soumet son contenu
formulaire, celui- n’est
pas égal à celui du champau« profit
ci disparaisse mot de passe
d’un texte».contenant toutes les informations (du type
l. Le champ « ”Bonjour M. Blah Blah,
date de naissance » nevous êtescontenir
peut né le...”).que des dates entre aujourd’hui et il y
a 100 ans, en générant la date du jour avec javascript.
2 au profit d’un texte contenant toutes
m. Lorsqu’on soumet le formulaire, celui-ci disparaı̂t
les informations (du type : « Bonjour M. Toto Dupont, vous êtes né le . . . »).

3
L3 Informatique Année 2017-2018

7. QCM coté client

a. Créer une page contenant un QCM avec 5 questions qui auront chacune 3 réponses pos-
sibles
b. Ajouter un bouton « Corriger » qui, au lieu d’envoyer les réponses à un serveur, les vérifie
coté client : pour chaque question, si la bonne réponse est sélectionnée, la question apparaı̂t
en vert, sinon elle apparaı̂t en rouge.
c. De plus (toujours après appui sur le bouton « Corriger »), lorsqu’une mauvaise réponse a
été sélectionnée, la réponse sélectionnée apparaı̂t en rouge et la bonne réponse en vert.
Lorsque la bonne réponse a été sélectionnée, elle apparaı̂t en vert.
d. Lorsque l’utilisateur clique sur « Corriger » alors que certaines questions n’ont pas de ré-
ponse sélectionnée, alors la correction n’a pas lieu et ces questions apparaissent en orange.
e. Après la correction, un message apparaı̂t sous le QCM avec la note obtenue.