TP Introduction au développement Web

Javascript et jquery
Eric Ramat
ramat@lisic.univ-littoral.fr

30 mars 2015

Durée : 3 heures

L’objectif de ce troisième TP est de découvrir le langage Javascript. On allons l’illustrer au travers

d’interaction avec les pages Web.

1 Travail
Exercice 1. Sur la page Product, on peut modifier la quantité commandée. Pour cela, on peut cliquer
sur les 2 triangles (vers le haut pour augmenter et vers le bas pour diminuer). Attention, la quantité ne
peut pas être nulle ou négative.

Il faut proablement modifier le code HTML pour pouvoir interagir avec les éléments.

Exercice 2. La page Product affiche une image du produit. Des miniatures sont aussi disponibles.
Si l’utilisateur clique sur l’une des miniatures alors l’image principale est changée au profit de l’image
correspondante à la miniatures.

Exercice 3. Sur la page Product, ajouter un menu de navigation. Ce menu se présente sous forme
d’une barre aux bords arrondis. Il est placé en haut de la page et il est centré dans le div principal. Chaque
élément du menu est séparé par un petit trait. Pour rendre le menu plus sympathique, nous allons ajouter
des effets. Lorsque l’on passe sur un élément de la liste, le texte change de couleur. Si l’élément possède
un sous-menu alors il apparaît. Un petit triangle indique qu’il y a un sous-menu. Lorsque l’on passe sur
un élément du sous-menu, il change aussi de couleur.

Pour le moment, le menu est composé des éléments suivants :

— Home
— Categories
— Computer/Tablets
— TV/Video
— Sound/Music
— Backet
— Account
— My account
— My Orders
1
 — Logout

Le menu et les sous-menus sont naturellement des div. Pour les sous-menus, il faut faire apparaître et
disparaître les div correpondants.

Exercice 4. En utilisant jquery, la page Checkout propose de déplacer les articles commandés dans
la liste. Un élément graphique en bas de chaque article le permet. Lorsque l’on clique sur l’élément gra-
phique, la div doit être déplacer et le bouton doit être changé en fonction de la nouvelle position de
l’article. Il est possible qu’il faille deux éléments graphiques si l’élément n’est pas le premier ou le dernier
et que la liste contient plus de deux articles.

Vous pouvez utiliser les fonctions suivantes :

— detach : retire un élément du DOM sans le détruire. Par exemple, l’élément dont l’id est main est
retiré du DOM mais reste accessible avec la variable p
var p = $ ( ’# main ’ ). detach ();
— insertBefore et insertAfter : ajoute l’élément avant ou après un autre élément. Par exemple, on
peut ajouter l’élément contenu dans la variable p avant l’élément dont l’id est first
p . insertBefore ( $ ( ’# first ’ ));
— index : retourne l’index d’un élément ; par exemple, si l’élément dont l’id est foo est dans une liste
(ul) et qu’il est en 2ème position alors la méthode retourne 1
var i = $ ( ’# foo ’ ). index ();
Exercice 5. Modifiez le code de l’exercice 2 en utilisant jquery. De plus, au moment du clic, changez
le cadre de la miniature en augmentant l’épaisseur du cadre. Cela permet de savoir quelle est la miniature
qui est mise en évidence.