 |
|
INITIATION AU JAVA SCRIPT |
|
|
|
INITIATION AU JAVA SCRIPT |
Les boites de dialogue ou de message
: javascript met à ta disposition 3 boites de message,
alert(), prompt() et confirm(). Ce sont toutes trois des méthodes de l'objet
window.
La méthode alert() : la méthode alert() doit, à ce stade de ton étude, t'ê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 t'aider à débuguer les scripts. Sa syntaxe est :
alert(variable);
alert("chaîne de caractères");
alert(variable + "chaîne de caractères");
Si tu souhaites écrire sur plusieurs lignes, il te
faudra utiliser le signe \n.
La méthode prompt() : dans le même style que la méthode
alert(), Javascript te 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 ?")
Une minuterie : javascript met à ta disposition une minuterie (ou plus
précisément un compteur à rebours) qui te 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)
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 à ta
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 t'é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;
}
