<html> <head> <script language="JavaScript"> <!-- function statbar(txt) { window.status = txt; } // --> </script> </head> <body> <form> <input type="button" name="look" value="Scrivi!" onclick="statbar('Ciao! Questa è la statusbar!');"> <input type="button" name="erase" value="Cancella!" onclick="statbar('');"> </form> </body> </html>Abbiamo creato due pulsanti che invocano entrambi la funzione statbar(txt). Il txt tra parentesi indica che la funzione riceve in questa variabile un valore passato dall'invocazione della funzione (l'ho chiamata txt ma avrei potuto chiamarla in qualsiasi altro modo). Se guardate il tag <form> in cui vengono creati i pulsanti potrete vedere che la funzione statbar(txt) viene invocata senza specificare la variabile txt: al suo posto mettiamo il testo che vogliamo visualizzare nella statusbar. Possiamo vedere il tutto in questo modo: quando la funzione viene invocata alla variabile txt è assegnato il valore passato dalla chiamata di funzione. Quindi quando clicchiamo sul pulsante 'Write!' viene invocata la funzione statbar(txt) e alla variabile txt viene asseganta la stringa 'Ciao! Questa è la statusbar'. All'interno della funzione potete usare txt come una normale variabile. Questo metodo di passaggio di parametri alle funzioni le rende molto flessibili.
Conoscete già la proprietà
onMouseOver dalla parte 2 del mio tutorial:
<a href="stupid.htm" onMouseOver="window.status='Questo
è uno stupido link...'; return true">
Non vi da fastido che il testo che appare nella statusbar
non venga cancellato se non quando puntate il mouse su un'altro link? Ho
una soluzione molto semplice. Scriveremo una piccola funzione che utilizza
la stessa tecnica mostrata prima per cancellare il contenuto della statusbar.
Ma come può essere invocata la funzione per cancellare? Non abbiamo
un metodo o una proprietà da poter utilizzare per stabilire se il
puntatore del mouse ha lasciato il link. La soluzione consiste nell'impostare
un timer.
Provate il seguente script. Posizionate il puntatore del mouse sul link senza cliccare!
E' abbastanza chiaro, no? Date un'occhiata al sorgente e vedrete che è molto più semplice di quanto possa sembrare a prima vista.
<html> <head> <script language="JavaScript"> <!-- function muovisullink(txt) { window.status = txt; setTimeout("cancella()",1000); } function cancella() { window.status=""; } // --> </script> </head> <body> <a href="dontclck.htm" onMouseOver="muovisullink('Sto per scomparire!');return true;"> link</a> </body> </html>Riconoscerete molte parti dello script. La funzione muovisullink(txt) non è che la funzione statbar(txt) dopo qualche operazione di taglia e incolla! Quasi la stessa cosa vale per la funzione cancella(). Nella pagina HTML abbiamo creato un link con la proprietà onMouseOver; la nostra funzione muovisullink(txt) viene invocata passando la stringa 'Sto per scomparire!' al posto del parametro txt e la stessa stringa viene assegnata a windows.status. Questo è quanto avveniva anche nella funzione statbar(txt). La chiamata di funzione setTimeout(...) è una novità: essa imposta un timeout. La funzione setTimeout(...) definisce un intervallo di tempo dopo il quale accade qualcosa. Nel nostro esempio viene invocata la funzione cancella() dopo 1000 millisecondi (cioè un secondo). E' fantastico! La nostra funzione muovisullink(txt) termina il suo compito dopo aver avviato il timer. Il browser invocherà la funzione cancella() automaticamente dopo 1 secondo (State già pensando ad una pagina che dica all'utente: Se non fai questo il tuo hard disk verrà distrutto tra 10 secondi!???).
Dal momento che già sapete come scrivere nella statusbar e come funziona la funzione setTimeout, vi sarà facile seguire l'implementazione di uno scroller.
Cliccate sul pulsante per vedere il mio scroller. Lo script deve essere caricato dal server quindi abbiate un po' di pazienza se non vedete lo scroller immediatamente.
Guardiamo lo script:
<html> <head> <script language="JavaScript"> <!-- var scrtxt="Qui metterete il messaggio che i visitatori della vostra pagina "+ "guarderanno affascinati per ore ..."; 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;"> Qui metterete la vostra bella pagina! </body> </html>Questo script usa le stesse funzioni (o loro parti) che abbiamo già usato prima. La funzione setTimeout(...) 'dice' al timer di invocare la funzione scroll() allo scadere del tempo. Lo scroller si muoverà di un passo alla volta. All'inizio ci sono un po' di calcoli, ma non sono veramente importanti per capire come funziona lo script. I calcoli servono per ottenere la posizione a partire da cui deve iniziare lo scorrimento. All'inizio lo script deve aggiungere alcuni spazi per posizionare il testo sulla destra.
Vi ho accennato all'inizio di questa parte della mia introduzione
che gli scroller non sono molto popolari o se lo sono non lo saranno per
molto. Vi sono alcuni motivi: ve ne elenco alcuni ma ve ne sono certamente
molti altri.
Se vedete questo effetto per la prima volta può
sembrare molto bello ma dopo averlo visto per la milionesima volta non
è più così divertente. Ma questo non è un buon
argomento perchè può valere per qualsiasi bel trucchetto
usato nelle vostre pagine.
Ci sono problemi più seri. Quello che non mi piace
è che lo scroller cambia velocità quando muovete il mouse
(diventa più veloce!), almeno questo è quanto accade a me.
Questo effetto è più evidente quando si vuole rendere lo
scroller un po' più veloce cambiando il valore di timeout. Probabilmente
ci sarà un modo per aggirare questo problema. Fate attenzione inoltre
a non lasciare eseguire questo script per troppo tempo altrimenti verrà
segnalato un Out of memory error.
Ci sono molte altre routine sulla Rete. Ho visto alcuni scroller che scrivono il testo in un frame; programmarne uno non dovrebbe essere molto difficile.