BETA WebTech

Corso JavaScript

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 eventoattributol'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/books

    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


    Logo Corsi di BETAPer saperne di più sui corsi di BETA

  • Copertina Sommario Internet ID Informazioni Browser
    Copyright © 1994-97 BETA. Tutti i diritti sono riservati. BETA Sul Web: http://www.beta.it.