TP 5 : De Javascript au DHTML

M. K RAJECKI, DESS IAS
Programmation Web
TP 5 : De Javascript au DHTML
EXERCICE 1 : L’OBJET DATE
Javascript offre la possibilité de manipuler les dates au travers l’objet Date. Comme d’habitude, l’exploitation de cet objet, c’est à dire le format des informations renvoyées par l’utilisation
des méthodes, c’est à dire des fonctions qui agissent sur cet objet, diffère en fonction des navigateurs.
Affichage de la date
Ecrivez une fonction Javascript permettant l’affichage de la date complète. On ne s’occupera
pas du format d’affichage, on se contentera d’un "simple" affichage de l’objet Date.
Récupération de l’année
Testez l’utilisation de la méthode getYear() en fonction de Netscape et Internet Explorer. On
récupèrera l’année dans une variable que l’on fera afficher dans une page web.
Affichage de la date
crivez une fonction Javascript permettant l’affichage de la date sous la forme jours mois
année , par exemple : 3 janvier 2001 . Vous écrirez votre script pour le navigateur que vous
voulez.
La date et l’heure
Ecrivez une fonction Javascript affichant la date et l’heure. On réutilisera la fonction écrite
précédemment.
EXERCICE 2 : LE NAVIGATEUR
Affichage du nom et de la version du navigateur
Ecrivez une fonction Javascript réalisant l’affichage du nom, ainsi que de la version du navigateur.
La date en fonction du navigateur
Reprenez le script de l’exercice précédent (question 3) et modifiez le pour permettre le
même affichage de la date sous Netscape et Internet Explorer. On pourra écrire une fonction
permettant l’affichage de la date pour Netscape, une seconde pour Internet Explorer, et une
troisième qui appelera ces deux fonctions en fonction du navigateur client.
De Javascript au DHTML
1/ 4
M. K RAJECKI, DESS IAS
Programmation Web
EXERCICE 3 : LES TABLEAUX
Javascript permet la manipulation de collections de données : des tableaux. Ces tableaux
peuvent contenir des données homogènes (que des entiers) ou des données hétérogènes (des
images, des chaînes de caractères, des valeurs numériques toutes contenues dans le même
tableau)
Attention : il ne faut pas confondre les tableaux javascript qui sont des collections de données et les tableaux HTML qui ne sont que des affichages formatés de données.
Remarque : l’indice de la première case d’un tableau est 0 et non 1 !
Initialisation et affichage d’un tableau
Ecrivez un script Javascript créant un tableau de 10 cases, initialisant ces 10 cases avec des
valeurs aléatoires, et affichant les valeurs contenues dans les différentes cases du tableau. On
pourra réaliser ce script sous la forme d’une seule fonction ou de plusieurs fonctions : une qui
initialisera le tableau, une qui en assurera l’affichage et une qui appelera les deux précédentes.
Affichage de la date
Reprenez la question précédente en entrant les mois successifs dans un tableau : le mois
de janvier sera à l’indice 0, févier à l’indice 1 ...
Crible d’Érathostène
Proposer une fonction Javascript pour afficher les nombres premiers inférieurs à 100.
EXERCICE 4 : LES IMAGES : AFFICHAGE ALÉATOIRE
Javascript permet de "manipuler" des images. Même si les possibilités de manipulation de
ces images sont très vastes, il faut garder à l’esprit que comme d’habitude dans le cadre de la
programmation Javascript, on ne peut modifier que des éléments déjà présents sur la page, et
non inclure "dynamiquement" des élément une fois la page affichée !
La base de la manipulation des image est l’exploitation du DOM : le Document Object Model.
Toute image incluse dans une page est accessible ensuite : soit par son nom, si on l’a nommé,
soit par son "indice" dans le tableau des images.
Pour plus de renseignements sur la gestion de ce DOM, je vous conseille d’aller regarder le
tutorial voodoo (en français ici : http://wwwusers.imaginet.fr/ ortunio/javascript/script.htm).
Il faut tout de même garder à l’esprit que même si l’utilisation d’images, et des modification
dynamiques de celles-ci, rendent une page plus conviviale, cela provoque dans bien des cas
une surcharge non négligeable du réseau, ainsi que du poste client.
Affichage à partir d’un tableau
Ecrivez une fonction Javascript affichant aléatoirement une image. On utilisera un tableau
pour stocker le nom des images à afficher.
De Javascript au DHTML
2/ 4
M. K RAJECKI, DESS IAS
Programmation Web
"construction" du nom de l’image
En utilisant les images données en complément, écrivez un script Javascript permettant
l’affichage aléatoire d’une image. On construira en fonction du nombre tiré au sort la chaîne de
caractère permettant l’affichage de l’image.
EXERCICE 5 : CHANGEMENT D’UNE IMAGE
Changement suite au passage sur un lien
Ecrivez un script Javascript permettant de changer une image lorsqu’un passe sur un lien.
Le lien utilisé pourra être du texte ou une autre image.
Changement sur timeout
Ecrivez un script Javascript utilisant un timeout permettant le changement d’une image toute
les 5 secondes. L’image choisie pourra être choisie aléatoirement.
EXERCICE 6 : CHOIX D’UNE IMAGE DANS UNE LISTE
Ecrivez un script Javascript permettant de changer une image en fonction du choix effectué
par un utlisateur dans une liste.
EXERCICE 7 : AFFICHAGE DE L’HEURE
Affichage de l’heure d’arrivée sur une page
En utilisant les images de chiffres donnés en complément, ou d’autres images que vous irez
chercher sur le web, écrivez un script permettant l’affichage de l’heure d’entrée sur une page.
L’affichage de l’heure se fera chiffre par chiffre.
Affichage dynamique de l’heure
En utilisant les images de chiffres donnés en complément, ou d’autres images que vous irez
chercher sur le web, écrivez un script permettant l’affichage de l’heure. Cet affichage devra être
dynamique : il devra évoluer en même temps que l’heure.
EXERCICE 8 : VÉRIFIER UNE DATE
Vérification du format
Nous nous proposons de vérifier qu’une date entrée dans un formulaire respecte le format
jj/mm/aa.
Pour vérifier que chaque entrée du formulaire ne contient que des chiffres, nous utilisons les
expressions régulières. Je vous conseille vivement la lecture de cette page : http://membres.
De Javascript au DHTML
3/ 4
M. K RAJECKI, DESS IAS
Programmation Web
lycos.fr/wphilippe/js_base8.html. La méthode ch.search(x) recherche la position de l’expression régulière x dans la chaine de caractères ch.
Par exemple : je souhaite connaître la position du premier chiffre composant une chaîne de
caractères ch="la date du jour 20 juin 2001". Voici le script :
<script language="javascript">
ch="la date du jour 14 mars 2003"
document.writeln("La position du premier chiffre est "+
ch.search(/\d/));
</script>
Et voici le résultat de ce script :
La position du premier chiffre est 16
Par contre, si la chaîne ne contient pas de chiffre le résultat de l’appel à search est -1. Par
exemple, si ch="Programmation Web", le résultat du script est : La position du premier
chiffre est -1
Affichage de la date saisie
Si la date saisie respecte le format imposé, affichez cette date à l’aide des images fournies
(voir figure 1).
F IG . 1 – Affichage de la date saisie
De Javascript au DHTML
4/ 4