document
Transcript
document
Javascript: manipolare e gestire 1 Pasqualetti Veronica DOM ((Document Object j Model)) 2 Il Document Object Model è un interfaccia di programmazione (API) per documenti sia HTML sia XML. In parole povere è un insieme di funzioni, metodi e proprietà, che i programmi possono richiamare al fine di delegare il lavoro al sistema sottostante. Definisce la struttura logica dei documenti ed il modo in cui si accede d e sii manipola i l un d documento. Utilizzando DOM i programmatori possono costruire documenti,, navigare g attraverso la loro struttura,, e aggiungere, modificare o cancellare elementi. Ogni componente di un documento HTML o XML può essere letto modificato, letto, modificato cancellato o aggiunto utilizzando il Document Object Model. W3C - World Wide Web Consortium e DOM 3 Il DOM è iindipendente di d t d dalla ll piattaforma i tt f E’ un'interfaccia definita dal W3C per essere lo strumento universale i l per tuttii i creatorii di pagine i Web. Il DOM definito dal W3C è indipendente dal tipo di browser, dalla versione e dal sistema operativo. DOM e JavaScript p 4 Il DOM non è una parte t di JavaScript. J S i t Il JavaScript è solo un modo per accedere al DOM, e non è ll'unico unico. E’ possibile accedere e manipolare ogni nodo d l DOM, del DOM ma anche h aggiungerne i di nuovii all volo, l ed eliminarne altri già presenti. Queste possibilità s sono offerte ff t d da ttutti tti i b browser s che h ssupportano t il DOM W3C. Vediamo V di cos’è ’è un nodo d … Elaborazione DOM (1) 5 <TABLE> <TBODY> <TR> <TD>Shady Sh d Grove</TD> G / <TD>Aeolian</TD> </TR> / <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> Elaborazione DOM (2) 6 Il Document Object Model rappresenta la tabella della slide precedente in questo modo: Differenza tra element e node 7 Un elemento (element) è contraddistinto da un tag, tag quindi può contenere altri elementi. Esempio: si pensi al tag TABLE, che può contenere le righe e le celle della tabella stessa, e a loro volta questi possono contenere altri elementi. Ill nodo d (node) ( d ) ha h un significato f semantico più ù ampio: oltre l ad includere nella sua definizione tutti gli elementi, un nodo può essere anche un testo testo, o un attributo attributo, che a differenza di tutti gli altri nodi non possono avere attributi e non p possono contenere altri nodi. Quindi gli elementi che costituiscono il DOM sono: document (l'elemento principale), element e node. "document" è l'elemento che contiene tutti gli altri elementi del DOM. Recuperare p elementi DOM 8 getElementById(): permette di recuperare l'elemento l elemento caratterizzato univocamente dal valore del proprio attributo ID. Restituisce un riferimento all'elemento in questione La sintassi è: questione. document.getElementById(ID_elemento) ID_elemento è, per l'appunto, il valore (univoco) dell'attributo ID d ll' l dell'elemento t che h sii vuole l recuperare. getElementsByTagName(): permette di recuperare l'insieme degli g elementi caratterizzati dallo stesso tag. g In particolare ritorna un array di tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel codice della pagina. La sintassi è: document.getElementsByTagName(nome_TAG) nome_TAG è il nome del Tag di cui si vuole recuperare la lista. Creare nodi ed elementi DOM 9 createElement(): () p permette di creare un nuovo elemento di qualunque tipo. Ritorna un riferimento al nuovo elemento creato. La sintassi è: nuovo_elemento nuovo elemento = document.createElement(nome_TAG) document createElement(nome TAG) nuovo_elemento è la variabile che conterrà il riferimento al nuovo elemento creato nome TAG è il nome del Tag di cui si vuole creare un nuovo nome_TAG elemento createTextNode(): permette di creare un nuovo nodo di testo. testo La sintassi è: nuovo_testo = document.createTextNode(testo_da_inserire) nuovo_testo è la variabile che conterrà il riferimento al nuovo nodo testo_da_inserire è la stringa di testo da inserire nel nuovo nodo Creare un nodo … 10 C C'èè differenza tra creare un nuovo nodo ed inserirlo nella pagina. Esiste infatti un set di metodi che serve per sistemare i nuovi nodi esattamente dove desideriamo. Supponiamo di voler creare un nuovo nodo di testo e di volerlo appendere alla fine di un div con id=par if(document getElementById && document.createTextNode) if(document.getElementById document createTextNode) { // inanzitutto creiamo un nuovo nodo di testo frase = document.createTextNode(“esempio semplice"); // poi, i recuperiamo i l'elemento l' l t con ID = par e appendiamoci il nodo di testo appena creato document.getElementById("par").appendChild(frase); g y ( p ) pp ( ); } Alcuni cu metodi etod pe per appe appendere de e o rimuovere uo e e nodi od 11 appendChild: inserisce un nuovo nodo alla fine della lista dei figli del nodo al quale è applicato. La sintassi è: node.appendChild(nodo) nodo è, è per l'appunto l appunto, il nodo che si vuole appendere replaceChild: inserisce un nuovo nodo al posto di un altro nella struttura della pagina. La sua sintassi è: node.replaceChild(nuovo_nodo,vecchio_nodo) d l Child( d hi d ) nuovo_nodo è il nuovo nodo che si vuole inserire al posto del vecchio vecchio_nodo è il nodo che si vuole rimpiazzare con il nuovo removeChild: hild elimina li i e restituisce i i il nodo d specificato ifi dalla d ll lista dei figli del nodo al quale è applicato. La sua sintassi è: node.removeChild(nodo_da_rimuovere) nodo_da_rimuovere è il nuovo nodo che viene rimosso e restituito dal metodo Alcuni metodi p per manipolare p elementi ((1/2) / ) 12 getElementsByTagName: tEl t B T N ritorna it lla li lista t d degli li elementi contenuti all'interno di un certo elemento. setAttribute: A ib permette di creare un nuovo attributo ib all'elemento specificato. Qualora l'attributo sia già presente, t il metodo t d sovrappone il nuovo valore l all'attributo in questione. La sintassi è: element.setAttribute(nome_attributo, l t tAtt ib t ( tt ib t valore_attributo) l tt ib t ) nome_attributo (stringa) è il nome dell'attributo che deve essere inserito o modificato valore_attributo (stringa) è il valore cui impostare l'attributo specificato Alcuni metodi p per manipolare p elementi ((2/2) / ) 13 getAttribute: tAtt ib t recupera il valore l di un attributo tt ib t dell'elemento. La sintassi è: element.getAttribute(nome_attributo) l t tAtt ib t ( tt ib t ) nome_attributo (stringa) è il nome dell'attributo di cui si vuole recuperare il valore removeAttribute: rimuove l'attributo passato come parametro. parametro La sintassi è: element.removeAttribute(nome_attributo) nome attributo (stringa) è il nome dell nome_attributo dell'attributo attributo che si vuole eliminare Specifiche Spec c e DOM O e oggett oggetti Ja JavaScript aSc pt pe per il DOM O 14 Per P maggiori i i approfondimenti f di ti sull DOM sii rimanda i d alla documentazione ufficiale W3C http://www w3 org/DOM/ http://www.w3.org/DOM/ In JavaScript troviamo un insieme di oggetti specifici per la l manipolazione i l i DOM DOM: Window D Document t Form Frame (Window.Frame) (Window Frame) Oggetto gg Window 15 Questo Q t oggetto tt rappresenta t la l fi finestra t iin cuii il documento corrente viene visualizzato Una ffunzione i può ò accedere d alle ll proprietà i àd della ll finestra corrente, ma può creare e manipolare nuove fi finestre t ((pop-up)) Oggetto gg Window: p proprietà p 16 P Proprietà i tà title titolo della finestra statusbar t t b testo t t mostrato t t sulla ll b barra di stato t t location URL del documento visualizzato outerHeight, outerHeight outerWidth dimensioni esterne innerHeight, innerWidth dimensioni interne Oggetto gg Window: esempi p 17 Modificare M difi il tit titolo l d della ll fi finestra t corrente t window.title = “Questo è il nuovo titolo”; Accedere A d ad d un nuovo d documento window.location =“http://www.yahoo.com/”; Calcolare l’area in pixel della finestra var area = window.innerWidth*window.innerHeight; Oggetto gg Window: metodi 18 M Metodi t di open(location, title) apre una nuova finestra alert(message) l t( ) visualizza i li il messaggio i in i una finestra fi t di dialogo (utile per il debug) confirm(message) visualizza il messaggio e richiede una conferma all’utente moveTo(x, y) sposta la finestra alle coordinate indicate resizeTo(width, height) dimensiona la finestra Oggetto gg Window: altre p proprietà p 19 Parent. Parent Restituisce ll'oggetto oggetto Window della finestra superiore (gerarchicamente) ,se la finestra superiore è la corrente, parent restituirà la pagina corrente. Self. Restituisce l'oggetto window corrente. Top. Restituisce l'oggetto window principale. Frame. F R tit i Restituisce una matrice t i di fframe contenuti t ti nella ll finestra corrente. Gli oggetti Frame hanno le stesse proprietà dell'oggetto gg window. Window.Frames(1).Location.href =http://pro.html.it Window.Frames.Count //num. di frame in una pagina Oggetto gg Window.Frame 20 Javascript rappresenta un frame usando un oggetto window. window Ogni frame object è un oggetto window, e ha tutti i metodi e le proprietà di un oggetto window. C'è un esiguo numero di piccole differenze tra una finestra che è un frame e una finestra di massimo livello (top level window). Per una na finestra di massimo livello, li ello le proprietà parent e top si riferiscono alla finestra stessa. Per un frame, top si riferisce alla finestra di massimo livello del browser, e parent si riferisce alla finestra parente della finestra corrente. corrente Oggetto gg Window: esempi p ((1/2) / ) 21 Creazione e posizionamento di una nuova finestra var w = window.open( http://www.google.com/ , window.open(“http://www.google.com/”, “Google”); w.moveTo(0, 0); Visualizzazione di un messaggio window.alert(“Attenzione si è verificato un errore”); ”) Oggetto gg Window: esempi p ((2/2) / ) 22 Visualizzazione del browser in uso window.alert(“Sei connesso con ” + navigator.appName + “ versione ” + navigator version); navigator.version); Richiesta conferma all’utente if(confirm(“Vuoi proseguire con l’operazione?”)) { //L’utente //L utente ha risposto SI … } else { //L’utente ha risposto NO … } Oggetto gg Document 23 Rappresenta R t il d documento t HTML che h costituisce tit i lla pagina visualizzata Non è possibile accedere a tutti gli elementi del documento Tuttavia è possibile accedere agli elementi dei moduli (form) ed alle proprietà di visualizzazione E E’ possibile costruire on-the-fly on the fly il documento prima che questo sia stato completamente caricato e visualizzato Oggetto gg Document 24 Proprietà bgColor colore dello sfondo fgColor colore del testo forms vettore dei moduli presenti nella pagina title titolo del documento URL indirizzo del documento Metodi write(string) accoda string al documento, serve per la costruzione on-the-fly Oggetto gg Document: esempi p ((1/2) / ) 25 Supponendo che nel documento HTML sia definito un modulo di nome modulo <FORM NAME= NAME “modulo” modulo …> > … </FORM> Si può accedere a tale oggetto in due diversi modi document.forms[“modulo”]; document.modulo; Ciò è possibile, in generale, per tutti gli elementi del documento con un attributo NAME Oggetto gg Document: esempi p ((2/2) / ) 26 Dal D l momento t che h lla proprietà i tà forms f è di tipo ti Array A è possibile accedervi anche tramite l’indice numerico dell elemento dell’elemento for(var i=0; i<document.forms.length; i++){ //Accedi a document.forms[i] document forms[i] ... = document.forms[i]; ... } Oggetto gg Form 27 Un U oggetto tt di questo t ti tipo corrisponde i d ad d un modulo d l all’interno di una pagina HTML Tramite i lle proprietà i à di questo oggetto è possibile ibil accedere ai diversi elementi (o controlli) del modulo (i (inputbox, tb li tb listbox, checkbox, h kb ecc.)) Oggetto gg Form: p proprietà p 28 P Proprietà i tà action valore dell’attributo ACTION elements l t vettore tt contenente t t gli li elementi l ti del d l modulo d l length numero di elementi del modulo method valore dell’attributo dell attributo METHOD target valore dell’attributo TARGET Oggetto gg Form: metodi 29 M Metodi t di reset() azzera il modulo reimpostando i valori di default per i vari elementi submit() invia il modulo Oggetto gg Form: esempi p 30 Supponendo che ll’ii-esimo esimo elemento di un modulo mod sia denominato nome_i è possibile farvi riferimento in 3 modi diversi document.mod.elements[i-1]; document.mod.elements[“nome_i”]; document.mod.name_i; Attenzione l’indice del primo elemento di un vettore è sempre 0 ((quindi i di l’i l’i-esimo i elemento l h ha iindice di ii-1)) Elementi dei moduli 31 All’interno All’i t di un modulo d l possono comparire i di diversii tipi di elementi, corrispondenti ai vari costrutti HTML Ogni tipo ha proprietà e metodi specifici, per una t tt i trattazione approfondita f dit sii rimanda i d alla ll guida id di riferimento del modello ad oggetti implementato dal b browser s Elementi dei moduli 32 Elementi dei moduli 33 Tutti T tti i ti tipii di elementi l ti possiedono i d le l seguenti ti proprietà name nome dell’elemento d ll’ l t value valore corrente dell’elemento Gli elementi l ti di ti tipo IInputt possiedono i d lla proprietà i tà defualtValue che contiene il valore predefinito del campo (attributo VALUE del tag HTML) Elementi dei moduli 34 Gli elementi l ti di ti tipo R Radio di e Checkbox Ch kb possiedono i d lla proprietà checked che indica se l’elemento è stato selezionato Gli elementi di tipo Select possiedono la proprietà selectedIndex, l t dI d che h contiene ti l’i l’indice di d dell’elemento ll’ l t selezionato nella lista, e la proprietà options, che contiene ti il vettore tt delle d ll sscelte lt d dell’elenco ll’ l Elementi dei moduli 35 E’ possibile ibil modificare difi i valori l i contenuti t ti negli li elementi dei moduli Pertanto è possibile ibil utilizzare ili questii elementi l i anche h per fornire risultati all’utente Se un elemento ha scopi esclusivamente di rappresentazione può essere marcato come READONLY FOR … IN 36 Serve a ricavare quali sono le proprietà di un oggetto. oggetto for (<proprietà> in <oggetto>) { //istruzioni } dove proprietà è una "variabile-contenitore" che stiamo creando al volo. Esempio con FORM: <form name="mioForm"> <input type="button" NAME="miotesto" value="mio campo di prova"> </form> <script type="text/javascript"> for (prop in document.mioForm) { document.write(prop+"<br/>");} </script> FOR … IN con arrayy 37 Il for... for in può essere utilizzato anche per scorrere gli elementi di un array, se interrogato con la giusta sintassi: <script type type="text/javascript"> text/javascript > alunni = new Array("Aldo","Giovanni","Giacomo","Mario",“ Gi Gianni","Monica"); i" "M i ") for (prop in alunni) { document.write(alunni[prop]+ <br/> );} document.write(alunni[prop]+"<br/>");} </script> Altri oggetti: gg Oggetto gg Navigator g 38 L’oggetto L’ tt navigator i t rappresenta t l’i l’istanza t d dell b browser in cui lo script è in esecuzione Proprietà i à appCodeName codice identificativo del browser appName nome del d lb browser appVersion numero di versione Altri oggetti: gg Oggetto gg historyy 39 Rappresenta R t lla sequenza di pagine i visitate i it t dall’utente Tale l sequenza è rappresentata mediante di un vettore Metodi back() torna alla pagina precedente forward() passa alla pagina successiva Altri oggetti: gg Oggetto gg Screen 40 Contiene informazioni sul display del client. client availHeight Altezza dello schermo esclusa la taskbar availWidth Larghezza dello schermo esclusa la taskbar colorDepth La risoluzione di colore height L L’altezza altezza dello schermo pixelDepth La risoluzione in bit per pixel width La larghezza dello schermo