Document… iamoci Roberto Bruni e Daniela Giorgetti

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 !

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)

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

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

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

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…

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

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

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

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

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

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

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

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

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" />

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)

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(); } //-->

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

Bruni e Giorgetti20 Esercizi