Nella lezione precedente abbiamo visto come ogni programma sia costituito da un'interfaccia e da un codice. L'utente agisce sull'interfaccia (per esempio cliccando sul mouse) e in questo modo attiva il codice nascosto. A sua volta il codice nascosto agisce sull'interfaccia per rispondere alle azioni dell'utente (per esempio per modificare il valore visualizzato in una casella di testo).

Ciò che lega l'azione dell'utente sull'interfaccia all'esecuzione del codice prende il nome di evento. In generale un evento è qualsiasi operazione che l'utente può compiere su una pagina (cioè sull'interfaccia): fare click col mouse, modificare il contenuto di una casella di testo, passare col mouse sopra a una immagine, eccetera.

Consideriamo di nuovo l'esempio dell'immagine animata visto nelle lezioni precedenti:

In questo caso l'evento che fa eseguire la funzione muovi è il click col mouse dell'utente sull'immagine. Si noti la sintassi:

onclick = "nomefunzione()"

L'attributo onclick si chiama tecnicamente gestore di eventi (event handler). Si tratta di un attributo che può essere applicato a qualsiasi elemento di una pagina (paragrafi, immagini, tabelle etc.) e il suo significato è: quando l'utente fa click col mouse sull'elemento, viene eseguito il codice javascript della funzione scritta fra doppi apici.

Si noti che il gestore di eventi onclick non fa parte del linguaggio JS, ma dell'html. Si tratta infatti di un attributo universale, cioè applicabile come si è detto a qualsiasi elemento (come per esempio gli attributi class e id). Infatti, mentre il JS è case sensitive (cioè sensibile alla differenza fra maiuscole e minuscole), l'HTML non lo è: dunque i gestori di eventi possono essere scritti indifferentemente in maiuscolo o in minuscolo. Spesso infatti onclick viene indifferentemente scritto come onClick per separare visivamente meglio le due parti del nome.

Consideriamo adesso quest'altro esempio:

L'interfaccia è realizzata mediante un form in html nel seguente modo:

Notiamo in questo caso l'uso di due diversi gestori di eventi:

1. onChange: invocato quando il contenuto di una casella di testo viene modificato;
2. onClick: si attiva quando si clicca su una casella di testo;

Le corrispondenti funzioni associate agli eventi precedenti sono le seguenti:

La funzione celsconv viene attivata (in termine tecnico si dice chiamata) quando viene modificato il contenuto della casella di testo celsius, contenente la temperatura in gradi celsius (evento onChange). In modo perfettamente simmetrico fahrconv viene chiamata  quando viene modificato il contenuto della casella di testo fahreneit, contenente la temperatura in gradi fahreneit. Si noti che l'evento onChange viene "registrato" da JS solo quando si abbandona la casella (facendo click per esempio da qualche altra parte).

L'elenco dei gestori di eventi disponibili è vasto. Vediamo i principali (un elenco più esaustivo può essere trovato su W3school):

• onClick: attivato quando si clicca su un oggetto;
• onDblClick: attivato con un doppio click;
• onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse;
• onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato;
• onMouseOver: attivato quando il mouse si muove su un oggetto;
• onMouseOut: attivato quando il mouse si sposta da un oggetto;
• onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa;
• onMove: attivato quando un oggetto muove una finestra o un frame;
• onDragStart: evento attivato appena l'utente inizia a trascinare un oggetto;
• onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella finestra dello stesso browser o anche di un altro o anche sul Desktop;
• onDragEnter: attivato appena l'utente trascina un oggetto su un obiettivo valido dello stesso o di un altro browser;
• onDragOver: attivato quando l'utente trascina un oggetto su un obiettivo valido ad ospitarlo, ed è simile all'evento precedente, ma viene attivato dopo quello;
• onDragLeave: attivato quando l'utente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato;
• onDragEnd: attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
• onDrop: attivato quando il mouse si alza il tasto del mouse in seguito ad un'operazione di trascinamento;
• onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto;
• onKeyDown: attivato quando viene premuto il tasto;
• onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato;
• onHelp: attivato quando un utente preme il tasto F1;
• onChange: attivato quando il contenuto di un campo di un form o modulo è modificato;
• onPropertyChange: attivato quando cambia la proprietà di un elemento;
• onFocus: attivato quando un elemento si attiva (riceve il focus);
• onBlur: è l'opposto di onFocus - si attiva quando un elemento perde il focus
• onSelect: attivato quando si seleziona del testo all'interno di una casella di testo;
• onLoad: attivato al caricamento di un elemento sulla pagina;
• onUnload: contrario del precedente, è attivato quando un elemento viene scaricato;
• onResize: si attiva quando l'utente rimpicciolisce o ingrandisce una finestra o un frame;
• onScroll: attivato quando si effettua lo scrolling della pagina;
• onSubmit: attivato dal click su tasto di Invio di un form;
• onReset: attivato dal click su tasto di Annulla di un form.

Alcuni di questi gestori di eventi sono universali, nel senso che possono essere applicati praticamente a qualsiasi elemento di una pagina; altri invece sono specifici di un certo elemento.

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania