La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

JavaScript DOM – Document Object Model. DOM - Document Object Model Alice Pavarani2  API implementata dai browser  Indipendente dal linguaggio e dalla.

Presentazioni simili


Presentazione sul tema: "JavaScript DOM – Document Object Model. DOM - Document Object Model Alice Pavarani2  API implementata dai browser  Indipendente dal linguaggio e dalla."— Transcript della presentazione:

1 JavaScript DOM – Document Object Model

2 DOM - Document Object Model Alice Pavarani2  API implementata dai browser  Indipendente dal linguaggio e dalla piattaforma  Forma di rappresentazione dei documenti strutturati  Definisce il modo di accedere alla struttura del documento  Permette di visualizzare un documento sotto forma di albero  Gli elementi del documento sono i nodi dell’albero  Standard ufficiale del W3C

3 DOM di un documento HTML Alice Pavarani3  Il browser interpretando un documento HTML ne genera il DOM  Esempio: DOCUMENT HTML BODYHEAD TITLEMETA Esempio DOM H1H2 TitoloSottotitolo P Testo del paragrafo A Link

4 DOM e JavaScript: gli oggetti ospite Alice Pavarani4  Il DOM non è una parte di JavaScript  Il DOM è una collezione di oggetti per Javascript window frame document location history layer link area form anchor applet plugin image textarea text fileUpload password hidden submit reset checkbox radio button select option navigator plugin mimeType

5 Proprietà e metodi comuni Alice Pavarani5 Proprietà id Identificativo (dovrebbe essere univoco) attributes Restituisce un vettore di attributi che caratterizzano l’elemento childNodes Restituisce un vettore contenente gli elementi (nodi) figli dell’elemento className Identifica la classe di appartenenza dell’elemento (lettura/scrittura) nodeName, nodeType, nodeValue Nome, tipo e valore del nodo corrente parentNode Restituisce il nodo padre del nodo corrente style Restituisce lo stile che si applica all’elemento Metodi addEventListenerAggiunge un gestore per un determinato evento all’elemento a cui si applica removeEventListenerElimina un gestore di evento esistente appendChildAggiunge un elemento in coda alla lista degli elementi contenuti nel nodo corrente cloneNodeRestituisce una copia dell’elemento a cui si applica getAttributeRestituisce il valore dell’attributo specificato come argomento

6 Alice Pavarani6  Il padre di tutti gli oggetti  Rappresenta la finestra corrente del browser Proprietà name Nome della finestra corrente statusbar valori booleani che se impostati a false la proprietà visible nasconde la barra relativa (di default è true) Barra di stato locationbar Barra degli indirizzi scrollbars Barre di scorrimento (verticali/orizzontali) toolbar Barra degli strumenti screenLeft, screenTop Internet Explorer, … Distanza, in pixel, dal bordo sinistro e da quello in alto della finestra del browser rispetto al desktop screenX, screenY Chrome, Firefox, … status Messaggio da visualizzare sulla barra di stato Window proprietà

7 Alice Pavarani7  Il padre di tutti gli oggetti  Rappresenta la finestra corrente del browser Window metodi Metodi alert() Visualizza un alert con un messaggio ed il bottone ok blur()Rimuove il focus dalla finestra corrente close()Chiude la finestra corrente confirm()Visualizza un box di dialogo con un messaggio ed i bottoni ok e annulla focus() Assegna il focus alla finestra corrente open() Apre una nuova finestra del browser print() Stampa il contenuto della finestra corrente prompt() Visualizza un box di dialogo con un messaggio e un campo di inserimento per l’utente resizeTo() Ridimensiona la finestra alle dimensioni specificate (larghezza e altezza) stop() Interrompe il caricamento della finestra

8 Alice Pavarani8  Rappresenta il documento HTML Proprietà inputEncoding Restituisce la codifica dei caratteri utilizzata nel documento (sola lettura) lastModified Restituisce la data e l’ora di ultima modifica del documento (sola lettura) readyState Restituisce lo stato del caricamento della pagina (sola lettura) title Titolo della pagina (tag ) URL Restituisce l’indirizzo completo della pagina (sola lettura) Document Metodi createElement()Crea un nuovo elemento nel documento - esempioesempio createTextNode()Crea un elemento di tipo testuale nel documento - esempioesempio getElementById()Restituisce l’elemento il cui attributo ID ha il valore specificato getElementByName()Permette di accedere a tutti gli elementi aventi il nome specificato getElementByTagName()Restituisce la lista di nodi contenente tutti gli elementi di un certo tag write(), writeln() Permettono di scrivere espressioni HTML sul documento

9 Location Alice Pavarani9  Contiene le informazioni riguardo l’indirizzo URL corrente History  Contiene gli indirizzi URL visitati all’interno della finestra corrente Metodi assign() reload() replace() Proprietà hostpathname hrefport originprotocol Metodi back() forward() go() Proprietà lenght

10 Navigator Alice Pavarani10  Rappresenta il browser che visualizza la pagina Web  Fornisce informazioni sul browser Esempio tratto da // oggetto Navigator - Informazioni sul Browser txt = " Browser CodeName: " + navigator.appCodeName + " "; txt += " Browser Name: " + navigator.appName + " "; txt += " Browser Version: " + navigator.appVersion + " "; txt += " Cookies Enabled: " + navigator.cookieEnabled + " "; txt += " Browser Language: " + navigator.language + " "; txt += " Browser Online: " + navigator.onLine + " "; txt += " Platform: " + navigator.platform + " "; txt += " User-agent header: " + navigator.userAgent + " "; txt += " User-agent language: " + navigator.systemLanguage + " "; document.writeln(txt);


Scaricare ppt "JavaScript DOM – Document Object Model. DOM - Document Object Model Alice Pavarani2  API implementata dai browser  Indipendente dal linguaggio e dalla."

Presentazioni simili


Annunci Google