Introduction to JavaScript
Chapitre 4
Nous avons créé deux boutons associés tous les deux à la fonction statbar(txt).
Le txt entre parenthèses indique que la fonction prend comme variable la chaîne transmise en tant que paramètre
lors de son appel. (Je lui est donné le nom de txt mais il peut être totalement différent.)
Si vous regardez la balise <form> où sont créés les boutons, vous vous apercevrez de l'appel à la fonction
statbar(txt). Mais n'écrivez pas ici txt, indiquez plutôt le message que vous désirez voir s'afficher.
Vous pouvez résumer les choses ainsi: Lors de son appel, la fonction définie la variable txt qui prend
pour valeur la chaîne transmise en tant que paramètre et affiche celle-ci dans la barre d'état.
Ainsi lorsque le bouton 'Ecris!' est pressé, la fonction statbar(txt) est appelée et la variable txt contient la chaîne
'Salut! Ceci est la barre d'état!'. Maintenant vous pouvez utiliser la variable txt comme vous voulez.
Cette méthode de transmission de variables rend les fonctions bien plus flexibles.
Regardez le second bouton. Il utilise la même fonction. Sans ce passage de variable,
cela aurait nécessité 2 fonctions différentes.
Vous connaissez déjà la propriété onMouseOver depuis le chapitre 2 de mon didacticiel:
Essayez le script suivant:
ICI.
Déplacez simplement votre pointeur au-dessus mais surtout ne clickez pas!
N'est-ce pas plus soigné? Jetez un simple coup d'oeil au code source et vous verrez que cela est plus simple qu'il n'y parait.
La plupart des instructions de ce script doivent vous être maintenant familières.
Les fonctions statbar(txt) et moveover(txt) sont exactement identiques puisque je ai obtenue
la seconde par un copier-coller de la première. Le même méthode a été appliquée avec la fonction erase().
Dans le corps (
Puisque vous connaissez déjà le fonctionnement de la barre d'état et de la fonction setTimeout,
le défilement vous paraîtra simple à comprendre.
Pressez ce bouton pour voir ma banderole défilante. Soyez patient si vous ne voyez pas cette dernière immédiatement, le
script doit être téléchargé depuis le serveur.
Jetons un oeil au script:
Ce script utilise les même fonctions (tout ou partie) que nous avons déjà rencontrées.
Le setTimeout(...) 'indique' au chrono d'appeler la fonction scroll() à la fin du temps imparti.
Le message défilant se déplacera alors d'un cran. Au début, pas mal de calculs sont effectués
mais il n'est pas vital de les connaître pour comprendre le fonctionnement du script.
Les calculs sont là pour obtenir la position du départ du texte défilant.
Si l'on est tout au début, le script doit ajouter des espaces au message pour placer le texte à droite.
Je vous ai dit au début de ce chapitre que les défilements ne sont pas très populaires
ou, s'ils le sont encore, ne doivent pas être trop longs. Il y a plusieurs raisons, je vais en lister
quelques unes mais il y en certainement d'autres.
Vous pourrez trouver plein d'autres routines sur le Net. J'ai vu certains défilements
écrivant du texte dans une frame. Programmer cela ne devrait pas être trop difficile et constituerait
un excellent exercice de votre part.
Maintenant je vais vous montrer comment écrire du texte dans la barre d'état (la barre
située au bas de votre navigateur dans laquelle apparaissent les URLs) et bien entendu
comment fonctionne un défilement bien qu'ils soient déjà détestés dans des scènes JavaScript
(Je vous en donnerai la raison plus tard).
Premièrement comment est-elle 'adressée' ? Ces scripts illustrent la façon d'écrire un simple
texte dans la barre d'état:
<html>
<head>
<script language="JavaScript">
<!-- Masque
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Ecris!" onclick="statbar('Salut! Ceci est la barre d'état!');">
<input type="button" name="erase" value="Efface!" onclick="statbar('');">
</form>
</body>
</html>
Etudions maintenant le fonctionnement de statbar(txt). Celui-ci est très simple.
Vous inscrivez simplement le contenu de txt dans la variable window.status.
Cela est fait grâce à window.status = txt;. Ecrire une chaîne vide('') dans la barre d'état
équivaut à effacer ce qui s'y trouve.
Remarquez que nous avons utilisé des apostrophes ' puisque les guillemets ont été utilisés pour
définir onClick. Le navigateur a besoin de savoir quels chaînes vont ensemble d'où l'alternance rendue obligatoire.
J'espère que cela est clair.
<a href="stupid.php" onMouseOver="window.status='Encore un lien idiot...';
return true">
Est-ce que ça ne vous énerve point que la barre d'état n'efface pas le texte lorsque le pointeur de
souris ne survole plus le lien? J'ai une solution relativement simple. Ecrivons une petite fonction
utilisant la même technique pour effacer la barre d'état comme précédemment. Mais comment la fonction
d'effacement sera-t-elle appelée? Nous n'avons ni méthode, ni propriété pour détecter
si le pointeur de souris s'est déplacé depuis un lien. Instituer un chrono est une solution.
<html>
<head>
<script language="JavaScript">
<!-- Masque
function moveover(txt) {
window.status = txt;
setTimeout("erase()",1000);
}
function erase() {
window.status="";
}
// -->
</script>
</head>
<body>
<a href="fdontclk.php" onMouseOver="moveover('Disparu!');return true;">
lien</a>
</body>
</html>
A la fin du compte à rebours, le chrono ne se relance pas automatiquement. Mais vous
pouvez naturellement l'appeler dans la fonction erase(). Quelle superbe transition pour annoncer la suite constituée des messages défilants.
<html>
<head>
<script language="JavaScript">
<!-- Masque
var scrtxt="Voilà le message que les visiteurs de votre page"+
" vont regarder, fascinés, pendant des heures et des heures...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Voilà une page vraiment CCCCCOOOOOOOOOOLLLLL!
</body>
</html>
Si vous observez cet effet pour la première fois, il vous semblera cool mais lorsque vous l'aurez vu
1 million de fois vous ne le trouverez plus fun du tout. Je sais, ceci n'est pas un bon argument puisqu'il
concerne à peu près toutes les astuces sympas de votre page.
Il existe d'autres problèmes bien plus sévères. Ce qui m'exaspère le plus c'est le changement de la vitesse
du défilement lorsque je bouge ma souris (ça va plus vite!). En tout cas ça me le fait.
Ce bug devient nettement plus embêtant
quand vous voulez faire varier la vitesse de ce défilement vous-même en changeant un peu la valeur de setTimeout.
Peut-être tournons-nous autour du même problème.
Il existe des problèmes bien pires liés à ces défilements, je n'en citerai que deux mais je suis sûr qu'il y en a d'autres.
Si vous laissez ce script tourner pendant un petit moment, vous obtiendrez un message Out of memory error. Ceci est vraiment détestable.
Le deuxième est selon moi le pire qui ait été cité, si vous venez de quitter une page contenant un défilement
n'essayez surtout pas d'y revenir en utilisant les boutons Back-Forward de votre navigateur. En effet Navigator 2.0 pour PC, déclenche une erreur fatale
qui conduit à la fermeture de ce dernier. Ces 2 derniers problèmes semblent appartenir à Netscape Navigator 2.0.
Espérons que ces bogues seront corrigés dans les versions ultérieurs.