trucchi per html-testo scritto a macchina- di Eliana Argenti e Tommaso Bientinesi

EFFETTO DI TESTO CHE SIMULA LA MACCHINA DA SCRIVERE

Semplice messaggio con effetto macchina da scrivere Scritto da Eliana Argenti e Tommaso Bientinesi. Se per caso l'effetto non è immediatamente visibile sappiate che questo dipende dalla lentezza di caricamento della pagina da parte del browser
Il trucco che proponiamo non è scritto in Java, ma si tratta di un semplice javascript che, pur funzionando solo con Internet Explorer, permette la visualizzazione del testo anche con Netscape o Mozilla, pur senza l'effetto macchina da scrivere.
Nella rete è possibile trovare effetti typewriter scritti in Java, ma, a quanto ci risulta, sono a pagamento. Se qualcuno fosse a conoscenza di un programma gratuito è pregato di segnalarlo: pubblicheremo ben volentieri l'indirizzo del sito.
Tornando al nostro semplice script, osserviamo che si tratta di memorizzare in una variabile il contenuto del testo da visualizzare, di prelevare da tale testo un carattere alla volta e di farlo scrivere con un tempo di attesa appropriato nella posizione che abbiamo deciso.

Analizziamo il codice passo per passo:

Passo uno

Prepariamo il messaggio ed inseriamolo in uno span al quale dovremo dare obbligatoriamente un nome, mediante il seguente codice:
<span id="testo"> Semplice messaggio con effetto macchina da scrivere <br> Scritto da Eliana Argenti e Tommaso Bientinesi.... (scriviamo ciò che vogliamo)...</span>
Noi identifichiamo lo span con "testo". E' molto importante ricordare il nome perché ad esso faremo riferimento nel codice del programma.
Uno Span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo nella posizione stabilita dagli attributi LEFT (distanza dal lato sinistro dello schermo) e TOP (distanza dal lato superiore). All'interno dei tags <span> e </span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
Poiché Netscape non riconosce gli spans, ed usa invece i layers, noi non abbiamo inserito alcun attributo, ma abbiamo inserito lo span stesso all'interno di una tabella.

Passo due

Inserire, fra i tags <HEAD> ed </HEAD> il seguente codice javascript:

Passo tre

Ora non resta che cambiare così il tag <body>:

<body onload="vai();">

<script language="JavaScript">	Dichiarazione del fatto che si sta inserendo un codice JavaScript
var attesa = 120;	Variabile dove memorizzare il tempo di pausa in millisecondi
var messaggio='Semplice messaggio con effetto macchina da scrivere. Scritto da Eliana Argenti e Tommaso Bientinesi....';	Variabile dove memorizzare il testo da visualizzare con l'effetto macchina da scrivere. Notare che si tratta dello stesso messaggio che avevamo inserito nello span per fare in modo che, se per qualche motivo il codice non funzionasse, sia comunque possibile visualizzarlo interamente. NOTARE GLI APICI CHE RACCHIUDONO IL TESTO
var i=-1;	Variabile che funge da contatore per i caratteri della stringa. Viene inizializzata uguale a -1 per il motivo che vedremo in seguito
var cchar ="";	Variabile dove memorizzare il singolo carattere del testo
var visibile="";	Variabile dove memorizzare dinamicamente il contenuto del messaggio che si viene formando
function vai() {	Dichiarazione della funzione che ci permette di ottenere il risultato.
if (i < messaggio.length){	Se i è minore della lunghezza del messaggio allora...
i++	La i viene incrementata di 1. Poichè il suo valore iniziale era stato posto a -1, nel primo passaggio assume il valore 0 che rappresenta, per JavaScript, la posizione del primo carattere di una stringa.
cchar = messaggio.substr(i, 1);	Viene memorizzato nella variabile cchar il carattere che si trova nella posizione i
visibile = visibile + cchar;	La stringa da visualizzare viene incrementata del carattere copiato nell'istruzione precedente
setTimeout("vai()", attesa);	La funzione vai() viene richiamata ricorsivamente dopo una pausa dei millisecondi memorizzati nella variabile attesa (noi abbiamo scelto 120 millisecondi)
if(document.all.testo) document.all.testo.innerHTML = visibile;	NOTA BENE: l'istruzione va tutta in una riga. Permette la visualizzazione sullo schermo del testo del messaggio senza tag (come ad esempio <br>). I tag saranno interpretati come codice e correttamente visualizzati. Notare poi come, per la visualizzazione, sia necessario fare riferimento a testo, che è il nome dello span.
}	Parentesi di chiusura della selezione binaria (cioè è stata raggiunta la fine del messaggio)
else {	Altrimenti (si danno qui le istruzioni da seguire quando il messaggio è terminato)
return false	Termina la funzione
}	Chiusura di else
}	Fine funzione
</script>	Fine script.
NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole.