Javascript: un semplice scroller


Ora vediamo un semplice scroller. Beh, non e' realmente uno scroller, ma credo sia migliore di un classico scroller. Clicca qui, poi premi il bottone back per ritornare qui: scroller

Questa e' la pagina HTML:

<html><head><title> JavaScript scroller</title>
<SCRIPT language="JavaScript">

<!-- // Please, feel free to copy, paste and use this script...
// This script was written by Wowarea: <http://www.wowarea.com>
// Begin the script!
// variables

var max=0;
textlength=465;

// array object

tl=new array1
(
// 1 2 3 4 5 6
// "123456789+123456789+123456789+123456789+123456789+123456789+1234",

"Salve! Come puoi vedere, ti sto mostrando un simpatico script...",
"Questo script e' una specie di scroller orizzontale!",
"In altre parole, il testo scorre in questo campo di form.",
"Puoi usarlo per puro divertimento o per annunci pubblicitari,",
"(invece dei banner per esempio).",
"Ok, mi fermo qui...beh...non voglio scocciarti ancora... ;)",
"*** Buon divertimento! ***",
"Oh, dimenticavo: non puoi fermare questo scroller!!!",
"Pssst...devi solo tornare alla pagina precedente... ;) "

);

var x=pos=pos2=0;
var len=tl[0].length;

function horiz_scroller() {

if (pos2==0) {

document.form1.text1.value="";
alert("Clicca qui per partire!");
pos2=0;

}

document.form1.text1.value=tl[x].substring(0,pos)+"_";
if (pos2==textlength) setTimeout("nothing()", 1);
if(pos++==len) {

pos=0;
setTimeout("horiz_scroller()",100);
x++;
if(x==max) x=0;
len=tl[x].length;

}

else

setTimeout("horiz_scroller()",40);
pos2++;

}

function nothing() {alert("CIAO!!!"); pos2=0};

// End -->
</SCRIPT></head>

<body bgcolor="#000000" text="#ffffff" onload="horiz_scroller()">
<br><br><br><br><br><br>
<form name="form1"><center>
<input type="text" name="text1" size=64></center>
</form>
</body>
</html>

Ok, vediamo come funziona

Come gia' sai, 'max' e 'textlength' sono delle variabili (delle scatole nere che contengono qualsiasi cosa tu voglia metterci dentro). Percio' parliamo di questo oggetto:

tl=new array1
(
// 1 2 3 4 5 6
// "123456789+123456789+123456789+123456789+123456789+123456789+1234",

"Salve! Come puoi vedere, ti sto mostrando un simpatico script...",
"Questo script e' una specie di scroller orizzontale!",
"In altre parole, il testo scorre in questo campo di form.",
"Puoi usarlo per puro divertimento o per annunci pubblicitari,",
"(invece dei banner per esempio).",
"Ok, mi fermo qui...beh...non voglio scocciarti ancora... ;)",
"*** Buon divertimento! ***",
"Oh, dimenticavo: non puoi fermare questo scroller!!!",
"Pssst...devi solo tornare alla pagina precedente... ;) "

);

function array1()

{

max=array1.arguments.length;
for (i=0; i<max; i++)
this[i]=array1.arguments[i];

}

Tramite l' operatore 'new', stai definendo un oggetto. Percio', tl= new array1() significa: tl e' una nuova istanza dell' oggetto che si chiama array1. Puoi costruire un tuo oggetto proprio oppure puoi usare un oggetto preesistente nel codice Javascript. Per definire un tuo oggetto, devi usare una funzione, con la quale puoi definire le caratteristiche di quell' oggetto. Poi devi usare l' operatore 'new'. Puoi anche fornire dei parametri alla funzione che stai definendo. Nell' esempio sopra, stai definendo una istanza dell' oggetto di tipo 'array1', e gli stai passando i seguenti parametri:

(
// 1 2 3 4 5 6
// "123456789+123456789+123456789+123456789+123456789+123456789+1234",
"Salve! Come puoi vedere, ti sto mostrando un simpatico script...",
"Questo script e' una specie di scroller orizzontale!",
"In altre parole, il testo scorre in questo campo di form.",
"Puoi usarlo per puro divertimento o per annunci pubblicitari,",
"(invece dei banner per esempio).",
"Ok, mi fermo qui...beh...non voglio scocciarti ancora... ;)",
"*** Buon divertimento! ***",
"Oh, dimenticavo: non puoi fermare questo scroller!!!",
"Pssst...devi solo tornare alla pagina precedente... ;) "

);

Ricorda: // significa commento, percio' il tuo browser ignorera' le prime 2 righe. Percio' i parametri cominciano da 'Salve'. Tutto quello che e' incluso tra parentesi rappresenta il set di parametri fornito.

function array1()

{

max=array1.arguments.length;
for (i=0; i<max; i++)
this[i]=array1.arguments[i];

}

Le istruzioni sopra descrivono il tuo oggetto. Arguments.length e' una proprieta' di array1, ed e' utile per determinare il numero di parametri passati alla funzione. In questo caso il valore di quella proprieta' e' un valore variabile. In altre parole, il valore di max dipende dal numero di parametri passati. Il loop for (conosci gia' i loop for, giusto?) 'costruisce' le caratteristiche dell' oggetto. 'This' e' una parola riservata Javascript, usata per definire l' oggetto corrente (array1).

Queste sono altre variabili:

var x=pos=pos2=0;
var len=tl[0].length;

'Length' ritorna il numero di elementi della stringa.

tl[x].substring(0,pos)+"_"

Nell' istruzione sopra, la parola riservata substring significa: 'prendi il pezzo di stringa che parte da 0 e finisce alla posizione 'pos', poi aggiungi "_".

setTimeout

Devi usare l' istruzione sopra, per permettere al browser di respirare! Se non la usi, i visitatori della tua pagina non potranno piu' far NULLA fino a quando lo script non finisce. Beh, potrebbero premere i tasti ctrl-alt-del keys, certo...

Ok, le cose piu' oscure sono chiare ora! (almeno spero).

Beh, non ho spiegato tutto lo script, perche' ritengo che sia piu' facile fare che capire...Percio' provalo magari cambiando qualcosa qui e li'...Buona fortuna!


      Home  Pag. prec.         Chi siamo?  Scrivici!

Copyright © 1998-2005 Wowarea