DOM, CSS-P e DHTML Roberto Bruni e Daniela Giorgetti.

Presentazione sul tema: "DOM, CSS-P e DHTML Roberto Bruni e Daniela Giorgetti."— Transcript della presentazione:

1 DOM, CSS-P e DHTML Roberto Bruni e Daniela Giorgetti

2 DOM (Document Object Model)

3 Bruni e Giorgetti3 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+

4 Bruni e Giorgetti4 Esempio Esempio Intestazione Paragrafo

5 Bruni e Giorgetti5 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

6 Bruni e Giorgetti6 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

7 Bruni e Giorgetti7 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

8 Bruni e Giorgetti8 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

9 Bruni e Giorgetti9 OrologioOrologio con DOM I È il momento giusto per un break? Data: Ora:

10 Bruni e Giorgetti10 OrologioOrologio con DOM II <!-- 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); } //-->

11 Bruni e Giorgetti11 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)

12 Bruni e Giorgetti12 Aggiungere testo alla pagina I Crea il tuo documento Con DOM puoi aggiungere paragrafi dinamicamente a questa pagina. Digita una frase e premi il pulsante! <input type=“button” value=“Aggiungi” onclick=“addFrase();” />

13 Bruni e Giorgetti13 Aggiungere testo alla pagina II <!-- 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 } //-->

14 CSS-P (Cascading Style Sheets with Positioning)

15 Bruni e Giorgetti15 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!

16 Bruni e Giorgetti16 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

17 Bruni e Giorgetti17 Applicazione dello stile File.css importato con tag 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=“ … ”

18 Bruni e Giorgetti18 Esempio I Applica stili h1 { background: green; font-weight: bold; width: 80; height: 80; text-indent: 10; } h1.special { background: blue; font-style:italic; }.h8 { background: red; font-weight: bold; width: 80; height: 80; text-indent: 10; font-size: 24pt; } #h9 { background: yellow; font-weight: bold; width: 80; height: 80; text-indent: 10; font-size: 24pt; }

19 Bruni e Giorgetti19 EsempioEsempio II Pino Gino Rino Lino

20 Bruni e Giorgetti20 Posizionamento Possiamo usare le seguenti proprietà: –position –left, right, top e bottom –z-index –visibility

21 Bruni e Giorgetti21 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)

22 Bruni e Giorgetti22 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

23 Bruni e Giorgetti23 z-index Serve quando i “layer” (strati) si sovrappongono –se non specifichiamo nulla, l’ultimo elemento aggiunto copre gli altri (Esempio)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)Esempio

24 Bruni e Giorgetti24 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

25 DHTML (Dynamic HTML)

26 Bruni e Giorgetti26 CSS-P + JS = DHTML Usando –layers –javascript –fogli di stile possiamo –creare (con HTML) –disporre (con CSS) –animare (con JS)

27 Bruni e Giorgetti27 La dicotomia Lo standard prevede di usare e Netscape preferisce i deprecati e 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

28 Bruni e Giorgetti28 Netscape 5+ Explorer 5+ NN5+ e IE5+ supportano il DOM … document.getElementById(‘pippo’).style.visibility

29 Bruni e Giorgetti29 Netscape 4- DOM non supportato Si usa l’array layers di document –settando l’attributo name nel tag possiamo accedere direttamente al suo layer … document.layers[‘pippo’].visibility

30 Bruni e Giorgetti30 Explorer 4- DOM non supportato Si usa l’array all di document –settando l’attributo id (non name !) nel tag possiamo accedere direttamente al suo layer –bisogna anche aggiungere la keyword style … document.all[‘L1’].style.visibility

31 Bruni e Giorgetti31 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!!! …

32 Bruni e Giorgetti32 Cross-Browser DHTML document.getElementById(‘L1’).style.visibility document. layers[‘L1’].visibility document. all[‘L1’].style.visibility “document.” + partI + “‘L1’” + partII + “.visibility”

33 Bruni e Giorgetti33 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”; } } } }

34 Bruni e Giorgetti34 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 }

35 Bruni e Giorgetti35 Esempio Esempio d’uso … <input type=“button” value=“Nascondi L1” onclick=“assegna(‘L1’,‘visibility’,‘hidden’)” /> <input type=“button” value=“Mostra L1” onclick=“assegna(‘L1’,‘visibility’,‘visible’)” />

36 Bruni e Giorgetti36 Menu a tendina con DHTML è sufficiente –creare gli elementi giusti –nasconderli e mostrarli quando richiesto (sono sempre lì ma non si vedono) Esempio

37 Bruni e Giorgetti37 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 HTML plain della pagina.

38 Bruni e Giorgetti38 Esercizi