Windows Roberto Bruni e Daniela Giorgetti. Bruni e Giorgetti2 L’oggetto Window (ancora!) top-level object permette di accedere a tutte le parti del documento.

Presentazione sul tema: "Windows Roberto Bruni e Daniela Giorgetti. Bruni e Giorgetti2 L’oggetto Window (ancora!) top-level object permette di accedere a tutte le parti del documento."— Transcript della presentazione:

1 Windows Roberto Bruni e Daniela Giorgetti

2 Bruni e Giorgetti2 L’oggetto Window (ancora!) top-level object permette di accedere a tutte le parti del documento permette di aprire, modificare e chiudere altre finestre adesso vediamo più in dettaglio alcuni metodi (che magari abbiamo anche già usato)

3 Bruni e Giorgetti3 window.open() Sintassi: winvar = window.open(URL,winname,features) –se URL è omessa viene aperta una finestra vuota (il metodo winvar.document.write(…) può poi essere usato per scriverci sopra) –winname serve per usare la finestra come target di link o di form –features sono attributi vari della finestra se va a buon fine ritorna un riferimento all’oggetto creato altrimenti (se fallisce) ritorna null

4 Bruni e Giorgetti4 Suggerimento Alcuni utenti trovano fastidioso che si aprano nuove finestre del browser automaticamente, specialmente se poi devono chiuderle manualmente se questo avviene seguendo un link, conviene aggiungere accanto al testo del link una frase del tipo “(new window)” Magari conviene avvertire che le finestre in eccesso saranno chiuse automaticamente all’uscita della pagina

5 Bruni e Giorgetti5 Avvertenza sui nomi es. mywin = window.open(“”, “newwin”); –mywin è una variabile dell’oggetto che ha aperto newwin –newwin è il nome della nuova finestra –le proprietà devono essere accedute tramite mywin (oggetto di tipo Window ) –link e form possono usare newwin come target

6 Bruni e Giorgetti6 La finestra corrente window e self riferiscono entrambi la finestra (top-level) corrente possono essere usati entrambi indifferentemente, ma non è possibile usarli assieme come in window.self.document.write(…) con multiframe, riferiscono sempre la finestra in cui il codice JS viene eseguito

7 Bruni e Giorgetti7 Contenuto della window Quando si apre una finestra, si tenta di caricare l’URL voluta se non si riesce o se si specifica una URL vuota allora il documento appare vuoto avendo il riferimento alla finestra possiamo usarlo per creare dinamicamente una nuova pagina (con il metodo document.write(…) )

8 Bruni e Giorgetti8 Attributi della finestra I width e height (in pixel) dependent (verrà chiusa assieme alla finestra madre) toolbar (0 nasconde/1 mostra la barra) menubar (0 nasconde/1 mostra la barra) scrollbars (0 nasconde/1 mostra le barre di scorrimento) innerWidth e innerHeight resizable (1 abilita/0 disabilita ridimensionamento) screenX e screenY (offset dai margini) status (1 mostra/0 nasconde la barra) location (1 mostra/0 nasconde la barra) directories (1 mostra/0 nasconde la barra) copyhistory (mantiene la storia)

9 Bruni e Giorgetti9 Attributi della finestra II outerWidth e outerHeight (in pixel) left e top (margini in pixel) alwaysLowered (sempre in secondo piano) alwaysRaised (sempre in primo piano) z-lock (nuova finestra che non copre mai le altre quando riceve il focus) argomenti non specificati sono assunti essere falsi Esempi

10 Bruni e Giorgetti10 window.close() Usare sempre il riferimento all’oggetto finestra Potrebbero esserci più finestre aperte Attenzione, anche il documento ha il metodo close() –permette di aggiungere un pulsante (o un link usando la URL “ javascript:top.close() “) che chiuda la finestra –prima di chiudere la finestra controllare che esista if (finestra != null && !finestra.closed) { finestra.close(); } else { alert(“La finestra è già chiusa”); }

11 Bruni e Giorgetti11 Esempi window.opener.close() chiude la finestra che aveva aperto quella corrente window.opener.name determina il nome dell’opener top.opener.close() chiude la finestra browser principale window.opener = null previene la chiusura accidentale dell’opener dimenticando il riferimento

12 Bruni e Giorgetti12 Banners (stendardi) I I banner (letteralmente stendardi, striscioni) sono quelle simpatiche finestre (solitamente pubblicitarie) che si aprono automaticamente quando accedete alcune pagine –restano in primo piano oppure si nascondono sotto la finestra corrente –non potete ridimensionarle –difficili da chiudere

13 Bruni e Giorgetti13 //crea la finestra finestra = window.open(“doc.html”,“”,“width=200, height=200, resizable=1, location=0, toolbar=0, menubar=0, directories=0, status=0”); // per cambiare il contenuto (se la finestra è chiusa, si riapre) if (finestra == null || finestra.closed) { finestra = window.open(“altrodoc.html”,“”,“width…” ); } else { // altrimenti aggiorna la location del banner finestra.location = “altrodoc.html”; } finestra.focus(); // mette il banner in primo piano Banners (stendardi) II

