Spiegazione dell'esercizio

Visualizza la Demo →

Dichiarazione delle variabili

All'inizio del codice vengono dichiarate le variabili, quali il testo della canzone, la velocità dello scorrimento, e lo stato in cui si trova il codice (all'apertura della pagina è fermo).

var msg = "... Imagine there\'s no heaven It\'s easy if you try No hell below us ";
msg += "Above us only sky Imagine all the people Living for today ... ";
msg += "Imagine there\'s no countries It isn\'t hard to do Nothing to kill or die for ";
msg += "And no religion too Imagine all the people Living life in peace ...  ";
msg += "Imagine no possessions I wonder if you can No need for greed or hunger a  Brotherhood of man ";
msg += "Imagine all the people Sharing all the earth ... ";
msg += "You may say I\'m a dreamer But I\'m not the only one ";
msg += "I hope someday you\'ll join us And the world will be as one ...";
var pos1 = 0;
var v = 100; // La velocità iniziale è di 10 caratteri al secondo
var run = false;

La variabile pos1 serve per indicare a quale lettera del testo siamo arrivati nello scorrimento.

La variabile v (velocità) è impostata di default a 100, questo vuol dire che il codice scorrerà il testo, di una lettera ogni 100ms, quindi 0.1s.

Dichiarazione dei metodi

Dopo le variabili, vengono dichiarati i metodi per l'utilizzo del codice, e la modifica della velocità e dello stato.

function ripeti(el) {}

function ripeti(el) {
	if(run && el) return;
	run = true;
	t = document.getElementById('testo');
	t.value = msg.substring(pos1, pos1 + 32);
	pos1++;
	if (pos1 == msg.length + 32) pos1 = 0;
	a = setTimeout(ripeti, v);
}

La prima funzione è la funzione che gestisce la rotazione del testo, e viene chiamata quando la pagina è caricata.

if(run && el) return;

All'inizio della funzione controlliamo lo stato del codice, e come è stata dichiarata la funzione. Se run è impostata su false, allora l'if sarà invalidato, e la funzione continua l'esecuzione, mentre se run è settato su true (il ciclo è già in esecuzione) e el è presente (el viene passato alla funzione solo qundo viene richiamata dal bottone, quindi avrebbe la possibilità di sovrapporsi ad altri cicli) allora usciamo dalla funzione senza creare una'altro ciclo, prevenendo la creazione di cicli multipli, aumentando involontariamente la velocità.

run = true;

Dopo aver fatto i dovuti controlli, modifichiamo lo stato del codice, impostando run come true.

t = document.getElementById('testo');
t.value = msg.substring(pos1, pos1 + 32);

In questa parte prendiamo dal DOM l'elemento con id testo e gli diamo un valore che è equivalente ai primi 32 caratteri del testo, perché pos1 all'inizio è uguale a 0.

pos1++;
if (pos1 == msg.length + 32) pos1 = 0;

Con questo codice aumentiamo a ogni chiamata della funzione il valore di pos1 codì da creare un'effetto scorrimento. Poi controlliamo che il valore non superi la lunghezza del testo di più di 32 (così da creare una riga vuota alla fine del testo, prima di ricominciare), e poi viene resettata a 0.

a = setTimeout(ripeti, v);

Alla fine, la parte più importante del codice, è la creazione del ciclo, col metodo setTimeout() che permette di richiamare la stessa funzione dopo un certo periodo di tempo (in millisecondi). Questo tempo è dettato dalla variabile v che può essere modificato esternamente.

function aumenta() {}

function aumenta() {
	v -= 10;
	if(v < 0) v = 0;
}

Questa funzione ci permette di aumentare la velocità, diminuendo il tempo di attesa fra un ciclo e l'altro. Per evitare valori negativi, dopo la sottrazione, facciamo un controllo e impostiamo a 0 la variabile v se minore di tale valore.

function diminuisci() {}

function diminuisci() {
	v += 10;
}

In questa funzione aumentiamo semplicemente il valore della variabile v per aumentare il tempo di attesa, e quindi diminuire la velocità.

function diminuisci() {}

function ferma() {
	clearTimeout(a);
	run = false;
}

Questa funzione ci permette di fermare il ciclo, utilizzando il metodo clearTimeout(), e impostando lo stato del codice a false, per poi poter riprenderlo chiamando la funzione ripeti().

Creiamo il murkup di base

<body onload="ripeti()" bgcolor="blanchedalmond">
	<h3>Testo scorrevole di una famosa canzone!</h3><hr>

	<input name="Text1" type="text" id="testo" size="30" style="border-color: #000000; background-color: #0000FF; border-style: solid; font-size: large; font-weight: bold">

	<button onClick="aumenta(this);">Aumenta velocità »</button>
	<button onClick="diminuisci(this);">Diminuisci velocità «</button>
	<button onClick="ferma(this);">Ferma</button>
	<button onClick="ripeti(this);">Avvia</button>
</body>

Per poter utilizzare il codice, abbiamo bisogno di un'input, e di quattor bottoni, per poter richiamare le funzioni.

<body onload="ripeti()" bgcolor="blanchedalmond">
	...
</body>

Nel codice del body abbiamo inserito il richiamo del metodo ripeti() quando la pagina viene caricata, così da far partire il codice alla fine del caricamento.

<input name="Text1" type="text" id="testo" size="30" style="border-color: #000000; background-color: #0000FF; border-style: solid; font-size: large; font-weight: bold">

Questo è il tag input dove al suo interno viene inserito il testo che viene fatto ruotare dal codice.

<button onClick="aumenta(this);">Aumenta velocità »</button>
<button onClick="diminuisci(this);">Diminuisci velocità «</button>
<button onClick="ferma(this);">Ferma</button>
<button onClick="ripeti(this);">Avvia</button>

Questi sono i quattro bottoni che gestiscono le quattro funzioni che gestiscono la velocità e lo stato. I metodi sono stati richiamati mettendo come argomento della funzione l'oggetto del DOM che l'ha richiamato.