COURS JavaScript


Accueil | Temporisation


Principe

Le principe est très simple. On défini une action à faire au bout d'un certain temps après l'arrivée sur la page ou après un événement. Par exemple le client arrive sur une page qui le revoie automatiquement vers une autre page au bout d'un temps donné.
On se sert pour ça d'une méthode de l'objet window. Vous vous souvenez... une méthode, c'est ce que sait faire un objet. Ici, l'objet window possède une méthode qui s'appelle .setTimeout() qui lui permet de déclencher une action au bout d'un délai que vous fixez vous même. L'action à faire peut être soit directement dite dans la méthode, soit être l'appel à une fonction qui contient la chose à faire. La syntaxe est des plus simple :

setTimeout("Chose à faire", Délai) ; // sans appel de fonction

Où :
"Chose à faire" peut être n'importe quelle instruction JavaScript valide (bien écrite).
Délai, est le nombre de millisecondes au bout duquel l'action Chose à faire doit être déclenchée. C'est ce que nous allons utiliser dans l'exemple donné plus bas. Notez bien qu'ici, Chose à faire et Délai ne sont pas des variables. Il faudra remplacer Chose à faire et Délai par des instructions que nous allons étudier dans la suite de cette page.

setTimeout("Appel de fonction", Délai) ; // avec appel de fonction, sans passage de paramètre

Où :
"Appel de fonction" sera l'appel d'une fonction que nous aurons écrite comme nous savons maintenant le faire, à un autre endroit du programme.
Délai, est le nombre de millisecondes au bout desquelles l'appel de la fonction sera déclenché. Dans ce cas de figure, la fonction que nous appelons n'a pas besoin de paramètres pour travailler.

setTimeout("Appel de fonction", Délai, Param1, Param2) ; // avec appel de fonction, avec passage de paramètres

Où :
"Appel de fonction" sera l'appel d'une fonction que nous aurons écrite comme nous savons maintenant le faire, à un autre endroit du programme.
Délai, est le nombre de millisecondes au bout desquelles l'appel de la fonction sera déclenché. Dans ce cas de figure, la fonction que nous appelons a besoin de paramètres pour travailler. Nous les passons simplement dans l'ordre dans lequel elle doit les recevoir. Param1, Param2 etc... (il peut y en avoir autant que nécessaire) sont les paramètres dont la fonction a besoin. Ils peuvent être bruts (c'est à dire des nombres ou des chaînes de caractères entre guillemets), ou bien contenus dans des variables.


Temporisation

Nous allons utiliser la syntaxe du premier cas de figure (le plus simple) pour re-diriger l'utilisateur automatiquement vers une page html ou une adresse Internet précise. Cette action se déclenchera au bout d'un certain temps après que la page qu'il consulte se sera chargée dans son navigateur. Cette manière de faire est bien utile lorsqu'on a changé notre site d'hébergeur. On peut alors mettre un message d'avertissement dans la page consultée pour prévenir que le site a changé d'adresse et qu'il va y être automatiquement dirigé. Comme tout ceci doit se faire sans intervention de l'utilisateur, nous allons écrire des instructions à exécution immédiate, c'est à dire entre les Tags <Script language="JavaScript"> et </script> le tout écrit à l'endroit adéquat dans le corps de la page HTML, c'est à dire entre les Tags <Body> et </Body>.

Voici le code à placer (de préférence en bas de la page juste avant le Tag  </Body>) de manière à ce que la page HTML soit entièrement affichée avant le décompte du délai.

<Script language="JavaScript">

setTimeout("document.location = 'jstimeout.htm' ", 5000)

</script>

explications :

setTimeout() est la méthode de l'objet window. Nous aurions pu écrire window.setTimeout(). Mai comme nous sommes dans une seule fenêtre, ça n'est pas nécessaire. Cette expression, setTimeout(), est une méthode qui temporise d'un certain nombre de millisecondes.

document.location=

.location est une propriété de l'objet document (la page en cours) qui donne l'instruction au navigateur de charger la page HTML qui suit le signe "=" (égal).

'jstimeout.htm' (attention aux guillemets simple, ne pas les oublier) est le nom de la page html à charger dans la fenêtre courante. Si cette page n'est pas dans la même directory que la page temporisée, il faut indiquer le chemin (avec des "/" et non pas des "\"comme sous windows. Ici, dans notre exemple, lorsque vous cliquerez plus bas sur le lien que je vous ai concocté, vous irez sur une page qui vous ramènera ici au bout de 5 secondes. La page HTML à appeler est donc la page que vous êtes en train de lire, c'est à dire jstimeout.htm (regardez le nom de la page en cours dans la barre d'adresse de votre navigateur). Vous pouvez aussi mettre une URL (adresse de site Internet) entière comme par exemple :

'http://perso.wanadoo.fr/philippe.medan/'

5000 est le nombre de millisecondes au bout duquel l'expression entre guillemet "document.location=........." doit être exécutée. Si vous voulez que la page se charge au bout de 5 secondes, vous mettez 5000 millisecondes et ça marche. Avec ce paramètre, vous pouvez régler le temps au bout duquel une page doit remplacer l'autre.

Voilà. Pas plus compliqué que ça. Vous pouvez faire l'essai en cliquant sur le lien ci dessous. Il va vous envoyer vers une page qui contient très exactement ce que je viens de vous dire. Au bout de cinq secondes, vous reviendrez ici.

Cliquez ici pour voir ce que ça fait.

 

 



Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.