CORSO DI JAVASCRIPT
Quarta Parte -
Gli eventi, la loro gestione e gli attributi che sovraintendono ad un corretto
funzionamento ed utilizzo di essi. Analisi degli attributi: onBlur,
onChange, onClick, onFocus, onLoad, on MouseOver e onMouseOut, onSelect,
onSubmit, onUnLoad.
di Luciano Giustini
Nota - La pagina si presta ad essere stampata: consiglio questa soluzione per
meglio comprendere il codice e la struttura dei paragrafi. Può essere ancora meglio affiancare la versione elettronica con
quella cartacea per gli esempi inseriti da salvare. Il Corso è anche pubblicato con struttura frame su Web alla URL http://www.beta.it/online/Corsi/js-11
Abbiamo visto nella prima e seconda parte come scrivere la nostra prima funzione in JavaScript, la sintassi e
gli errori, e alcune indicazioni per le dichiarazioni. Abbiamo visto nella
terza parte i comandi di cicli e iterazioni for, while, i
comandi condizionali if..else e la definizione estesa delle funzioni.
Vediamo ora da vicino gli eventi, la loro gestione e gli attributi che sovraintendono ad un corretto
funzionamento ed utilizzo di essi.
Ricordo che questo corso e' di JavaScript 1.0 e 1.1, non sono quindi inclusi gli ultimi
"arrivi" della versione 1.2, che include diversi nuovi oggetti. La mia scelta è però
dettata anche da motivi di compatibilità: scrivere JavaScript 1.2 oggi equivale a rendere
queste funzioni inusabili da client Netscape 2.0 e soprattutto 3.0, che è ancora
il più diffuso, per non parlare di Internet Explorer 3 e 4 (quest'ultimo supporta
solo alcune delle funzioni JavaScript 1.2). Il mio consiglio è quindi di usare funzioni della versione 1.2
solo quando siete veramente certi che le pagine verranno lette solo da client Netscape 4.0 (o
Communicator, che è la stessa cosa).
Gestione degli eventi in JavaScript
JavaScript ha esteso il linguaggio HTML introducendo alcuni nuovi attributi di eventi.
Questi nuovi attributi lavorano insieme alle etichette di HTML come per i link e gli elementi delle form.
Gli eventi si dividono in alcune diverse categorie:
- Eventi di documento
- Apertura e chiusura di documenti
- Link
- Chiamate di link
- Eventi di form
- Eventi dovuti alla pressione di bottoni, bottoni di opzioni, caselle
di controllo, bottoni di invio o di reset.
- Eventi di disattivazione, attivazione e modifica in campi di testo, aree di testo e liste di selezione.
- Eventi di selezione in campi e aree di testo.
- Eventi di immagini
- Caricamento di immagini, errori o fallimento del caricamento
- Eventi del mouse
- Attivazione e disattivazione di link
NOTA
HTML è un linguaggio di tipo case-insensitive. Anche le eventuali etichette
annidate dentro tag HTML seguono la stessa regola. Un gestore di eventi come
onClick può essere scritto alternativamente onclick o ONCLICK dentro un comando HTML.
|
La seguente tabella mostra tutti i gestori di eventi e i loro metodi di chiamata.
| nome evento | attributo | l'evento si produce quando |
| evento Blur |
onBlur |
l'input di un elemento della form non è più evidenziato |
| evento Change |
onChange |
cambia il valore di un testo, di un'area di testo, o di un elemento
di una lista di selezione |
| evento Click |
onClick |
si fa click su di un elemento di una form o su un link |
| evento Focus |
onFocus |
l'input di un elemento della form viene evidenziato |
| evento Load |
onLoad |
un documento viene caricato correttamente |
| evento Mouseover |
onMouseOver |
il puntatore del mouse si muove su un link |
| evento Mouseout |
onMouseOut |
il puntatore del mouse si sposta da un link |
| evento Select |
onSelect |
si seleziona un campo di input di un elemento della form |
| evento Submit |
onSubmit |
si invia una form |
| evento Unload |
onUnload |
viene chiuso il documento corrente, ovvero viene caricato un nuovo
documento |
onBlur
Perdita di evidenziazione nel campo
L'attributo di evento onBlur può essere utilizzato con le seguenti etichette HTML:
- <INPUT TYPE="..." onBlur="expr|function()">
- <TEXTAREA onBlur="expr|function()">..</TEXTAREA>
- <SELECT onBlur="expr|function()">..<OPTION>..</SELECT>
Questo attributo stabilisce l'esecuzione di un comando o di una funzione JavaScript quando un campo in una form HTML perde
la sua evidenziazione, cioè quando l'utente abbandona il campo per esempio facendo click su un altro campo della
stessa form, su un'altra form o semplicemente perchè ha premuto il tasto del mouse
in un punto qualsiasi del browser, oppure infine perchè si è premuto Invio.
onChange
Cambiamento di valore di un campo o una selezione
L'attributo di evento onChange può essere utilizzato con le seguenti etichette HTML:
- <INPUT TYPE="..." onChange="expr|function()">
- <TEXTAREA onChange="expr|function()">..</TEXTAREA>
- <SELECT onChange="expr|function()">..<OPTION>..</SELECT>
onChange stabilisce l'esecuzione di un'espressione JavaScript quando un campo in una form HTML
non è più evidenziato e il valore del campo è cambiato. Vediamo un breve esempio applicato
a una form di selezione con un unico campo.
(pr4_e1)
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function selCh() {
var selIdx = document.forms[0].mrsp.selectedIndex;
var newSel = document.forms[0].mrsp.options[selIdx].text;
alert("La selezione e' cambiata a: " + newSel);
}
//-->
</SCRIPT>
<BODY>
<H4>Esempio di un evento onChange</H4>
<FORM>
<SELECT NAME="mrsp" onChange="selCh()">
<OPTION>Signore
<OPTION>Signora
<OPTION>Signorina
</SELECT>Signore
</FORM>
</BODY>
</HTML>
This
La nota importante in questo esempio è che si può passare la proprietà this
alla funzione selCh() per rendere più compatto il codice, senza rendere necessaria la
chiamata alla form nela funzione. Questa facilità si ripaga però con il fatto di passare al JavaScript 1.1 poichè
this, infatti,
è visto solo quindi da Netscape 3.0, e per quanto riguarda MSIE solo dalla versione 4.
La proprietà this si riferisce al valore corrente nel campo. Nell'esempio quindi la riga
contenente onChange potrebbe essere riscritta così:
<SELECT NAME="mrsp" onChange="selCh(this.value)">
Dove la proprietà value registra il valore letterale del campo sotteso.
onClick
Risposta alla pressione di pulsanti e alle attivazioni di link
L'attributo onClick può essere utilizzato con le seguenti etichette HTML:
- <A HREF="URL" onClick="expr|function()">..</A>
- <INPUT TYPE="checkbox" onClick="expr|function()">
- <INPUT TYPE="radio" onClick="expr|function()">
- <INPUT TYPE="reset" onClick="expr|function()">
- <INPUT TYPE="submit" onClick="expr|function()">
- <INPUT TYPE="button" onClick="expr|function()">
onClick stabilisce l'esecuzione del codice JavaScript quando l'utente fa click su un oggetto
come link, un pulsante di reset, una casella di controllo, ecc. Nel caso delle caselle di controllo
e dei pulsanti di opzione si genera un evento onClick quando un elemento viene scelto o attivato.
Da notare che onClick controlla sia l'attivazione sia la disattivazione delle caselle.
Per verificare solamente l'attivazione di una casella,
come la CheckBox, si può usare la proprietà checked che conterrà un
valore ON se la casella è attiva.
Da notare anche che il fatto di esistere un checked dentro un elemento non
causa automaticamente la chiamata di funzione JavaScript. Infatti onClick agisce solo
quando l'utente genera manualmente un click con il suo mouse.
NOTA
Navigator 3.0 ha modificato l'attributo di evento onClick così che può
restituire un valore true o false che a sua volta controlla se il comando
URL o JavaScript nella parte href del link dev'essere attivato o meno.
Per esempio questo pezzo di codice utilizza il metodo confirm() per
chiedere all'utente se caricare una pagina o meno:
<A HREF="http://www.beta.it/publish" onClick="return confirm('Questa
pagina richiede Netscape Navigator 3.0. Continuare?')"> BETA Publish </A>
|
onFocus
Riconoscimento del campo evidenziato
L'attributo di evento onFocus può essere utilizzato con le seguenti etichette HTML:
- <INPUT TYPE="..." onFocus="expr|function()">
- <SELECT onFocus="expr|function()">..<OPTION>..</SELECT>
- <TEXTAREA onFocus="expr|function()">..</TEXTAREA>
onFocus permette a un evento di essere associato all'evidenziazione di un campo, come quando
l'utente seleziona il campo col mouse oppure quando lo raggiunge con l'uso del tasto Tab.
Nota - La selezione di un elemento all'interno del campo è un evento di tipo select, non un evento di focus.
onLoad
Eventi di caricamento di documenti
L'attributo di evento onLoad può essere usato all'interno delle seguenti etichette HTML:
- <BODY onLoad="expr|function()">..</BODY>
- <FRAMESET>..<FRAME onLoad="expr|function()">..</FRAMESET>
L'evento onLoad occorre quando il client Web ha finito il caricamento del testo di un
documento in modo corretto e completo, nella finestra corrente o nel frameset corrente.
TRUCCHI E CONSIGLI
L'evento onLoad non può servire per scrivere documenti
perchè si produce dopo che essi sono stati caricati. Può però essere utilizzato per azionare
funzioni e così via solo dopo il corretto caricamento, evitando per esempio
l'avvio di funzioni dopo che alcune parti del documento (magari contenenti variabili a noi utili) sono state "eluse" dalla pressione del tasto ESC. Alcuni siti Web
definiscono una variabile globale utilizzando un evento onLoad per assicurarsi
che l'intero documento sia stato caricato prima di chiamare
qualunque funzione JavaScript definita all'interno del documento. In questo modo si riduce fortemente il rischio di errori
per documenti incompleti.
|
onMouseOver e onMouseOut
Gestione di eventi del mouse
L'attributo onMouseOver permette di invocare un'espressione JavaScript quando il
cursore del mouse è posizionato su un link attivo. Per contro, onMouseOut, introdotto
in Netscape 3.0, produce un evento quando il cursore del mouse si sposta da
un link su cui si trovava.
- <A HREF=".." onMouseOver="expr|function()">..</A>
- <A HREF=".." onMouseOut="expr|function()">..</A>
onMouseOver rende possibile l'esecuzione di un comando JavaScript, come una chiamata di funzione,
quando l'utente è posizionato su un link attivo che possiede l'attributo in oggetto.
Gli eventi onMouseOver sono utili per modificare i messaggi nella barra di stato
e i campi di testo, e sono particolarmente efficaci nell'azionare eventi JavaScript mentre
l'utente sta valutando se fare click o meno su un particolare link.
Il tag
<A HREF="..">..
</A> può contenere immagini, animazioni, valori
particolarmente significativi o anche l'area di visualizzazione di un'applet Java.
Con onMouseOut si può quindi richiamare un altro comando JavaScript quando il
cursore del mouse si allontana dal nostro oggetto. Per esempio, nel caso suddetto potrebbe
far tornare l'immagine di partenza che sta ad indicare la decisione di non seguire quel link.
Per comprendere meglio questa tecnica, vediamo una possibile implementazione
di bottoni "sensibili". L'esempio è tratto dalle stesse pagine che state leggendo, nel
corrente numero di BETA (in particolare dalla pagina frm_up.htm, alcune parti non
importanti ai fini dell'esempio sono state tolte, così come il numero di funzioni
onMouseOver è stato ridotto per chiarezza)
(pr4_e2)
<HTML>
<HEAD>
<TITLE>BETA - Upper Frame</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
window.onError=null;
var cop1 = new Image(100,100) ; cop1.src = "198cjs1.gif" ;
var cop2 = new Image(100,100) ; cop2.src = "198cjs2.gif" ;
function a_cop() { document.images[2].src=cop2.src; }
function b_cop() { document.images[2].src=cop1.src; }
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=720>
<TD><IMG SRC="../img/mbetamag.gif" ALT="BETA - La rivista ipertestuale
tecnica" WIDTH=200 HEIGHT=100 BORDER=0><IMG SRC="basesect.gif" WIDTH=74
HEIGHT=100 BORDER=0>
<A HREF="index.htm" onMouseOver="a_cop()" onMouseOut="b_cop()"
TARGET="_top"><IMG SRC="198cjs1.gif" ALT="Copertina" WIDTH=84
HEIGHT=100 BORDER=0></A>
</TD></TABLE>
</BODY>
</HTML>
Le due immagini invocate dalle due funzioni, rispettivamente attiva e passiva, e chiamate all'interno
del tag A..HREF sono nella directory
del numero corrente, e dovrete spostare anch'esse se salvate questo file in
una directory diversa. Ugualmente, se non sono presenti le altre immagini, che però non coinvolgono animazioni, apparira'
una immagine spezzata al loro posto. Niente di grave.
Vediamo alcune cose interessanti: a parte onError, che manda a null
qualsiasi evento di errore si dovesse presentare, tipicamente da evitare in fase
di debug ma utile a codice completato per evitare seccature agli utenti,
c'è il comando new, introdotto in Netscape 3.0, per creare nuovi oggetti
in questo caso di tipo Image; e il suffisso src, che serve ad evidenziare
nell'array delle immagini del documento il file che effettivamente dovrà essere usato.
La forzatura di una cache locale per le immagini (le due immagini attiva e passiva
vengono infatti caricate comunque,
indipendentemente dal fatto che l'utente le vedrà o meno),
a fronte di un maggior tempo richiesto dal caricamento, farà si che l'utente vedrà subito le immagini
animarsi al passaggio del mouse e non aspettare che vadano in cache,
quindi attendendo l'invio dal server.
onSelect
Eventi di selezione in un campo
L'attributo di evento onSelect può essere usato con le seguenti etichette HTML:
- <INPUT TYPE="TEXT" onSelect="expr|function()">
- <TEXTAREA onSelect="expr|function()">..</TEXTAREA>
La selezione del campo in questo attributo non significa semplicemente un click del mouse
su un campo ma piuttosto la selezione di testo all'interno del campo
realizzata evidenziando il testo stesso con l'uso del mouse
o della testiera.
onSubmit
Invio di form
L'attributo di evento onSubmit può essere usato solo con form container:
- <FORM onSubmit="expr|function()">..</FORM>
onSubmit si avvia alla pressione di un pulsante
<INPUT TYPE="SUBMIT" >,
che deve essere presente nelle form che spediscono dati ad un server remoto.
Ogni funzionalità di JavaScript si realizza nel client, e non sempre
è necessario inviare valori di form a un server se il proprio obiettivo
è limitato alla realizzazione di processi locali sui dati.
Se usato insieme a una funzione booleana l'invio di una form può essere bloccato, e ciò può essere utile
in processi di verifica di form. Senza JavaScript, una form può essere verificata solo sul server,
tramite uno script CGI. Si può
evitare la verifica da parte del server facendola preventivamente sul client, tramite appunto
JavaScript.
NOTA
Il lato client in JavaScript non può essere utilizzato per sviluppare soluzioni
basate su CGI. Tuttavia Netscape ha prodotto un software, LiveWire,
che include un modulo JavaScript per il lato server, con routine di accesso al database NSAPI
per soluzioni di tipo CGI. Per maggiori informazioni consultare developer.netscape.com
|
onUnLoad
Eventi di chiusura di documenti
L'attributo di evento onUnload può essere utilizzato con le seguenti etichette HTML:
- <BODY onUnLoad="expr|function()">..</BODY>
- <FRAMESET>..<FRAME onUnLoad="expr|function()">..</FRAMESET>
Questo attributo agisce in modo esattamente opposto a onLoad, descritto sopra,
poichè può invocare una funzione o un comando JavaScript quando l'utente
abbandona il documento corrente.
Nuovi eventi di immagini in Navigator 3.0
Per ultimo accenniamo ai nuovi "eventi di immagini" associati a un oggetto immagine
introdotti da Netscape versione 3.0 e utili in determinate occasioni.
Un oggetto immagine è un'immagine inline posta in un documento
attraverso l'etichetta
<IMG SRC="URL">
I file in formato GIF e JPEG sono allo stesso modo riconosciuti da Netscape
come immagini inline (ovvero riprodotte all'interno di una pagina Web).
| Attributo di evento |
L'evento occorre quando |
| onAbort |
L'utente fa click su un link o preme Stop o ESC mentre l'immagine corrente
viene caricata |
| onError |
Avviene un errore nel caricamento dell'immagine, cioè l'immagine
non esiste, è danneggiata, o il server che fornisce l'immagine ha
sospeso l'invio, e così via. |
| onLoad |
L'immagine è stata caricata nella pagina, immagini GIF animate
provocheranno un evento onLoad ogni volta che l'immagine ripete il primo
frame dell'animazione. |
Anche qui possiamo vedere un esempio da una delle pagine di BETA. L'attributo
onError sulle immagini è utilizzato dal documento di copertina
per stabilire se è presente oppure non è ancora stato scaricato il pacchetto delle
immagini comuni di BETA. In particolare una delle istruzioni è:
<IMG SRC="../img/upbare.gif" onError="alert('Attenzione: il pacchetto
immagini \'betaimga.zip\' non è presente!')">
Il client cerca prima di caricare l'immagine specificata,
quindi avvisa l'utente del fallimento tramite un alert lanciato dall'interno dell'etichetta stessa,
come abbiamo già visto fare. Attenzione come sempre agli apici singoli che all'interno
di una stringa che contiene già apici singoli devono essere preceduti dal \,
pena l'invalidamento dell'istruzione.
_______
Anche per questa volta abbiamo terminato; nella prossima puntata ci occuperemo
di un argomento molto importante: Oggetti, metodi e proprietà di JavaScript.
Vedremo il modello a oggetti di JavaScript, gli oggetti Navigator, interni e quelli riflessi
da HTML.
Alla prossima!
Fine Quarta parte
______________________________________________________________________________
BIBLIOGRAFIA E RIFERIMENTI
Nota: dal dicembre 1997 è possibile acquistare i libri tecnici (in versione originale) direttamente dal
sito di BETA grazie alla convenzione con Amazon.com, la più grande libreria online del mondo, che offre sconti dal
20 al 50% sui prezzi di copertina. L'indirizzo sul Web è http://www.beta.it/com/bookstore
Copyright © 1997-1998 Luciano Giustini. Tutti i diritti sono riservati. La redistribuzione, la copia e la pubblicazione di questo materiale
sono soggette a condizioni di proprietà letteraria e artistica dell'autore. E' permessa la
stampa e/o la copia per usi personali o no-profit. E' permessa la pubblicazione su altri siti
che non siano quello di BETA e dei suoi Mirror Ufficiali previa informazione all'autore ed esclusivamente per usi no-profit.
In tutti i casi è richiesto il mantenimento del formato originale senza modificazioni o aggiunte di alcun
genere, e la dicitura, nel o nei link, "BETA 1997 - Corso tecnico JavaScript 1.0 e 1.1 (Luciano Giustini)".
In qualsiasi altro caso fare riferimento al copyright di testata di BETA.
______________________________________________________________________________
Luciano Giustini è raggiungibile su Internet all'indirizzo l.giustini@beta.it
 Per saperne di più sui corsi di BETA
|
