Gli eventi consentono di specificare quando - ed in quali condizioni (per esempio all’apertura di una pagina web, quando l’utente clicca su un pulsante, quando si muove il mouse su un determinato oggetto, e così via…) - un determinato script deve essere eseguito.
A differenza di quanto visto sinora, gli eventi non vengono definiti all’interno della tag <SCRIPT> ma vengono generalmente immersi (a parte qualche caso) nel codice HTML della pagina web.
Provate a creare una pagina web utilizzando il codice che segue:
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT Language="Javascript">
<!--
alert('Benvenuto!');
//--></SCRIPT>
<center>
<img src="pcopen.gif" onmouseover="alert('Hai spostato il puntatore del mouse sull\'immagine')"></img>
</center>
<a href="javascript:alert('Hai cliccato')">Clicca qui</a><br>
<a href="http://www.pcopen.it" onclick="alert('Stai per raggiungere il sito di PC Open')">Vai al sito web di PC Open...</a><br>
</BODY>
</HTML>
Esempio 2 - 02_eventi.html
In questo caso, il primo script ad essere eseguito è quello inserito immediatamente dopo l’apertura della tag <BODY>: l’istruzione alert('Benvenuto!') mostrerà al visitatore un messaggio iniziale di benvenuto.
L’esempio ci permette di provare sul campo l’utilizzo degli eventi: a tal proposito, ci si può subito rendere conto di come gli eventi JavaScript siano utilizzati all’interno del codice HTML.
Onmouseover e Onclick sono due eventi: il primo viene attivato non appena l’utente porta il puntatore del mouse sull’oggetto cui la tag HTML fa riferimento; il secondo evento ha luogo quando l’utente “fa clic” con il tasto sinistro del mouse.
Nel nostro esempio, l’evento Onmouseover viene attivato non appena il visitatore della nostra pagina web sposti il puntatore del mouse sull’immagine raffigurante il logo di PC Open (pcopen.gif). Si noti come l’evento JavaScript è stato immerso direttamente nella tag HTML <IMG> che consente la visualizzazione di un’immagine all’interno di una pagina web.
Analogamente, l’evento Onclick è inserito in una tag anchor <A HREF… ed attivato non appena l’utente clicca sul link (nel nostro esempio, viene visualizzato il messaggio “Stai per raggiungere il sito di PC Open” prima di indirizzare il browser verso l’URL indicato nella tag anchor).
Inizialmente JavaScript metteva a disposizione del programmatore solo pochi eventi. Questi, inoltre, potevano essere abbinati ad un numero molto limitato di tag HTML. Le nuove versioni di Internet Explorer hanno esteso la possibilità d’uso degli eventi di JavaScript anche a numerose altre tag HTML mentre Netscape, di contro, è rimasto fedele al passato.
Suggeriamo, per questo motivo, di effettuare test di compatibilità delle proprie pagine web sulle varie versioni dei browser Internet.
Come abbiamo avuto modo di apprendere, un evento può richiamare una ed una sola istruzione (nell’esempio precedente, sia l’evento Onmouseover che l’evento Onclick, invocano la visualizzazione di un messaggio d’avviso mediante l’uso dell’istruzione alert). Accade però molto spesso che le operazioni che debbono essere eseguite al verificarsi di un certo evento siano diverse, assolutamente non rappresentabili mediante un’unica istruzione.
In questo caso è necessario ricorrere all’uso delle funzioni (handler o gestori di eventi): si tratta di porzioni ben definite di codice che possono ricevere in ingresso dei dati da elaborare e restituiscono in uscita, dopo l'esecuzione delle istruzioni previste, un certo risultato.
Nel caso in cui un evento debba eseguire una serie di istruzioni, tali righe di codice vengono racchiuse in un’unica funzione, generalmente definita nell’intestazione della pagina web o nel corpo della pagina HTML. L’evento farà poi riferimento alla funzione definita in precedenza. Ad esempio Onclick=”mia_funzione()” invocherà, alla pressione del tasto sinistro del mouse, la funzione denominata mia_funzione.
Un esempio concreto contribuirà a comprendere meglio il concetto:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Inizio del codice Javascript
function msgbox (testo) {
alert (testo) }
// - Fine del codice JavaScript - -->
</SCRIPT>
</HEAD>
<BODY>
<p align="center">
<a href="http://www.pcopen.it" onclick="msgbox('State per visitare il sito web di PC Open')">PC Open</a><br>
<a href="http://www.01net.it" onclick="msgbox('State per visitare 01Net, il sito web del gruppo editoriale Agepe rivolto ai professionisti dell\'IT e del web')">01Net</a><br>
<a href="http://www.digifocus.it" onclick="msgbox('State per visitare Digifocus: tutte le informazioni per i professionisti dell\' immagine.')">Digifocus</a><br>
<a href="http://www.ilsoftware.it" onclick="msgbox('State per visitare IlSoftware.it: il sito italiano interamente dedicato al mondo del software. ')">IlSoftware.it</a><br>
</p>
</BODY>
</HTML>
Esempio 3 - 03_funzioni.html
Nell’esempio 3, abbiamo definito una funzione msgbox contenente un’unica istruzione. Tale funzione viene richiamata da parte dell’evento onclick, inserito in ogni tag <A>. La funzione msgbox, inoltre, riceve in ingresso il testo che deve essere mostrato nella finestra d’allerta.
Altri esempi:
- Come richiamare una funzione: 03_1_funzioni.html;
- Passaggio di due argomenti ad una funzione con successiva restituzione di un risultato da parte della funzione: 03_2_funzioni.html.
Eventi importanti
onClick |
Consente il rilevamento di un clic del mouse |
onDblClick |
Consente il rilevamento di un doppio clic del mouse |
onKeyDown |
Permette il rilevamento della pressione di un tasto |
onLoad |
Evento attivato in fase di caricamento della pagina web |
onMouseOut |
Il puntatore del mouse si sta allontanando da un'area specifica (ad esempio un'immagine od un collegamento) |
onMouseOver |
Il puntatore del mouse è stato spostato su un'area specifica (ad esempio un'immagine od un collegamento) |
|