.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Il primo script che vi presento nel nuovo anno è un ticker news simile a tanti altri che avete visto realizzati in JAVA da molti quotidiani e agenzie. Farlo in JavaScript però consente di non appesantire il browser con delle CLASS da scaricare perché tutto il codice che serve è già contenuto nel normale sorgente della pagina.

      L'uso dello script è semplicissimo.
      È sufficiente impostare i testi ed i links delle news, oltre a tre variabili di controllo:
       - NumCaratteri è una variabile numerica: il suo valore dev'essere maggiore o uguale alla lunghezza del più grande testo; vi consiglio di impostarla sempre ad un valore leggermente più grande (anche 10 in più sono sufficienti);
       - Intervallo è il tempo di persistenza della news, cioè il tempo che il testo resta fermo e cliccabile;
       - Velocità è la velocità di scorrimente dei testi; i valori consigliabili variano da 20 a 100 millisecondi per avere una velocità maggiore con valori bassi e più fluida con valori alti;
      Segue l'array che contiene i testi ed i links. La struttura è semplicissima:

news[c++] = new Array("testo della news","link della news");

      L'unica accortezza che dovete prendere nell'array consiste nell'evitare i doppi apici perché vengono utilizzati dallo script come delimitatori di stringa. Se necessario usate \" come ho fatto nell'esempio nella terza news.
      È presente inoltre un evento onLoad() nel <BODY .... > del documento per consentire allo script di iniziare a ruotare le notizie.
      L'unica altra modifica che potreste aver bisogno di fare consiste nella larghezza del livello che io ho preimpostato a 500 pixel, se i vostri testi sono molto lunghi, dovete modificare il valore del parametro width nel <DIV>, mentre l'altezza (height) andrà modificata solo se usate un carattere più grande degli 11 pixel che ho preimpostato nello stile.
      A proposito dello stile: ho usato, per l'esempio, un Verdana bold nero di 11 pixel, basterà modificarlo di conseguenza o riutilizzare uno degli stili della vostra pagina, tenete conto che se avete definito degli stili anche per i links (A, A:hover, A:visited) probabilmente dovrete togliere il CLASS dalla riga 51 dello script.

      Vediamo ora lo script, velocemente perché è abbastanza semplice.
      Nella prima riga ci sono delle variabili che non andranno modificate, ma lasciate in quella posizione.
      Segue la sezione che contiene le variabili da personalizzare come abbiamo già visto.
      Subito dopo ci sono due cicli for ( ... ): il primo script genera una stringa che contiene tanti spazi quanti abbiamo definito nella variabile NumCaratteri; questa stringa viene utilizzata dal ciclo successivo che genera a sua volta un'altra stringa (display) contenente tutti i testi delle news più il primo che è necessario per far ruotare l'ultima notizia.
      Segue la funzione Inizia() che viene eseguita al caricamento del documento, questa si occupa semplicemente di individuare il livello con la giusta sintassi per il browser in uso e legarla ad una variabile come abbiamo già visto in tanti altri script che usano i livelli.
      La seconda riga della funzione attiva il ticker eseguendo la funzione RuotaNews().
      Questa è la funzione principale dello script: pos è la variabile che contiene la posizione del primo carattere visualizzato della stringa display riempita poche righe prima. l'if ( ... ) controlla se il carattere visualizzato corrisponde al primo carattere delle singole news, in tal caso esegue la funzione Scrivi() passandogli come parametro il link i cui valori (di HREF e testo) vengono pescati dall'array news(). Se invece la posizione è intermedia invoca sempre la funzione Scrivi() passandogli una sottostringa di NumCaratteri della stringa display. In quest'ultimo caso tutti gli spazi vengono sostituiti con degli   per consentire ai testi di muoversi, dato che gli spazi consecutivi vengono ignorati in HTML. Notate infine che il testo è cliccabile solo quando la news è ferma, questo per non complicare lo script, rallentandolo perché lavora su stringhe, perché se avessi inserito tutti i links nella variabile display avrei dovuto ogni volta intercettare ed eliminare il tag <A HREF >...</A>.
      La riga successiva incrementa la variabile pos che subito dopo viene reimpostata a zero (quindi alla prima news) se tutto l'array è già stato scrollato.
      Infine vengono attivati i setTimeout() che di fatto realizzano lo scrolling, il primo serve a tenere fermo il testo, cliccabile, il secondo riesegue la funzione per far scorrere i testi.

      L'ultima funzione Scrivi(testo) si occupa semplicemente di scrivere il testo o il link nel livello; lo <SPAN> è necessario solo per Netscape perché non applica lo stile definito nel tag del livello al testo quando viene scritto con document.write().

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!