Comments
Description
Transcript
Document…
Document… iamoci
Roberto Bruni e Daniela Giorgetti
Document
• L’oggetto document fa da contenitore per
tutti gli oggetti correlati ad HTML e
associati ai tag <head> e <body>
• notare che anche se gli eventi onload e
onunload sono catturati nel body, essi sono
pertinenti alla window e non al document!
Bruni e Giorgetti
2
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 Giorgetti
3
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 Giorgetti
4
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 Giorgetti
5
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 Giorgetti
6
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 Giorgetti
7
La proprietà location
• document.location è read-only!
• Per caricare un nuovo documento potete
modificare invece
window.location.href
Bruni e Giorgetti
8
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 Giorgetti
9
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 Giorgetti
10
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 Giorgetti
11
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 Giorgetti
12
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 Giorgetti
13
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 Giorgetti
14
Esempio: Estrarre Info II
DOCUMENTO MASTER
<html>
<head><title>Estrai Immagini</title></head>
<frameset cols="80%,*">
<frameset rows="15%,*">
<frame name="form_di_scelta" src="scegliDocImages.html" />
<frame name="doc_selezionato" src="paginaVuota.html" />
</frameset>
<frame name="info_images" src="paginaVuota.html" />
</frameset>
</html>
Bruni e Giorgetti
15
Esempio: Estrarre Info III
scegliDocImages.html
<html>
<head><title>Scegli documento HTML</title>
<script type="text/javascript"> … </script></head>
<body>
<form name="selezioneFile">
<input type="file" name="nomeFile" />
<input type="button“
onclick="carica(document.selezioneFile.nomeFile.value)"
value="Carica Pagina" />
<input type="button"
onclick="estrai()"
value="Estrai Immagini" />
</form>
</body>
</html>
Bruni e Giorgetti
16
Esempio: Estrarre Info IV
scegliDocImages.html
<script type="text/javascript">
<!-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)
parent = top
form_di_scelta
(scegliDocImages.html)
doc_selezionato
Bruni e Giorgetti
info_images
17
Esempio: Estrarre Info V
scegliDocImages.html
function estrai() {
var temp_image;
parent.info_images.document.open("text/html");
parent.info_images.document.writeln(“<pre>");
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("</pre>");
parent.info_images.document.close();
}
//-->
</script>
Bruni e Giorgetti
18
Quiz riassuntivi
– Quale tag corrisponde all’oggetto document ?
•
•
•
•
nessun tag
il tag <HTML>
il tag <HEAD>
il tag <BODY>
– 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 Giorgetti
19
Esercizi
Bruni e Giorgetti
20