Abbiamo detto che un browser è organizzato ad oggetti e che questi oggetti sono in vario modo in relazione fra loro. La grossa difficoltà della programmazione lato client è che differenti browser hanno sviluppato, nel corso degli anni, differenti modelli in cui mettere in relazione gli oggetti.
Stiamo parlando del Document Object Model (DOM), il "modello a oggetti del documento". Viene preso come riferimento il document (e non il browser o la finestra), dal momento che è il nodo centrale attorno al quale si sviluppano gli altri oggetti e le altre proprietà.
I primi browser (Netscape 2 e Internet Explorer 3) forniti di JavaScript utilizzavano un DOM molto elementare, che normalmente viene chiamato "livello 0". In breve però, con la diffusione sul mercato dei browser di 4a generazione, i DOM sviluppati da Microsoft e da Netscape divennero - ancora una volta - incompatibili fra loro.
In pratica il codice scritto per Netscape 4 molto spesso risulta incompatibile con quello di Internet Explorer 4 e viceversa.
Microsoft preferì infatti un DOM "flat", cioè con tutti gli elementi sullo stesso piano dell'oggetto document. Netscape invece aveva scelto di adottare un DOM particolarmente gerarchico.
Questa situazione è particolarmente evidente quando si ha a che fare con la sintassi relativa ai livelli.
Se, in una pagina HTML, abbiamo un livello di questo tipo:
<div id="mioLiv" style="position:absolute ">livello</div>
per ottenere il nome del livello, la sintassi per Internet Explorer è:
document.all.mioLiv.id
o anche:
mioLiv.id
per Netscape 4 invece è:
document.layers.mioLiv.id
Di fatto document.all diviene un modo per identificare Internet Explorer, mentre document.layers individua Netscape 4.
L'unico modo per programmare per entrambi i browser è quello di scrivere la sintassi per l'uno e per l'altro browser. Per risolvere questa situazione di incompatibilità di fatto, il W3C (l'organismo che si occupa di rilasciare le specifiche per il web, come l'HTML) decise di standardizzare il DOM.
La prima specifica definitiva (DOM level 1) è dell'ottobre 1998; nel dicembre 2001 è stata rilasciata invece la specifica relativa al DOM level 2; e attualmente il W3C sta lavorando al DOM level 3. Un gran contributo nei vari procedimenti di standardizzazione è stato anche dato dal Web Standards Project (WaSP) (vedi articolo: Gli standard di progettazione del Web).
Le specifiche sviluppate dal W3C sono quelle di riferimento a cui si stanno adeguando tutti i browser di nuova generazione (di generazione 5 e 6).
Attualmente la situazione è la seguente:
|
In pratica viene definito come DOM level 0 quello supportato da Netscape 2 e 3, e da Internet Explorer 3: si tratta di un DOM molto scarno, composto per lo più da document.images, document.applets, document.forms e pochi altri elementi. Si tratta di una base minimale comune.
Il DOM dei due browser si divide poi con i browser di 4° generazione, e più precisamente con l'introduzione dei livelli all'interno del documento. Si tratta di un DOM intermedio, ibrido, che non può essere considerato né DOM level 0, né tantomeno DOM level 1 (che ancora non esiste).
La specifica del W3C del 1998 stabilisce nuovamente un DOM comune (il DOM level 1, in cui il browser è identificato da document.getElementById) a cui sia Microsoft, sia Netscape hanno deciso di adeguarsi (dal momento che entrambe fanno parte del consorzio). Netscape però ha deciso di non mantenere un legame con il proprio passato, ripudiando il proprio precedente DOM: la sintassi scritta per Netscape 4 può infatti risultare non più compatibile con Netscape 6.
Comunque tutti i browser più recenti (Internet Explorer 5 e 6, Opera 5 e 6, Netscape 6, Mozilla 1) supportano oramai il DOM level 1 con relativo document.getElementById.
Tutta la problematica del DHTML (Dynamic HTML: il linguaggio che - congiungendo HTML, CSS e JavaScript permette ai livelli di muoversi all'interno della finestra del browser) è nello scrivere sintassi crossbrowser, che vada bene cioè sia per Netscape, sia per Internet Explorer ed eventualmente anche per Opera.
Nel nostro corso non ci cureremo delle problematiche del DOM, dal momento che per ora avremo modo di utilizzare sporadicamente i livelli. È bene però che teniate ben presente che, quando state sviluppando degli script e avete a che fare con i livelli (anche se dovete soltanto cambiare la visibilità da visibile a invisibile o viceversa) dovete attentamente verificare la visualizzazione nei differenti browser, perché potreste avere delle sorprese.
Se per esempio dovete cambiare la visibilità (da visibile a invisibile) di un livello vi troverete di fronte a tre differenti sintassi:
|
Provate a fare delle prove con questo esempio, togliendo i commenti (le due barre verticali a inizio riga) a seconda del browser. Non vi preoccupate se ancora non comprendete il significato del codice, dal momento che vedremo tutto in seguito:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
function nascondi() {
document.all["mioLiv"].style.visibility="hidden";
/*per Internet Explorer*/
// document.layers["mioLiv"].visibility= "hide";
/*per Netscape 4*/
//document.getElementById("mioLiv").style.visibility= "hidden";
/*per IE 5/6 e NN 6*/
}
</script>
</head>
<body>
<div id="mioLiv" style="position:absolute;background-color:red;color:white;">
mio livello
</div>
<br/><br/><br/>
<a href="#" onclick="nascondi()">nascondi</a>
</body>
</html>
Come potete vedere la sintassi cambia moltissimo a seconda del browser: quindi, quando operate coi livelli, fate attenzione!