Javascript
Un peu de tout ...
HomeUpDown

Les boites de message
Une minuterie
L'emploi de this

Les boites de dialogue ou de message

Javascript met à votre disposition 3 boites de message

  • alert()
  • prompt()
  • confirm()

Ce sont toutes trois des méthodes de l'objet window.

La méthode alert()

La méthode alert() doit, à ce stade de votre étude, vous être familière car nous l'avons déjà souvent utilisée.

La méthode alert() affiche une boite de dialogue dans laquelle est reproduite la valeur (variable et/ou chaîne de caractères) de l'argument qui lui a été fourni. Cette boite bloque le programme en cours tant que l'utilisateur n'aura pas cliqué sur "OK".
Alert() sera aussi très utile pour vous aider à débbuger les scripts.

Sa syntaxe est :

    alert(variable);
    alert("chaîne de caractères");
    alert(variable + "chaîne de caractères");

Si vous souhaitez écrire sur plusieurs lignes, il faudra utiliser le signe \n.

La méthode prompt()

Dans le même style que la méthode alert(), Javascript vous propose une autre boite de dialogue, dans le cas présent appelée boite d'invite, qui est composée d'un champ comportant une entrée à compléter par l'utilisateur. Cette entrée possède aussi une valeur par défaut.

La syntaxe est :

    prompt("texte de la boite d'invite","valeur par défaut");

Cet exemple s'écrit

    prompt("Entrez votre prénom:","Prénom");

En cliquant sur OK, la méthode renvoie la valeur tapée par l'utilisateur ou la réponse proposée par défaut. Si l'utilisateur clique sur Annuler ou Cancel, la valeur null est alors renvoyée.
Prompt() est parfois utilisé pour saisir des données fournies par l'utilisateur. Selon certaines sources, le texte ne doit cependant pas dépasser 45 caractères sous Netscape et 38 sous Explorer 3.0.

La méthode confirm()

Cette méthode affiche 2 boutons "OK" et "Annuler". En cliquant sur OK, continue() renvoie la valeur true et bien entendu false si on a cliqué sur Annuler. Ce qui peut permettre, par exemple, de choisir une option dans un programme.

La syntaxe de l'exemple est :

    confirm("Voulez-vous continuer ?")



Fin de la partie prévue pour les débutants --- Début de la partie considérée comme avancée


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 name="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;
}

HomeDown