| HOME PAGE | CONTATTI | COLLABORA | ASP | PHP | HTML | CSS | PERL | JAVA | TCP/IP | RETI | LINUX | MANUALI| SPAZIO WEB |
|
CORSO DI JAVASCRIPT
Quarta ParteAbbiamo 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 JavaScriptJavaScript 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
La seguente tabella mostra tutti i gestori di eventi e i loro metodi di chiamata.
onBlurPerdita di evidenziazione nel campo
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. onChangeCambiamento di valore di un campo o una selezione
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.
onClickRisposta alla pressione di pulsanti e alle attivazioni di link
L'attributo onClick può essere utilizzato con le seguenti etichette HTML:
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.
onFocusRiconoscimento del campo evidenziato
L'attributo di evento onFocus può essere utilizzato con le seguenti etichette HTML:
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.
onLoadEventi di caricamento di documenti L'attributo di evento onLoad può essere usato all'interno delle seguenti etichette HTML:
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.
onMouseOver e onMouseOutGestione 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.
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. (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"> 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. onSelectEventi di selezione in un campo L'attributo di evento onSelect può essere usato con le seguenti etichette HTML:
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.
onSubmitInvio di form L'attributo di evento onSubmit può essere usato solo con form container:
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.
onUnLoadEventi di chiusura di documenti L'attributo di evento onUnload può essere utilizzato con le seguenti etichette HTML:
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.0Per 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">
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!
Torna al menù principale - Prossima lezione
|
|
|
|
