Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Testo animato: macchina da scrivere

In questo articolo vedremo un simpatico e semplice script che permette di animare un testo facendolo comparire come se questo venisse digitato tramite una macchina da scrivere.
In altre parole realizzeremo una funzione Javascript che acquisito in input un testo, lo scriverà, un carattere per volta, all’interno di un contenitore: div, textarea o altro.
In fondo all’articolo è possibile provare o scaricare il codice completo.

La funzione che vedremo prende in input 3 parametri:
1 – id del campo dove stampare il testo
2 – il testo da stampare
3 – la velocità (espressa in millisecondi) di digitazione
Inoltre forniremo allo script un quarto parametro opzionale (numerico) ad indicare la posizione nella quale scrivere il prossimo carattere.

Vediamo subito il codice della funzione macchinaDaScrivere:

<script type='text/javascript>
function macchinaDaScrivere(id_campo, testo, velocita, posizione){
    var lunghezza = testo.length;
    posizione = posizione || 0;
    if(posizione<lunghezza){
        var carattere = testo.substring(posizione,posizione+1);
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";      
        setTimeout('macchinaDaScrivere("'+id_campo+'", "'+testo+'", '+velocita+', '+(posizione+1)+');', velocita);
    }else{       
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,lunghezza);
    }        
}
</script>

Analizziamo in maniera dettagliata la funzione Javascript macchinaDaScrivere.
Calcolo la lunghezza del testo da stampare e quindi imposto una variabile posizione ad indicare la posizione nel quale digitare il prossimo carattere.
Il cuore della funzione è chiuso all’interno di un if, valido fino a quando la posizione è minore della lunghezza del testo.
Nella variabile carattere imposto il prossimo carattere da stampare, utilizzando una substring:

var carattere = testo.substring(posizione,posizione+1);

A questo punto accodo il carattere in questione al testo già presente nel box contenitore identificato da id_campo:

document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";

La funzione è praticamente conclusa, non prima che questa venga richiamata con l’incremento della posizione. A tal proposito è ora chiaro il perchè della presenza del quarto parametro opzionale nella chiamata alla funzione; tale parametro alla prima chiamata varrà 0 (di default) e crescerà man mano che si avanzerà nel testo da digitare.
La funzione setTimeout utilizzerà il valore della variabile velocità per ritardare la scrittura del successivo carattere:

setTimeout('macchinaDaScrivere("'+id_campo+'","'+testo+'",'+velocita+','+(posizione+1)+');',velocita);

Infine è necessario notare la presenza di un carattere di underscore basso alla fine di ciascuna digitazione. E’ chiaro come questo carattere sia esclusivamente “ornamentale” e può essere facilmente rimosso dal codice.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
09/02/2021
14:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Letteratura, Lingua e Cultura Italiana - Lettere
09/02/2021
14:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere
09/02/2021
17:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere
09/02/2021
17:30
Esame Abilità Informatiche e Telematiche - Cds Letteratura, Arte, Musica e Spettacolo - Lettere
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×