Lezione7_Eventi

by user

on 06 июля 2016

Category: Documents

>> Downloads: 3

views

Report

Comments

Description

Download Lezione7_Eventi

Transcript

Lezione7_Eventi

Gestire Gli Eventi
Roberto Bruni e Daniela Giorgetti
Capire gli eventi
• JS è un linguaggio fortemente event-driven
– l’utente interagisce con la pagina muovendo il
mouse, cliccando, digitando, etc
– la pagina cerca di reagire opportunamente a
queste sollecitazioni
– il gestore dell’evento è una funzione che
risponde alla “mossa” dell’utente (o
dell’ambiente)
– possiamo catturare eventi e gestirli
Bruni e Giorgetti
2
Dove vivono i gestori?
• vengono “celati” tra gli attributi dei tag
HTML
• La sintassi solitamente è del tipo
< … onEvento=“comandoJS” … >
• il comando può essere
– la semplice invocazione di una funzione,
– ma anche una sequenza di comandi complessi
(sconsigliato)
Bruni e Giorgetti
3
Avvertenza
• Usando codice in-line (sconsigliato)
piuttosto che chiamate a funzioni (meglio) il
gestore può essere specificato su più linee
usando “;” per separare i comandi
• centralizzare il codice nella head del documento
rende più facile la manutenzione e l’aggiornamento
• Abbiamo già visto esempi di eventi e
gestori… rivediamoli in dettaglio
Bruni e Giorgetti
4
onLoad
• L’apertura di una pagina o di un frameset è
il momento ideale per far partire routine JS
• usare tag <BODY> o <FRAMESET>
• l’evento load viene lanciato quando il browser
finisce di caricare una pagina o tutti i frame della
pagina
• l’oggetto window è l’unico che può gestire questo
evento
• es. controllo del browser in uso
Bruni e Giorgetti
5
L’eccezione
• Anche l’oggetto Image ha il gestore di
evento onLoad
• scatta quando l’immagine viene visualizzata dal
browser
• notare quindi che non avviene durante il
caricamento, ma solo al momento della
presentazione nella pagina
Bruni e Giorgetti
6
onUnload
• Scatenato appena prima di uscire dal
documento
• gestito a livello di <BODY> o <FRAMESET>
• es. pulire l’ambiente chiudendo finestre aperte
durante la visita… anche se magari l’utente potrebbe
non apprezzare. In questi casi meglio chiedere
conferma
• es. per essere cordiali con i visitatori della vostra
pagina: benvenuto, arrivederci
Bruni e Giorgetti
7
Prompt, alert e… confirm
• Un altro metodo per interagire con l’utente
– finestra confirm
– pone una domanda con due sole risposte
possibili: si o no!
– confirm(domanda) apre una nuova finestrella
con la domanda e due pulsanti (ok e annulla)
• se l’utente preme ok, restituisce true
• se l’utente preme annulla, restituisce false
Bruni e Giorgetti
8
onError
• Supportato da JS1.1+
• Gli oggetti Window e Image prevedono un
gestore di errori che permette di accorgersi
di errori di caricamento del documento o
dell’immagine
• errore di sintassi JS
• errore runtime JS
• non cattura errori del browser (es. server
che non risponde)
Bruni e Giorgetti
9
onAbort
• Supportato da JS1.1+ per oggetti Image
• a seconda delle dimensioni di un’immagine,
l’utente potrebbe decidere di interromperne
il caricamento prima che sia completato
• si può catturare l’evento “abort” del caricamento
dell’immagine
• es. per far comparire un messaggio di alert che
spieghi che la pagina risulterà incompleta
Bruni e Giorgetti
10
onClick
• Scatenato quando l’utente “clicca” su un elemento
(cliccabile) della pagina
• avviene dopo il rilascio del pulsante del mouse!
• si applica a pulsanti,
• <input type=“button” onclick=“…” />
• <input type=“submit” onclick=“…” />
• <input type=“reset” onclick=“…” />
• checkbox (<input type=“checkbox” onclick=“…” />),
• radio button ( <input type=“radio” onclick=“…” /> ),
• e link (<a onclick=“…” > … </a>)
– Per pulsanti di reset e submit, checkbox, radio e link
è opportuno restituire false per cancellare l’azione o
true per confermarla (es. può essere usato per richieste
di conferma prima di eseguire l’azione)
Bruni e Giorgetti
11
Immagini dinamiche
• Una caratteristica interessante di JS è la possibilità
di cambiare le immagini dinamicamente e quindi
rendere la pagina più “vivace”
• Limitazioni:
– si possono cambiare le immagini ma non aggiungerne
di nuove o rimuoverle (trucchi possibili: altezza e
larghezza negative, DHTML e layers)
– si possono variare le dimensioni ma bisogna stare
attenti all’effetto sull’impaginazione del documento
– ogni immagine dovrà essere scaricata dal server (non
molto pratico per animazioni complesse e immagini
troppo grandi)
Bruni e Giorgetti
12
Click su immagini
• Abbiamo già visto come associare il cambio delle
immagini al click su un pulsante
• Spesso è utile (ed elegante) associare delle azioni
ad immagini piuttosto che a pulsanti
• ma lo standard non prevede che il tag <IMG />
possa rispondere al click del mouse
• la gestione può avvenire attraverso link (2 modi)
1) <a href=“javascript:funzioneJS()”>
<img src=“URLfig” border=0 /></a>
2) <a onclick=“funzioneJS()”>
<img src=“URLfig” border=0 /></a>
Bruni e Giorgetti
13
onMouseOver
• Avviene quando si passa sopra un link o una
area (onMouseOut è complementare)
• Come navigatori web avrete notato che muovendo il
cursore sopra i link si fa comparire la URL associata
• Analogamente, catturando l’evento onMouseOver
possiamo, ad esempio, visualizzare dei messaggi
nella barra di stato
• Con JS1.1+ onMouseOver e onMouseOut sono
gestibili anche sulle aree di mappe immagine
• Per usare la barra di stato
(window.status=“testo”) bisogna
restituire true
Bruni e Giorgetti
14
Abuso dello standard
• La danza dei dinosauri sfrutta gli eventi
onMouseOver direttamente nei tag
immagine (non nelle aree o nei link)
• Anche l’evento onClick può essere
catturato nei tag <img /> (con IE funziona)
• Però è sempre meglio cercare di non uscire
dalle specifiche standard!
Bruni e Giorgetti
15
Rollovers I
• L’uso più diffuso di immagini dinamiche avviene
con i rollover
– immagini che cambiano quando il cursore si sposta
sopra di loro e che tornano allo stato originale quando il
cursore le abbandona
• generalmente si usano le controparti “negative”, o con colori
diversi, o con bordi speciali
• solitamente le immagini con rollover sono
associate a link (formano un menu di navigazione)
– l’effetto rollover evidenzia il link che stiamo per
scegliere
Bruni e Giorgetti
16
Rollovers II
<body>
<a href=“cani.html”
onmouseover=“basset();”
onmouseout=“bulldog();”>
<img name=“cane” id=“cane”
border=“0” width=“100” height=“100”
src=“bulldog_big_barking_md_wht.gif” /></a>
<a href=“dinosauri.html”
onmouseover=“gallim();”
onmouseout=“dino();”>
<img name=“dinosauro” id=“dinosauro”
border=“0” width=“100” height=“100”
src=“cute_dino_hopping_md_wht.gif” /></a>
</body>
Bruni e Giorgetti
17
Rollovers III
<script type=“text/javascript”>
<!-function basset() {
document.cane.src = “basset_howl_md_wht.gif”;
}
function bulldog() {
document.cane.src = “bulldog_big_barking_md_wht.gif”;
}
function gallim() {
document.dinosauro.src = “gallimim_threat_md_wht.gif”;
}
function dino() {
document.dinosauro.src=“cute_dino_hopping_md_wht.gif”;
}
//-->
</script>
Bruni e Giorgetti
18
Quiz riassuntivi
– Quale attributi NON potrebbero essere associati al tag
<IMG /> ?
• onload
• onabort
• onunload
• onclick
• onmouseover
– Come si fa a evitare che un utente esca dalla nostra pagina
main.html?
• non si può
• aggiungendo nel tag di <body> il gestore
onload=“window.location.href=‘main.html’”
• aggiungendo nel tag di <body> il gestore
onunload=“window.location.href=‘main.html’”
• aggiungendo nel tag di <body> il gestore
onunload=“window.open(‘main.html’)”
Bruni e Giorgetti
19
Esercizi
Bruni e Giorgetti
20
Eventi e Form
onSubmit
• scatenato dal click sul pulsante di submit
di una form
• deve essere catturato nel tag <FORM>
• Importante: restituire true o false
• con true la submit avverrà
• con false la submit sarà annullata
• es. validazione di form prima della
spedizione
Bruni e Giorgetti
22
onClick+onSubmit
• onSubmit avviene subito dopo che
onClick sul pulsante di submit è andato a
buon fine
FORM
Submit
NO
non spedita
onClick
NO
YES
onSubmit
non spedita
YES
ACTION
Bruni e Giorgetti
23
onReset
• supportato da JS1.1+
• scatenato dal click sul pulsante di reset
• gestibile dal tag <FORM>
• es. chiedere conferma dell’azzeramento dei dati
immessi
Bruni e Giorgetti
24
Form con conferme I
<body>
<form onsubmit=“return sicuroFormSubmit();”
onreset=“return sicuroFormReset();”
method=“POST” action=“mailto:[email protected]”>
Scegli un numero da 0 a 99:
<input type=“test” name=“numero” value=“0”
size=“2” maxlength=“2” />
<input type=“submit”
onclick=“return sicuroButtonSubmit();” />
<input type=“reset”
onclick=“return sicuroButtonReset();” />
</form>
</body>
Bruni e Giorgetti
25
Form con conferme II
<head><title>Sicuro Sicuro Sicuro?</title>
<script type="text/javascript">
<!-function sicuroButtonSubmit() {
return confirm(“Sicuro del Submit?”); }
function sicuroFormSubmit() {
return confirm(“Sicuro sicuro del Submit?"); }
function sicuroButtonReset() {
return confirm(“Sicuro del Reset?"); }
function sicuroFormReset() {
return confirm("Sicuro sicuro del Reset?"); }
//-->
</script>
</head>
Bruni e Giorgetti
26
onFocus
• Ricezione del “focus” da parte di un campo
• es. l’utente si sposta con tab oppure col mouse
(cliccando)
• gestito a livello di singolo campo
• in ogni momento, al più un oggetto ha il focus
• es. selezionare automaticamente il contenuto del
campo in risposta all’evento (gli eventi possono
anche essere scatenati dal codice, eh eh!)
• In JS1.1+ si applica anche ad oggetti
window, frame e frameset
• nel qualcaso deve essere gestito nel tag <BODY>
Bruni e Giorgetti
27
onChange
• Scatenato dalla modifica di alcuni dati
• Si verifica quando viene cambiato il valore di un
campo della form ed il campo perde il focus
– validazione di campo piuttosto che della form completa
– es. garantire che il contenuto di un certo campo sia
sempre in lettere maiuscole/minuscole
<form name=“modulo”>
<input type=“text” name=“cognome”
onchange=“document.modulo.cognome.value =
document.modulo.cognome.value.toUpperCase()” />
</form>
Bruni e Giorgetti
28
onBlur
• Scatenato dalla perdita del focus (duale di
onFocus)
• con JS1.1+ si applica anche ad oggetti window,
frame e frameset, gestendolo nel <BODY>
• es. garantire che un campo non rimanga vuoto
• simile ad onChange:
• onChange si verifica meno spesso
• onBlur permette un controllo più accurato
Bruni e Giorgetti
29
onFocus+onChange+onBlur
• La sequenza con cui vengono generati è la
seguente (immaginiamo di andare
sull’elemento 1, modificarlo e poi passare
all’elemento 2 di una form)
elemento 1
elemento 2
onFocus
onChange
onFocus
onBlur
Bruni e Giorgetti
30
onSelect
• Il nome non tragga in confusione: non si
riferisce al tag <SELECT>!
• Avviene quando l’utente seleziona il testo di
una casella di input di tipo text oppure di
una textarea
• Raramente gestito
• utile invece scatenare l’evento select dal codice JS
per suggerire all’utente di modificare
completamente il contenuto del campo.
Bruni e Giorgetti
31
Eventi e elementi delle form
onblur
onchange onclick
onfocus
text



password



file



button



submit



reset



checkbox



radio



select



textarea



Bruni e Giorgetti
32
Eventi e elementi delle pagine
body
onload
onunload
img
onabort
onerror
onload
link
onmouseout
onmouseover
onclick
form
onreset
onsubmit
• Ma in IE4+ tutti gli elementi HTML hanno molti
altri eventi associati (non sempre supportati allo
stesso modo da NN)
–
–
–
–
onclick, ondblclick,
onkeydown, onkeypress, onkeyup,
onmouseover, onmouseout,
onmousedown, onmouseup, onmousemove
Bruni e Giorgetti
33
Esempio
function topoSxDx(e) {
if (e.which==1) { alert(“Sinistro”); }
{ alert(“Destro”); }
} // definisce il gestore (ok su NN6)
document.onmousedown = topoSxDx; // assegna gestore
/* il parametro “e” è un oggetto di tipo Event:
e.which: valore numerico che indica il tasto o pulsante
del mouse premuti
e.type: il tipo dell’evento (es. mouseover)
e.target: l’elemento dove è avvenuto l’evento
e.modifiers: lista di altri tasti speciali premuti
(Ctrl, Alt, Shift)
… altri che non vediamo
*/
Bruni e Giorgetti
34
Gestori dinamici
function gA() { … }
function gB() { … }
…
if (choice != “A”) {
document.f1.b1.onclick=gB; }
…
<form name=“f1”
<input type=“button” name=“b1” onClick=“gA()” />
notare che
document.f1.b1.onclick=gB()
avrebbe invocato la funzione senza assegnarla al gestore
Bruni e Giorgetti
35
Generare eventi
• Tutti gli eventi visti possono essere simulati
e/o causati invocandoli sui rispettivi oggetti
• es. simulare il click su un pulsante invocando il
metodo click()
• notare che i link non dispongono di tale metodo
Bruni e Giorgetti
36
Eventi simulabili sulle form
blur()
select() click()
focus()
text



password



file



button



submit



reset



checkbox



radio



select



textarea


Bruni e Giorgetti

37
Quiz riassuntivi
– Quale attributi NON esistono ?
• onload
• onlink
• onrollover
• onblur
– Come si fa a evitare che il campo di input text pippo
della form disney venga modificato dall’utente?
• non si può
• aggiungendo nel tag di pippo il gestore
onfocus=“document.disney.pippo.blur();
document.disney.pluto.focus();”
• aggiungendo nel tag di pippo il gestore
onchange=“document.disney.pippo.focus();”
• aggiungendo nel tag di pippo il gestore
onchange=“document.disney.pippo.blur();”
Bruni e Giorgetti
38
Esercizi
Bruni e Giorgetti
39
Timer
Uso dei timer
• Con i timer, gli eventi (e le funzioni)
possono essere invocati ad intervalli di
tempo fissati
– esempi:
• aggiornare dati ad intervalli regolari (orologio)
• dare un tempo limite per riempire certi moduli
(esami)
• sfogliare le pagine automaticamente
• aprire nuovi banner (stendardi) pubblicitari
Bruni e Giorgetti
41
Ripetere a intervalli regolari
• setInterval(“funzione()”, tempo)
– questo comando prepara un timer che esegue i
comandi passati come primo argomento
(funzione()) ad intervalli di tempo fissati dal
secondo argomento (tempo)
• il tempo è espresso in millisecondi
– es. tmrId = setInterval(“aggiorna()”,1000)
– viene iterata fino a quando si effettua
• clearInterval(tmrId)
Bruni e Giorgetti
42
Esempio: Orologio I
<body onLoad=“setInterval('orologio()',1000);” >
<h2>È il momento giusto per un break?</h2>
<form name = “orologio”>
Data:
<input type=“text” name=“data” size=“8” value=“” />
Ora:
<input type=“text” name=“ora” size=“8” value=“” />
</form>
</body>
Bruni e Giorgetti
43
Esempio: Orologio II
<script type="text/Javascript">

</script>
Bruni e Giorgetti
45
Eseguire dopo un certo tempo
• setTimeout(funzione, tempo)
– questo comando prepara un timer che esegue i
comandi passati come primo argomento
(funzione()) dopo l’intervallo di tempo
fissato dal secondo argomento (tempo)
• il tempo è espresso in millisecondi
– esegue una sola volta (non itera
automaticamente)
– spesso usata ricorsivamente (caricata una prima
volta con onLoad)
– es. tmrId = setTimeout(“buttaPasta()”,1000)
– clearTimeout(tmrId)
Bruni e Giorgetti
46
Esempio: Orologio IV
<body onLoad=“orologio();” >
<h2>È il momento giusto per un break?</h2>
<form name = “orologio”>
Data:
<input type=“text” name=“data” size=“8” value=“” />
Ora:
<input type=“text” name=“ora” size=“8” value=“” />
</form>
</body>
Bruni e Giorgetti
47
Esempio: Orologio V
<script type="text/Javascript">

</script>
Bruni e Giorgetti
49
Effetto fading – ciclo attivo
function sfuma() {
for (i=0;i<255;i+=2) {
document.bgColor= i*256*256 + i*256;
aspetta(10); // introduce del ritardo
}
document.bgColor="#FFFF00";
}
function aspetta(ms) { // attende ms millisecondi
inizio=new Date();
tIn=inizio.getTime();
tFin=tIn;
while (tFin-tIn < ms) { dopo=new Date();
tFin=dopo.getTime(); }
}
<body text="#000000" bgcolor="#000000“
onload="sfuma()">
Bruni e Giorgetti
50
Effetto fading – con timer
var i=0; // variabile globale
function sfuma() {
if(i>253) {
document.bgColor="#00FFFF";
} else {
i+=1;
document.bgColor=i*256 + i;
setTimeout("sfuma()", 10); /* riattiva la
funzione sfuma() dopo 10 millisecondi */
}
}
<body text="#000000" bgcolor="#000000“
onLoad="sfuma()">
Bruni e Giorgetti
51
Esercizi
Bruni e Giorgetti
52