Introduzione a JavaScript

Introduzione a JavaScript
Parte 4

Voglio ora mostrarvi come visualizzare del testo nella statusbar (la barra in fondo al vostro browser in cui vengono mostrate le URL) e naturalmente vi spiegherò come funziona uno scroller, nonostante sia già un effetto odiato nell'ambito di Javascript (vi dirò in seguito perché).
Come possiamo indicare la statusbar? Questo script vi fa vedere come scrivere del semplice testo nella statusbar:

Simpatico, no? Ecco lo script:

<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.
Osserviamo il secondo pulsante: esso invoca la stessa funzione! Senza il meccanismo del passaggio di parametri avremmo avuto bisogno di 2 diverse funzioni.
Ma cosa fa la funzione statbar(txt)? E' semplice: assegna il contenuto della variabile txt alla variabile window.status (window.status = txt;). Scrivendo una stringa vuota ('') nella statusbar viene cancellato il contenuto precedente. Notate che bisogna usare i singoli apici ' perché i doppi apici " vengono usati per la definizione di onClick. Il browser deve sapere come bilanciare gli apici, quindi dovete alternare apici singoli e doppi. Penso che fin qui dovrebbe essere tutto chiaro.

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!???).
Alla scadenza del timeout il timer non ricomincia da capo, ma potreste avviarlo di nuovo nella funzione cancella(). Questo ci porta direttamente alla realizzazione dei famigerati scroller.

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.

Sommario - Parte 1 - Parte 2 - Parte 3 - Parte 5 - Parte 6 - Parte 7