Comments
Description
Transcript
Lezione11_CSSP
DOM, CSS-P e DHTML
Roberto Bruni e Daniela Giorgetti
DOM
(Document Object Model)
DOM
• DOM = Gerarchia ad albero degli elementi
che compongono il documento (visti come
oggetti, con proprietà e metodi)
– es. immagini, link, form
• In passato molte differenze tra IE e NN
• Adesso è standardizzato (da W3C)
– tutti i tag definiscono elementi del documento
– possiamo leggerne/modificarne il contenuto
– supportato da NN6+ e IE5+
Bruni e Giorgetti
3
Esempio
<html>
<head>
<title>Esempio</title>
</head>
<body>
<h1>Intestazione</h1>
<p>Paragrafo</p>
</body>
</html>
document
html
head
body
title
h1
p
"Esempio"
"Intestazione"
"Paragrafo"
Bruni e Giorgetti
4
La struttura DOM
• Nodi: elementi del documento (es. tag
contenitori, i loro contenuti)
– Attributo id usato per identificarli
• Genitori, figli e fratelli: come da
annidamento dei tag del documento
– fratelli vengono detti siblings
– il testo racchiuso tra tag contenitori visto come
oggetto String figlio
Bruni e Giorgetti
5
Proprietà elementari dei nodi
• nodo.nodeName: il nome del nodo (non l’id)
– il nome del tag (es. P oppure BODY)
– #document per l’intero documento
– #text per il contenuto testuale di tag contenitori
• nodo.nodeType: intero che descrive il tipo
• 1 per tag HTML ordinari
• 3 per nodi text
• 9 per il nodo document
• nodo.nodeValue: testo racchiuso nel nodo
Bruni e Giorgetti
6
Navigazione sull’albero
• nodo.firstChild: il primo figlio di nodo
• nodo.lastChild: l’ultimo figlio di nodo
• nodo.childNodes: array dei figli di nodo
• nodo.previousSibling: il fratello
immediatamente precedente nodo
• nodo.nextSibling: il fratello immediatamente
successivo a nodo
Bruni e Giorgetti
7
Il nodo document
• Nodo speciale
– possiede metodi molto utili
• document.getElementById(nomeid):
restituisce l’elemento il cui attributo id
corrisponde al nome passato
• document.getElementsByTagName(nometag):
restituisce un array con tutti gli elementi aventi il
tag specificato dal parametro passato (passando
“*” si collezionano tutti i tag)
• document.createTextNode(testo): crea un
nuovo nodo di tipo text il cui contenuto è testo
– potrà essere aggiunto al documento
Bruni e Giorgetti
8
Orologio con DOM I
<body onLoad=“orologio();”>
<h2>È il momento giusto per
un break?</h2>
<p id=“data”>Data:</p>
<p id=“ora”>Ora:</p>
</body>
Bruni e Giorgetti
9
Orologio con DOM II
<script type=“text/Javascript”>
<!-function orologio() {
… // calcoliamo dataStr e oraStr come prima
var paragrafoData = document.getElementById(“data”);
var paragrafoOra = document.getElementById(“ora”);
var nodoData = paragrafoData.firstChild;
var nodoOra = paragrafoOra.firstChild;
nodoData.nodeValue = “Data: ”+dataStr;
nodoOra.nodeValue = “Ora: ”+oraStr;
setTimeout(“orologio()”,1000);
}
//-->
</script>
Bruni e Giorgetti
10
Metodi dei nodi
• nodo.appendChild(nuovonodo): aggiunge il nodo
•
•
•
•
passato come ultimo figlio dell’elemento corrente
nodo.insertBefore(nuovo,vecchio): aggiunge il
nuovo nodo tra i figli dell’elemento corrente, prima del
vecchio nodo
nodo.replaceChild(nuovo,vecchio): aggiunge il
nuovo nodo tra i figli dell’elemento corrente, al posto
del vecchio nodo (che viene eliminato)
nodo.removeChild(vecchio): rimuove il vecchio
nodo dai filgi dell’elemento corrente
nodo.hasChildNodes(): restituisce un booleano
(true se ha uno o più figli, false altrimenti)
Bruni e Giorgetti
11
Aggiungere testo alla pagina I
<body>
<h1>Crea il tuo documento</h1>
<p id=“testo”>Con DOM puoi aggiungere paragrafi
dinamicamente a questa pagina. Digita una frase
e premi il pulsante!</p>
<form name=“modulo”>
<input type=“text” name=“frase” size=“65” />
<input type=“button” value=“Aggiungi”
onclick=“addFrase();” />
</form>
</body>
Bruni e Giorgetti
12
Aggiungere testo alla pagina II
<script type=“text/javascript”>
<!-function addFrase() {
var valore = document.modulo.frase.value; // come solito
var nodo = document.createTextNode(“ ”+valore);
// crea nuovo nodo di testo
document.getElementById(“testo”).appendChild(nodo);
// aggiunge il nuovo nodo in fondo al paragrafo
}
//-->
</script>
Bruni e Giorgetti
13
CSS-P
(Cascading Style Sheets
with Positioning)
Da CSS level 1 a CSS-P
• Dicembre 1996: prima versione dei
cascading style sheets (CSS1)
• controllo maggiore sullo stile e formattazione degli
elementi della pagina…
• … ma non era possibile posizionarli
• Agosto 1997: cascading style sheets with
positioning (CSS-P)
• posizionamento “al pixel” per ogni elemento!
Bruni e Giorgetti
15
Level 2 e level 3
• CSS2 = CSS1 + CSS-P
– inoltre aggiunse stili speciali per elementi
multimediali e per il cursore
• CSS3
– sotto studio
• proposte per supportare grafica vettoriale e
interfacce utente
Bruni e Giorgetti
16
Applicazione dello stile
• File .css importato con <link />
• tag <style> nella head del documento
– ridefinizioni di stili:
• h1 { … }
– definizioni di classi di stile :
• h1.special { … }
.h8 { … }
• usati da attributo class
– definizioni di identificatori di stile
• #maiuscoletto { … }
• usati da attributo id
• attributo style
• style=“ … ”
Bruni e Giorgetti
17
Esempio I
<html><head><title>Applica stili</title>
<style type="text/css">
h1 { background: green;
font-weight: bold;
width: 80; height: 80; text-indent: 10; }
h1.special { background: blue;
font-style:italic; }
.h8 { background: red;
width: 80;
text-indent: 10;
#h9 { background: yellow;
width: 80;
text-indent: 10;
</style></head>
Bruni e Giorgetti
font-weight: bold;
height: 80;
font-size: 24pt; }
font-weight: bold;
height: 80;
font-size: 24pt; }
18
Esempio II
<body>
<h1>Pino</h1>
<h1 class="special" >Gino</h1>
<div class="h8">Rino</div>
<div id="h9">Lino</div>
</body></html>
Bruni e Giorgetti
19
Posizionamento
• Possiamo usare le seguenti proprietà:
– position
– left, right, top e bottom
– z-index
– visibility
Bruni e Giorgetti
20
Position
• Indica come calcolare la posizione di un
elemento nella pagina
– absolute (coordinate assolute)
– fixed (come absolute, ma resistente allo scroll)
– relative (coordinate relative all’elemento
precedente)
– static (valore di default)
Bruni e Giorgetti
21
Coordinate
• left
– distanza dal margine sinistro della finestra
• right
– distanza dal margine destro della finestra
• top
– distanza dal bordo superiore
• bottom
– distanza dal bordo inferiore
Bruni e Giorgetti
22
z-index
• Serve quando i “layer” (strati) si
sovrappongono
– se non specifichiamo nulla, l’ultimo elemento
aggiunto copre gli altri (Esempio)
– un layer con valore più alto di z-index copre
tutti i layer con valore più basso (default = 0)
• a parità di layer l’ultimo copre i precedenti
(Esempio)
Bruni e Giorgetti
23
Visibility
• Permette di nascondere i layer indesiderati
• ha quattro valori possibili
– hidden
• nasconde l’elemento
– collapse
• come hidden eccetto che per le tabelle
– inherit
• default (stesso valore del genitore)
– visible
• rende visibile l’elemento
Bruni e Giorgetti
24
DHTML
(Dynamic HTML)
CSS-P + JS = DHTML
• Usando
– layers
– javascript
– fogli di stile
• possiamo
– creare (con HTML)
– disporre (con CSS)
– animare (con JS)
Bruni e Giorgetti
26
La dicotomia
• Lo standard prevede di usare <div> e
<iframe>
• Netscape preferisce i deprecati <layer> e
<ilayer>
• possiamo seguire lo standard anche con
Netscape, ma la sintassi di accesso alle
proprietà è diversa da quella di Explorer
• I browser più recenti usano la sintassi DOM
Bruni e Giorgetti
27
Netscape 5+ Explorer 5+
• NN5+ e IE5+ supportano il DOM
<div id=“L1” name=“pippo”> … </div>
document.getElementById(‘pippo’).style.visibility
Bruni e Giorgetti
28
Netscape 4• DOM non supportato
• Si usa l’array layers di document
– settando l’attributo name nel tag <DIV>
possiamo accedere direttamente al suo layer
<div id=“L1” name=“pippo”> … </div>
document.layers[‘pippo’].visibility
Bruni e Giorgetti
29
Explorer 4• DOM non supportato
• Si usa l’array all di document
– settando l’attributo id (non name!) nel tag <DIV>
possiamo accedere direttamente al suo layer
– bisogna anche aggiungere la keyword style
<div id=“L1” name=“pippo”> … </div>
document.all[‘L1’].style.visibility
Bruni e Giorgetti
30
id = name
• visto che
– N.N. sfrutta name
– I.E. sfrutta id
• è essenziale usare lo stesso nome nei
due campi per rendere uniforme il
trattamento dei due casi!!!
<div id=“L1” name=“L1”> … </div>
Bruni e Giorgetti
31
Cross-Browser DHTML
document.getElementById(‘L1’).style.visibility
document.
layers[‘L1’]
.visibility
document.
all[‘L1’].style.visibility
“document.” + partI
+ “‘L1’”
+ partII + “.visibility”
Bruni e Giorgetti
32
checkBrowser()
var partI = “getElementById(”;
var partII = “).style”; // ok per DOM
function checkBrowser() {
if (parseInt(navigator.appVersion) >= 5 ||
navigator.appVersion.indexOf(“MSIE 5”) != -1 ||
navigator.appVersion.indexOf(“MSIE 6”) != -1) {
browser = “DOM”; } else {
if (navigator.userAgent.indexOf(“Mozilla/4”) != -1 &&
navigator.appName.indexOf(“Nav”) != -1) {
partI = “layers[”;
partII=“]”;
browser = “NS4”; } else {
if (navigator.userAgent.indexOf(“Mozilla/4”) != -1 &&
navigator.appVersion.indexOf(“MSIE 4”) != -1) {
partI = “all[”;
partII=“].style”;
browser = “IE4”; } } }
}
Bruni e Giorgetti
33
L’accesso ai layer
• attivare la funzione checkBrowser() al
caricamento della pagina
• creare delle funzioni specifiche come quella
sotto:
function assegna(nomelayer,attributo,valore)
{ // costruiamo il comando
cmd = “document.” + partI
+ “‘”+nomelayer+“’”
+ partII
+ “.”+attributo
+ “ = ‘”+valore+“’”;
eval(cmd) // lo eseguiamo col meta-interprete
}
Bruni e Giorgetti
34
Esempio d’uso
<div id=“L1” name=“L1”> … </div>
<input type=“button”
value=“Nascondi L1”
onclick=“assegna(‘L1’,‘visibility’,‘hidden’)” />
<input type=“button”
value=“Mostra L1”
onclick=“assegna(‘L1’,‘visibility’,‘visible’)” />
Bruni e Giorgetti
35
Menu a tendina con DHTML
• è sufficiente
– creare gli elementi giusti
– nasconderli e mostrarli quando richiesto
• (sono sempre lì ma non si vedono)
Esempio
Bruni e Giorgetti
36
E chi non supporta DHTML?
<div style="position: absolute;
width: 250;
left: -250; top: 10;">
Il vostro browser non può visualizzare
questa pagina nella maniera corretta.
Aggiornate il browser o visitate la
versione
<a href=“URLopportuna"> HTML plain</a>
della pagina.
</div>
Bruni e Giorgetti
37
Esercizi
Bruni e Giorgetti
38