Document… iamoci Roberto Bruni e Daniela Giorgetti.

Presentazione sul tema: "Document… iamoci Roberto Bruni e Daniela Giorgetti."— Transcript della presentazione:

1 Document… iamoci Roberto Bruni e Daniela Giorgetti

2 Bruni e Giorgetti2 Document L’oggetto document fa da contenitore per tutti gli oggetti correlati ad HTML e associati ai tag e notare che anche se gli eventi onload e onunload sono catturati nel body, essi sono pertinenti alla window e non al document !

3 Bruni e Giorgetti3 document.open() JS può essere usato per generare documenti on-the-fly –document.open( “mimetype”) prepara uno stream per successive write e writeln. il parametro è il MIME type dello stream: text/html : default text/plain image/gif image/jpeg image/x-bitmap plugin (qualsiasi MIME type di plugin per Netscape)

4 Bruni e Giorgetti4 document.write() document.write( espressioneJS ) document.writeln( espressioneJS ) Valutano l’espressione JS e scrivono il risultato sul documento –writeln appende anche un carattere newline alla fine dell’espressione

5 Bruni e Giorgetti5 document.close() Chiude lo stream aperto con document.open() Mentre open e close preparano o chiudono un documento generato, write e writeln ne definiscono il contenuto. –tutte le espressioni JS sono valide, incluse letterali, variabili e interi La limitazione principale è che non si può modificare il contenuto del documento corrente senza ricaricare la pagina

6 Bruni e Giorgetti6 Generazione del documento Il nuovo documento può essere creato –nella finestra corrente es. per creare pagine diverse a seconda del browser –dentro un frame es. come risultato di un input utente in altra frame –dentro una finestra separata es. nuova finestra

7 Bruni e Giorgetti7 Cambiare colori JS permette di modificare i valori impostati nel body per sfondo, testo, link –questi corrispondono infatti a 5 proprietà di document: fgcolor (testo) bgcolor (sfonfo) alinkcolor (link attivi) linkcolor (link) vlinkcolor (link visitati) In linea di principio non si potrebbero applicare ad una pagina già visualizzata…

8 Bruni e Giorgetti8 La proprietà location document.location è read-only! Per caricare un nuovo documento potete modificare invece window.location.href

9 Bruni e Giorgetti9 Links Permette la gestione degli eventi –onclick –onmouseover I link non hanno la proprietà name e quindi non possiamo riferire uno specifico link direttamente. dobbiamo usare l’array –document.links

10 Bruni e Giorgetti10 Estrarre informazioni Supponiamo di voler estrarre tutti i link da una pagina caricata in un frame e di volerli visualizzare su un’altra pagina semplicemente premendo un pulsante… –si può fare! –Esercizio: farlo (o almeno provarci)… ma non subito… tra qualche diapositiva

11 Bruni e Giorgetti11 Eseguire JS nei link Usando il protocollo javascript : nell’attributo href del link possiamo valutare un’espressione JS invece di raggiungere una nuova URL o mandare della posta Però il codice deve essere self-contained non si può riferire un oggetto fuori dal contesto come un elemento di un’altra finestra

12 Bruni e Giorgetti12 Ancora ancore! Potremmo dire che le ancore sono “JS resistenti” perché non ci si può fare molto… infatti le ancore non hanno proprietà, metodi o eventi interessanti l’unico uso che si può fare del vettore di ancore del documento ( document.anchors ) è di determinare il numero delle ancore e scorrerle

13 Bruni e Giorgetti13 Image L’oggetto Image è supportato da JS1.1+ permette di gestire direttamente gli eventi onabort, onerror e onload (dell’immagine) Utile anche per il precaricamento di immagini

14 Bruni e Giorgetti14 Esempio: Estrarre Info I Vogliamo fare uno script che ci aiuti a estrarre informazioni da documenti html –caricare una pagina del file system –visualizzarla –creare una pagina on-the-fly con l’elenco delle immagini visualizzate nella pagina caricata Vediamo una soluzione con frame

15 Bruni e Giorgetti15 Esempio: Estrarre Info II DOCUMENTO MASTER Estrai Immagini

16 Bruni e Giorgetti16 Esempio: Estrarre Info III scegliDocImages.html Scegli documento HTML … <input type="button“ onclick="carica(document.selezioneFile.nomeFile.value)" value="Carica Pagina" /> <input type="button" onclick="estrai()" value="Estrai Immagini" />

17 Bruni e Giorgetti17 Esempio: Estrarre Info IV scegliDocImages.html <!-- function carica(nomeFile) { parent.doc_selezionato.location.href="file://"+nomeFile; } // nomeFile è quello selezionato nella casella di input // parent è il documento master (finestra principale) // parent.doc_selezionato è il frame dove carichiamo il documento (finestra sorella di quella dove gira lo script)

18 Bruni e Giorgetti18 Esempio: Estrarre Info V scegliDocImages.html function estrai() { var temp_image; parent.info_images.document.open("text/html"); parent.info_images.document.writeln(“ "); for (i=0;i<parent.doc_selezionato.document.images.length;i++) { temp_image = parent.doc_selezionato.document.images[i]; parent.info_images.document.writeln(unescape(temp_image.src)); parent.info_images.document.writeln("["+temp_image.alt+"]"); parent.info_images.document.writeln(); } parent.info_images.document.write(" "); parent.info_images.document.close(); } //-->

19 Bruni e Giorgetti19 Quiz riassuntivi –Quale tag corrisponde all’oggetto document ? nessun tag il tag –Come si fa a sapere quante immagini ci sono nella pagina? non si può window.images.length window.length document.images.length document.length –Come si fa a convertire un documento in lingue diverse? non si può chiamiamo un interprete con document.language

20 Bruni e Giorgetti20 Esercizi