14 Bruni e Giorgetti14 Focus Durante una sessione è possibile avere molte finestre aperte –di queste, solo una può essere attiva, ovvero “avere il focus” –il focus dà la possibilità di ricevere e rispondere all’input dell’utente tipicamente la finestra attiva è quella on-top che copre le altre, ma in UNIX anche finestre coperte possono avere il focus –Tipicamente l’utente rende attiva una finestra con un click del mouse (ma in UNIX…)

15 Bruni e Giorgetti15 Blur Talvolta (es. in UNIX) basta spostare il cursore fuori dalla finestra perché questa perda il focus (evento detto blur) JS e HTML permettono di assegnare focus e blur alle finestre in maniera automatica, gestita dal codice L’intento non deve essere di togliere all’utente il controllo della situazione, ma di aiutarlo a districarsi meglio, come un “pilota automatico”

16 Bruni e Giorgetti16 Dare il focus Ci sono due modi di passare il focus –indirettamente: dando il focus ad un elemento della finestra mywin.document.myform.myinput.focus() la finestra aperta possiede una variabile mywin (oggetto di tipo Window ) contenente un documento con una form myform e un campo di input myinput a cui viene assegnato il focus –direttamente: assegnando il focus proprio alla finestra window.opener.focus() la nuova finestra assegna il focus alla finestra che l’aveva aperta

17 Bruni e Giorgetti17 Rimuovere il focus Assegnando il focus, chi lo aveva lo perde! Anche il metodo window.blur() toglie il focus senza però assegnarlo ad alcuna finestra –window.focus() e window.blur() (anche window.opener ) sono supportato con JS1.1+ –notare che anche l’attributo target del tag assegna il focus ad una finestra diversa da quella corrente… ma non in tutti i browser…

18 Bruni e Giorgetti18 Message boxes Abbiamo già visto i tre tipi di “finestre di dialogo/conferma/avviso” –alert( stringa ) usata a profusione l’utente deve solo cliccare sul pulsante ok –confirm( stringa ) vista di recente l’utente può confermare con ok o rinunciare con cancel –prompt( stringa ) usata a profusione l’utente può immettere del testo, confermare col tasto ok o rinunciare col tasto cancel

19 Bruni e Giorgetti19 Alert Mostra un messaggio all’utente in modo che questo non possa ignorarlo per chiudere la finestrella del messaggio bisogna schiacciare il pulsante ok può essere usato per avvisare l’utente che ha fatto qualcosa di sbagliato ricordare all’utente che una certa cosa deve avvenire mostrare dei dati …

20 Bruni e Giorgetti20 Confirm Mostra un messaggio con possibilità di scelta –restituisce un booleano true se l’utente preme ok false se l’utente preme cancel –usata per confermare la sottomissione di una form confermare l’invio di una email prevenire modifiche accidentali di alcuni campi

21 Bruni e Giorgetti21 Prompt Chiede all’utente di inserire un messaggio in risposta ad un qualche evento La sintassi completa è prompt( messaggio, defaultreply ) si può infatti specificare una risposta di default meglio aggiungerla sempre, –al limite usare la stringa vuota come default

22 Bruni e Giorgetti22 Precauzioni con prompt Se l’utente sceglie ok, il metodo ritorna la stringa immessa dall’utente (se nulla viene digitato ritorna la stringa vuota) Se l’utente sceglie cancel ritorna null Aspettarsi sempre che l’utente possa premere cancel, ovvero controllare subito se il valore ritornato e null o no Se vogliamo valori numerici, ricordarsi di usare parseInt() o parseFloat()

23 Bruni e Giorgetti23 Status bar (barra di stato) La barra di stato dovrebbe essere un mezzo di comunicazione con l’utente –“dovrebbe” perché non sempre l’utente la usa come punto di riferimento può passare inosservata Due tipi di messaggi: default (sempre visibile, senza che l’utente performi azioni): window.defaultStatus temporaneo (sovrascrive quello di default in risposta a sollecitazioni dell’utente, es passaggio del cursore su un link: window.status

24 Bruni e Giorgetti24 Descrizioni di link Invece di far comparire la URL completa (magari complicata) di un link possiamo usare una descrizione più compatta <a href=“http://www.huweurhh.kj/shiuw/cjcibv/12X34.html” onmouseover=“window.status=‘piastrelle 12x34’; return true;” onmouseout=“window.status=‘’;”> // return true; serve per sovrascrivere la scritta usuale (che sarebbe l’indirizzo completo)

25 Bruni e Giorgetti25 Esercizi

26 Bruni e Giorgetti26 Sedicesima esercitazione (bis) Creare un documento che apra un banner largo 600 e alto 300 pixel, non resizable e inizialmente vuoto. Aggiungere, nel documento principale, –un campo di input di tipo “file” ed –un pulsante che ad ogni click carichi il file selezionato nella finestra banner. Salvare il risultato nel file scegliBanner.html