HTML

Download Report

Transcript HTML 

Oggetti Client-Side
Stefano Bistarelli
Thanks to
Roberto Bruni e Daniela Giorgetti
Oggetti client-side
Navigator
MimeType
Window
Plugin
History
Button
Reset
Location
Document
Frame
Plugin
Layer
Link
Form
Image
Area
Anchor
Applet
Submit
Text
Password
Hidden
Textarea
Checkbox
Radio
FileUpload
Select
Option
Bruni e Giorgetti
2
Oggetti top
Oggetto navigator
• 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
standard
– o anche rendere scrivibili proprietà di sola
lettura (IE generalmente molto permissivo)
Bruni e Giorgetti
4
navigator: 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
Bruni e Giorgetti
5
navigator: 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+)
Bruni e Giorgetti
6
Oggetto window
• Ogni browser presenta una finestra (window)
• 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
Bruni e Giorgetti
7
window: 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
Bruni e Giorgetti
8
window: 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
Bruni e Giorgetti
9
Oggetti di primo livello
Oggetti di primo livello
• l’oggetto window ha quattro oggetti figli
• possono essere riferiti senza usare la parola
chiave window
–
–
–
–
document
frame
history
location
Bruni e Giorgetti
11
Oggetto document
• Forse è il più importante
• responsabile di tutto quello che compare
sulla pagina
• controparte del tag <BODY>
• 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 browser
Bruni e Giorgetti
12
document: 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
Bruni e Giorgetti
13
document: 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
Bruni e Giorgetti
14
document: 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)
Bruni e Giorgetti
15
Oggetto location
• 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
Bruni e Giorgetti
16
location: 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”
port  “1234”
host  “www.oreilly.com:1234”
pathname  “/catalog/search.html”
search  “?query=JS&match=2”
hash  “#result”
Bruni e Giorgetti
17
Oggetto frame
• 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
Bruni e Giorgetti
18
Oggetto history
• 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
Bruni e Giorgetti
19
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
Bruni e Giorgetti
20
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
Bruni e Giorgetti
21
Esercizi
Bruni e Giorgetti
22
Oggetti di secondo livello
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
Bruni e Giorgetti
24
Oggetto anchor
• testo o immagine della pagina che è target
di un link
• controparte del tag <a>
• elencati in un vettore: document.anchors
• generalmente ha scarso rilievo in JS
– proprietà:
• name: nome dell’ancora
• text: testo che compare tra <a> e </a>
• x: coordinata X dell’ancora
• y: coordinata Y dell’ancora
Bruni e Giorgetti
25
Oggetto link
• La nascita e lo sviluppo del web sono legati
indubbiamente al concetto di link
• controparte del tag <a>
• 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 <a> e </a>
• x: coordinata X dell’ancora
• y: coordinata Y dell’ancora
Bruni e Giorgetti
26
Oggetto area
• Aggiunto a JS1.1
• riferisce le aree “cliccabili” delle mappe
immagine
• (non lo vediamo in dettaglio)
Bruni e Giorgetti
27
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
Bruni e Giorgetti
28
Oggetto image
•
•
•
•
incapsula ogni immagine del documento
controparte del tag <IMG />
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
Bruni e Giorgetti
29
image: 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
<IMG> (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)
Bruni e Giorgetti
30
image: proprietà fondamentali II
immagine.src // stringa che
specifica la URL dell’immagine, il
cui valore iniziale è dato
dall’attributo SRC del tag <IMG>
(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)
Bruni e Giorgetti
31
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 <IMG NAME=“pippo” … /> come si può
accedere all’immagine senza conoscerne l’indice?
– document.pippo
– (vale anche per le form)
Bruni e Giorgetti
32
Oggetto Form
• A parte applet Java e controlli ActiveX,
l’interazione con l’utente risiede nelle form
• controparte del tag <FORM>
• l’oggetto form gestisce pulsanti, campi di
testo, e tutti gli altri elementi UI come sottooggetti
• controlla che l’interazione proceda sempre
nella maniera corretta
Bruni e Giorgetti
33
form: proprietà fondamentali I
// se modulo è un oggetto di tipo Form
modulo.name // stringa che corrisponde al
valore dell’attributo NAME del tag
<FORM> (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)
Bruni e Giorgetti
34
form: proprietà fondamentali II
modulo.action // stringa che specifica
l’URL alla quale sarà inviato il
modulo, inizializzato dall’attributo
ACTION del tag <FORM>
modulo.method // “get” oppure “post”,
inizializzato dall’attributo METHOD del
tag <FORM>
modulo.encoding // stringa che specifica
il metodo di codifica per l’invio dei
dati, inizializzato dall’attributo
ENCTYPE del tag <FORM>
modulo.target // stringa che specifica il
nome del frame o finestra per la
ricezione dei risultati, inizializzato
dall’attributo TARGET del tag <FORM>
Bruni e Giorgetti
35
form: metodi
modulo.reset() // riporta tutti i
campi di input della form modulo
ai valori di default
modulo.submit() // invia i dati
della form modulo
Bruni e Giorgetti
36
Form: oggetti o tag?
• Notare l’analogia tra proprietà e attributi
• Per accedere all’i-esima form di un documento?
– document.forms[i]
• Se <FORM NAME=“pippo” … /> 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
Bruni e Giorgetti
37
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
Bruni e Giorgetti
38
Esercizi
Bruni e Giorgetti
39
Oggetti di terzo livello
Oggetti di terzo livello
• Sono tutti sotto-oggetti di form
–
–
–
–
–
–
–
–
–
–
–
button
reset
submit
text
password
hidden
textarea
checkbox
radio
fileUpload
select
• option (quarto livello)
Bruni e Giorgetti
41
Oggetto button
• 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)
Bruni e Giorgetti
42
button: 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 <INPUT/>
(sola lettura)
pulsante.type // stringa che descrive il tipo
del pulsante, corrisponde all’attributo
TYPE del tag <INPUT /> (sola lettura)
pulsante.value // stringa impressa sul
pulsante, corrisponde all’attributo value
del tag <INPUT /> (sola lettura)
Bruni e Giorgetti
43
Oggetto text
• 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
Bruni e Giorgetti
44
text: 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 <INPUT /> (sola
lettura)
Bruni e Giorgetti
45
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
Bruni e Giorgetti
46
Oggetto textarea
• 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
Bruni e Giorgetti
47
Oggetto checkbox
• 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
Bruni e Giorgetti
48
checkbox: 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
<INPUT /> (sola lettura)
Bruni e Giorgetti
49
Oggetto radio
• 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
Bruni e Giorgetti
50
Oggetto fileupload
• 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)
Bruni e Giorgetti
51
Oggetto select
• 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à
Bruni e Giorgetti
52
select: proprietà fondamentali
// se scelta è
scelta.form //
scelta.name //
scelta.type //
un oggetto di tipo Select
come per Text
come per Text
come per Text
scelta.options // array di oggetti di tipo
Option che modellano le <OPTION> associate
al campo <SELECT> rappresentato da scelta
scelta.length // lunghezza dell’array
scelta.options (sola lettura)
scelta.selectedIndex // indice della prima
opzione correntemente selezionata (-1 se
nessuna è selezionata)
Bruni e Giorgetti
53
option: 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 <OPTION>
opzione.text // stringa che contiene il testo
associato all’opzione (il testo semplice, non
formattato che segue <OPTION>)
opzione.value // valore associato all’opzione,
inizializzato dall’attributo VALUE del tag <OPTION>
Bruni e Giorgetti
54
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)!
Bruni e Giorgetti
55
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. calcolatrice
• es. trova e rimpiazza
• Esempio: calcolo del totale di una form
Bruni e Giorgetti
56
Esempi: contenuto dinamico II
<form name=“ordine”> // versione con header
<table>
<tr><td><input name=“dsc1” type=“text” value=“” /></td>
<td><input name=“qnt1” type=“text” value=“0” /></td>
<td><input name=“prz1” type=“text” value=“0” /></td></tr>
<tr><td><input name=“dsc2” type=“text” value=“” /></td>
<td><input name=“qnt2” type=“text” value=“0” /></td>
<td><input name=“prz2” type=“text” value=“0” /></td></tr>
<tr><td colspan=“2”>
<input type=“button” value=“TOTALE” onclick=“totale()” />
</td>
<td><input name=“tot” type=“text” value=“0” /></td></tr>
</table>
</form>
Bruni e Giorgetti
57
Esempi: contenuto dinamico III
<script type=“text/javascript”> // versione 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;
}
}
//-->
</script>
Bruni e Giorgetti
58
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
Bruni e Giorgetti
59
Esempi: riconoscere le scelte II
<form name=“ordine”> // versione con header
<table>
<tr><td><input name=“dsc1” type=“text” value=“” /></td>
<td><input name=“qnt1” type=“text” value=“0” /></td>
<td><input name=“prz1” type=“text” value=“0” /></td></tr>
<tr><td><input name=“dsc2” type=“text” value=“” /></td>
<td><input name=“qnt2” type=“text” value=“0” /></td>
<td><input name=“prz2” type=“text” value=“0” /></td></tr>
<tr><td>
<input type=“button” value=“TOTALE” onclick=“totale()” />
</td>
<td><input name=“sct” type=“radio” value=“10” />10%
<input name=“sct” type=“radio” value=“20” />20%
<input name=“sct” type=“radio” value=“30” />30%</td>
<td><input name=“tot” type=“text” value=“0” /></td></tr>
</table>
</form>
Bruni e Giorgetti
60
Esempi: riconoscere le scelte III
<script type=“text/javascript”> // versione 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;
}
}
//-->
</script>
Bruni e Giorgetti
61
Esempi: riconoscere le scelte IV
<form name=“ordine”> // versione con header
<table>
<tr><td><input name=“dsc1” type=“text” value=“” /></td>
<td><input name=“qnt1” type=“text” value=“0” /></td>
<td><input name=“prz1” type=“text” value=“0” /></td></tr>
<tr><td><input name=“dsc2” type=“text” value=“” /></td>
<td><input name=“qnt2” type=“text” value=“0” /></td>
<td><input name=“prz2” type=“text” value=“0” /></td></tr>
<tr><td>
<input type=“button” value=“TOTALE” onclick=“totale()” />
</td>
<td><select name=“sct”><option value=“10” selected>10%
<option value=“20”>20%
<option value=“30”>30%</select></td>
<td><input name=“tot” type=“text” value=“0” /></td></tr>
</table>
</form>
Bruni e Giorgetti
62
Esempi: riconoscere le scelte V
<script type=“text/javascript”> // versione 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;
}
}
//-->
</script>
Bruni e Giorgetti
63
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?
• 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
Bruni e Giorgetti
64
Esercizi
Bruni e Giorgetti
65