 Client side JavaScript: il DOM
|
- Argomento della lezione
- Materiale scaricabile
- Esempi visti a lezione
|
Argomento della lezione
DOM è l'acronimo di Document Object Model, uno standard
in continua evoluzione che specifica il modo in cui i linguaggi di script possono
accedere alla dettagliata struttura di un documento HTML (o XML) e modificarla.
In questa lezione vedremo come JavaScript permette di accedere ad un documento
HTML.
L'oggetto window - che descrive la finestra del browser - ha una
proprietà window.document che si riferisce all'oggetto
document che descrive il file HTML correntemente visualizzato
nella finestra. Questo oggetto è il nodo centrale del DOM ed è
caratterizzato da proprietà che permettono di fornire varie informazioni
sul documento, ad esempio
- URL del documento
- data dell'ultima modifica
- URL del documento da cui si è partiti per raggiungere
quello corrente
- informazioni sui colori dello sfondo e del testo
- ...
Altre proprietè sono più complesse perchè descrivono
gli elementi (immagini, link, moduli, ...) contenuti all'interno
del documento HTML.
Non mancano naturalmente i metodi che permettono, per esempio, di creare dei
nuovi documenti e di scrivere del testo in modo dinamico.
Vedremo nel corso della lezione le proprietà e i metodi dell'oggetto
document grazie al quale i documenti HTML si trasformano in
programmi interattivi.
|
|
|
... we are developing a model in which the document or Web page contains
objects (elements, links, etc.) that can be manipulated.
So you will be able to delete, add, or change an element
(as long as the document is still valid, of course!),
change its content or add, delete or change an attribute.
The DOM Level 1 and Level 2 specifications are W3C Recommendations.
This means that the specification is final and can be implemented without fear
of things changing.
Level 1 allows navigation around an HTML or XML document,
and manipulation of the content in that document.
Level 2 extends Level 1 with a number of features:
XML Namespace support, filtered views, ranges, events, etc.
Level 3 is currently a Working Draft, which means that it
is under active development and subject to change as we
continue to refine it.
A DOM application (also called a client application) is that piece
of software which takes the document made available by the implementation,
and does something to it.
A script which runs in a browser is an example of an application.
The language you can use will depend on what hosting implementation
you want to use it with. Your favourite browser might implement a
JavaScript or VBScript interface, so you can use those scripting
languages within the page itself to manipulate the page or change
the CSS style sheet.
[ dal sito del W3C ]
|
Materiale scaricabile 
- Lucidi della lezione
- in formato PDF, 3 diapositive per pagina, con spazio
per le note (circa 81 KB)
- in formato PDF, 6 diapositive per pagina (circa 78 KB)
|
Esempi visti a lezione 
NB ogni esempio che trovate qui sotto costituisce una possibile soluzione ad un problema,
non deve essere considerato come l'unica soluzione. Esistono sicuramente
modi migliori di scrivere lo stesso codice ...
L'oggetto document
- Esempio 1: proprietà dell'oggetto document
NB. la data dell'ultima modifica è 1 gennaio 1970 - ricordatemi di spiegarvi il perchè.
- Esempio 2: document.write()
- Esempio 3: proprietà dell'oggetto image
- Esempio 4: roll over delle immagini
- Esempio 5: proprietà dell'oggetto link
- Esempio 6: roll over e link
- Esempio 7: simulazione di un filmato con immagini
NB. cliccate più volte sul pulsante Fai partire l'animazione e osservate il
comportamento. Cosa succede?
- Esempio 8: cambia colore allo sfondo
- Esempio 9: scrittura tra frame "fratelli"
|
Libro consigliato per questa parte 
David Flanagan, JavaScript: la guida, Apogeo
(ma qualunque altro testo va bene)
|
|
|
