Oggetti Client-Side Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti.

Presentazione sul tema: "Oggetti Client-Side Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti."— Transcript della presentazione:

1 Oggetti Client-Side Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti

2 Bruni e Giorgetti2 Oggetti client-side

3 Oggetti top

4 Bruni e Giorgetti4 Oggetto navigatornavigator Rappresenta il browser in uso Permette di ottenere informazioni su nome e versione (e altro) Supportato da N.N. e I.E. Ha due oggetti figli (supportati solo da NN): Plugin e Mimetype Ogni browser può avere proprietà non standardproprietà –o anche rendere scrivibili proprietà di sola lettura (IE generalmente molto permissivo)

5 Bruni e Giorgetti5 navigatornavigator: proprietà fondamentali navigator.appCodeName // “Mozilla” per NN2/3/4 e IE3/4 navigator.appName // “Netscape” per NN e “Microsoft Internet Explorer” per IE navigator.platform // sistema operativo dove gira il browser, es. “Win32”, “MacPPC” navigator.appVersion //descrizione più completa della piattaforma e del browser navigator.userAgent //stringa inviata dal browser ai server nelle richieste di pagine web

6 Bruni e Giorgetti6 navigatornavigator: linguaggio utente navigator.language // lingua di default del browser, es. “en”, “it”, “fr”, “fr_CA”, etc. (solo NN4+) navigator.systemLanguage // lingua di default (solo IE4+) navigator.userLanguage // lingua dell’utente (solo IE4+)

7 Bruni e Giorgetti7 Oggetto windowwindow Ogni browser presenta una finestra (window)browser La window racchiude le azioni dell’utente e gli elementi che devono comparire sullo schermo L’oggetto window è considerato il più alto nella gerarchia client-side (contiene tutti gli altri eccetto navigator ) nei riferimenti a metodi e proprietà si può omettere window self è sinonimo di window Possono esserci più oggetti di tipo Window attivi contemporaneamente Non ha tag corrispondenti

8 Bruni e Giorgetti8 windowwindow: proprietà fondamentali window.frames // array dei frame contenuti nella finestra window.length // lunghezza dell’array dei frames window.parent // finestra o frame genitore window.top // finestra master window.location // oggetto location per la finestra corrente

9 Bruni e Giorgetti9 windowwindow: proprietà fondamentali window.status // stringa che compare attualmente sulla barra di stato della finestra window.defaultStatus // stringa che compare per default sulla barra di stato della finestra

10 Oggetti di primo livello

11 Bruni e Giorgetti11 Oggetti di primo livello l’oggetto window ha quattro oggetti figli possono essere riferiti senza usare la parola chiave window –document –frame –history –location

12 Bruni e Giorgetti12 Oggetto documentdocument Forse è il più importante responsabile di tutto quello che compare sulla pagina controparte del tag permette di implementare le caratteristiche dinamiche di HTML contiene gli elementi dell’interfaccia utente (UI = User Interface) di applicazioni web proprietà e metodi dipendenti dal browserbrowser

13 Bruni e Giorgetti13 documentdocument: proprietà fondamentali document.anchors // array delle ancore nel documento document.links // array dei link document.forms // array delle form document.images // array delle immagini document.plugins // array dei plugin document.applets // array delle applet document.embeds // array degli embed

14 Bruni e Giorgetti14 documentdocument: proprietà colore document.bgColor // stringa che indica il colore dello sfondo document.fgColor // colore testo document.alinkColor // colore link attivati document.linkColor // colore dei link non visitati document.vlinkColor // colore link visitati

15 Bruni e Giorgetti15 documentdocument: informazioni utili document.location // URL del documento corrente (deprecata, sola lettura, non confondere con window.location! corrisponde quasi sempre a window.location.href) document.URL // come sopra, ma non deprecata document.title // titolo del documento document.domain // dominio internet da cui proviene il documento (sola lettura) document.lastModified // stringa che indica la data della modifica più recente al documento (sola lettura)

