La programmazione lato client con JavaScript è strettamente legata al DOM ( Document Object Model ) del browser e quindi, anche se è stato quasi tutto standardizzato, occorre prestare molta attenzione alle differenze che si possono trovare con i vari browser. In questo articolo vedremo di spiegare come gestire gli eventi attraverso dei semplici esempi. Vediamo quindi i vari eventi che è possibile intercettare:
- onClick – attiva un’azione al click su un elemento.
- onChange – attiva un’azione quando il contenuto di un elemento viene cambiato.
- onLoad – applicabile al tag BODY, avviene al caricamento della pagina.
- onUnload – applicabile al tag BODY, avviene alla chiusura della pagina.
- OnMouseOver – attiva un’azione quando il mouse viene posizionato sopra un elemento.
- onMouseOut – attiva un’azione quando il mouse abbandona un elemento.
- onSubmit – applicabile al tag FORM, avviene alla spedizione di un modulo.
Ad esempio possiamo visualizzare un messaggio prima di un download:
<html>
<head><title>Download</title></head>
<body>
<a href="XXXXX.XXX" onClick="alert('Ma complimenti!!!');">
Download XXXXX.XXX</a>
</body>
</html>
oppure possiamo validare i dati inseriti dall’utente prima di spedirli:
<html>
<head><title>Registrazione</title></head>
<script language="javascript">
function validaDati()
{
nome = document.registrazione.nomeUtente.value;
pass1 = document.registrazione.passUtente1.value;
pass2 = document.registrazione.passUtente2.value;
if (nome.length < 3 || nome.length > 20)
{
alert("Utente non valido!");
return false;
}
if (pass1.legth < 3)
{
alert("Password non valida!");
return false;
}
if (pass1 != pass2)
{
alert("Le password non coincidono!");
return false;
}
if (!confirm("Continuare a registrare " + nome + "?"))
return false;
return true;
}
</script>
<body>
<form name="registrazione" action="xxxxx.php"
method="post" onSubmit="return validaDati()">
Nome utente: <input type="text" name="nomeUtente"><br>
Password: <input type="password" name="passUtente1"><br>
Conferma Password: <input type="password" name="passUtente2">
<br><br>
<input type="submit" value="Registrazione">
</form>
</body>
</html>
Il cuore di tutta la procedura è il gestore dell’evento onClick nel FORM, in base al valore restituito ( true o false ) il processo di registrazione sarà portato avanti oppure interrotto.
