Gestire Gli Eventi Roberto Bruni e Daniela Giorgetti

Bruni e Giorgetti2 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 Giorgetti3 Dove vivono i gestori? vengono “celati” tra gli attributi dei tag HTML La sintassi solitamente è del tipo il comando può essere –la semplice invocazione di una funzione, –ma anche una sequenza di comandi complessi (sconsigliato)

Bruni e Giorgetti4 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 Giorgetti5 onLoad L’apertura di una pagina o di un frameset è il momento ideale per far partire routine JS usare tag o 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 Giorgetti6 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 Giorgetti7 onUnload Scatenato appena prima di uscire dal documento gestito a livello di o 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, arrivedercibenvenuto, arrivederci

Bruni e Giorgetti8 Prompt, alert e… confirm Un altro metodo per interagire con l’utenteutente –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 Giorgetti9 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 Giorgetti10 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 Giorgetti11 onClick Scatenato quando l’utente “clicca” su un elemento (cliccabile) della pagina avviene dopo il rilascio del pulsante del mouse! si applica a pulsanti, checkbox ( ), radio button ( ), e link ( … ) –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 Giorgetti12 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 Giorgetti13 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 possa rispondere al click del mouse la gestione può avvenire attraverso link (2 modi)gestione 1) 2)

Bruni e Giorgetti14 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 Giorgetti15 Abuso dello standard La danza dei dinosauri sfrutta gli eventi onMouseOver direttamente nei tag immagine (non nelle aree o nei link)danza dei dinosauri Anche l’evento onClick può essere catturato nei tag (con IE funziona) Però è sempre meglio cercare di non uscire dalle specifiche standard!

Bruni e Giorgetti16 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 Giorgetti17 Rollovers II <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 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” />

Bruni e Giorgetti18 RolloversRollovers III <!-- 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”; } //-->

Bruni e Giorgetti19 Quiz riassuntivi –Quale attributi NON potrebbero essere associati al tag ? 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 il gestore onload=“window.location.href=‘main.html’” aggiungendo nel tag di il gestore onunload=“window.location.href=‘main.html’” aggiungendo nel tag di il gestore onunload=“window.open(‘main.html’)”

Bruni e Giorgetti20 Esercizi

Eventi e Form

Bruni e Giorgetti22 onSubmit scatenato dal click sul pulsante di submit di una form deve essere catturato nel tag 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 Giorgetti23 onClick+onSubmit onSubmit avviene subito dopo che onClick sul pulsante di submit è andato a buon fine Submit FORM onClick non spedita NOYES onSubmit non spedita NO ACTION YES

Bruni e Giorgetti24 onReset supportato da JS1.1+ scatenato dal click sul pulsante di reset gestibile dal tag es. chiedere conferma dell’azzeramento dei dati immessiconferma

Bruni e Giorgetti25 Form con conferme I <form onsubmit=“return sicuroFormSubmit();” onreset=“return sicuroFormReset();” method=“POST” 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();” />

Bruni e Giorgetti26 Form con conferme II Sicuro Sicuro Sicuro? <!-- 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?"); } //-->

Bruni e Giorgetti27 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!)eh In JS1.1+ si applica anche ad oggetti window, frame e frameset nel qualcaso deve essere gestito nel tag

Bruni e Giorgetti28 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

Bruni e Giorgetti29 onBlur Scatenato dalla perdita del focus (duale di onFocus ) con JS1.1+ si applica anche ad oggetti window, frame e frameset, gestendolo nel es. garantire che un campo non rimanga vuoto simile ad onChange : onChange si verifica meno spesso onBlur permette un controllo più accurato

Bruni e Giorgetti30 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 1elemento 2 onFocus onBlur onChange onFocus

Bruni e Giorgetti31 onSelect Il nome non tragga in confusione: non si riferisce al tag ! 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. completamente

Bruni e Giorgetti32 Eventi e elementi delle form onbluronchangeonclickonfocus text  password  file  button  submit  reset  checkbox  radio  select  textarea 

Bruni e Giorgetti33 Eventi e elementi delle pagine body onloadonunload img onabortonerroronload link onmouseoutonmouseoveronclick form onresetonsubmit 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 Giorgetti34 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 Giorgetti35 Gestori dinamici function gA() { … } function gB() { … } … if (choice != “A”) { document.f1.b1.onclick=gB; } … <form name=“f1” notare che document.f1.b1.onclick=gB() avrebbe invocato la funzione senza assegnarla al gestore

Bruni e Giorgetti36 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 Giorgetti37 Eventi simulabili sulle form blur()select()click()focus() text  password  file  button  submit  reset  checkbox  radio  select  textarea 

Bruni e Giorgetti38 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 Giorgetti39 Esercizi

Timer

Bruni e Giorgetti41 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 Giorgetti42 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 Giorgetti43 Esempio: Orologio IOrologio È il momento giusto per un break? Data: Ora:

Bruni e Giorgetti44 Esempio: Orologio IIOrologio <!-- hide var oraStr, dataStr; function orologio() { adesso = new Date(); giorno = adesso.getDate(); mese = adesso.getMonth()+1; anno = adesso.getFullYear(); ore = adesso.getHours(); minuti = adesso.getMinutes(); secondi = adesso.getSeconds(); …

Bruni e Giorgetti45 Esempio: Orologio IIIOrologio … dataStr = ((giorno < 10) ? "0" : "") + giorno ; dataStr += ((mese < 10) ? "/0" : "/") + mese ; dataStr += "/" + anno; oraStr = ore; oraStr += ((minuti < 10) ? ":0" : ":") + minuti; oraStr += ((secondi < 10) ? ":0" : ":") + secondi; document.orologio.data.value = dataStr; document.orologio.ora.value = oraStr; } //-->

Bruni e Giorgetti46 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 Giorgetti47 Esempio: Orologio IVOrologio È il momento giusto per un break? Data: Ora:

Bruni e Giorgetti48 Esempio: Orologio VOrologio <!-- hide var oraStr, dataStr; function orologio() { adesso = new Date(); giorno = adesso.getDate(); mese = adesso.getMonth()+1; anno = adesso.getFullYear(); ore = adesso.getHours(); minuti = adesso.getMinutes(); secondi = adesso.getSeconds(); …

Bruni e Giorgetti49 Esempio: Orologio VIOrologio … dataStr = ((giorno < 10) ? "0" : "") + giorno ; dataStr += ((mese < 10) ? "/0" : "/") + mese ; dataStr += "/" + anno; oraStr = ore; oraStr += ((minuti < 10) ? ":0" : ":") + minuti; oraStr += ((secondi < 10) ? ":0" : ":") + secondi; document.orologio.data.value = dataStr; document.orologio.ora.value = oraStr; setTimeout(“orologio()”,1000); // riattiva il timer } //-->

Bruni e Giorgetti50 Effetto fading – ciclo attivociclo 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 Giorgetti51 Effetto fading – con timercon 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 Giorgetti52 Esercizi