16 Bruni e Giorgetti16 Oggetto locationlocation ogni oggetto window è progettato per presentare delle informazioni all’utente location racchiude l’origine delle informazioni –ovvero l’URL permette di estrarre singole parti come il dominio, il protocollo, etc. tutte le proprietà sono accessibili in lettura e scrittura: basta modificarle per caricare un nuovo documento –si può assegnare una stringa con la nuova URL direttamente a window.location

17 Bruni e Giorgetti17 locationlocation: proprietà fondamentali location.href // URL completo del documento attualmente visualizzato (lettura e scrittura, come tutti gli altri). protocol://hostname:port/pathname?search#hash es. http://www.oreilly.com:1234/catalog/search.html?query=JS&match=2#result protocol  “http:” hostname  “www.oreilly.com”www.oreilly.com port  “1234” host  “www.oreilly.com:1234”www.oreilly.com:1234 pathname  “/catalog/search.html” search  “?query=JS&match=2” hash  “#result”

18 Bruni e Giorgetti18 Oggetto frameframe rappresenta un singolo frame all’interno di un frameset nelle pagine con frame, la window è la pagina che contiene la definizione dei frameset, le altre sono ad essa collegate come frame

19 Bruni e Giorgetti19 Oggetto historyhistory Caratteristica principale dei browser: tenere traccia delle URL visitate nella sessione possiamo sfruttarla per navigare avanti e indietro nella lista history es. un pulsante per tornare indietro di due pagine per motivi di sicurezza i browser più recenti non supportano le proprietà current, next e previous

20 Bruni e Giorgetti20 Quiz riassuntivi I –Quale sono gli oggetti di livello più alto? window, navigator window, navigator, document window navigator –Quando una persona accede ad una pagina, come si fa a capire in quale lingua vorrebbe visualizzarla? non si può usando una proprietà di window usando una proprietà di navigator usando proprietà diverse a seconda del browser con cui accede –Come si fa a vedere se la pagina corrente contiene frames? non si può con window.length con window.frames.length con document.length

21 Bruni e Giorgetti21 Quiz riassuntivi II –Come si fa a caricare una nuova pagina il cui indirizzo URL è contenuto nella variabile (stringa) go_to ? non si può window.href = go_to; window.location = go_to; document.location = go_to; window.location.href = go_to; –Come si fa a controllare se la pagina corrente contiene delle immagini? non si può con window.length con window.images.length con document.images.length con navigator.images.length

22 Bruni e Giorgetti22 Esercizi

23 Oggetti di secondo livello

24 Bruni e Giorgetti24 Oggetti di secondo livello così come window ha dei sotto-oggetti, anche document ha dei sotto-oggetti che sono quindi di secondo livello –anchor –link –area (non lo useremo) –applet (lo esamineremo meglio in futuro) –plugin (lo esamineremo meglio in futuro) –layer (non lo vediamo, per il momento) –image –form

25 Bruni e Giorgetti25 Oggetto anchor testo o immagine della pagina che è target di un link controparte del tag elencati in un vettore: document.anchors generalmente ha scarso rilievo in JS –proprietà: name : nome dell’ancora text : testo che compare tra e x : coordinata X dell’ancora y : coordinata Y dell’ancora

26 Bruni e Giorgetti26 Oggetto linklink La nascita e lo sviluppo del web sono legati indubbiamente al concetto di link controparte del tag elencati in un vettore: document.links a livello astratto è simile a location –ma in più ha le proprietà: target : finestra dove verrà aperto il link text : testo che compare tra e x : coordinata X dell’ancora y : coordinata Y dell’ancora

27 Bruni e Giorgetti27 Oggetto areaarea Aggiunto a JS1.1 riferisce le aree “cliccabili” delle mappe immagine (non lo vediamo in dettaglio)

28 Bruni e Giorgetti28 Oggetti Applet e Plugin Aggiunti con JS1.1 le proprietà di un oggetto applet sono i campi pubblici ed i metodi sono i metodi pubblici della classe l’oggetto plugin non è supportato da IE –proprietà: description, filename, length, name

