1 Javascript

ProgWeb
TD n◦ 3
Javascript et JQuery
L3 Informatique
2015–2016
Le but de ce TP est d’apprendre à dynamiser les pages Web, d’abord en javascript pur,
et ensuite avec la librairie JQuery.
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() directement dans l’interprète de la console.
1
Javascript
Écrire les scripts demandés dans les exercices de cette section en javascript pur (pas de
librairies).
1. Tableaux.
Dans le fichier tableaux.html on retrouve un tableau HTML qui comporte une liste
d’élèves avec leur notes. Sans modifier le HTML, ajouter un script à la page qui récupère
dans une variable les notes des élèves, en calcule la moyenne, le nombre, et le nombre de
notes supérieures ou égales à 10. Ces valeurs devront être affichées au chargement de la
page pour compléter les paragraphes correspondants (i.e. moy, num et num10).
Pour lire les valeurs des cases d’un tableau HTML, on pourra utiliser l’une ou l’autre
des alternatives suivantes (essayez les deux) :
— La propriété rows d’un objet <table>. Il s’agit d’un objet qui contient la collection
des lignes (éléments <tr>) d’une table. De façon similaire, si ligne est un objet qui
représente un élément <tr>, alors ligne.cells est la collection des éléments <td>
de la ligne.
— La méthode querySelectorAll() de l’objet document, pour sélectionner des éléments HTML avec un sélecteur CSS.
2. Remplacement global.
Créer une page Web comportant une zone de texte (<textarea>) et deux champs de
texte, où l’utilisateur peut rentrer 1) un texte 2) un mot d’origine à chercher dans le
texte et 3) un nouveau mot. De plus il y aura une checkbox pour spécifier si la recherche
doit être insensible à la casse. Prévoir également un bouton ”Remplacer tout”.
Ajouter un script à la page qui fait en sorte que quand l’utilisateur clique sur le bouton,
toutes les occurrences du premier mot dans le texte seront remplacées par le nouveau mot.
Le remplacement global sera sensible ou pas à la casse, selon la valeur de la checkbox.
On pourra utiliser la méthode replace() du prototype String, en lui passant une expression régulière (RegExp) avec les bonnes options de recherche.
3. Prototypes et héritage “classique”
En utilisant le paradigme d’héritage de prototypes de Javascript, simuler l’héritage des
langages à objets basés sur les classes, dans la situation suivante.
Soit Compte le constructeur suivant avec son prototype associé :
function Compte(montant, proprietaire) {
this.montant = montant;
this.proprietaire = proprietaire;
}
Compte.prototype.taux = 0.02; //taux d’intér^
et de tous les comptes
Compte.prototype.E2D = 1.074; //euros vers dollars
Compte.prototype.montantD = function() {
return this.montant * this.E2D;
}
1
ProgWeb
TD n◦ 3
Javascript et JQuery
L3 Informatique
2015–2016
On veut définir un constructeur ComptePlus de comptes “plus”. Un compte “plus” est
un compte qui a un taux d’intérêt plus avantageux et une propriété additionnelle durée
(i.e. la durée de l’avantage). Chaque objet créé avec le constructeur ComptePlus doit
donc avoir un montant, un propriétaire, une durée, un taux d’intérêt, un taux d’échange
(E2D) et une méthode de conversion montantD(). Le constructeur prend en paramètre
les trois premières propriétés.
La solution doit satisfaire les conditions suivantes :
— E2D et montantD() doivent etre partagés par tous les comptes (classiques et “plus”).
— Le taux d’intérêt doit être partagé par tous les comptes “plus”, mais il est diffèrent
du taux appliqué aux comptes classiques, il a valeur 0.04.
— Chaque compte “plus” a son propre montant, son propre propriétaire et sa propre
durée.
— Si on ajoute une propriété ou méthode x au prototype des comptes (Compte.prototype),
tous les comptes “plus” devront hériter x.
— Si on modifie le constructeur Compte, pour ajouter une nouvelle propriété ou méthode
x, tous les comptes “plus” devront hériter x.
Pour tester, dans un script définir les constructeurs Compte et ComptePlus, ainsi que les
prototypes associés, puis :
— créer un compte classique C et et deux comptes “plus” P1 et P2 ; ensuite affecter la
valeur 1.080 à Compte.prototype.E2D, et afficher les trois montants en dollars. Il
doivent tous utiliser le taux d’échange 1.080.
— afficher les taux d’intérêt des trois comptes. Vérifier que le taux de P1 et P2 est 0.04
et celui de C est 0.02.
— Modifier le constructeur Compte (sans changer ses paramètres) : ajouter une nouvelle
propriété à this avec une valeur par défaut. Vérifier que cette propriété est accessible
depuis les trois comptes (sans qu’aucun autre changement soit nécessaire) .
Pour afficher un résultat dans cet exercice, vous pouvez utiliser la méthode Javascript
document.write(), qui écrit dans le document HTML, en effaçant d’abord tout son
contenu. Par ailleurs il est conseillé d’utiliser cette méthode uniquement en phase de
test.
4. horloge.
Créer une page Web qui affiche une horloge avec un cadran en chiffres, une aiguille
pour les heures et une aiguille pour les minutes. Un bouton “Lancer” permet de lancer
l’avancement des aiguilles dans le temps, et un bouton “Arrêter” l’interrompt. Suivre les
indications suivantes.
— Créer un document HTML minimal qui comporte les boutons “Lancer” et “Arrêter”
ainsi que le CSS de la page, si besoin.
— Télécharger le fichier horloge.js et le rattacher au document HTML. Pour vous
faciliter la tâche, ce fichier contient déjà la declaration de deux tableaux Javascript
représentant les coordonnées de chaque chiffre du cadrant, de 1 à 12 (le chiffre 12
est représenté par l’indice 0). Completer le script horloge.js comme indiqué par les
étapes suivantes.
— Au chargement de la page le script doit créer l’horloge dans la page. Pour tout i de 1
à 12, le chiffre i sera crée comme un bloc <div><p>i</p></div>. De façon similaire,
le centre de l’horloge sera représenté comme <div><p>o</p></div>. L’aiguille des
heures sera créé comme un bloc <div> <img src="rond-rouge.png"> </div> et
celle des minute sera <div> <img src="rond-noir.jpg"> </div>. Le CSS devra
fixer la taille de ces deux images à 21px × 21px.
Tous ces blocs (<div>) doivent avoir position absolue. Les blocs des chiffres et du
centre doivent être positionnés aux coordonnées (top et left) indiquées par les tableaux et variables correspondants (attention, le chiffre 12 correspond à l’indice 0
dans ces tableaux).
2
ProgWeb
TD n◦ 3
Javascript et JQuery
L3 Informatique
2015–2016
Si (top, left) sont les coordonnées d’un chiffre, pour bouger une aiguille sur ce
chiffre, son bloc doit être positionné aux coordonnées (top+10, left).
Pour créer et modifier des éléments dans le document, on pourra utiliser les méthodes document.createElement() et document.body.appendChild(), ainsi que les
propriétés id, className, innerHTML et style des tous les éléments du DOM, si nécessaire.
— Associer au bouton “Lancer” une fonction qui fait avancer de 5 minutes la position
des aiguilles sur le cadrant. Utiliser la méthode document.setTimeout() pour que
la fonction soit appelée automatiquement à intervalles réguliers.
— Avec le bouton Arrêter, gérer la possibilité d’interrompre l’avancement automatique
des aiguilles.
Prendre soin de factoriser le code en définissant plusieurs fonctions.
2
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="http://code.jquery.com/jquery-1.11.3.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”.
(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
3
ProgWeb
TD n◦ 3
Javascript et JQuery
L3 Informatique
2015–2016
bouton le message “Bonjour” traverse lentement l’écran de gauche à droite, pour redisparaitre 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
initialement 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).
3
Formulaires
Les formulaires sont l’un des principaux moyens d’interaction au sein d’une page web. Ils
sont introduits par la balise <form> et constitués de champs décrits par des balises <input>,
<select> ou encore <textarea> auxquelles sont associés des labels (<label>).
1. 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) ;
— description (texte) ;
4
ProgWeb
TD n◦ 3
Javascript et JQuery
L3 Informatique
2015–2016
— bouton réinitialiser (pour réinitialiser le formulaire) ;
— bouton envoyer (pour envoyer le formulaire).
6. A l’aide
jQuery, faites
sorteà que
le champs
complet”
change faire
de
(c) En HTML5
seul de
(attributs
min etenmax,
spécifier
à la ”Nom
main pour
l’instant),
valeur
en fonction
de l’état
civil, du nom,
du prénom.
en sorte que
le champ
« date
de naissance
» ne et
puisse
contenir que des dates entre
7. A l’aide
faites en sorte que la valeur numérique du champs ”Niveau
aujourd’hui
et il de
y ajQuery,
100 ans.
en javascript” apparaisse à côté de celui-ci.
8. A l’aide de jQuery, faites en sorte que lorsque l’on sélectionne l’option ”Afficher
À partir de
utilisera
jQuery
pour affichent
les questions
motmaintenant,
de passe”, lesondeux
champs
précédents
le motqui
de suivent.
passe en clair.
Le champ
nomdecomplet
» doit
valeur ”Envoyer”
en fonction
l’état lorsque
civil, du
9. A «l’aide
jQuery, faites
en changer
sorte quede
le bouton
soit de
désactivé
l’un
des
champs
n’est
pas
rempli.
nom et du prénom (p. ex. si l’utilisateur a entré respectivement « M. », « Dupont »
10. A»,l’aide
de jQuery,
faites
en Toto
sorte que
les noms
et « Toto
il faudra
afficher
« M.
Dupont
»). des champs vides apparaissent
en rouge.
La valeur numérique du champ « niveau en javascript » doit apparaı̂tre à côté de
11. A l’aide de jQuery, faites en sorte que le bouton ”Envoyer” soit désactivé si les
celui-ci.
champs ”Mot de passe” et ”Mot de passe (confirmation)” ne contiennent pas la
Lorsqu’onmême
sélectionne
valeur. l’option « afficher le mot de passe », les deux champs précédents 12.
affichent
le
mot
de passe
A l’aide de
jQuery,
faitesen
en clair.
sorte que le nom du champs ”Mot de passe (confirmation)”
apparaisse
en
rouge
tant qu’il
est des
videchamps
ou que n’est
son contenu
n’est pas
Le bouton « envoyer » est désactivé lorsque
l’un
pas rempli.
égal à celui du champs ”Mot de passe”.
Le nom des champs vides apparaı̂t en rouge.
13. A l’aide de jQuery, faites en sorte que le champs ”Date de naissance” ne puisse
Le boutoncontenir
« envoyer
estdates
désactivé
lorsque lesetdeux
de passe
» ne
que »
des
entre aujourd’hui
il y a champs
100 ans, «enmot
générant
la date
jour avec javascript.
coı̈ncidentdupas.
14.
A
l’aide
faites en sorte que,
lorsque l’on
soumettant
le formulaire,
celuiLe champ « mot de
de jQuery,
passe (confirmation)
» apparaı̂t
en rouge
que son contenu
ci disparaisse au profit d’un texte contenant toutes les informations (du type
n’est pas égal à celui du champ « mot de passe ».
”Bonjour M. Blah Blah, vous êtes né le...”).
(d) À l’aide du CSS, créer une mise en page similaire à celle de la figure ci-dessus.
(e)
(f)
(g)
(h)
(i)
(j)
(k)
(l) Le champ « date de naissance » ne peut contenir que des dates entre aujourd’hui et
il y a 100 ans, en générant la date du jour avec javascript.
2
(m) Lorsqu’on soumet le formulaire, celui-ci disparaı̂t au profit d’un texte contenant
toutes les informations (du type : « Bonjour M. Toto Dupont, vous êtes né le . . . »).
2. QCM
(a) Créer une nouvelle page contenant un QCM avec 5 questions, qui auront chacune 3
réponses possibles.
5
ProgWeb
TD n◦ 3
Javascript et JQuery
L3 Informatique
2015–2016
(b) Ajouter un bouton « Corriger » qui vérifie les réponses : 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.
6