Lo script che presentiamo permette di realizzare un messaggio di testo dinamico all'interno di un text field con un effetto simile ai cartelloni delle stazioni ferroviarie. Può essere utile nei casi in cui si voglia mettere in risalto una frase o una particolare informazione all'interno di una pagina web.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il file di esempio contiene, tra i tag <head>, il codice Javascript vero e proprio, mentre tra i tag <body> sono contenute le informazioni relative al text field. Ma procediamo con ordine:
All'interno dei tag <head> inseriamo questo codice:
<script type="text/javascript" language="javascript">
var message = new Array()
message[0]="HTML.it, il sito italiano sul Web publishing ..."
message[1]="... w w w . h t m l . i t ... "
var standstill=2000
var i_substring=0
var i_message=0
var i_letter=0
var messagelength
var content_corrcet=""
var content_chaos=""
var randomorder=new Array()
for (i=0;i<=200;i++) {
randomorder[i]=i
}
function getrandomorder(range) {
for (i=0;i<=200;i++) {
randomorder[i]=i
}
for (i=0;i<=range;i++) {
var firstvalue= Math.floor(range*Math.random())
var secondvalue= Math.floor(range*Math.random())
var cachevalue=randomorder[firstvalue]
randomorder[firstvalue]=randomorder[secondvalue]
randomorder[secondvalue]=cachevalue
}
}
function makechaos() {
messagelength=message[i_message].length-1
getrandomorder(messagelength)
content_correct=message[i_message]
content_chaos=""
for (i=0;i<=message[i_message].length-1;i++) {
content_chaos+=content_correct.substring(randomorder[i],randomorder[i]+1)
}
document.order.thismessage.value=content_chaos
makecorrcet()
}
function makecorrcet() {
if (i_letter<=messagelength) {
var front_chaos=content_chaos.substring(0,randomorder[i_letter])
var
letter=content_correct.substring(randomorder[i_letter],randomorder[i_letter]+1)
var
back_chaos=content_chaos.substring(randomorder[i_letter]+1,messagelength)
content_chaos=front_chaos+letter+back_chaos
document.order.thismessage.value=content_chaos
i_letter++
var timer=setTimeout("makecorrcet()",30)
}
else {
clearTimeout(timer)
i_letter=0
var timer=setTimeout("changemessage()", standstill)
}
}
function changemessage() {
i_message++
if (i_message>message.length-1) {
i_message=0
}
makechaos()
}
</script>
Vediamo adesso quali sono le parti che possono essere modificate secondo le nostre esigenze.
Potremo inserire messaggi di testo personalizzati. Basterà modificare questa stringa di codice:
message[0]="HTML.it, il sito italiano sul Web publishing ..."
message[1]="... w w w . h t m l . i t ... "
Come avrete notato l'esempio pratico è impostato per due messaggi. Nel caso volessimo aggiungerne degli altri basterà inserire delle stringhe simili a quelle appena analizzate stando attenti a seguire la numerazione progressiva:
message[0]="HTML.it, il sito italiano sul Web publishing ..."
message[1]="... w w w . h t m l . i t ... "
message[2]="ADSL POINT: le milgiori e più convenienti offerte ADSL italiane ..."
message[3]="...http://adsl.html.it..."
Per variare il tempo di transizione da un messaggio all'altro dovremo modificare il valore di questa stringa:
var standstill=2000 (in millisecondi quindi 2000 = 2 secondi)
Il resto del codice non va modificato.
Impostato lo script all'interno dei tag <head> è necessario aggiungere il codice HTML necessario per creare il text field all'interno del quale compariranno i messaggi. Questo codice va inserito nel <body> del nostro documento:
<form name="order">
<input type="text" size=55 name="thismessage" style="font-family:Courier;font-size:9pt;color:red;font-weight:bold;background-color:FFFFCC">
</form>
Attraverso la modifica di questo codice saremo in grado di cambiare la lunghezza del campo di testo ed il suo colore di sfondo; il tipo di carattere, la grandezza, il colore, lo stile del nostro testo. Ma vediamo in dettaglio:
size=55
indica la lunghezza del text field
background-color:FFFFCC
indica il colore (solo con IE) che avrà il text field ( espresso in valori esadecimali)
font-family:Courier
indica il tipo di carattere da usare
font-size:9pt
la grandezza del testo
color:red
il colore del testo (solo con IE)
font-weight:bold
indica lo stile.
Perchè lo script produca i suoi effetti è necessario inserire all'interno del tag <body> il gestore di eventi onload:
onLoad="makechaos()"
Questa operazione è fondamentale ai fini di un corretto funzionamento dello script.onLoad="makechaos()"