29 Bruni e Giorgetti29 Oggetto imageimage incapsula ogni immagine del documento controparte del tag elencate in un vettore: document.images favorisce il pre-caricamento nella cache, caricando delle immagini che verranno mostrate solo in seguito (magari in risposta a certi eventi) permette di “animare” il documento

30 Bruni e Giorgetti30 imageimage: proprietà fondamentali I new Image(larghezza,altezza) // crea un oggetto immagine con le dimensioni date // se immagine è un oggetto di tipo Image immagine.name // stringa che corrisponde al valore dell’attributo NAME del tag (sola lettura) immagine.border // intero che definisce lo spessore del bordo attorno all’immagine (sola lettura) immagine.height // intero che definisce l’altezza dell’immagine (sola lettura) immagine.width // intero che definisce la larghezza dell’immagine (sola lettura)

31 Bruni e Giorgetti31 imageimage: proprietà fondamentali II immagine.src // stringa che specifica la URL dell’immagine, il cui valore iniziale è dato dall’attributo SRC del tag (lettura e scrittura) immagine.lowsrc // come sopra, per l’immagine alternativa immagine.complete // booleano che indica se l’immagine è già stata caricata completamente (sola lettura)

32 Bruni e Giorgetti32 Immagini: oggetti o tag? Notare l’analogia tra proprietà e attributi (IE fornisce anche la proprietà alt ) Quante immagini contiene il documento? –document.images.length Per modificare l’ i -esima immagine di un documento? –document.images[i].src = indirizzoURL Se come si può accedere all’immagine senza conoscerne l’indice? –document.pippo –(vale anche per le form)

33 Bruni e Giorgetti33 Oggetto FormForm A parte applet Java e controlli ActiveX, l’interazione con l’utente risiede nelle form controparte del tag l’oggetto form gestisce pulsanti, campi di testo, e tutti gli altri elementi UI come sotto- oggetti controlla che l’interazione proceda sempre nella maniera corretta

34 Bruni e Giorgetti34 formform: proprietà fondamentali I // se modulo è un oggetto di tipo Form modulo.name // stringa che corrisponde al valore dell’attributo NAME del tag (sola lettura) modulo.elements // array degli elementi che compongono la form (ogni elemento è un opportuno oggetto di terzo livello) modulo.length // numero di elementi che compongono la form (equivalente a modulo.elements.length)

35 Bruni e Giorgetti35 formform: proprietà fondamentali II modulo.action // stringa che specifica l’URL alla quale sarà inviato il modulo, inizializzato dall’attributo ACTION del tag modulo.method // “get” oppure “post”, inizializzato dall’attributo METHOD del tag modulo.encoding // stringa che specifica il metodo di codifica per l’invio dei dati, inizializzato dall’attributo ENCTYPE del tag modulo.target // stringa che specifica il nome del frame o finestra per la ricezione dei risultati, inizializzato dall’attributo TARGET del tag

36 Bruni e Giorgetti36 formform: metodi modulo.reset() // riporta tutti i campi di input della form modulo ai valori di default modulo.submit() // invia i dati della form modulo

37 Bruni e Giorgetti37 Form: oggetti o tag? Notare l’analogia tra proprietà e attributi Per accedere all’ i -esima form di un documento? –document.forms[i] Se come si può accedere alla form senza conoscerne l’indice? –document.pippo –(come per le immagini) Quanti elementi contiene il modulo pippo ? –document.pippo.length

38 Bruni e Giorgetti38 Quiz riassuntivi –Se il documento contiene 2 immagini, cosa fa il comando document.images[0]=document.images[1] ? provoca un errore elimina la prima immagine dal documento, lasciando visibile solo l’altra inverte le due immagini mostra due volte la seconda immagine –Si possono aumentare dinamicamente gli elementi di una form? si no

39 Bruni e Giorgetti39 Esercizi

40 Oggetti di terzo livello

41 Bruni e Giorgetti41 Oggetti di terzo livello Sono tutti sotto-oggetti di form –button –reset –submit –text –password –hidden –textarea –checkbox –radio –fileUpload –select option (quarto livello)

