Requisiti del corso
E' richiesta la conoscenza almeno dell'HTML, di
JavaScript e dei
concetti base di Object Oriented.
Che cos'è DHTML?
DHTML sta per Dynamic HyperTextual Markup Language.
Rispetto all'HTML c'è di più il termine "Dynamic";
ma la dinamicità di
questo HTML dov'è ?
I fortunati che non dovranno mai lavorare con CGI, nemmeno
capiranno
il Dynamic: il DHTML consente, in pratica, di aggirare il server!
Qualche anno fa per poter modificare dati su una videata del browser
occorreva che uno script venisse
eseguito sul server; quest'ultimo
generava, a sua volta, l'output da inviare al browser:
ora dello script
CGI sul server non ce n'è bisogno, perchè il browser
conosce tutte le
informazioni per formattare adeguatamente l'output.
Oltre a questo basilare vantaggio, il DHTML introduce la dinamicità
di
poter variare un TAG delle informazioni senza dover
mai far intervenire
il server; la cosa è possibile con una combinazione
di HTML, di funzioni
JavaScript (o VBScript) e fogli di stile. JavaScript è un
scripting-language
C-style, che è preferito da tutti coloro che hanno
già un Know-how basato
su C/C++/Java/Perl/HTML.
Il DHTML porta anche delle innovazioni, rappresentate proprio
dai fogli
di stile (style).
Il foglio di stile consente di avere un maggior controllo sulla pagina
creata.
Vediamo qualche esempio.
<HTML>
<HEAD>
<TITLE>Prova di DHTML: attenti i freni non funzionano!</TITLE>
<STYLE>
H1.italic
{font-style:italic; text-decoration: none}
H1.underline
{font-style:normal; text-decoration:underline}
</STYLE>
<BODY>
<SCRIPT language="JavaScript">
function changeHead(){
if( H1_1.className == "underline"){
H1_1.className = "italic"
}
else {
H1_1.className = "underline";
}
}
</SCRIPT>
<H1 id="H1_1" class="italic" onmouseover="changeHead()"
onmouseout="changeHead()">Introduzione al DHTML</H1>
</BODY>
</HEAD>
</HTML>
Le parti da osservare sono:
1) <STYLE> ...... </STYLE> dove vengono definiti
gli stili che si vogliono usare
2) <SCRIPT> ...... </SCRIPT> dove in JAVASCRIPT viene definita
la funzione
changeHead()
3) la definizione dell'id="H1_1"
Il file consente che ogni volta si passa sopra al titolo H1 viene
aggiunta la
sottolineatura e levato il corsivo; mentre ogni volta il mouse lascia
il titolo
esso torna all'aspetto di partenza. Tutte queste azioni avvengono
senza
nessuna ulteriore comunicazione tra browser e server,
ma solo in locale
dove èarrivato l'HTML contenente la parte JavaScript.
Il DHTML è nato tra il 1994 e il 1995, ed è relativamente
giovane.
Sia Netscape che Microsoft hanno imposto un proprio DHTML, basati
su
una parte comune e che sono differenti in diverse cose interessanti.
Da poco il W3C (World
Wide Web Consortium) sta cercando di definirne
uno standard, al di là dei vantaggi che potrebbe trarne
una singola società.
Che cos'è il DOM ?
Il concetto base del DHTML è il DOM (Document Object Model),
ovvero
il modello ad oggetti di un documento. Il concetto
è stato introdotto nel 1994
dalla Netscape insieme al linguaggio di scripting JavaScript,
nell'epoca
imperante dell'Object Oriented. Il
DOM è una gerarchia di oggetti JavaScript!
In alto alla gerarchia c'è la finestra
(window), sotto c'è il documento che
è costituito
da altri oggetti.
Per fissare un po' le idee vi presento una
gerarchia abbastanza semplificata.
window ---> document -----> anchor
|----> link
|----> applet
|----> image
|----> frame
|----> plugin
|----> form ----> text
|----> textarea
|----> radio
|----> checkbox
|----> select
|----> button
Ogni oggetto è una astrazione di classe che possiede metodi
e proprietà (dati).
L'attivazione di una tipologia di oggetto si dice istanza dell'oggetto.
In tal modo nell'ambito di un "document" è possibile controllare
il contenuto
(con l'aiuto tra l'altro dei fogli di stile), attivare, rilevare
un evento su qualsiasi oggetto dovunque esso sia localizzato.
Il modello degli eventi è del tipo "event bubbling", ovvero
capace di risalire
anche nella gerarchia alla classe superiore.
