Il DOM e JavaScript

Il Grande Disegno

Gli effetti visivi come muovere i layer sulla pagina, mostrare e nascondere layer, far comparire menu, eccetera, sono spesso indicati come "DHTML", o "Dynamic HTML". Alcuni hanno dubbi sull'effettiva utilità di queste tecnologie in pagine web che dovrebbero trasmettere del contenuto e non la presentazione, ma dobbiamo comunque prendere atto della loro larga diffusione.

Molti web master si limitano ad andare sui siti che offrono script DHTML e ricopiare il codice nelle loro pagine, senza interessarsi a come funzionano quegli script DHTML. Sfortunatamente la maggior parte di questi siti parlano di "javascript" e "DHTML", ma mai di DOM, il quale, sebbene sia un concetto introdotto da parecchio, solo di recente sta entrando nel gergo del web designer medio.

E' una grande sfida per un progetto come Mozilla convincere i possessori di questi siti che ***it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. *** Uno dei più grandi problemi che incontrano alcuni web developer è la confusione tra JavaScript, DHTML e il DOM. In questo articolo tenteremo di chiarire le cose, e di spiegare le relazioni fra queste utili ed elaborate tecnologie.

JavaScript, IL Linguaggio di Web Scripting

JavaScript è un "linguaggio di scripting di oggetti" sviluppato inizialmente alla Netscape Communications Corp. da Brendan Eich, che oggi è uno dei leader del progetto Mozilla. Il motore JavaScript usato da Mozilla si chiama SpiderMonkey, e aderisce alla specifica ECMA-262 3°revisione(di cui è un superset; guarda anche la pagina ECMAScript).

Contrariamente a diffuse errate credenze, JavaScript non è "Java Interpretato". Possiamo dire che JavaScript è un linguaggio di scripting dinamico che supporta la costruzione di oggetti basata su prototipi. La sintassi di base è volutamente simile sia a Java che a C++ per ridurre il numero di nuovi concetti richiesti per imparare il linguaggio. Il grande vantaggio di JavaScript è che è estremamente facile da imparare se vuoi fare programmazione di base (come quella richiesta per semplici DHTML). Niente tipi di variabili a vista, stringhe semplici da usare, neutralità totale della piattaforma,ecc. Per i programmatori avanzati può essere usato sia come linguaggio orientato agli oggetti che come linguaggio procedurale.

Gran parte di questo paragrafo su JavaScript è stato preso dalla pagina JavaScript di Mozilla. Puoi anche consultare la più recente specifica ECMA.

Il Modello a Oggetti del Documento, un insieme di interfacce indipendenti dal linguaggio

Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti fornisce metodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Per esempio, potresti recuperare il valore di un campo di testo e metterlo in una variabile stringa con il DOM; a questo punto puoi usare l'operatore Javascript di concatenazione + , per unire quella stringa ad un'altra, in base a ciò che vuoi ottenere. Potresti quindi usare il metodo alert() per mostrare la stringa all'utente attraverso una finestra di dialogo. Guarda anche gli altri esempi più sotto.

In che senso "indipendente dal linguaggio"? Non è javascript l'unico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sono alcuni dei linguaggi che hanno un'implementazione del DOM: Perl, Java, ActiveX, Python; ciò è possibile grazie all'indipendenza del DOM dal linguaggio di programmazione.

Il DOM e Javascript - Chi sta facendo cosa?

Arriviamo al punto principale di questo documento: chi sta facendo cosa? In uno script che ho inserito nella mia pagina, dov'è il DOM, e dov'è Javascript? Guardiamo da vicino un piccolo esempio: il codice prende tutti i tag <a> della pagina e li mette in una NodeList che abbiamo chiamato "anchorTags". Quindi per ogni tag ancora facciamo comparire un avviso contenente il valore dell'attributo href del tag. In blu c'è Javascript, in rosso il DOM.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
}

Spiegazione

Questo frammento di codice mostra cos'è Javascript, e cos'è DOM..

var anchorTags =

Crea una variabile chiamata "anchorTags".

document.getElementsByTagName("a")

L'interfaccia Document è la prima interfaccia definita nel DOM1 Core, e document è l'oggetto che implementa l'interfaccia Document. L'oggetto document contiene tutto ciò che c'è nella pagina.
Il DOM1 Core definisce il metodo getElementsByTagName() Nell'interfaccia Document. Questo metodo mette in una NodeList(una sorta di array specifico per contenere i nodi del DOM)tutti i tag il cui nome corrisponde al parametro passato alla funzione, in ordine di apparizione nel codice sorgente del documento. La variabile anchorTags è quindi ora una NodeList.

;

Il punto e virgola che chiude le istruzioni. Roba di Javascript.

for (var i = 0; i <

Tipico ciclo "for" in un linguaggio di programmazione. Ci consente di scorrere tutti i nodi contenuto nella NodeList salvata in anchorTags. "i" è una variabile temporanea di Javascript.

anchorTags.length

Nel DOM1 Core è definita la proprietà length dell'interfaccia NodeList. Restituisce un intero che è il numero di nodi contenuti nella NodeList.

; i++) {

Tipica istruzione per incrementare di 1 una variabile. Javascript.

alert(

alert() è un metodo del DOM che apre una finestrella in mezzo allo schermo con dentro la stringa che gli hai passato. Nota: questo metodo fa parte di ciò che viene chiamato DOM level 0, o DOM0; è un insieme di interfacce che non fanno parte di nessuna specifica DOM, ma sono comunque implementate da alcuni browser.

"Href of this a element is : " +

Una stringa letterale e un operatore di concatenazione di stringhe. JavaScript.

anchorTags[i].href

"href" è una proprietà definita dall'intefaccia HTMLAnchorElement della specifica DOM1 HTML. Restituisce il valore dell'attributo href dell'elemento ancora, se presente.
Usiamo anche anchorTags[i], la stessa sintassi usata in Javascript per accedere all'i-esimo elemento di un array. Un modo più "linguaggio-indipendente" per accedere a un elemento di una NodeList è l'uso del metodo item(), definito nella interfaccia NodeList: anchorTags.item(1).href, ma la maggior parte delle implementazioni Javascript permettono di usare la più sbrigativa sintassi per array, che è ciò che la maggior parte dei programmatori usano.

+ "\n");

Un'altra concatenazione di stringhe. Inserisce un ritorno del carrello alla fine della stringa.

}

Fine del ciclo "for".