Document Object Model: XML, HTML, CSS

Transcript

1 Document Object Model: XML, HTML, CSS Dispense per il corso di Ingegneria del Web Revisione 05/11 Giuseppe Della Penna Dipartimento di Informatica Università degli studi dell'aquila

2 Document Object Model: Il DOM XML I Modelli a Oggetti Attraverso Javascript è possibile interagire con il modello a oggetti della pagina HTML caricata nel browser, per analizzarlo e modificarlo. Questa tecnica, estremamente potente, permette di realizzare pagine web dinamiche e interattive, spostando parte della logica sul client, com'è oggi molto comune, sopratutto in associazione con la tecnologia AJAX. Vediamo prima di tutto cosa è un modello a oggetti. Un modello ad oggetti definisce gli oggetti usati per rappresentare e manipolare un particolare tipo di informazione, le interfacce usate per interagire con gli oggetti definiti, la semantica richiesta dagli oggetti e dalle interfacce definite e le relazioni e interazioni tra le interfacce e gli oggetti definiti. Nel nostro caso, il modello a oggetti è applicato alla struttura dei documenti XML (e quindi anche XHTML), e prende il nome di Document Object Model (DOM). ATTENZIONE: Tutti gli esempi che vedremo nelle lezioni sul DOM funzionano correttamente solo su browser di ultima generazione, con supporto completo agli standard. Per provarli, quindi, vi consiglio di usare Firefox versione 2 o successive, visto che anche le ultimissime versioni di Internet Explorer conservano qualche incompatibilità con gli standard (potete sempre provare... e verificarlo da soli!). Vedremo nelle lezioni sulla programmazione crossbrowser come ovviare a molti di questi problemi. Il DOM XML Il Document Object Model XML è un modello a oggetti generico applicabile a tutti i documenti XML. Le sue interfacce sono quindi disponibili in tutti i DOM più specifici, ad esempio quello del linguaggio XHTML che vedremo più avanti. E' possibile leggere la specifica completa del DOM XML sul sito del W3C consortium ( Il DOM XML fornisce una rappresentazione dei documenti XML compatibile con i più noti linguaggi di programmazione: ogni elemento caratteristico di XML (elementi, attributi, commenti ) è rappresentato da un oggetto specifico, che ne fornisce un'interfaccia di manipolazione. Esistono varie versioni del DOM XML, strutturate in livelli: Livello 1: definisce gli elementi DOM di base con interfacce contenenti i metodi e gli attributi di uso più comune. Livello 2: Modifica alcuni metodi del livello 1, e introduce il supporto ai namespaces e alla clonazione dei nodi. Livello 3: Introduce nuovi metodi e interfacce per una navigazione più rapida nel documento, per il supporto dei tipi di nodo e per la serializzazione. Nell'ambito della modifica dinamica dei documenti HTML con Javascript, ci soffermeremo soprattutto sul livello 1, pur sfruttando anche piccole funzionalità provenienti dal livello 3. Revisione 05/11 Pagina 2/42

3 Document Object Model: La vista del DOM su XML La vista del DOM su XML Il DOM fornisce una vista logica sui documenti, strutturata come un albero. I nodi dell'albero sono gli elementi base di XML (elementi, attributi, commenti, testo ecc.). Le relazioni padre-figlio dell'albero sono indotte naturalmente dalla relazione di nidificazione nel documento XML. Quindi, ad esempio, se un elemento ne contiene altri due, questi ultimi saranno rappresentati nell'albero DOM come figli del nodo che rappresenta il loro elemento "contenitore". Nota: in realtà, la struttura è più propriamente una foresta perché può anche contenere più alberi distinti. Vediamo un esempio completo: il seguente documento XML <!-- The Dark Side Of The Moon, track 13 --> <song track="13"> <artist> <name>pink Floyd</name> </artist> <title>eclipse</title> <length> <minutes>4</minutes> <seconds>36</seconds> </length> </song> Viene visto attraverso il DOM come l'albero mostrato in figura, dove forme diverse di nodo rappresentano oggetti diversi del DOM. In particolare, si noti che la radice del DOM è sempre un oggetto (nodo) speciale, chiamato document, che rappresenta il documento XML nella sua interezza. I figli diretti di document sono tutti gli oggetti contenuti direttamente nel documento, che nel nostro caso sono un commento (anche i commenti vengono visti dal DOM!) e l'elemento radice <song>. Va inoltre notato che l'attributo track dell'elemento <song>, con valore 13, è visto come un nodo figlio dell'elemento stesso, ma con una forma particolare, in cui il nome dell'attributo e il suo valore sono contenuti entrambi nel nodo stesso. In tutti gli altri casi, il contenuto di un elemento, sia esso un altro elemento o del testo, è sempre un figlio del nodo che rappresenta l'elemento. Quindi, ad esempio, il testo "Pink Floyd" è un figlio dell'elemento <name> che è a sua volta figlio dell'elemento <artist>. Revisione 05/11 Pagina 3/42

4 Document Object Model: La vista del DOM su XML Oggetti dell albero DOM Gli oggetti che compongono l'albero del DOM si distinguono in base al tipo di entità XML che rappresentano nel documento sorgente. In base a questa classificazione, è possibile "etichettare" ciascun elemento dell'albero visto nell'esempio precedente. Nell'albero, il nodo (1) è di tipo documento, (2) è un commento, (3) è un elemento, (4) è un attributo e (5) è un nodo di testo. Le relazioni tra i nodi citati sono le seguenti: (2,3) sono figli di 1, 1 è genitore di (2,3), 3 è fratello di 2, 4 è attributo (relazione speciale non compresa nell'albero) di 3. Gli oggetti esposti dal DOM XML sono quelli mostrati nella figura che segue, dove sono anche mostrati i rapporti di derivazione tra le rispettive classi. Revisione 05/11 Pagina 4/42

5 Document Object Model: Gli oggetti Node: la Base del DOM Come si può notare, la maggior parte degli oggetti è figlia diretta di una classe base chiamata Node. Gli oggetti che ci interesseranno maggiormente hanno un nome che richiama immediatamente l'entità XML che rappresentano, come Element, ProcessingInstruction, Text o Attr(ibute). Da notare che le sezioni CData (CDataSection), i commenti e il testo semplice (Text) sono figli di una classe comune chiamata CharecterData, e per questo verranno manipolati in maniera simile. Le sezioni CData, poi, sono derivate direttamente dal testo semplice, e presentano la stessa interfaccia. La classe Document è usata per rappresentare l'oggetto document del DOM, visto in precedenza. Le classi DocumentFragment ed EntityReference sono avanzate e non le tratteremo in queste lezioni sul DOM. Infine, le altre classi non collegate a Node, cioè DOMImplementation, NamedNodeMap e NodeList sono semplici helper che useremo per interfacciarci col DOM negli esempi a seguire. Gli oggetti Node: la Base del DOM Come abbiamo visto, i nodi dell albero DOM sono rappresentati da oggetti derivati dalla classe Node. In generale, le funzionalità presenti nelle interfacce DOM di base accettano e restituiscono solo oggetti di tipo Node, anche se realtà tali oggetti appartengono sempre a una classe più specifica derivata da Node. L interfaccia di Node include le operazioni di base eseguibili su ogni nodo (indipendentemente dal suo tipo specifico). Le varie classi derivate implementano poi delle interfacce più specifiche, che comprendono le operazioni proprie ciascun tipo. Vediamo l'interfaccia della classe Node (la specifica del DOM è fornita usando l IDL usato dalla specifica Corba). interface Node { const unsigned short ELEMENT_NODE = 1; // altre costanti di tipo: vedi dopo readonly attribute DOMString nodename; attribute DOMString nodevalue; Revisione 05/11 Pagina 5/42

6 Document Object Model: Gli oggetti Node: la Base del DOM attribute DOMString textcontent; //Livello 3 readonly attribute unsigned short nodetype; readonly attribute Node parentnode; readonly attribute NodeList childnodes; readonly attribute Node firstchild; readonly attribute Node lastchild; readonly attribute Node previoussibling; readonly attribute Node nextsibling; readonly attribute NamedNodeMap attributes; readonly attribute Document ownerdocument; Node insertbefore(in Node newchild,in Node refchild); Node replacechild(in Node newchild, in Node oldchild); Node removechild(in Node oldchild); Node appendchild(in Node newchild); boolean hasattributes(); // Livello 2 boolean haschildnodes(); ; Gli attributi nodename, nodevalue e NodeType permettono di accedere alle informazioni di base sul nodo. In particolare, l attributo nodetype permette di identificare il tipo specifico di nodo tramite una serie di costanti definite anch esse nell interfaccia Node: ELEMENT_NODE: il nodo è un elemento ATTRIBUTE_NODE: il nodo è un attributo TEXT_NODE: il nodo è del testo CDATA_SECTION_NODE: il nodo è una sezione CDATA ENTITY_REFERENCE_NODE: il nodo è un riferimento ad entità ENTITY_NODE: il nodo è un entità PROCESSING_INSTRUCTION_NODEE: il nodo è una PI COMMENT_NODE: il nodo è un commento DOCUMENT_NODE: il nodo è un documento (non la sua radice!) DOCUMENT_TYPE_NODE: il nodo è un DOCTYPE DOCUMENT_FRAGMENT_NODE: il nodo è un frammento NOTATION_NODE: il nodo è una NOTATION In base al valore di nodetype, è possibile leggere altre caratteristiche del nodo da nodename e nodevalue: Tipo di nodo (nodetype) nodename nodevalue Element Nome del tag null Attr Nome dell attributo Valore dell attributo Text #text Testo associato CDATASection #cdata-section Testo associato EntityReference Nome dell entità null Entity Nome dell entità null ProcessingInstruction Valore dell attributo target Contenuto escluso l attributo target Comment #comment Testo associato Revisione 05/11 Pagina 6/42

7 Document Object Model: Gli oggetti Node: la Base del DOM Document #document null DocumentType Nome del tipo di documento null DocumentFragment #document-fragment null Notation Nome della NOTATION null Utilizzando Javasctipt, possiamo ad esempio valutare la seguente espressione: /* ricordiamo che l'espressione document, equivalemnte a window.document, restituisce un rifoerimento al DOM del documento aperto nel browser */ document.nodetype //ritorna 9 = DOCUMENT_NODE document.nodename //ritorna '#document' Muoversi nel DOM L interfaccia di Node mette a disposizione diversi attributi per muoversi nell albero DOM. Queste funzionalità sono molto semplici, e fanno riferimento alla relazione padre-figlio presente nell'albero DOM. Come vedremo esistono metodi più veloci per raggiungere specifici nodi, se necessario. ownerdocument restituisce il Document che contiene il nodo corrente. firstchild, lastchild restituiscono il primo e l ultimo nodo figlio del nodo corrente. parentnode restituisce il nodo genitore del nodo corrente. previoussibling, nextsibling restiuiscono il precedente e successivo fratello del nodo corrente (relativamente al loro genitore). childnodes restituisce la lista dei figli del nodo corrente (sotto forma di Array o NodeList, vedi dopo). attributes restituisce la lista degli attributi del nodo corrente (sotto forma di Array o NamedNodeMap). haschildnodes, hasattributes permettono di sapere se il nodo corrente ha figli o attributii Vediamo qualche esempio. Riferendoci sempre al semplice documento XML mostrato a inizio lezione, per raggiungere il nodo contenente il testo "4" dovremmo scrivere una delle due espressioni che seguono: document.firstchild.nextsibling.firstchild.nextsibling.nextsibling.firstchi ld.firstchild document.childnodes[1].childnodes[2].firstchild.firstchild Modificare il DOM I metodi di Node per la manipolazione dei nodi sono: appendchild(n) accoda un nodo alla lista dei figli del nodo corrente Revisione 05/11 Pagina 7/42

8 Document Object Model: L Oggetto Document removechild(n) rimuove un nodo dalla lista dei figli del nodo corrente. replacechild(n,o) sostiuisce un nodo o, figlio del nodo corrente, con un nuovo nodo n. insertbefore(n,r) inserisce un nodo n nella lista dei figli del nodo corrente, posizionandolo prima di un particolare figlio r. Inoltre, è disponibile l attributo textcontent (proveniente dal DOM di livello 3) che, se assegnato con una stringa, sostituisce i figli del nodo corrente con un singolo nodo di testo contenente la stringa stessa. Questo attributo è disponibile anche in lettura, nel qual caso restituisce la concatenazione del contenuto di tutti i nodi di tipo testo contenuti nel nodo su cui è applicato. La legalità di ciascuno di questi metodi dipende dal tipo effettivo del nodo. Nel caso l operazione non sia disponibile (ad esempio, appendchild su un nodo Text), viene sollevata un eccezione di tipo DOMException. Anche se non siamo ancora in grado di mostrare come creare nuovi nodi, possiamo fare qualche esempio preliminare. Supponiamo di avere un nodo n che rappresenta il testo "5" e di volerlo sostituire al "4" presente nel nostro documento di esempio. Dovremo semplicemente scrivere var nodo_minutes = document.firstchild.nextsibling.firstchild.nextsibling.nextsibling.firstchi ld; var nodo_4 = nodo_minutes.firstchild; nodo_minutes.replacechild(n,nodo_4); Tuttavia, visto che stiamo manipolando il testo contenuto in un elemento, possiamo eseguire questa operazione più rapidamente scrivendo semplicemente var nodo_minutes = document.firstchild.nextsibling.firstchild.nextsibling.nextsibling.firstchi ld; nodo_minutes.textcontent = "5"; L Oggetto Document L oggetto Document è un derivato di Node rappresenta il documento XML. Nel DOM, i figli dell'oggetto Document sono l'elemento radice del documento e tutti i commenti e le processing instruction che lo precedono e seguono. L'interfaccia dell'oggetto Document è la seguente: interface Document : Node { readonly attribute DocumentType doctype; readonly attribute DOMImplementation implementation; readonly attribute Element documentelement; Element createelement(in DOMString tagname); DocumentFragment createdocumentfragment(); Text createtextnode(in DOMString data); Comment createcomment(in DOMString data); CDATASection createcdatasection(in DOMString data); ProcessingInstruction createprocessinginstruction(in DOMString target, in DOMString data); Attr createattribute(in DOMString name); EntityReference createentityreference(in DOMString name); Revisione 05/11 Pagina 8/42

9 Document Object Model: L Oggetto Document NodeList getelementsbytagname(in DOMString tagname); Element getelementbyid(in DOMString elementid); // L 2 L attributo documentelement permette di prelevare direttamente il nodo radice del documento XML. I metodi più importanti dell'interfaccia Document sono tuttavia i vari createx(), che permettono di creare nuovi nodi da inserire nell'albero. Ognuna di queste funzioni accetta come parametri le componenti essenziali del rispettivo tipo di nodo, ad esempio il nome (del tag) di un elemento o il testo da inserire in un nodo testuale. E' possibile anche creare nodi di tipo Attr(ibuto), ma per la manipolazione degli attributi vedremo più avanti un sistema molto più semplice. Va sottolineato che gli oggetti DOM creati non vengono automaticamente inseriti nel documento, ma è necessario inserirli manualmente ove richiesto, utilizzando le funzioni di manipolazione viste nell'interfaccia della classe Node, come appendchild. Va notato inoltre che i nodi inseriti nel DOM di un particolare documento devono essere necessariamente creati a partire dall'oggetto Document corrispondente. Non è possibile usare la parola chiave new di Javasctipt per creare nuovi oggetti DOM! A questo punto, siamo in grado di mostrare il codice necessario a ricreare completamente il documento XML usato nei nostri esempi. Supponiamo quindi di partire da un documento vuoto. Per assicurarcene, svuoteremo prima il documento corrente con un ciclo while while(document.haschildnodes) document.removechild(document.firstchild); document.appendchild(document.createcomment("the Dark Side Of The Moon, track 13")); var radice = document.createelement("song"); var e_artist = document.createelement("artist"); var e_name = document.createelement("name"); e_name.textcontent = "Pink Floyd"; e_artist.appendchild(e_name); radice.appendchild(e_artist); var e_title = document.createelement("title"); e_title.textcontent = "Eclipse"; radice.appendchild(e_title); var e_length = document.createelement("length"); var e_minutes = document.createelement("minutes"); e_minutes.textcontent = "4"; var e_seconds = document.createelement("seconds"); e_seconds.textcontent = "36"; e_length.appendchild(e_minutes); e_length.appendchild(e_seconds); radice.appendchild(e_length); document.appendchild(radice); Document eredita da Node tutte le funzionalità utili alla manipolazione dei suoi nodi, ed aggiunge due nuovi metodi molto importanti: getelementbyid restituisce l unico elemento presente nel documento che ha il valore dato nel suo attributo di tipo ID. getelementsbytagname restituisce tutti gli elementi nel documento aventi il nome (del tag) specificato. Revisione 05/11 Pagina 9/42

10 Document Object Model: Gli oggetti Element Questi metodi permettono di spostarsi più rapidamente su particolari elementi, senza dover percorrere tutto il DOM. In particolare getelementbyid è usatissimo per acquisire riferimenti a parti del documento identificate tramite un id. getelementsbytagname, invece, si può usare per raccogliere rapidamente la lista di tutti gli elementi di un certo tipo nel documento (ad esempio, tutti i link, cioè gli elementi con nome "a"). La sua utilità verrà illustrata più avanti da alcuni esempi. Vediamo qui un ultimo esempio di uso dell'interfaccia Document per costruire un documento complesso. var e,r; r = document.createelement("body"); document.appendchild(r); for(i=1; i<4; i++) radice.appendchild(document.createelement("h" + i)); e = radice.firstchild.nextsibling; radice.insertbefore( document.createcomment( Intestazione di livello 2"),e); e.appendchild(document.createtextnode("due")); e.textcontent = "Due - bis"; r.appendchild(document.createprocessinginstruction("php","echo('pippo');")) ; Il risultato del codice precedente è il documento che segue <body> <h1/> <!-- Intestazione di livello 2 --> <h2>due - bis</h2> <h3/> <?php echo('pippo');?> </body> Gli oggetti Element Gli oggetti Element rappresentano i nodi di tipo elemento. La loro interfaccia, riportata di seguito, permette soprattutto di accedere in maniera rapida agli attributi. interface Element : Node { readonly attribute DOMString tagname; DOMString getattribute(in DOMString name); void setattribute(in DOMString name, in DOMString value); void removeattribute(in DOMString name); Attr getattributenode(in DOMString name); Attr setattributenode(in Attr newattr); Attr removeattributenode(in Attr oldattr); NodeList getelementsbytagname(in DOMString name); void normalize(); L'attributo tagname rappresenta il nome del tag dell'elemento, ed ha lo stesso valore della proprietà generica nodename. Element eredita da node tutte le funzionalità utili alla manipolazione dei suoi nodi figlio, ed aggiunge metodi e attributi per la manipolazione degli attributi dell elemento. getattribute(s) restituisce il valore dell attributo s. Revisione 05/11 Pagina 10/42

11 Document Object Model: Gli oggetti Element setattribute(s,v) crea l attributo s e imposta il suo valore a s, o aggiorna il valore di s se già esistente. removeattribute(s) rimuove l attributo s. Se si tenta di leggere un attributo inesistente, verrà restituito un valore nullo. Se si imposta un attributo già presente, il suo valore corrente viene sovrascritto. Inoltre, Element mette a disposizione, come Document, il metodo getelementsbytagname per la selezione veloce tra i propri discendenti (childnodes) dei nodi con un particolare nome. Il metodo normalize, infine, serve a fondere nodi Text adiacenti nel sottoalbero controllato dall elemento in un unico nodo di testo. Vediamo un esempio d'uso dell'interfaccia Element var e,r; r = document.createelement("body"); document.appendchild(r); for(i=1; i<4; i++) radice.appendchild(document.createelement("h" + i)); e = radice.firstchild.nextsibling; e.setattribute ("class","pippo"); var list = radice.getelementsbytagname ("h3"); for(i=0; i<list.length; i++) list[i].setattribute("id","h"+i); Il risultato del codice precedente è il documento che segue <body> <h1/> <h2 class="pippo"/> <h3 id="h0"/> </body> Interfacce NodeList e NamedNodeMap Il metodo getelementsbytabname restituisce un oggetto avente l'interfaccia Array comune di Javascript, ma anche l'interfaccia generica NodeList definita nel DOM come segue: interface NodeList { Node item(in unsigned long index); readonly attribute unsigned long length; L attributo length restituisce la lunghezza della lista. Il metodo item restiuisce l i-esimo nodo della lista. Allo stesso modo, la proprietà attributes della classe Node restituisce un oggetto avente l'interfaccia Array comune di Javascript, ma anche l'interfaccia generica NamedNodeMap, che permette di accedere agli elementi della lista, oltre che per indice (come in NodeList), anche attraverso il nome (l attributo nodename di Node), ed è definita nel DOM come segue: interface NamedNodeMap { Node getnameditem(in DOMString name); Node setnameditem(in Node arg) raises(domexception); Node removenameditem(in DOMString name) raises(domexception); Node item(in unsigned long index); Revisione 05/11 Pagina 11/42

12 Document Object Model: Il DOM di XHTML readonly attribute unsigned long length; Vediamo un esempio: var list = radice.childnodes; if (list.item(8)!= null) radice.insertbefore( document.createcomment ("otto"),list.item(8)); f = document.createelement ("Qwerty"); f.setattribute ("a","v"); nmp = f.attributes; nmp.getnameditem("a").value; //restituisce "v"; Il DOM di XHTML Come abbiamo detto, il DOM visto fin qui fornisce un sistema di accesso e manipolazione generica per tutti i documenti la cui sintassi è basata sul metalinguaggio XML. Tuttavia, per i linguaggi più noti e utilizzati, come l'xhtml, il W3C ha definito anche un DOM specifico, derivato da quello XML. Questo tipo di DOM è ottenuto, secondo i canoni della programmazione a oggetti, derivando una serie di classi specifiche dalle classi base (soprattutto Element e Document) del DOM XML. Queste classi, quindi, pur continuando ad esporre le interfacce base del DOM XML, offrono funzionalità specifiche relative all'elemento HTML che identificano, che permettono di eseguire più rapidamente le operazioni più comuni. Il DOM di livello 1 di XHTML definisce anche una classe derivata da Document, che permette anche in questo caso un più rapido accesso alle parti comuni del documento HTML. Infine, il DOM di livello 2 ha introdotto una serie di nuove caratteristiche: un DOM specifico per i fogli di stile CSS, nonché un'estensione del DOM XHTML che permette di manipolare facilmente lo stile degli elementi, e un modello per gli eventi delle pagine web, che permette di gestire più facilmente l'interazione con l'utente. E' possibile leggere la specifica completa del DOM HTML livello 2 sul sito del W3C consortium ( Vedremo ora alcune delle principali interfacce presenti nel DOM HTML. Non è possibile vederle tutte, ma una volta che avrete capito come funziona il DOM HTML, non dovreste aver problemi a comprendere le interfacce dei suoi elementi "minori". Interfaccia HTMLDocument Per la specifica completa di questa interfaccia si veda la pagina ufficiale sul sito del W3C consortium ( L'interfaccia HTMLDocument, è derivata dall'interfaccia Document, come si evince dalla sua definizione qui in basso. Quando, in Javascript, si scrive l'espressione window.document, o semplicemente document, l'oggetto risultante presenta proprio l'interfaccia che segue. interface HTMLDocument : Document { attribute DOMString title; readonly attribute DOMString referrer; readonly attribute DOMString domain; readonly attribute DOMString URL; attribute HTMLElement body; readonly attribute HTMLCollection images; readonly attribute HTMLCollection applets; Revisione 05/11 Pagina 12/42

13 Document Object Model: Il DOM di XHTML readonly attribute HTMLCollection links; readonly attribute HTMLCollection forms; readonly attribute HTMLCollection anchors; attribute DOMString cookie; NodeList getelementsbyname(in DOMString elementname); Gli oggetti HTMLDocument forniscono accesso a tutto il DOM del documento, tramite le funzioni ereditate dalla classe Document, e presentano inoltre degli attributi utili ad accedere rapidamente a una serie di parti importanti del documento HTML: All elemento <body> (attributo body) A tutti gli elementi <img> (attributo images) A tutti gli elementi <applet> (attributo applets) A tutti gli elementi <a> con href (attributo links) A tutti gli elementi <form> (attributo forms) A tutti gli elementi <a> con name (attributo anchors) Gli attributi che restituiscono tutti gli elementi di un determinato tipo (images, forms, ecc.) forniscono in output una lista incapsulata in un oggetto HTMLCollection, che presenta un'interfaccia simile alla NamedNodeMap vista in precedenza. interface HTMLCollection { readonly attribute unsigned long length; Node item(in unsigned long index); Node nameditem(in DOMString name); Si noti che la funzione di molti di questi attributi può essere imitata usando il metodo getelementsbytagname. Tuttavia, gli attributi di HTMLDocument forniscono in generale un sistema di accesso più rapido. Si noti inoltre che l'interfaccia HTMLDocument contiene un metodo getelementsbyname, distinto dal più comune metodo getelementsbytagname dell'interfaccia Document. Il metodo getelementsbyname restituisce solo la lista dei controlli modulo (form fields) aventi la proprietà name impostata al valore dato. Infine, è possibile usare gli attributi di HTMLDocument per leggere il titolo del documento (cioè il contenuto del tag <title>, attraverso la proprietà title), la URL del documento (URL) e l eventuale cookie ad esso associato (cookie). Vediamo un breve esempio. Il codice che segue colora di giallo lo sfondo di tutti i link che puntano a risorse non locali (la stringa della URL associata inizia con "http", quindi si suppone che sia una URL assoluta) impostando opportunamente il valore della loro proprietà style. var collegamenti = document.links; for(i=0; i<collegamenti.length; ++i) { if (collegamenti.item(i).getattribute("href").substring(0,5)!= 'http') collegamenti.item(i).setattribute("style","background-color: yellow"); Interfaccia HTMLElement Per la specifica completa di questa interfaccia si veda la pagina ufficiale sul sito del W3C consortium ( Revisione 05/11 Pagina 13/42

14 Document Object Model: Il DOM di XHTML L'interfaccia HTMLElement, derivata da Element, è a sua volta la base di tutte le interfacce specifiche per gli elementi HTML, che vedremo in seguito. Il suo scopo è quello di fornire, per tutti gli elementi HTML, un supporto uniforme a proprietà comuni come gli attributi id e class. interface HTMLElement : Element { attribute DOMString id; attribute DOMString title; attribute DOMString lang; attribute DOMString dir; attribute DOMString classname; //I seguenti attributi NON SONO PARTE //DELL INTERFACCIA DOM L2, ma sono standard de facto readonly attribute HTMLElement offsetparent; readonly attribute long offsettop; readonly attribute long offsetleft; readonly attribute long offsetheight; readonly attribute long offsetwidth; In generale, come vedremo, le interfacce collegate agli elementi HTML dispongono di attributi corrispondenti agli attributi caratteristici dell elemento stesso. L interfaccia HTMLElement espone gli attributi comuni a tutti gli elementi HTML, cioè id, class (qui chiamato classname per non entrare in conflitto con una parola riservata di Javascript), title, lang e dir. Tutti questi attributi possono essere letti e scritti tramite l'interfaccia HTMLElement. Nell'esempio che segue, impostiamo come title di ogni link sulla nostra pagina al corrispondente URL, in modo che l'utente possa vedere dal tooltip del link a quale indirizzo verrà portato cliccandoci sopra. var collegamenti = document.links; for(i=0; i<collegamenti.length;++i) { collegamenti.item(i).title = "Vai all'indirizzo " + collegamenti.item(i).getattribute("href"); L'interfaccia descritta sopra è stata arricchita con una serie di attributi marcati come non facenti parte del DOM. Infatti, l attuale DOM HTML non dispone di funzioni o attributi utili a conoscere dimensioni e posizione degli elementi. Sebbene per gli elementi posizionati tramite CSS è possibile in alcuni casi consultare le proprietà left, top, width e height per dedurre queste informazioni, nella maniera che vedremo più avanti in queste lezioni, per poter realizzare pagine web completamente dinamiche è essenziale poter leggere la posizione e le dimensioni di ogni elemento, sia che queste siano state specificate dall'utente sia che siano state calcolate dal browser. Per questo le implementazioni del DOM forniscono una serie di attributi semi-standard offsetx, dove X può essere Top, Left, Width, Height, che restituiscono la posizione dell'angolo superiore sinistro (sempre relative al suo contenitore, indicato da offsetparent) e le dimensioni di ogni HTMLElement. Da notare che queste proprietà sono di sola lettura: se è necessario spostare o ridimensionare un elemento, questo può essere fatto impostando le relative proprietà CSS, come vedremo più avanti. La funzione che segue mostra come calcolare ricorsivamente la posizione assoluta (cioè rispetto all'area di visualizzazione del browser) di un elemento qualsiasi. Il codice si limita a sommare la posizione offset dell'elemento a quella dei suoi contenitori (offsetparent), in modo da renderla assoluta e non relativa ai contenitori stessi. Revisione 05/11 Pagina 14/42

15 Document Object Model: Il DOM di XHTML function abspos(e) { if (e.offsetparent!= null) { var pabspos = abspos(e.offsetparent); return {x:pabspos.x+e.offsetleft,y:pabspos.y+e.offsettop; else { return {x:e.offsetleft,y:e.offsettop; Interfaccia HTMLFormElement Per la specifica completa di questa interfaccia si veda la pagina ufficiale sul sito del W3C consortium ( L'interfaccia HTMLFormElement permette di accedere rapidamente agli attributi e al contenuto degli elementi <form>. Ricordiamo che il DOM, quando si ricerca nel documento un particolare elemento, restituisce sempre un oggetto della classe più appropriata, quindi se utilizziamo, ad esempio, la funzione getelementbyid per acquisire il riferimento a un form del nostro documento avente un particolare identificatore, l'oggetto restituito dalla funzione sarà proprio di tipo HTMLFormElement. interface HTMLFormElement : HTMLElement { readonly attribute HTMLCollection elements; readonly attribute long length; attribute DOMString name; attribute DOMString acceptcharset; attribute DOMString action; attribute DOMString enctype; attribute DOMString method; attribute DOMString target; void submit(); void reset(); La classe HTMLFormElement dispone di attributi tramite i quali si possono leggere e scrivere tutti i corrispondenti attributi dell elemento <form>, quali action o name. L attributo elements permette di accedere alla HTMLCollection dei campi del modulo, il cui numero è indicato da length. In questo modo, è molto più semplice esaminare tutto il contenuto interattivo di una form saltando tutte le parti statiche (ricordiamo che una form può contenere qualsiasi tipo di HTML). I metodi submit e reset hanno la stessa funzione dei corrispondenti bottoni del form. E' possibile quindi chiamarli per reinizializzare il form o sottometterne i dati in qualsiasi momento e senza l'intervento dell'utente. Il frammento di codice che segue esamina il contenuto del primo controllo di ciascuna form del documento, e se ha valore "OK" invia la form stessa (ne esegue la submit). var forms = document.forms; for (i=0; i<forms.length; ++i) if (forms.item(i).elements.item(0).value == 'OK') //l'attributo value verrà discusso più avanti forms.item(i).submit(); Vediamo ora le interfacce dei principali elementi che fungono da controlli per le form. Revisione 05/11 Pagina 15/42

16 Document Object Model: Il DOM di XHTML Interfacce HTMLSelectElement e HTMLOptionElement Per la specifica completa di questa interfaccia si veda la pagina ufficiale sul sito del W3C consortium ( Queste due interfacce, esposte rispettivamente dagli elementi <select> e <option>, permettono di manipolare i controlli a scelta multipla, crearli dinamicamente e realizzare una serie di utili effetti. interface HTMLSelectElement : HTMLElement { readonly attribute DOMString type; attribute long selectedindex; attribute DOMString value; attribute unsigned long length; readonly attribute HTMLFormElement form; readonly attribute HTMLOptionsCollection options; attribute boolean disabled; attribute boolean multiple; attribute DOMString name; attribute long size; attribute long tabindex; void add(in HTMLElement element, in HTMLElement before); void remove(in long index); void blur(); void focus(); interface HTMLOptionElement : HTMLElement { readonly attribute HTMLFormElement form; attribute boolean defaultselected; readonly attribute DOMString text; readonly attribute long index; attribute boolean disabled; attribute DOMString label; attribute boolean selected; attribute DOMString value; La classe HTMLSelectElement, come tutte le classi che rappresentano elementi di un modulo, possiede un riferimento form che punta all HTMLFormElement contenitore. Oltre ai consueti attributi che replicano quelli dell'elemento corrispondente, vediamo le altre caratteristiche dell'interfaccia di questo tipo di oggetti: La HTMLOptionsCollection options contiene tutti gli HTMLOptionElement corrispondenti agli elementi <option> nidificati. Il numero di opzioni è indicato da length. Tramite questa collection è quindi possibile enumerare le varie opzioni presenti nell'elenco. L attributo selectedindex fornisce l'indice dell elemento di options correntemente selezionato (-1 nel caso di nessuna selezione), mentre value contiene una copia del valore (attributo value o testo inserito nell'opzione, a seconda di quanto specificato dall'opzione stessa) per l opzione selezionata. Per sapere quindi il valore dell'opzione selezionata attualmente in una <select> puntata dalla variabile s, le due espressioni seguenti sono equivalenti: s.value ((s.selectedindex>=0)?(s.options.item(s.selectedindex).value):"") Il metodo add permette di aggiungere un HTMLOptionElement alla lista nella posizione specificata, mentre remove permette di rimuoverlo. Tuttavia per modificare le opzioni di una Revisione 05/11 Pagina 16/42

17 Document Object Model: Il DOM di XHTML <select> è più pratico avvalersi del DOM XML, creando elementi <option> e poi aggiungendoli ai figli della <select> tramite appendchild o insertbefore, o rimuovendoli con removechild. I metodi blur e focus vengono utilizzati per gestire il focus sul campo. Il metodo blur rimuove il focus dal campo (il focus determina la selezione dell'elemento e la ridirezione su di esso dell'input della tastiera), mentre il meotodo focus lo attiva. Nell interfaccia HTMLOptionElement vanno notati l attributo index, che indica la posizione dell opzione nella lista <select> di appartenenza, e l attributo selected, che ne determina la selezione (inizialmente impopstata dal valore di defaultselected). Il codice che segue esamina una <select> s e, se non c'è alcuna selezione attiva, la mette a fuoco e imposta la sua classe CSS in modo da evidenziarlo if(s.selectedindex<0) { s.focus(); s.class="highlight"; Interfaccia HTMLInputElement Per la specifica completa di questa interfaccia si veda la pagina ufficiale sul sito del W3C consortium ( Poiché l'elemento <input> è il più versatile tra quelli disponibili nei moduli HTML, la corrispondente interfaccia presenta moltissimi attributi. Tuttavia, molti di questi attributi hanno valore solo se il controllo ha un certo tipo, specificato dall'attributo type. interface HTMLInputElement : HTMLElement { attribute DOMString defaultvalue; attribute boolean defaultchecked; readonly attribute HTMLFormElement form; attribute DOMString accept; attribute DOMString accesskey; attribute DOMString align; attribute DOMString alt; attribute boolean checked; attribute boolean disabled; attribute long maxlength; attribute DOMString name; attribute boolean readonly; attribute unsigned long size; attribute DOMString src; attribute long tabindex; attribute DOMString type; attribute DOMString usemap; attribute DOMString value; void blur(); void focus(); void select(); void click(); Da notare che l'attribuito defaultvalue corrisponde al valore iniziale dell'attributo value (ripristinato nel caso di reset del form), che permette di leggere in qualsiasi momento il valore inserito dall'utente nel campo. Il metodo select seleziona tutto il testo nell input di tipo testuale, mentre il metodo click simula il click del mouse sugli input di tipo bottone. Revisione 05/11 Pagina 17/42

18 Document Object Model: Il DOM di XHTML Vediamo una variante del codice di controllo visto nell'esempio precedente, questa volta specifico per un controllo di tipo input testuale: controlliamo se il valore del controllo è un indirizzo valido, e in caso contrario chiediamo all'utente di correggerlo: if(s.type="text" && s.value.search(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4$/i)<0) { s.focus(); s.select(); alert("scrivere un indirizzo valido!"); Interfaccia HTMLTableElement Per la specifica completa di questa interfaccia si veda la pagina ufficiale sul sito del W3C consortium ( L'interfaccia HTMLTableElement è esposta dagli elementi <table>: interface HTMLTableElement : HTMLElement { attribute HTMLTableCaptionElement caption; attribute HTMLTableSectionElement thead; attribute HTMLTableSectionElement tfoot; readonly attribute HTMLCollection rows; readonly attribute HTMLCollection tbodies; attribute DOMString align; attribute DOMString bgcolor; attribute DOMString border; attribute DOMString cellpadding; attribute DOMString cellspacing; attribute DOMString frame; attribute DOMString rules; attribute DOMString summary; attribute DOMString width; HTMLElement createthead(); void deletethead(); HTMLElement createtfoot(); void deletetfoot(); HTMLElement createcaption(); void deletecaption(); HTMLElement insertrow(in long index); void deleterow(in long index); Come è possibile notare dall'interfaccia, esistono oggetti specifici che rappresentano le parti <thead<, <tfoot> (HTMLTableSectionElement) e <tbody> (HTMLTableBodyElement ) della tabella, prelevabili dagli omonimi attributi dell'oggetto tabella. Va sottolineato che le righe del corpo della tabella sono inserite in un <tbody> implicito anche se il programmatore non ha usato questo elemento nel sorgente HTML. La collection tbodies restituisce tutti i <tbody> della tabella (sotto forma di oggetti HTMLTableBodyElement), ma solitamente solo tbodies[0] è un'espressione valida. L'attributo rows fornisce la lista di tutte le righe della tabella (sotto forma di oggetti HTMLTableRowElement), mentre è possibile usare l'omonimo attributo degli oggetti HTMLTableBodyElement e HTMLTableSectionElement per prelevare le sole righe di ciascuna sezione della tabella stessa. I metodi createthead, createtfoot e createcaption inseriscono il rispettivo elemento nella posizione appropriata all'interno della definizione della tabella o restituiscono l'elemento già presente. Il metodo insertrow inserisce una riga vuota nella posizione specificata della tabella, o la Revisione 05/11 Pagina 18/42

19 Document Object Model: Il DOM di XHTML aggiungono alla fine della tabella stessa se il parametro passato è -1, e restituiscono l'oggetto HTMLTableRowElement corrispondente, pronto per essere riempito. Non ci soffermeremo sulla semplice struttura delle altre classi citate. Basti far notare che gli oggetti HTMLTableRowElement dispongono di una proprietà cells tramite cui è possibile accedere a una collection di elementi che rappresentano le singole celle <td> su ciascuna riga. Vediamo un esempio: data una tabella, sommiamo i valori (che si presume siano numerici) di tutte le celle nella sua prima colonna, e scriviamo il totale a piè di tabella var t = document.getelementbyid("tabella"); var bodyrows = t.tbodies[0].rows; var i,tot=0; for(i=0; i<bodyrows.length; ++i) { tot+=parseint(bodyrows[i].cells[0].textcontent); var footer = t.createtfoot(); var totali = footer.insertrow(-1); var cella1 = document.createelement("td"); cella1.textcontent=tot; totali.appendchild(cella1); var cella2 = document.createelement("td"); cella2.textcontent="totale"; cella2.colspan=bodyrows[0].cells.length; totali.appendchild(cella2); Vediamo come funziona. per prima cosa acquisiamo un riferimento al <tbody> della tabella e alla lista delle <tr> in essa contenute, quindi iteriamo sulle righe estraendo il valore della prima cella, convertendolo in intero (parseint) e sommandolo alla variabile tot. Terminato il loop, creiamo un <tfoot> nella tabella (o preleviamo quello preesistente, createtfoot), vi appendiamo una riga (insertrow con indice -1) e le riempiamo con due celle: la prima riporta il totale calcolato, mentre la seconda contiene la parola "TOTALE" e si estende su tutte le altre colonne della tabella (attributo colspan). In pratica, se applichiamo la funzione a una tabella come la seguente: <table> <tr><td>1</td><td>pluto</td></tr> <tr><td>5</td><td>pippo</td></tr> </table> Otterremo come risultato la tabella <table> <tfoot> <tr><td>6</td><td colspan="1">totale</td></tr> </tfoot> <tbody> <tr><td>1</td><td>pluto</td></tr> <tr><td>5</td><td>pippo</td></tr> </tbody> </table> Interfaccia HTMLAnchorElement e HTMLImageElement Per la specifica completa di queste interfacce si vedano le pagine ufficiali sul sito del W3C consortium ( Gli ultimi oggetti che esaminiamo sono quelli che rappresentano gli elementi <a> e <img> di HTML. Ecco le corrispondenti interfacce: Revisione 05/11 Pagina 19/42

20 Document Object Model: Il DOM di XHTML interface HTMLAnchorElement : HTMLElement { attribute DOMString accesskey; attribute DOMString charset; attribute DOMString coords; attribute DOMString href; attribute DOMString hreflang; attribute DOMString name; attribute DOMString rel; attribute DOMString rev; attribute DOMString shape; attribute long tabindex; attribute DOMString target; attribute DOMString type; void blur(); void focus(); interface HTMLImageElement : HTMLElement { attribute DOMString name; attribute DOMString align; attribute DOMString alt; attribute DOMString border; attribute long height; attribute long hspace; attribute boolean ismap; attribute DOMString longdesc; attribute DOMString src; attribute DOMString usemap; attribute long vspace; attribute long width; Anche in questo caso, gli attributi dell interfaccia corrispondono per la maggior parte a quelli dell elemento, permettendone la manipolazione diretta, senza bisogno di usare le primitive getattribute e setattribute del DOM XML. Va notato come anche l'oggetto HTMLAnchorElement possegga i metodi focus e blur, già illustrati per i controlli dei form: in effetti, questi metodi sono presenti sulle interfacce di tutti gli elementi con i quali l'utente può interagire, tra i quali sicuramente ci sono anche i link. Una caratteristica interessante da sottolineare riguarda gli oggetti HTMLImageElement. Non appena si imposta a una URL il loro attributo src, questi oggetti avviano il caricamento (asincrono) dell'immagine corrispondente e la inseriscono nella cache del browser. Questo avviene anche se l'oggetto non è stato ancora inserito nel documento e quindi reso visibile. In questo modo, è possibile precaricare delle immagini e mostrarle in seguito, senza il ritardo imposto dal loro scaricamento locale, che può essere notevole in caso di immagini di grandi dimensioni. var image = document.createelement("img"); image.src=" //viene avviato immediatamente il download dell'immagine document.body.appendchild(image); //l'immagine viene mostrata in fondo al documento Per assicurarsi che un oggetto HTMLImageElement (creato dall'utente o prelevato dal DOM della pagina) abbia completato il caricamento della propria immagine è possibile gestire l'evento load ad esso associato, come vedremo più avanti. In questo modo, potremo ad esempio avviare uno slideshow di immagini solo quando tutte le immagini sono state precaricate dal browser. Revisione 05/11 Pagina 20/42

21 Document Object Model: Il DOM di CSS 2.0 Il DOM di CSS 2.0 Per la manipolazione degli stili CSS applicati ai documenti (XHTML, ma non solo), il DOM di livello 2 definisce una serie di nuove classi. Queste classi non sono correlate con il DOM XML visto all'inizio, ma formano una propria gerarchia. Le classi principali che tratteremo in questa lezione sono: Classi per la rappresentazione dei fogli di stile (CSSStyleSheet), Classi per la rappresentazione delle regole CSS (CSSStyleRule), Classi per la rappresentazione delle specifiche proprietà di stile (CSSStyleDeclaration). Inoltre, il DOM di CSS aggiunge alcune funzionalità al DOM XHTML, per permettere una rapido accesso allo stile calcolato per un elemento o a quello dichiarato nell elemento stesso. E' possibile leggere la specifica completa del DOM Style sul sito del W3C consortium ( Accesso allo stile di un elemento Un elemento ha associati due stili: quello dichiarato inline dall'utente tramite il sua attributo style (che, come sappiamo, ha quasi sempre la precedenza nella cascata CSS), e quello finale calcolato dal browser tramite il metodo della cascata visto nelle lezioni sui CSS. Nello stile calcolato, tutte le proprietà CSS hanno un valore (specificato, ereditato o applicato di default), mentre in quello utente sono presenti solo le proprietà scritte esplicitamente dall'utente stesso nell'attributo style. Due interfacce del DOM CSS permettono di accedere a questi due tipi di stile. L'interfaccia ViewCSS è implementata dall'oggetto window, mentre l'interfaccia ElementCSSInlineStyle è implementata da tutti i nodi del DOM derivati da HTMLElement. interface ElementCSSInlineStyle { readonly attribute CSSStyleDeclaration style; interface ViewCSS : views::abstractview { CSSStyleDeclaration getcomputedstyle(in Element elt, in DOMString pseudoelt); L interfaccia ElementCSSInlineStyle permette di leggere e modificare le regole di stile inserite nell attributo style di un elemento. L'interfaccia contiene una proprietà style che ha come valore la CSSStyleDeclaration contenente le sole proprietà di stile assegnate all'oggetto l'attributo style dell'elemento stesso. La modifica degli attributi di questa CSSStyleDeclaration comporta quindi l'inserimento o la modifica delle corrispondenti proprietà di stile all'interno dall'attributo style dell'elemento (che ha precedenza su tutti i fogli di stile). L interfaccia ViewCSS permette di leggere lo stile calcolato per un elemento (che è di sola lettura). Il suo metodo getcomputedstyle, applicato a un elemento (e a un eventuale suo pseudoelemento: first-line, first-letter, before, after), ritorna una CSSStyleDeclaration tramite cui, come vedremo, è possibile leggere via script tutte le proprietà di stile calcolate per l'elemento stesso. Attenzione: il browser Internet Explorer non implementa correttamente l'interfaccia ViewCSS: per ottenere la stessa funzionalità del metodo getcomputedstyle su questo browser è Revisione 05/11 Pagina 21/42

22 Document Object Model: Il DOM di CSS 2.0 necessario applicare le tecniche di programmazione browser specifiche che vedremo nelle prossime lezioni. Vediamo un esempio. Supponiamo di avere il seguente documento HTML: <html> <head> <title>esempio</title> <style type="text/css">.cl1 {font-size: 24pt; p {margin: 3px; </style> </head> <body> <p id="para1" class="cl1" style="font-weight: bold">ciao</p> </body> </html> Sappiamo che il testo nel paragrafo sarà in grassetto (proprietà di stile inline), 24 punti (proprietà derivata dalla classe cl1) e con margini di 3 pixel (proprietà assegnata a tutti i paragrafi). Vediamo come queste proprietà saranno visibili e modificabili tramite script (faremo riferimento a attributi dell'interfaccia CSSStyleDeclaration che saranno descritti più avanti, ma che sono tuttavia facilmente comprensibili). var p = getelementbyid("para1"); p.style.fontweight == "bold" //p.style contiene gli stili assegnati inline tramite l'omonimo attributo p.style.fontsize == "" //tutte le proprietà di stile non assegnate inline sono vuote var cstyle = getcomputedstyle(p,""); cstyle.fontweight == "bold" cstyle.fontsize == "24pt" cstyle.marginleft == "3px"; //le proprietà specifiche sono impostate a partire da quella shorthand cstyle.backgroundrepeat == "repeat"; //anche le proprietà non impostate hanno un valore calcolato Accesso ai fogli di stile di un documento E' inoltre possibile leggere e modificare dinamicamente i fogli di stile associati a un documento (sia incorporati che esterni). Le modifiche sono ovviamente temporanee e non si riflettono sul sorgente dei fogli di stile. A questo scopo, il DOM CSS fornisce l'interfaccia DocumentStyle, che è implementata dall'oggetto Document. interface DocumentStyle { readonly attribute StyleSheetList stylesheets; Una StyleSheetList è una lista accessibile con le stesse modalità di una NodeList. I suoi elementi sono oggetti CSSStyleSheet (derivati dai più generali oggetti StyleSheet che non tratteremo qui), aventi l'interfaccia seguente: interface CSSStyleSheet : stylesheets::stylesheet { readonly attribute CSSRule ownerrule; readonly attribute CSSRuleList cssrules; Revisione 05/11 Pagina 22/42

23 Document Object Model: Il DOM di CSS 2.0 unsigned long insertrule(in DOMString rule, in unsigned long index); void deleterule(in unsigned long index); L interfaccia permette di inserire (insertrule), modificare (accedendo all'array cssrules) e cancellare (deleterule) regole di stile di tipo CSSRule da un documento CSS. Vediamo quindi l'interfaccia di queste regole: interface CSSRule { const unsigned short UNKNOWN_RULE = 0; const unsigned short STYLE_RULE = 1; const unsigned short CHARSET_RULE = 2; const unsigned short IMPORT_RULE = 3; const unsigned short MEDIA_RULE = 4; const unsigned short FONT_FACE_RULE = 5; const unsigned short PAGE_RULE = 6; readonly attribute unsigned short type; attribute DOMString csstext; readonly attribute CSSStyleSheet parentstylesheet; readonly attribute CSSRule parentrule; L interfaccia CSSRule rappresenta un generica regola CSS, come indicato dall attributo type. Il testo che definisce la regola è disponibile tramite l'attributo csstext. Le regole più interessanti sono quelle di tipo STYLE_RULE, cioè le regole di stile vere e proprie. In questo caso, l'oggetto implementa l'interfaccia derivata CSSStyleRule: interface CSSStyleRule : CSSRule { attribute DOMString selectortext; readonly attribute CSSStyleDeclaration style; Una CSSStyleRule è composta da una stringa contenente il selettore della regola, e dalla specifica degli attributi di stile, inseriti in una CSSStyleDeclaration. //restituisce il selettore della prima regola del primo foglio di stile del documento document.stylesheets[0].cssrules[0].selectortext Nota bene: poiché per la maggior parte della applicazioni dell'html dinamico è preferibile manipolare lo stile applicato agli elementi piuttosto che le regole che lo generano, non tratteremo né esemplificheremo più a fondo le classi CSSStyleSheet e CSSStyleRule. Interfaccia CSSStyleDeclaration Questa interfaccia, come abbiamo avuto modo di vedere, rappresenta la chiave per l'accesso alla proprietà di stile, indipendentemente dal modo con cui queste vengono acquisite. Vediamone quindi la struttura: interface CSSStyleDeclaration { attribute DOMString csstext; DOMString getpropertyvalue(in DOMString propertyname); CSSValue getpropertycssvalue(in DOMString propertyname); DOMString removeproperty(in DOMString propertyname); DOMString getpropertypriority(in DOMString propertyname); void setproperty(in DOMString propertyname, in DOMString value, in DOMString priority); Revisione 05/11 Pagina 23/42

24 Document Object Model: Il DOM di CSS 2.0 readonly attribute unsigned long length; DOMString item(in unsigned long index); readonly attribute CSSRule parentrule; Il metodo item permette di iterare nella CSSStyleDeclaration prelevando il testo corrispondente a ciascun attributo di stile avente valore non nullo (length è il numero totale di tali attributi). Se si desidera invece sapere il valore di una proprietà particolare, è possibile usare il metodo getpropertyvalue. E' anche possibile leggere la priorità (data dalla presenza del modificatore!important) assegnata a un particolare attributo getpropertypriority. L'argomento di entrambi questi metodi è il nome della proprietà CSS richiesta, scritto esattamente come nel foglio di stile. var e = document.getelementbyid("pippo"); e.style.getpropertyvalue("background-color"); Per modificare le proprietà di stile esposte in una CSSStyleDeclaration che non sia readonly, sono infine disponibili i metodi setproperty, e removeproperty. Entrambi richiedono di specificare il nome della proprietà CSS da modificare o rimuovere. In più setproperty richiede il valore della proprietà (anche in questo caso scritto con le stesse modalità che si userebbero in un foglio di stile) e il suo eventuale modificatore di priorità. var e = document.getelementbyid("pluto"); //la seguente istruzione corrisponde all'aggiunta della proprietà //background-color: green!important //allo stile dell'elemento e.style.setproperty("background-color","green","important"); //la seguente istruzione corrisponde all'aggiunta della proprietà //color: blue //allo stile dell'elemento e.style.setproperty("color","blue",""); Interfaccia CSS2Properties Per semplificare la manipolazione delle proprietà di stile senza doversi avvalere dei metodi getpropertyvalue e setproperty esposti dall'interfaccia CSSStyleDeclaration, tutti gli oggetti che implementano questa interfaccia ne espongono anche un'altra, CSS2Properties, nella quale tutte le proprietà CSS sono esposte sotto forma di attributi: interface CSS2Properties { attribute DOMString background; attribute DOMString backgroundattachment; attribute DOMString backgroundcolor; attribute DOMString backgroundimage; attribute DOMString backgroundposition; attribute DOMString backgroundrepeat; attribute DOMString border; attribute DOMString bordercollapse; attribute DOMString bordercolor; attribute DOMString borderspacing; attribute DOMString borderstyle; attribute DOMString bordertop; attribute DOMString borderright; attribute DOMString borderbottom; attribute DOMString borderleft; attribute DOMString bordertopcolor; Revisione 05/11 Pagina 24/42

25 Document Object Model: Il DOM di CSS 2.0 attribute DOMString borderrightcolor; attribute DOMString borderbottomcolor; attribute DOMString borderleftcolor; attribute DOMString bordertopstyle; attribute DOMString borderrightstyle; attribute DOMString borderbottomstyle; attribute DOMString borderleftstyle; attribute DOMString bordertopwidth; attribute DOMString borderrightwidth; attribute DOMString borderbottomwidth; attribute DOMString borderleftwidth; attribute DOMString borderwidth; attribute DOMString bottom; attribute DOMString clear; attribute DOMString clip; attribute DOMString color; attribute DOMString content; attribute DOMString counterincrement; attribute DOMString counterreset; attribute DOMString cursor; attribute DOMString direction; attribute DOMString display; attribute DOMString cssfloat; attribute DOMString font; attribute DOMString fontfamily; attribute DOMString fontsize; attribute DOMString fontsizeadjust; attribute DOMString fontstretch; attribute DOMString fontstyle; attribute DOMString fontvariant; attribute DOMString fontweight; attribute DOMString height; attribute DOMString left; attribute DOMString letterspacing; attribute DOMString lineheight; attribute DOMString liststyle; attribute DOMString liststyleimage; attribute DOMString liststyleposition; attribute DOMString liststyletype; attribute DOMString margin; attribute DOMString margintop; attribute DOMString marginright; attribute DOMString marginbottom; attribute DOMString marginleft; attribute DOMString maxheight; attribute DOMString maxwidth; attribute DOMString minheight; attribute DOMString minwidth; attribute DOMString overflow; attribute DOMString padding; attribute DOMString paddingtop; attribute DOMString paddingright; attribute DOMString paddingbottom; attribute DOMString paddingleft; attribute DOMString position; attribute DOMString quotes; attribute DOMString right; attribute DOMString size; attribute DOMString textalign; attribute DOMString textdecoration; attribute DOMString textindent; Revisione 05/11 Pagina 25/42

26 Document Object Model: Il Modello Eventi del DOM attribute DOMString textshadow; attribute DOMString texttransform; attribute DOMString top; attribute DOMString verticalalign; attribute DOMString visibility; attribute DOMString width; attribute DOMString wordspacing; attribute DOMString zindex; CSSProperties è un interfaccia facoltativa, anche se tutti i browser moderni la supportano. Con l'aiuto di questa interfaccia, possiamo riscrivere in maniera più compatta l'esempio precedente come segue: var e = document.getelementbyid("pluto"); e.style.backgroundcolor="green"; //non è possibile specificare il modificatore!important con questi attributi! e.style.color="blue"; Va notato come i nomi delle proprietà CSS che presentano dei trattini (come font-size) sono trasformati in nomi di attributi dell'interfaccia CSS2Properties eliminando i trattini e mettendo in maiuscolo la lettera che li segue (fontsize). Vediamo un ultimo esempio di manipolazione dello stile. La funzione che segue manipola la proprietà display per nascondere e mostrare un elemento, a seconda della sua visibilità corrente. E' alla base di ogni effetto "popup" realizzato in HTML dinamico. function togglevisibility(e) { var s = getcomputedstyle(e,""); if (s.display!= "none") e.style.display = "none"; else e.style.display = "block"; Notare come utilizziamo getcomputedstyle per sapere il corrente stato di visibilità dell'oggetto, come calcolato dal browser, ma poi usiamo la proprietà style dell'elemento stesso per alterarne la visibilità. Il Modello Eventi del DOM Il modello eventi del DOM, presente a partire dal livello 2, fornisce le interfacce e la semantica di un generico sistema di gestione degli eventi per i documenti HTML. Tramite questo modello, è possibile programmare codice Javascript che risponde all'interazione con l'utente, rendendo così il documento "reattivo" come una vera interfaccia grafica. Prima dell'avvento di questo standard, ogni browser ha implementato il proprio metodo proprietario di gestione degli eventi. Il modello eventi DOM è costruito a partire da un sottoinsieme comune delle funzionalità presenti nei vari browser, in modo da garantire una certa interoperabilità. E' possibile leggere la specifica completa dei DOM Events sul sito del W3C consortium ( Revisione 05/11 Pagina 26/42

27 Document Object Model: Il Modello Eventi del DOM Propagazione di un Evento Gli eventi, una volta generati, si propagano all'interno della gerarchia DOM, e vengono "presentati" a tutti gli elementi che si trovano tra l'origine dell'evento stesso (ad esempio l'elemento su cui l'utente ha cliccato) e l'oggetto Document che contiene l'elemento, passando per tutti i suoi antenati. Questa propagazione avviene secondo due percorsi distinti, detti fase di bubbling e fase di capturing. Il codice può rilevarli e gestirli durante entrambe queste fasi tramite funzioni apposite, chiamate event listeners, associate agli elementi presenti sul percorso di propagazione. I browser effettuano sempre prima una fase di capturing e poi una fase di bubbling per ogni evento generato. Gli event listeners possono essere registrati per rispondere a una sola delle due fasi. Ogni evento ha un elemento target, che è quello sul quale è stato generato. Ad esempio, il click su un testo genera un evento click sul paragrafo che contiene quel testo. Attenzione, però: il target viene determinato esaminando la struttura DOM, che a volte può differire da quanto l utente vede : se il testo su cui si clicca è contenuto in uno <span> nidificato in un paragrafo, sarà lo <span> il terget dell'evento, sebbene l'utente veda solo il paragrafo. Nella fase di bubbling, dopo aver attivato l eventuale event listener del target, l evento viene riproposto a tutti gli elementi antenati del target secondo la gerarchia DOM, nell ordine, fino ad arrivare all oggetto Document. Come vedremo, un event listener può spesso arrestare il bubbling per evitare che l'evento si propaghi ad altri elementi. Nella fase di capturing, invece, gli eventi percorrono la gerarchia nel senso opposto al bubbling. L evento viene proposto a tutti gli elementi antenati del target secondo la gerarchia DOM, nell ordine, a partire da Document fino ad arrivare all oggetto che ha generato l evento. Si consideri il documento HTML che segue e si immagini che l'utente clicchi sul paragrafo contenente la parola "Testo". <html> <head> <title>test</title> </head> <body> <div> <p>testo</p> </div> </body> </html> La figura che segue schematizza la propagazione dell'evento, che subisce prima la fase di capturing e poi quella di bubbling. Revisione 05/11 Pagina 27/42

28 Document Object Model: Il Modello Eventi del DOM Event Listeners Ogni elemento HTML che può ricevere eventi o generare implementa l'interfaccia EventTarget: interface EventTarget { void addeventlistener(in DOMString type, in EventListener listener, in boolean usecapture); void removeeventlistener(in DOMString type, in EventListener listener, in boolean usecapture); boolean dispatchevent(in Event evt); Tramite questa interfaccia, è possibile registrare uno o più event listeners per determinati eventi. Un EventListener è semplicemente una funzione che prende in input un parametro di tipo Event, che analizzeremo più avanti. Il metodo addeventlistener permette di aggiungere su un elemento un listener per un determinato tipo di evento (type). Se usecapture è true, il listener verrà attivato nella fase di capturing, altrimenti sarà attivo in quella di bubbling. E possibile eliminare un listener preesistente con removeeventlistener. Inoltre, per compatibilità verso il modello ad eventi precedentemente utilizzato dai browser, gli EventTarget dispongono anche di una serie di attributi denominati onx, dove X è un tipo di evento valido. Assegnare un EventListener a uno di questi attributi corrisponde ad assegnare l EventListener indicato, in modalità bubbling, al tipo di evento corrispondente all attributo impostato. Spesso l'assegnazione di questa proprietà rimuove anche tutti i listener per quel tipo di evento correntemente assegnati all elemento. Elenchiamo qui i nomi dei più comuni tipi di evento. Revisione 05/11 Pagina 28/42

29 Document Object Model: Il Modello Eventi del DOM mousedown (pressione di un bottone del mouse su un elemento) mouseup (rilascio di un bottone del mouse su un elemento) click (pressione e successivo rilascio di un bottone del mouse su un elemento) mouseover (il mouse è entrato nell area di un elemento) mouseout (il mouse è uscito dall area di un elemento) mousemove (il mouse si muove sull area dell elemento). load (il documento, i suoi frames o un oggetto del documento sono completamente caricati). unload (il documento è stato rimosso dalla finestra o dal frame). abort (il caricamento di un oggetto è stato interrotto). error (errore nell esecuzione di uno script o nel caricamento di un immagine). select (selezione di testo in campi input o textarea). change (un controllo di un form ha perso il focus e il suo contenuto è cambiato da quando lo aveva ottenuto). submit (la form sta per essere inviata). reset (la form sta per essere resettata). focus (un controllo di un form sta per ricevere il focus). blur (un controllo di un form sta per perdere il focus). resize (il contenuto di un elemento è ridimensionato). scroll (il contenuto di un elemento è fatto scorrere). Si nota come siano completamente assenti eventi che riguardano la testiera: infatti, una delle maggiori mancanze dell'attuale modello di eventi DOM è l'impossibilità di gestire questo tipo di eventi. Vedremo più avanti come ovviare al problema usando soluzione browser-dipendenti. Vediamo qualche esempio //sostituisce tutti i listener per il click sul documento e si inserisce nel bubbling document.onclick = function(e) { window.alert("hai cliccato sul documento!"); function l2(e) { alert ("Altro listener per il click!"); //si aggiunge agli listener per il click sul documento in fase di bubbling document.addeventlistener("click",l2,true); In base alle istruzioni di questo esempio, ogni click nell'area del documento HTML (su qualsiasi elemento) attiverà prima il listener l2 (la fase di capturing di un evento, qualunque sia il suo target, inizia dal documento) e poi il listener dichiarato anonimamente nella prima istruzione (nella fase di bubbling, se l'evento non viene gestito e bloccato prima dal target o da un altro dei suoi antenati). Vediamo ora un semplice documento <html> <head> <title>test</title> </head> <body> <div id="d1"> <p>testo</p> Revisione 05/11 Pagina 29/42

30 Document Object Model: Il Modello Eventi del DOM </div> </body> </html> Ed applichiamo ad esso il codice che segue function l1(e) { alert ("Listener l1"); function l2(e) { alert ("Listener l2"); function l3(e) { alert ("Listener l3"); document.onclick = l1; document.addeventlistener("click",l2,true); document.getelementbyid("d1").onclick = l3; Se clicchiamo sul "Testo", si attiveranno in sequenza i listener l2,l3 e l1, secondo i percorso di propagazione che abbiamo appena studiato. Siamo adesso nelle condizioni di comprendere meglio quanto detto all'inizio delle lezioni su Javascript a proposito del modo corretto con cui inizializzare gli script della pagina. Questo deve essere sempre fatto all'interno del listener dell'evento load per l'oggetto window, in quanto la sua chiamata indica che il documento è completamente caricato e disponibile (lo stesso evento, per l'oggetto Document, presenta alcuni problemi di sincronizzazione, per cui si preferisce utilizzare l'oggetto window): //notare che questo listener ignora il suo parametro, in quanto non ne fa uso window.onload = function() { //questa istruzione, eseguita al di fuori di questo listener, //sarebbe pericolosa: chi ci assicurerebbe che l'elemento a cui si //riferisce sia stato già caricato? var area = document.getelementbyid("a1"); Infine, è possibile completare l'esempio di precaricamento sicuro delle immagini, visto nell'ambito del DOM HTML, come segue: var image = document.createelement("img"); image.onload=function() {alert("immagine caricata");; image.src=" Quando l'immagine sarà completamente caricata in memoria, verrà attivato il listener corrispondente. Se volessimo gestire anche l'eventualità che il caricamento non vada a buon fine, potremmo assegnare un listener anche all'evento error dell'oggetto image. Struttura degli Eventi L'oggetto Event passato agli event listeners permette al codice di acquisire molte informazioni sull'evento stesso e sulla sua propagazione. Vediamone la struttura: Revisione 05/11 Pagina 30/42

31 Document Object Model: Il Modello Eventi del DOM interface Event { const unsigned short CAPTURING_PHASE = 1; const unsigned short AT_TARGET = 2; const unsigned short BUBBLING_PHASE = 3; readonly attribute DOMString type; readonly attribute EventTarget target; readonly attribute EventTarget currenttarget; readonly attribute unsigned short eventphase; readonly attribute boolean bubbles; readonly attribute boolean cancelable; readonly attribute DOMTimeStamp timestamp; void stoppropagation(); void preventdefault(); L attributo target indica l elemento su cui è avvenuto l evento. L attributo currenttarget indica l elemento che sta attualmente gestendo l evento (e a cui appartiene il listener attivato). Quindi, durante la propagazione dell'evento, il target resta invariato, mentre il currenttarget viene impostato ai vari elementi della gerarchia a cui l evento viene passato. Il metodo stoppropagation permette di arrestare il bubbling dell evento (che si verifica se bubbles è true), mentre il metodo preventdefault impedisce al browser di attuare l azione di default, se esiste, associata all evento (solo se cancelable è true). Ad esempio, chiamare preventdefault sul listener associato al click su un link evita che il browser carichi il documento all'indirizzo dato dal link stesso. Questo stesso effetto si può ottenere generalmente con una return false alla fine dell'event listener. Ad esempio, è possibile bloccare la submission di una form, nel caso in cui dei controlli su di essa determinino che i dati non sono pronti per essere inviati al server, usando un opportuno listener per l'evento submit: document.forms[0].onsubmit = function() { var check = (document.forms[0].elements[0].value!= ""); if (!check) alert("impossibile inviare i dati"); return check; Questo frammento di codice assegna alla prima form del documento un submit listener che verifica il valore del primo campo di input della form stessa e, nel caso il valore sia vuoto, impedisce alla form di essere sottomessa ritornando false e visualizza un messaggio di errore. Se l'evento riguarda il mouse, presenterà una struttura più ricca, che comprende anche l'interfaccia di seguito illustrata: interface MouseEvent : UIEvent { readonly attribute long screenx; readonly attribute long screeny; readonly attribute long clientx; readonly attribute long clienty; readonly attribute boolean ctrlkey; readonly attribute boolean shiftkey; readonly attribute boolean altkey; readonly attribute boolean metakey; readonly attribute unsigned short button; readonly attribute EventTarget relatedtarget; screenx e screeny riportano le coordinate del mouse rispetto allo schermo. clientx e clienty riportano le coordinate del mouse rispetto alla finestra del browser. Revisione 05/11 Pagina 31/42

32 Document Object Model: Esempi finali ctrlkey, altkey, metakey e shiftkey indicano quali tra i corrispondenti tasti erano premuti sulla tastiera al momento dell evento. button indica quale bottone del mouse è stato premuto (0=sinistro, 1=centrale, 2=destro). relatedtarget indica l elemento da cui è uscito il mouse nel caso di eventi mouseover, e quello in cui è entrato nel caso di eventi mouseout. Un piccolo problema che si riscontra nell'interfaccia di sopra è la totale mancanza di un riferimento alla posizione del mouse rispetto al documento al momento dell'evento. Le proprietà clientx e clienty, infatti, sono relative alla finestra, che mostra solo una porzione del documento. Per capire quindi veramente in che punto del documento l'evento si è verificato, è necessario dedurre che parte del documento è attualmente visibile nella finestra. A questo scopo, purtroppo, non esistono specifiche standard, quindi bisogna ricorrere a degli standard de facto, cioè a proprietà non standardizzate (ancora) dal W3C ma presenti in quasi tutte le implementazioni Javascript del DOM nei browser moderni. Queste proprietà si chiamano scrolltop e scrollleft e ci dicono di quanto il contenuto di un elemento è scrollato dall'altro e da sinistra. Quindi, per sapere l'esatto punto di un documento su cui si è verificato un evento e, dovremo scrivere if (e.pagex e.pagey) { docposx = e.pagex; docposy = e.pagey; else if (e.clientx e.clienty) { docposx = e.clientx + document.body.scrollleft + document.documentelement.scrollleft; docposy = e.clienty + document.body.scrolltop + document.documentelement.scrolltop; Nell'esempio verifichiamo prima di tutto se l'evento ha le proprietà pagex e pagey, che in Internet Explorer forniscono direttamente il dato che ci serve. Altrimenti, lo otteniamo sommando alla posizione relativa alla finestra (clientx,clienty) gli offset di scorrimento (scrolltop,scrollleft) prelevati da document.body e document.documentelement: infatti, lo scorrimento della finestra del browser viene attribuito a uno di questi due elementi (che in teoria dovrebbero essere lo stesso!) a seconda del browser. Esempi finali A completamento di questa parte, forniamo alcuni esempi riassuntivi che mostrano Javascript in azione sul DOM. Paginatore di tabelle semplici Il primo esempio riguarda la paginazione delle tabelle. L'idea è quella di mostrare i contenuti di una lunga tabella suddivisi per pagine, lavorando dal lato client (quindi non predisponendo un documento HTML diverso per ogni pagina, da scaricare ogni volta dal server): l'utente seleziona la pagina da visualizzare e lo script acquisisce i dati relativi e modifica la tabella di conseguenza. Per prima cosa, procuriamoci una sorgente dati. Le funzioni che rappresentano astrattamente la sorgente dati saranno due: getpagedata, che restituisce un array contenente i dati da mostrare in una certa pagina, e gettotalpages, che restituisce il numero totale di pagine. Nel primo esempio, i Revisione 05/11 Pagina 32/42

33 Document Object Model: Esempi finali dati di tutta la tabella saranno contenuti nello script stesso, sotto forma di array di oggetti. Più avanti modificheremo questa sorgente dati per conferirle maggiore realismo. var pages = [ [{matricola:"124610",voto:30,{matricola:"112233",voto:28], [{matricola:"555555",voto:19], [{matricola:"556677",voto:19,{matricola:"667788",voto:27,{matricola:" ",voto:21] ]; function getpagedata(page){ return pages[page-1]; function gettotalpages(){ return pages.length; Come possiamo vedere, ogni pagina è una array che contiene uno o più oggetti aventi le proprietà voto e matricola, che saranno i nostri dati. Predisponiamo quindi una pagina HTML che contenga gli elementi che ci servono: una tabella con due colonne e un'area per i link di paginazione. <html> <head> <title>javascript pagination</title> </head> <body> <p>vai a pagina: <span id="paging"> </span></p> <table border="1" id="voti"> <tr><th>matricola</th><th>voto</th></tr> </table> </body> </html> La tabella è vuota, come pure l'area per i link, ma entrambe sono identificabili con il loro attributo id. Programmando in maniera top-down, scriviamo prima di tutto la funzione che aggiornerà la pagina visualizzata nella tabella in maniera molto astratta: function switchpage(page) { //acquisizione dei dati data = getpagedata(page); //visualizzazione del nuovo set di righe updatetable("voti",data); //aggiornamento dei link di paginazione updatepager("paging",page); Abbiamo utilizzato la funzione getpagedata della nostra sorgente dati, e dobbiamo realizzare le altre due. Occupiamoci prima dei link di paginazione. Si tratta di inserire, nello <span> con id "paging", una serie di link che richiamino proprio la funzione switchpage con l'argomento appropriato. Vediamo il codice: function updatepager(id,page) { //preleviamo l'elemento indicato, nel quale inseriremo il paginature var paging = document.getelementbyid(id); if (!paging) return; var i; //svuotiamo l'elemento while(paging.haschildnodes()) Revisione 05/11 Pagina 33/42

34 Document Object Model: Esempi finali paging.removechild(paging.firstchild); //inseriamo nell'elemento i link di paginazione //alle pagine che precedono quella corrente for(i=1; i<page; ++i) paging.appendchild(makepagelink(i)); //la pagina corrente viene mostrata senza link var cur = document.createelement("span"); cur.classname="pagercurrent"; cur.textcontent=page; paging.appendchild(cur); //inseriamo nell'elemento i link di paginazione alle //pagine che seguono quella corrente for(i=page+1; i<=gettotalpages(); ++i) paging.appendchild(makepagelink(i)); function makepagelink(page) { var link = document.createelement("a"); //nota: grazie all'effetto closure, la variabile page usata //nella funzione anonima creata qui sotto conserverà il valore passato //durante la chiamata a makepagelink link.onclick=function(){switchpage(page); //l'href del link è nullo link.href="javasctipt:void(0)"; link.textcontent=page; link.classname="pagerlink"; return link; Nonostante la sua strutturazione, il codice è molto semplice. updatepager per prima cosa rimuove tutti i nodi all'interno dell'area del paginatore, per svuotarlo del vecchio contenuto. A questo punto, nell'area vengono inseriti i link di paginazione fino alla pagina corrente, ognuno ottenuto chiamando la funzione ausiliaria makepagerlink. L'indice della pagina corrente viene quindi inserito nell'area di paginazione, ma non sotto forma di link, bensì come uno <span> di classe "pagercurrent" (daremo poi un po' di stile alla nostra pagina). Infine, vengono inseriti i link alle pagine che seguono quella corrente, fino alla pagina indicata dalla chiamata alla funzione gettotalpages della nostra sorgente dati. La funzione makepagerlink si limita a creare un elemento <a>, con href nullo e classe "pagerlink", associando al suo evento click una chiamata a switchpage con l'indice della pagina come argomento. Non ci resta che realizzare la funzione updatetable, che ovviamente sarà la più complessa del nostro script. Per aggiornare la tabella, useremo una strategia anti-sfarfallio: infatti, se ci limitassimo a rimuovere tutte le righe presenti e poi inserire quelle nuove, l'utente vedrebbe "sfarfallare" la tabella. Noi invece sostituiremo le singole righe presenti nella tabella con quelle contenenti i nuovi dati, variandone il numero solo se necessario. Inoltre, vogliamo preservare la prima riga della tabella, che contiene l'intestazione (che avremmo però potuto inserire in una <thead>...). function updatetable(id,data,hascaption) { //hascaption ha valore di default true if(typeof(hascaption)=='undefined') hascaption = true; //numero di righe da saltare all'inizio della tabella var skip = (hascaption)?1:0; //preleviamo l'elemento DOM per la tabella var tab = document.getelementbyid(id); if (!id) return; Revisione 05/11 Pagina 34/42

35 Document Object Model: Esempi finali //acquisiamo un riferimento al body della tabella (si veda il DOM HTML) var tbody = tab.tbodies[0]; //per evitare sfarfallii, sovrascriviamo le righe già presenti, //quindi ne aggiungiamo altre o cancelliamo quelle inutili solo // se necessario var oldrows = tbody.rows.length-skip; var i; //per ogni nuova riga i... for(i = 0; i<data.length; ++i) { //creazione delle righe HTML rappresentanti i dati var newrow = makerow(data[i]); if (i<oldrows) { //se esiste già un' i-esima riga la sovrascriviamo con i nuovi dati tbody.replacechild(newrow,tbody.rows[i+skip]); else { //altrimenti aggiungiamo una riga tbody.appendchild(newrow); //infine, cancelliamo tutte le righe che non ci servono più for(i=data.length; i<oldrows; ++i) tbody.removechild(tbody.rows[data.length+skip]); La funzione riceve l'id della tabella, l'array dei dati e un argomento opzionale hascaption che indica se è necessario saltare la prima riga in quanto intestazione, posto di default a true. Dopo aver acquisito i riferimenti alle parti della tabella necessarie, inizia un loop sugli elementi dell'array data. Viene quindi creata una nuova <tr> con i dati di ciascun elemento, chiamando la funzione ausiliaria makerow, e la nuova riga viene sostituita a una riga preesistente della tabella o accodata ad essa, a seconda del numero di righe attualmente presenti nella tabella visualizzata (e tenendo conto delle eventuali righe di intestazione da non sovrascrivere, indicate da skip). Infine, se la tabella visualizzata contiene righe extra che non servono più, queste vengono rimosse da un ultimo loop. La funzione makerow è molto semplice: function makerow(datarow,cellstylecallback) { //creiamo la riga var row = document.createelement('tr'); var i; //e inseriamo tante celle quanti sono gli elementi della datarow for(i in datarow) { var cell = document.createelement('td'); cell.textcontent = datarow[i]; row.appendchild(cell); return row; Si crea una <tr> e vi si inseriscono tante celle <td> quanti sono gli elementi della struttura dati datarow passata. Notare l'uso del loop for...in, che permette di iterare sulle proprietà di un oggetto o sugli elementi di un array in maniera identica, lasciando quindi ampia libertà sulla reale struttura di datarow. A questi punto, per far funzionare tutto, non resta che inizializzare lo script visualizzando la prima pagina della tabella. Questo, come noto, va fatto all'interno del listener per l'evento init dell'oggetto window: Revisione 05/11 Pagina 35/42

36 Document Object Model: Esempi finali function init() { switchpage(1); window.onload=init; Il nostro script è pronto. Prima di "confezionarlo", però, vogliamo aggiungere un tocco di stile. Per prima cosa, definiamo l'aspetto dei link pagerlink e pagercurrent: [[[S:B:elex css]]].pagerlink { background-color:white; color: blue; border: 1px solid blue; margin: 1px; padding: 2px; text-decoration: none;.pagercurrent { background-color:blue; color: white; border: 1px solid blue; margin: 1px; padding: 4px; Poi, come ultima cosa, inseriamo un meccanismo di callback, gestito dalla sorgente dati, che permette di variare lo stile di ogni singola cella della tabella in base ai dati che contiene. Realizzarlo è molto semplice. Modifichiamo la funzione makerow in modo che chiami la funzione (che inseriremo nella sorgente dati) getcellstylecallback. Nel caso il valore di ritorno sia a sua volta una funzione, la chiameremo passandogli come argomento lo stile di ogni cella creata e i dati corrispondenti, aspettandoci che questa modifichi lo stile se necessario: function makerow(datarow) { var row = document.createelement('tr'); var cellstylecallback = getcellstylecallback(); var i; for(i in datarow) { var cell = document.createelement('td'); cell.textcontent = datarow[i]; if (typeof(cellstylecallback)=="function") cellstylecallback(cell.style, datarow,i); row.appendchild(cell); return row; adesso non ci resta che definire la funzione di callback nella nostra sorgente dati function getcellstylecallback() { return function(cellstyle,datarow,index) { //se i dati riportano un voto minore di venti, //tutte le celle della riga saranno rosse if (datarow.voto < 20) cellstyle.backgroundcolor = "red"; else if (datarow.voto < 25) cellstyle.backgroundcolor = "yellow"; la funzione restituita esamina i dati della riga a cui appartiene la cella e colora tutte le celle in base al valore del voto corrispondente. L esempio completo è disponibile tra il materiale online del corso. Elementi mobili e ridimensionabili Con questo esempio mostreremo come gestire in maniera avanzata gli eventi del mouse. Grazie all'uso del posizionamento CSS e a Javascript, creeremo elementi trascinabili e ridimensionabili direttamente nella pagina web. Questo tipo di elemento è alla base della creazione di interfacce avanzate i cui i widget possono essere riordinati dall'utente, ma anche di semplici programmi da disegno, ecc. Revisione 05/11 Pagina 36/42

37 Document Object Model: Esempi finali Cominciamo con una pagina HTML che farà da contenitore per i nostri oggetti mobili <html xmlns=" <head> <title>javascript drag and resize</title> </head> <body> <p><button id="addblock" name="addblock" value="1"> Aggiungi blocco</button></p> </body> </html> Inizializziamo quindi il nostro sistema agganciando al bottone addblock un listener che aggiunga un nuovo oggetto mobile alla pagina: window.onload = function() { var addbutton = document.getelementbyid("addblock"); if (addbutton) addbutton.onclick=addmoveable; Il nostro oggetto mobile sarà una semplice <div>, creata dal metodo addmoveable, posizionata in maniera assoluta sulla pagina. Diamo alla <div> un po' di stile per renderla riconoscibile, e le assegniamo un listener per l'evento mousedown, chiamato closeanddrag: function addmoveable() { //creiamo una div... var newobj = document.createelement("div"); newobj.classname="moveable block"; //ci assicuriamo che sia posizionata in maniera assoluta e riconoscibile newobj.style.position="absolute"; newobj.style.left=(moverno*10)+"px"; newobj.style.top=(moverno*10)+"px"; newobj.style.width="200px"; newobj.style.height="200px"; newobj.id="mover"+moverno; //con colore ogni volta più chiaro newobj.style.backgroundcolor= "rgb("+moverno*20+","+moverno*20+","+moverno*20+")"; //le assegniamo il listener per l'evento mouse down newobj.onmousedown = closeanddrag; newobj.textcontent = "MOVER"+(moverno++); //la inseriamo nel documento document.body.appendchild(newobj); La logica di interazione è quindi affidata primariamente alla funzione closeanddrag, chiamata quando l'utente preme il bottone del mouse sull'oggetto mobile: function closeanddrag(e) { //posizione dell'oggetto cliccato elementoffset = {x:e.target.offsetleft,y:e.target.offsettop; //posizione dell'oggetto //posizione del click drag_current_mouse_pos = getmousepos(e); //in base alla differenza tra le due posizioni di sopra, // capiamo in che punto dell'oggetto abbiamo cliccato if ((drag_current_mouse_pos.x-elementoffset.x <= 10) && (drag_current_mouse_pos.y-elementoffset.y <= 10)) { //se abbbiamo cliccato nell'angolo superiore sinistro, // "chiudiamo" l'oggetto if (e.target.parentnode && e.target.parentnode.removechild) { //se possiamo rimuoverlo, lo rimuoviamo dal DOM Revisione 05/11 Pagina 37/42

38 Document Object Model: Esempi finali e.target.parentnode.removechild(e.target); else { //altrimenti ci limitiamo a nasconderlo e.target.style.display="none" else { //per i click in altri punti, deleghiamo la gestione a start Drag startdrag(e); La funzione closeanddrag per prima cosa rileva la posizione attuale dell'oggetto cliccato (usando le proprietà nonstandard offsetleft e offsettop), che sono relative al documento in quanto gli oggetti mobili sono inseriti direttamente nel suo <body>, e la posizione del mouse rispetto al documento stesso, ottenuta dalla funzione getmousepos (non illustrata) con lo stesso algoritmo visto nella lezione sul modello degli eventi DOM. A questo punto, verifichiamo se il click è avvenuto molto vicino all'angolo superiore sinistro dell'elemento. In tal caso, "chiudiamo" l'elemento eliminandolo dal DOM o nascondendolo. In caso contrario, deleghiamo a una nuova funzione, startdrag, la gestione dello spostamento/ridimensionamento dell'elemento. function startdrag(e) { //salviamo gli handlers correnti del documento. // Li sovrascriveremo completamente con i nostri savemm = document.onmousemove; savemu = document.onmouseup; drag_object = e.target; //oggetto da spostare/ridimensionare drag_start_mouse_pos = getmousepos(e); //posizione iniziale del mouse drag_start_pos = {x:drag_object.offsetleft,y:drag_object.offsettop; //posizione iniziale dell'oggetto drag_start_size = {w:drag_object.offsetwidth,h:drag_object.offsetheight; //dimensioni iniziali dell'oggetto drag_start_border = drag_object.style.border; //bordo iniziale dell'oggetto drag_object.style.border = "1px dashed #CDCDCD"; //determiniamo dalla posizione del mouse se è richiesto: //-uno spostamento //-un ridimensionamento if ((drag_start_mouse_pos.x-drag_start_pos.x >= drag_start_size.w-10) && (drag_start_mouse_pos.y-drag_start_pos.y >= drag_start_size.h-10)) { //attiviamo la modalità "ridimensiona" dragmode = 2; //impostiamo il cursore appropriato drag_object.style.cursor = "se-resize"; else { //attiviamo la modalità "sposta" dragmode = 1; drag_object.style.cursor = "move"; //creiamo il toltip addhint(drag_object,drag_start_mouse_pos,(dragmode==1?"move":"resize")); //agganciamo i gestori del mouse al documento. In questo modo potremo //seguire i movimento del mouse anche al di fuori dell'oggetto //questo è utile nel caso eventi esterni (ad esempio sel sistema //operativo) provochino lo spostamente del mouse fuori dall'oggetto //senza notificarlo a Javasctipt document.onmousemove=drag; Revisione 05/11 Pagina 38/42

39 Document Object Model: Esempi finali document.onmouseup=enddrag; La funzione startdrag è molto articolata. Per prima cosa, vengono salvate in variabili globali (che avremo dichiarato all'inizio dello script) una serie di informazioni: gli eventuali listener associati agli eventi mousemove e mouseup del documento (che sovrascriveremo con i nostri), la posizione e la dimensione iniziale dell'elemento cliccato, la posizione iniziale del mouse, lo stile iniziale del bordo dell'elemento cliccato. Modifichiamo quindi il bordo dell'elemento per evidenziarlo, e deduciamo, sempre confrontando la posizione del mouse con la posizione e le dimensioni dell'elemento, se stiamo richiedendo un ridimensionamento (il click è nell'angolo inferiore destro) o un trascinamento (in tutti gli altri casi). Impostiamo quindi il giusto cursore e assegniamo alla variabile dragmode un valore che ci ricordi quello che stiamo facendo. Infine, agganciamo due nostri listener agli eventi mousemove e mouseup del documento. In questa maniera saremo in grado di seguire gli spostamenti del mouse (mousemove) e aggiornare di conseguenza l'elemento su cui abbiamo cliccato, concludendo l'operazione al rilascio del bottone (mouseup). Come ulteriore dettaglio dell'applicazione, visualizzeremo un tooltip vicino al mouse per tutta la durata dell'operazione. La funzione addhint crea questo tooltip, che per ora trascureremo. Vediamo invece il codice del gestore drag: function drag(e) { //posizione corrente del mouse drag_current_mouse_pos = getmousepos(e); switch (dragmode) { //spostamento case 1: //calcoliamo la nuova posizione dell'oggetto misurando //lo spostamento del mouse dalla sua posizione iniziale var newx = drag_start_pos.x + (drag_current_mouse_pos.x - drag_start_mouse_pos.x); var newy = drag_start_pos.y + (drag_current_mouse_pos.y - drag_start_mouse_pos.y); //e la impostiamo sull'oggetto drag_object.style.left = newx+"px"; drag_object.style.top = newy+"px"; //aggiornaimo il tolti updatehint(drag_object.style.left + "," + drag_object.style.top,drag_current_mouse_pos.x+10,drag_current_mouse_pos.y+ 10); break; //ridimensionamento case 2: //calcoliamo la nuova dimensione dell'oggetto misurando lo spostamento //del mouse dalla sua posizione iniziale var neww = drag_start_size.w + (drag_current_mouse_pos.x - drag_start_mouse_pos.x); var newh = drag_start_size.h + (drag_current_mouse_pos.y - drag_start_mouse_pos.y); //e la impostiamo sull'oggetto drag_object.style.width = neww+"px"; drag_object.style.height = newh+"px"; //aggiornaimo il tooltip updatehint(drag_object.style.width + " X " + drag_object.style.height,drag_current_mouse_pos.x+10,drag_current_mouse_pos.y+10); break; Revisione 05/11 Pagina 39/42

40 Document Object Model: Esempi finali La funzione drag viene chiamata mentre l'utente muove il mouse tenendo il bottone premuto. In base al dragmode impostato da startdrag, decidiamo se spostare o ridimensionare l'oggetto. Per prima cosa calcoliamo lo spostamento del mouse dalla sua posizione iniziale, sui due assi x e y, poi a seconda del caso sommiamo questo valore alla posizione o alle dimensioni dell'elemento, ottenendo un nuovo valore che assegneremo all'elemento stesso tramite le rispettive proprietà CSS. A questo punto l'oggetto è ridimensionato o spostato in base a quanto abbiamo trascinato il mouse rispetto all'inizio dell'operazione. Aggiorniamo di conseguenza anche il tooltip tramite la funzione updatehint. Vediamo infine cosa succede quando l'utente rilascia il bottone del mouse, attivando il listener enddrag: function enddrag(e) { //ripristiniamo i precedenti handlers del documento document.onmousemove=savemm; document.onmouseup=savemu; //ripristiniamo il bordo dell'oggetto drag_object.style.border = drag_start_border; drag_object.style.cursor = "auto"; //ripristiniamo il cursore removehint(); //rimuoviamo il tolti Vengono ripristinati i listener precedenti del documento, in modo che i movimenti del mouse non siano più seguiti dal nostro script. Inoltre, ripristiniamo il bordo e il cursore precedenti dell'oggetto, per evidenziare che l'operazione è terminata. Infine, rimuoviamo il tooltip con removehint. Questo termina il nostro esempio. E' stato sufficiente quindi gestire tre eventi (mousedown, mousemove e mouseup) ed effettuare qualche calcolo sulla base della posizione del mouse e degli oggetti cliccati, e poi applicando le tecniche di posizionamento CSS siamo riusciti a rendere mobili e ridimensionabili gli elementi della nostra pagina! L esempio completo è disponibile tra il materiale online del corso. Controllo delle form Come ultimo esempio, scriveremo un classico form checker. Si tratta di codice per la verifica della validità dell'input su una form, che aiuta l'utente a non sottomettere dati errati. Va sottolineato che i controlli sui form effettuati con Javascript sono un ausilio, in quanto permettono di individuare e correggere molti problemi direttamente sul client, prima che i dati siano inviati al server, ma non possono sostituire i controlli di sicurezza e coerenza effettuati sul server: infatti i controlli Javascript possono essere sempre evitati o alterati, quindi non possono essere considerati sicuri. Vediamo per prima cosa una semplice form da controllare: <html> <head> <title>javascript form check</title> </head> <body> <form action="pippo.php" method="get" id="f1"> <p>testo: <input type="text" name="t1" id="t1" /></p> <p>scelta: <select name="s1" id="s1"> <option value="v1" selected="selected">opzione1</option> Revisione 05/11 Pagina 40/42

41 Document Object Model: Esempi finali <option value="v2">opzione2</option> </select></p> <p><input type="submit" /></p> </form> </body> </html> Abbiamo due campi da controllare: t1 e s1. Queste saranno le nostre regole di controllo: il campo di testo t1 deve contenere un numero non nullo; se il campo a scelta s1 non ha selezione oppure se si seleziona l'opzione2, il campo di testo t1 ha valore costante 1 e non può essere compilato. Per prima cosa, inizializziamo il nostro script: window.onload = function() { //acquisiamo i riferimenti alla form e ai campi che volgiamo controllare f1 = document.getelementbyid('f1'); t1 = document.getelementbyid('t1'); s1 = document.getelementbyid('s1'); //impostiamo i listener corretti sulla form e sui suoi campi t1.onchange= function() {return checkt1(); s1.onchange = function() {return checks1(); f1.onsubmit = function() {return checkform(); la funzione di inizializzazione acquisisce i riferimenti agli elementi da controllare (la form e i suoi campi) e imposta gli appropriati listener su ciascuno di essi: change (attivato quando il campo perde il focus ed è stato modificato) per i campi e submit per la form. Notate che non possiamo per ora controllare i campi di testo (come t1) man mano che l'utente scrive, in quanto il DOM manca di eventi legati alla tastiera. Vediamo in che modo viene controllato t1: function checkt1() { //verifichiamo che il campo contenga un numero non nullo usando parseint if (parseint(t1.value)>0) { //trucco: parseint può isolare un numero da una stringa contenente //caratteri estranei come spazi, ecc. //per cui reimpostiamo il campo col numero esatto dedotto dalla funzione t1.value = parseint(t1.value); //il bordo del campo è lasciato "naturale" per indicare nessun errore t1.style.border=""; //ritorniamo false per indicare che l'azione è andata a buon fine return true; else { //se nel campo non c'è nulla di numerico attiviamo il campo t1.focus(); //selezioniamo il testo errato t1.select(); //e bordiamo di rosso il campo da correggere t1.style.border="1px solid red"; //ritorniamo false per indicare che l'azione è fallita return false; Usiamo la funzione parseint sul valore (value) del controllo per verificare se è presente un numero non nullo. Questa funzione Javascript restituisce il numero deducibile dalla stringa data oppure il valore "NaN" (Not A Number) se la stringa non rappresenta un numero. Inoltre, parseint Revisione 05/11 Pagina 41/42

42 Document Object Model: Esempi finali è capace di isolare un numero avente degli spazi precedenti e dei caratteri successivi: ad esempio interpreta " 13cm " come "13". Questa caratteristica ci è utile: se parseint rileva un numero, reimpostiamo il valore di t1 con quel numero, in modo da eliminare tutti i caratteri non significativi e mostrare il numero dedotto all'utente. Rendiamo quindi "normale" il bordo del controllo (per annullare eventuali messaggi di errore, vedi dopo) e ritorniamo true. In caso contrario, invece, attiviamo il focus sul campo, selezioniamo il testo errato, coloriamo di rosso il bordo, in modo da indicare all'utente dov'è il problema, e ritorniamo false. Vediamo ora come viene controllato il valore del campo s1: function checks1() { //se non c'è alcuna selezione o è selezionato il valore 'v2' if (s1.selectedindex<0 s1.value == 'v2') { //impostiamo il campo t1 a un default t1.value=1; //e impediamo all'utente di modificarlo t1.disabled=true; //il bordo del campo è lasciato "naturale" per indicare nessun errore t1.style.border=""; else { //in caso contrario, abilitiamo il campo t1 if (t1.disabled) { t1.disabled=false; //se il campo è vuoto, lo inizializziamo col default if (t1.value=='') t1.value=1; //ritorniamo true per indicare il valore di s1 è sempre corretto return true; In realtà non facciamo alcun vero controllo su s1, infatti la funzione ritorna sempre true. Invece, a seconda del valore selezionato in s1, disabilitiamo o abilitiamo il controllo t1. Quando lo disabilitiamo, o se abilitandolo scopriamo che non ha valore, impostiamo t1 al valore di default 1. Infine, eccoci al codice di controllo dell'intera form, che è semplicissimo: function checkform() { //eseguiamo i controlli dui due campi, e ritorniamo //l'and dei loro risultati return (checks1() && checkt1()); //in questo modo, se uno dei due ritorna false, //la form non verrà sottomessa Ci limitiamo a eseguire i controlli già visti in cascata, chiamando esplicitamente i listener. Il valore di ritorno sarà l'and dei valori ritornati dai due listener. In questo modo, se uno dei listener ritorna false per indicare un errore, il submit listener ritornerà false a sua volta, bloccando la submission della form. L esempio completo è disponibile tra il materiale online del corso. This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. To view a copy of this license, visit or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Revisione 05/11 Pagina 42/42