La gestione degli event

Su ciascun elemento del BOM è possibile associare del codice (in genere una funzione) che verrà esegui-

ta in seguito al verificarsi di un evento. Di seguito vediamone alcuni, associati agli oggetti più comuni.

: <FORM>

• onresetviene eseguito solo quando l’utente preme il tasto RESET nel form.

• onsubmitviene eseguito solo quando l’utente preme il tasto di INVIO o SUBMIT nel form.

: <INPUT TYPE=button>

• onblurviene eseguito quando si cambia il focus, per esempio premendo il tasto TAB si pas- sa a un altro componente del form.

• onclickviene eseguito quando l’utente clicca sul pulsante.

• onfocusviene eseguito quando il focus è attivo su quel particolare pulsante, cioè quando ci si posiziona sopra, per esempio mediante il pulsante TAB che serve proprio per spostare il focus.

• onmousedownviene eseguito al click del pulsante del mouse sull’oggetto.

• onmouseupviene eseguito al rilascio del pulsante sull’oggetto.

: <A HREF=...>

• onclickviene eseguito quando si clicca sulla frase o immagine oggetto di hyperlink.

• ondblclickviene eseguito quando si effettua il doppio click sulla frase o immagine ogget- to di hyperlink.

• onkeydownviene eseguito quando si preme INVIO e il focus è sulla frase o immagine ogget- to di hyperlink.

• onkeypressviene eseguito quando si preme un qualunque tasto della tastiera mentre il fo- cus è sulla frase o immagine oggetto di hyperlink.

• onkeyupviene eseguito quando si rilascia il tasto della tastiera mentre il focus è sulla frase o immagine oggetto di hyperlink.

• onmousedownviene eseguito quando si clicca con il mouse sulla frase o immagine oggetto di hyperlink.

• onmouseoutviene eseguito quando si esce dalla frase o immagine oggetto di hyperlink con il puntatore del mouse.

history PROPRIETÀ

current Indica il documento corrente nella cronologia

length Indica il numero di elementi memorizzati nella cronologia

next Indica il documento successivo nella cronologia

previous Indica il documento precedente nella cronologia

METODI

back() Carica il documento precedente nella cronologia

forward() Carica il documento successivo nella cronologia

go() Carica il documento posizionato in un cer to numero di posizioni indicate come parametro in avanti o indietro nella cronologia, a seconda che il numero sia positivo o negativo

• onmouseupviene eseguito quando si rilascia il tasto del mouse sulla frase o immagine ogget- to di hyperlink.

• onmouseoverviene eseguito quando si entra sulla frase o immagine oggetto di hyperlink con il puntatore del mouse.

: <INPUT TYPE=text>

• onblurviene eseguito quando si passa a un altro oggetto del frame; può avvenire quando si preme INVIO o si clicca su di un altro oggetto, oppure ancora mediante il tasto TAB.

• onchangeviene eseguito appena si tenta di modificare il contenuto della casella di testo.

• onfocusviene eseguito appena si entra sull’oggetto con il focus, quindi mediante il tasto TAB oppure con un click del mouse.

• onselectviene eseguito quando si seleziona del testo presente nella casella di testo.

: <INPUT TYPE=checkbox>

• onblur viene eseguito quando si passa a un altro oggetto del frame o dello stesso checkbox.

• onclickviene eseguito quando si seleziona una casella di controllo.

• onfocusviene eseguito appena il focus passa all’oggetto indicato, con un click del mouse op- pure ancora con il tasto TAB o freccia.

: <INPUT TYPE=radio>

• onblurviene eseguito quando si passa a un altro oggetto del frame o dello stesso radio.

• onclickviene eseguito quando si seleziona un oggetto dell’opzione radio.

: <TEXTAREA>

• onblurviene eseguito quando si esce dall’area di testo, cambiando così il focus.

• onchangeviene eseguito quando si scrive o modifica il contenuto dell’area di testo.

• onfocusviene eseguito quando si entra nell’oggetto.

• onkeydownviene eseguito quando si preme un tasto e il focus è sull’oggetto.

• onkeypress viene eseguito quando si schiaccia un tasto – preme e rilascia quindi – mentre l’oggetto è in focus.

• onkeyup viene eseguito quando si rilascia un tasto mentre il focus è sull’oggetto area di testo.

• onselectviene eseguito appena si seleziona del testo nell’area di testo.

: <SELECT>

• onblurviene eseguito quando si passa dal menu a un altro oggetto del form.

• onchange viene eseguito quando viene selezionato un elemento della serie, è sufficiente il click.

• onfocusviene eseguito quando si entra nell’oggetto menu.

: <INPUT TYPE=submit>

• onblurviene eseguito quando si cambia il focus passando a un altro pulsante o elemento del form, in genere mediante TAB.

• onclickviene eseguito quando si clicca sul pulsante di immissione form.

• onfocusviene eseguito appena ci si posiziona sull’oggetto, appena cioè il focus passa a qua- sto tipo di oggetti.

