TP : Initiation à Javascript

Matière : Atelier développement web1

Classe :TI1

Exercice 0 : Gestion des évènements (onclick, ondbclick, onkeypress…)

1. A un document HTML, ajoutez des alertes :
a. Au chargement de la page
b. Quand on passe la souris sur une image
c. Quand on clique sur un bouton
d. Quand on appuie sur une touche
2. Ajoutez un bouton, qui quand on clique dessus, fait appel à document.write() pour
produire un affichage, que se passe-t-il ?
3. Avec des boutons :
a. Bouton « Couleur arrière-plan » permet de changer la couleur de fond de document
quand on clique dessus
b. Bouton « Apparence du bouton » permet de changer l’apparence du bouton
(couleur de l’arrière-plan rouge et couleur du texte blanc), utilisez méthode
getElementById().
c. Affichez le paragraphe suivant : « Ce paragraphe est écrit suite au click sur un
bouton » en cliquant sur le bouton « Afficher paragraphe » utilisez innerHTML.
4. Sur des images :
a. Changez une image par une autre quand la souris passe dessus
b. Remettez l’image d’origine quand la souris quitte l’image

La page web sera comme suit :

Exercice 1 : Gestion d’évènements en Javascript

L’objectif de cet exercice est de prendre en main Javascript au travers de la gestion de deux
évènements :
— Changement d’image lorsque l’utilisateur déplace sa souris sur l’image
— Modification du texte lors d’un clic sur le texte.

p. 1
 1. Téléchargez deux images de montagne et rivière et les enregistrez dans un dossier
images à coté de votre page HTML sous le nom de « montagne.jpg » et « riviere.jpg »
respectivement.
2. Insérez la première image de montagne dans votre fichier HTML ainsi qu’un
paragraphe contenant le texte suivant : « Premier texte sans italique »
NB : N’oubliez pas de donner des « id » pour les balises <img> et <p>.
3. Modifiez le style du paragraphe <p> pour que la première lettre soit majuscule et en
gras.
4. Ecrivez un code javascript qui permet de changer l’image de « montagne.jpg » par
celle de « riviere.jpg » en déplaçant la souris.
5. Ecrivez une fonction changer() qui permet, en cliquant sur le paragraphe <p>, de
modifier le texte du paragraphe <p> par le texte « Nouveau texte en italique » qui est
écrit en italique.

Exercice N°2 : Carrousels d’images

HTML/CSS
1. Créez une page Web (HTML+CSS) qui contient deux boutons “précédent” et “suivant”
et spécifiez deux identifiants distincts pour ces boutons.
2. Placez l’image entre les deux boutons.
3. L’image qui s’affiche au chargement de la page est « 1.jpg » du répertoire « images ».
Donnez un identifiant à l’image.
4. Créez un fichier CSS de façon à ce que le rendu soit proche de celui de la Figure ci-
dessus.
Javascript
5. Stockez les chemins des images « 1.jpg », « 2.jpg » et « 3.jpg » dans un tableau (l’objet
Array()) et en utilisant (l’objet Image()). (NB : Recherchez sur Internet comment
remplir un tableau d’images en javascript)
6. Ecrivez une fonction « nextImage() » qui permet d’afficher l’image suivante en tenant
compte de l’ordre suivant « 1.jpg » puis « 2.jpg » puis « 3.jpg » et « 1.jpg » etc

p. 2
 7. Ecrivez une fonction « previousImage() » qui permet d’afficher l’image précédente en
tenant compte de l’ordre suivant « 3.jpg » puis « 2.jpg » puis « 1.jpg » et « 3.jpg » etc
8. Appelez les fonctions « nextImage() » et « previousImage() » au moment de click sur
les boutons « suivant » et « précédent » respectivement.
9. Effectuez le défilement automatique de l’image après 2 secondes d’inactivité, grâce à la
fonction setTimeout(). Documentez-vous au besoin sur l’utilisation de cette fonction.

p. 3