Retour tutorial

 

Un peu de tout -- Avancé --

Une minuterie

Javascript met à votre disposition une minuterie (ou plus précisément un compteur à rebours) qui permettra de déclencher une fonction après un laps de temps déterminé.

La syntaxe de mise en route du temporisateur est :

    nom_du_compteur = setTimeout("fonction_appelée()", temps en milliseconde)

Ainsi, setTimeout("demarrer()",5000) va lancer la fonction demarer() après 5 secondes.

Pour arrêter le temporisateur avant l'expiration du délai fixé, il y a :

    clearTimeout(nom_du_compteur)

Prenons un exemple (d'une utilité douteuse mais disons...qu'il est didactique) :

En cliquant sur le bouton "Mise en route", vous activez un compteur qui va afficher une boite d'alerte après 2 secondes. Si vous avez un peu de réflexe, vous pouvez arrêter prématurément le processus en cliquant sur le bouton "Stop test".

Le script se présente comme suit :

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function start(){
comp=(setTimeout("alert('Vos réflexes sont très lents !')",2000));
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Mise en route" onClick="start()">
<INPUT TYPE="button" VALUE=" Stop test " onClick="clearTimeout(comp)">
</FORM>
</BODY>
</HTML>

Avec l'instruction comp=(setTimeout("alert('Vos réflexes sont très lents !')",2000)), on initialise un compteur, appelé comp par la méthode setTimeout(). Ce compteur va déclencher la fonction start() après un délai de 2000 millisecondes soit 2 secondes.

Avec clearTimeout(comp), on va arrêter avant terme le compteur dont le nom est comp.
L'emploi de this

Pour désigner l'objet en cours, Javascript met à votre disposition le mot-clé this. Cette écriture raccourcie est souvent utilisée (sans risque de confusion) en remplacement du chemin complet de l'objet dans un formulaire. Un exemple vous éclairera mieux qu'un long discours.

Soit un script avec un formulaire :

<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choixprop(form3)">
</FORM>

Au lieu d'employer choixprop(form3), on aurait pu utiliser choixprop(this.form) et éviter ainsi toute confusion avec les autres noms de formulaires. Dans cet exemple, this.form désigne le formulaire form3 complet. Par contre, choixprop(this) n'aurait désigné que l'élément de type bouton du formulaire form3.

Pour être complet, this est utilisé aussi pour créer une ou plusieurs propriétés d'un objet. Ainsi, pour créer un objet livre avec les propriétés auteur, éditeur et prix cette opération peut être effectuée à l'aide de la fonction :

function livre(auteur, editeur, prix) {
this.auteur = auteur;
this.editeur = editeur;
this. prix = prix;
}


 

Retour tutorial