Vediamo un esempio: function colore() { b1.style.color = caso(2); b1.style.backgroundColor = caso(2); b1.style.left = caso(0)+”px”; b1.style.top = caso(1)+”px”; } function caso(tipo) { if (tipo==0) {a=640} else

if (tipo=2) {a=400} else {a=16000000};

return Math.floor(Math.random()*a); //funzione matematica che genera //un numero casuale tra 0 e 1 }

Se si inserisce un elemento di tipo pulsante (button) al quale si associa all’evento onmouseover la fun- zione colore() si ottiene un simpatico effetto da provare.

<INPUT TYPE=”button” STYLE=”position:absolute;” value=”prendimi” name=”b1” onmouseover=”colore()” onclick=”alert(‘bravo!’);”>

4.24 Le immagini

Per inserire un’immagine in un documento HTML si deve usare l’etichetta:

<IMG SRC=”nomefile” NAME=”immagine”>

Il browser ci rende disponibile questa immagine creando un oggetto IMG con il nome immagine: ogni immagine della pagina ha infatti un oggetto creato appositamente. Ogni oggetto della pagina è memo- rizzato nell’array di oggetti images[]; questo oggetto è una proprietà dell’oggetto document. In tal modo la prima immagine della pagina si trova nell’elemento images[0], la seconda in images[1] ecc. È possibile assegnare una variabile per richiammare un oggetto IMG nell’array images[]. Il codice sarà più facile da leggere. Per esempio, se scriviamo

var miaImmagine = new document.images[1];

la variabile miaImmagine conterrà un riferimento all’oggetto IMG dentro l’array images[] nella po- sizione di indice 1. All’interno dello script si potrà in tal modo fare riferimento all’immagine con la va- riabile miaImmagine al posto di document.images[1] con lo stesso risultato.

Da JavaScript versione 1.1 è possibile creare un apposito oggetto di tipo Image per creare immagini di- namicamente durante l’esecuzione di uno script senza dover necessariamente fare ricorso ai tag di HTML. Tale oggetto possiede un costruttore di nome Image(). Vediamo la sintassi che premette di creare un nuovo oggetto immagine:

var oggettoImmagine=new Image();

Lo stesso oggetto possiede una serie di utili proprietà. Tra queste vi è src che consente di cambiare il file mostrato. Per esempio:

var foto=new Image(); foto.src=”miafoto.jpg”:

In questo caso viene mostrata una immagine formata dal file miafoto.jpg.

Il seguente esempio ci mostra come utilizzare un oggetto Image per permettere lo scambio di immagi- ni tra di loro, sfruttando la proprietà src:

function sposta() {

var j;

//generazione numero casuale tra 0 e 2 i=Math.floor(Math.random()*3);

do {

j=Math.floor(Math.random()*3); }while(j!=i);

//oggetto Image usato come oggetto di scambio var scambio=new Image();

//scambio tra gli elementi di posizione i e j nell’array images[] scambio.src=document.images[i].src; document.images[i].src=document.images[j].src; document.images[j].src=scambio.src; } <BODY onclick=”sposta()”> <IMG SRC=”1.gif”> <IMG SRC=”2.gif”> <IMG SRC=”3.gif”>

Produce l’immagine riportata a lato.E

Una proprietà molto utile per lo stile degli elementi di una pagina web è rappresentata dalla posizione che essi possono assumere all’interno della pagina stessa. Prima di tutto è necessario sapere che tutti gli og- getti possono essere posizionati secondo due criteri dettati dalla sintassi CSS:

: relative : absolute

Si rimanda al volume HTML, CSS, XML dello stesso autore per un approfondimento. È tuttavia necessario ri- cordare che, affinché un elemento possa essere posizionato nella pagina, è necessario che venga modifica- to lo stile di posizionamento (position) in assoluto:

oggetto.style.position=”absolute”

Il seguente esempio mostra come creare un pulsante sfuggente al mouse:

function sposta() {

//modifica stile di posizionamento (assoluto) b1.style.position=”absolute”;

//riposizionamento pulsante

//dimensione casuale per le x che vanno da 0 a dim max schermo-grandezza pulsante b1.style.left=Math.round(Math.random()*(screen.availWidth-100))+”px”;

//dimensione casuale per le y che vanno da 0 a dim max //schermo-grandezza pulsante e barre

b1.style.top=Math.round(Math.random()*(screen.availHeight-140))+”px”; }

</SCRIPT>

<BODY BGCOLOR=”blanchedalmond” onkeypress=”return false”> <INPUT TYPE=”button” VALUE=”prendimi”

NAME=”b1” onmouseover=”sposta()” onclick=”alert(‘bravo!’)”>

Come avrete notato raggiungere il pulsante è praticamante impossibile. Per ottenere questo effetto il pul- sante è stato legato all’evento onmouseover che alla sua attivazione sposta l’elemento stesso in una nuo- va posizione dello schermo. Come si può vedere all’elemento è stata cambiata la posizione in absolute onde renderlo libero di essere posizionato in un punto qualsiasi. Le proprietà left e top ser vono per spo- stare l’elemento in una nuova posizione dello schermo. Si noti che alla fine viene indicata la stringa “px”, che è necessaria, in quanto la posizione può essere espressa sia in pixel (px appunto) sia in percentuale. Nel tag body l’evento scatenato dai tasti premuti viene disattivato (con return false), affinché siano va- ni i tentativi di premere un tasto per simulare il click!