42 Bruni e Giorgetti42 Oggetto buttonbutton esistono tre tipi di pulsanti: button, reset e submit ognuno è rappresentato da un tipo oggetto senza JS, i button generici non servono a molto… ed abbiamo già visto come usarli NOTA: la larghezza del pulsante è determinata dalla lunghezza del testo nel campo value (si possono aggiungere spazi)

43 Bruni e Giorgetti43 buttonbutton: proprietà fondamentali // se pulsante è un oggetto di tipo Button pulsante.form // oggetto di tipo Form cui appartiene il pulsante (sola lettura) pulsante.name // stringa che corrisponde al valore dell’attributo NAME del tag (sola lettura) pulsante.type // stringa che descrive il tipo del pulsante, corrisponde all’attributo TYPE del tag (sola lettura) pulsante.value // stringa impressa sul pulsante, corrisponde all’attributo value del tag (sola lettura)

44 Bruni e Giorgetti44 Oggetto texttext Elemento principale delle form permette l’inserimento del testo da parte dell’utente ma serve anche per mostrare risultati dinamicamente! può essere gestito in maniera da impedire all’utente di modificare il valore mostrato oggetto password : del tutto analogo

45 Bruni e Giorgetti45 texttext: proprietà fondamentali // se campo è un oggetto di tipo Text campo.form // come per Button campo.name // come per Button campo.type // come per Button campo.value // come per Button (in questo caso: testo nella casella), ma aperta anche in scrittura campo.defaultValue // stringa di default nella casella di testo, corrisponde all’attributo VALUE del tag (sola lettura)

46 Bruni e Giorgetti46 Oggetto hidden Come un text la cui visibilità sia settata a false usato in epoca pre-JS per passare opportuni valori assieme alle form non possiede metodi le proprietà sono: –form, name, type e value

47 Bruni e Giorgetti47 Oggetto textareatextarea Simile a text, ma permette l’inserimento di più linee di testo può essere usato per mostrare output all’utente impedendo allo stesso di accedervi per modificarlo le proprietà sono: –form, name, type, value e defaultValue

48 Bruni e Giorgetti48 Oggetto checkboxcheckbox Tipico elemento di UI di controllo permette all’utente di specificare un valore di tipo si/no o vero/falso con un “click” gli elementi con lo stesso nome sono raggruppati in un array

49 Bruni e Giorgetti49 checkboxcheckbox: proprietà fondamentali // se scelta è un oggetto di tipo Checkbox scelta.form // come per Text scelta.name // come per Text scelta.type // come per Text scelta.value // come per Text scelta.checked // booleano che indica se la casella è selezionata (lettura e scrittura) scelta.defaultChecked // booleano che indica lo stato di default della checkbox, corrisponde all’attributo CHECKED del tag (sola lettura)

50 Bruni e Giorgetti50 Oggetto radioradio Analogo a checkbox, ma usato per controlli multipli mutuamente esclusivi coinvolge più elementi con lo stesso name –ogni elemento è un oggetto –gli elementi con lo stesso nome sono raggruppati in un array

51 Bruni e Giorgetti51 Oggetto fileuploadfileupload Aggiunto con JS1.1 Del tutto simile ad altri campi di input (es. Text ) –in questo caso value e defaultValue indicano i percorsi del file (rispettivamente, selezionato e di default)

52 Bruni e Giorgetti52 Oggetto selectselect lista di selezione multipla o a cascata contiene il sotto-oggetto options (un array di oggetti di tipo Option per le possibili selezioni) –con options si accedono i parametri delle singole opzioni disponibili nella lista es. se è una lista a selezione multipla, più opzioni potranno essere selezionate contemporaneamente –gli oggetti di tipo Option non hanno metodi, ma solo proprietà

53 Bruni e Giorgetti53 selectselect: proprietà fondamentali // se scelta è un oggetto di tipo Select scelta.form // come per Text scelta.name // come per Text scelta.type // come per Text scelta.options // array di oggetti di tipo Option che modellano le associate al campo rappresentato da scelta scelta.length // lunghezza dell’array scelta.options (sola lettura) scelta.selectedIndex // indice della prima opzione correntemente selezionata (-1 se nessuna è selezionata)

