Gli eventi HTML e Javascript

Un evento HTML rappresenta qualcosa che accade nel browser o che fa l’utente. Alcuni esempi sono: la fine del caricamento di una pagina web nel browser, la modifica del contenuto di un campo HTML di input (ad es., di una casella di testo, un menu di scelta ecc.), il click di un bottone, il passaggio del mouse sopra uno specifico elemento HTML, ecc.

Quando in una pagina web accade un evento, si potrebbe volere fare qualcosa nel browser, nel senso che si vorrebbe vengano eseguite delle istruzioni che facciano una determinata cosa. Questo è reso possibile da Javascript.

Con l’accoppiata HTML-Javascript, è possibile associare l’esecuzione di istruzioni Javascript al verificarsi di un evento HTML, cioè sfruttare quello che viene detto il meccanismo della programmazione ad eventi.

L’HTML, infatti, permette di aggiungere agli elementi di una pagina HTML i gestori di evento, a cui è possibile assegnare l’esecuzione di istruzioni Javascript.

<button onclick="document.getElementById('console').innerHTML = 'Saluti da Javascript'">Saluta</button>
<p id="console"></p>

1 2	<button onclick="document.getElementById('console').innerHTML = 'Saluti da Javascript'">Saluta</button> <p id="console"></p>

Nell’esempio di sopra è stato inserito un gestore dell’evento “click del bottone” che, quando il bottone viene cliccato, manda in esecuzione l’istruzione Javascript ad esso assegnata, ossia l’inserimento della stringa dei saluti nel paragrafo con id=’console’.

Tipicamente, però, il codice Javascript che si vuole mandare in esecuzione è composto da più righe, in tal caso al gestore di evento viene assegnata una funzione che contiene il blocco di istruzioni da eseguire.

<!DOCTYPE html>
<html>
<body>
	<label>Insersisci max intero da generare...</label><br>
	<input type="text" id="testo" onfocus="resetta()">
	<button onclick="genera()" id="bottone">Genera numero</button>
	<p id="console"></p>	
	<script>
		function genera() {
			var ct = document.getElementById("testo"); //si procura il riferimento alla casella di testo
			var console = document.getElementById("console"); //si procura il riferimento al paragrafo in cui fornire gli output
			if(ct.value == "")
				console.innerHTML = "Errore: devi inserire il valore massimo dell'intero da generare.";
			else {
				var num_max = ct.value; //si procura il numero inserito nella casella di testo
				var num_generato = Math.floor((Math.random() * num_max) + 1); //estrea il numero
				console.innerHTML = "Numero estratto: " + num_generato; //visualizza il numero estratto
			}	
		}
		function resetta() {
			document.getElementById("testo").value = ""
			document.getElementById("console").innerHTML = "";
		}
	</script>
	</body>
</html>

<!DOCTYPE html>

<html>

<body>

<label>Insersisci max intero da generare...</label><br>

<button onclick="genera()" id="bottone">Genera numero</button>

function genera() {

var ct = document.getElementById("testo"); //si procura il riferimento alla casella di testo

var console = document.getElementById("console"); //si procura il riferimento al paragrafo in cui fornire gli output

if(ct.value == "")

console.innerHTML = "Errore: devi inserire il valore massimo dell'intero da generare.";

else {

var num_max = ct.value; //si procura il numero inserito nella casella di testo

var num_generato = Math.floor((Math.random() * num_max) + 1); //estrea il numero

console.innerHTML = "Numero estratto: " + num_generato; //visualizza il numero estratto

}

function resetta() {

document.getElementById("testo").value = ""

document.getElementById("console").innerHTML = "";

}

</script>

</body>

</html>

L’esempio di sopra produce una pagina come la seguente:

Lo script Javascript prevede che cliccando il bottone, se la casella di testo non è vuota, venga generato un numero casuale compreso fra zero e l’intero inserito (incluso), che viene visualizzato nella pagina. Il codice è commentato ed è autoesplicativo. Si fa notare solo che vengono utilizzati due gestori di evento:

onclick sul bottone, associato alla funzione genera() che produce il numero casuale e lo visualizza nella pagina; essa inoltre visualizza un messaggio di errore se la casella di testo è vuota.
onfocus nella casella di testo, associato alla funzione resetta() che cancella il contenuto della casella di testo quando il cursore viene portato in essa.

I due eventi dell’esempio di sopra, sono solo due dei molteplici eventi HTML disponibili. Per un elenco completo di tutti quelli disponibili si rimanda al seguente: link.

Gli eventi disponibili sono veramente tanti, ma per ricordare almeno quelli più utilizzati, diciamo che grazie al meccanismo degli eventi è possibile far fare qualcosa a Javascript nei seguenti casi più tipici:

ogni volta che una pagina viene caricata (onload);
ogni volta che una pagina viene chiusa (onunload);
quando un elemento viene cliccato (onclick);
quando il contenuto di un elemento di input cambia (onchange).

I modi con cui associare l’esecuzione di codice Javascript con gli eventi, anch’essi sono vari:

con un gestore di evento HTML che esegue codice Javascript direttamente;
con un gestore di evento HTML che chiama una funzione Javascript;
assegnando la funzione di gestione di evento agli elementi HTML.

I primi due modi sono stati già utilizzati nell’esempio precedente, vediamo ora anche un esempio dell’ultima modalità:

<!DOCTYPE html>
<html>
<body>
	<button id="saluta">Saluta</button>
	<script>
		var t = document.getElementById("saluta");
		t.onclick = function() {
			alert("Saluti!");
        }
	</script>
	</body>
</html>

<!DOCTYPE html>

<html>

<body>

<button id="saluta">Saluta</button>

var t = document.getElementById("saluta");

t.onclick = function() {

alert("Saluti!");

}

</script>

</body>

</html>

L’esempio di sopra produce il seguente risultato: quando nella pagina il bottone viene cliccato, viene visualizzata la finestra di alert. Si noti la particolare sintassi con cui è possibile assegnare una funzione Javascript ad un evento HTML operando solo in Javascript.

Articoli che ti potrebbero interessare