54 Bruni e Giorgetti54 optionoption: proprietà fondamentali // se opzione è un oggetto di tipo Option opzione.index // indice di opzione all’interno del vettore options dell’oggetto Select corrispondente opzione.selected // booleano che indica se opzione è attualmente selezionata o meno opzione.defaultSelected // booleano che indica se opzione è selezionata di default o meno, impostato dall’attributo SELECTED del tag opzione.text // stringa che contiene il testo associato all’opzione (il testo semplice, non formattato che segue ) opzione.value // valore associato all’opzione, inizializzato dall’attributo VALUE del tag

55 Bruni e Giorgetti55 Opzioni dinamiche Gli oggetti Option possono essere creati dinamicamente (col costruttore Option() ) –new Option(testo, valore, defsel, sel) Unico meccanismo dinamico ammesso per quanto riguarda gli elementi di una form (a meno di riscrivere il documento)!

56 Bruni e Giorgetti56 Esempi: contenuto dinamico I Vediamo come sfruttare i campi di input per chiedere valori e mostrare risultati –evitiamo l’uso delle finestre di prompt e alert –l’utente può immettere più dati e modificarli prima di avviare il “calcolo” es. calcolatricecalcolatrice es. trova e rimpiazzatrova e rimpiazza Esempio: calcolo del totale di una form

57 Bruni e Giorgetti57 Esempi: contenuto dinamico II // versione con headerversione con header

58 Bruni e Giorgetti58 Esempi: contenuto dinamico III // versione con arrotondamentoversione con arrotondamento <!-- function totale() { var somma=0; with (document.ordine) { somma += parseInt(qnt1.value) * parseFloat(prz1.value); somma += parseInt(qnt2.value) * parseFloat(prz2.value); tot.value = somma; } //-->

59 Bruni e Giorgetti59 Esempi: riconoscere le scelte I Vediamo come capire quali caselle (radio o checkbox) sono segnate e quali opzioni sono state selezionate (select) –possiamo restringere l’input dell’utente a valori significativi che possiamo subito controllare e sfruttare Esempio: arricchiamo la form precedente

60 Bruni e Giorgetti60 Esempi: riconoscere le scelte II // versione con headerversione con header 10% 20% 30%

61 Bruni e Giorgetti61 Esempi: riconoscere le scelte III // versione con arrotondamentoversione con arrotondamento <!-- function totale() { var somma=0; with (document.ordine) { somma += parseInt(qnt1.value) * parseFloat(prz1.value); somma += parseInt(qnt2.value) * parseFloat(prz2.value); var sconto = 0; for (i=0 ; i<sct.length ; i++) { if (sct[i].checked) { sconto = sct[i].value; break; } } somma -= (somma*parseInt(sconto))/100 tot.value = somma; } //-->

62 Bruni e Giorgetti62 Esempi: riconoscere le scelte IV // versione con headerversione con header 10% 20% 30%

63 Bruni e Giorgetti63 Esempi: riconoscere le scelte V // versione con arrotondamentoversione con arrotondamento <!-- function totale() { var somma=0; with (document.ordine) { somma += parseInt(qnt1.value) * parseFloat(prz1.value); somma += parseInt(qnt2.value) * parseFloat(prz2.value); var sconto = sct.options[sct.selectedIndex].value; tot.value = somma; } //-->

64 Bruni e Giorgetti64 Quiz riassuntivi I –Qual è l’unico tipo oggetto di quarto livello? non ve ne sono Window Document Form Select Option –Come si fa a cambiare la scritta impressa su un pulsante?cambiare non si può assegnando il valore alla proprietà name dell’oggetto Button assegnando il valore alla proprietà value dell’oggetto Button –Come si fa a capire quante opzioni mette a disposizione un oggetto scelta di tipo select ? non si può con scelta.length con scelta.options.length

65 Bruni e Giorgetti65 Esercizi