Vai ai contenuti
Ministero dell'Istruzione, dell'Università e della Ricerca
Formazione degli insegnanti sulle Tecnologie dell'Informazione e della Comunicazione
For TIC
Percorso C
Modulo 16
Creazione e mantenimento di un sito Web
Approfondimento: L'elaborazione dei dati su client
Stili dinamici

Gli stili dinamici permettono agli sviluppatori di rendere inizialmente visibile solo una parte del documento, con la possibilità, attraverso la definizione di elementi e classi in DHTML , di espanderne la struttura e visualizzarne il contenuto in modo analitico. Il codice che segue è un esempio molto semplice di tale struttura:

<HTML>
<HEAD>
<TITLE>Testo espandibile</TITLE>
<STYLE TYPE=text/css>
body {background:white}
.testo {color:#000080; font-size:10pt; FONT-FAMILY: verdana; cursor:help}
.times {color:red; font-size:14pt; FONT-FAMILY: times new roman;}
.vuoto {display:none}
</STYLE>
<SCRIPT LANGUAGE=JavaScript>
function stile(st) {
menu.className=st
}
</SCRIPT>
</HEAD>
<BODY ONCLICK=outliner();>
<H1 CLASS=fisso child=menu> DHTML </H1>
Questo testo viene formattato automaticamente senza dover ricaricare la pagina.
<p> </p>
<p><input type=radio value=V1 checked name=R1 onclick=stile(times)>times 14 pt<br>
<input type=radio value=V2 name=R1 onclick=stile(testo)>verdana 10 pt<br>
<input type=radio value=V3 name=R1 onclick=stile(vuoto)>nascondi il testo</p>
<p> </p>
<DIV ID=menu CLASS=times>
testo formattato...
</DIV>

In questo esempio vengono create tre classi: fisso, espandibile e vuoto. La classe fisso stabilisce gli elementi che, una volta cliccati, cambiano aspetto alla struttura e si associa all'attributo child. Quest'ultimo contiene l'ID dei dati da nascondere o visualizzare, e identifica, in modo univoco, gli elementi di questo genere all'interno della struttura. Nel caso specifico la classe fisso determina, oltre al colore blu del testo, il tipo di puntatore che il mouse deve assumere quando si trova su un elemento della classe stessa. Quando si clicca sull'elemento fisso, il nome di classe dei dati cambia da vuoto a espandibile, o viceversa, generando l'effetto desiderato.

Gli SCRIPT indicano al browser come interpretare le informazioni presenti in una pagina Web. In questo modo, relativamente alla marcatura presente tra <SCRIPT> </SCRIPT>, il browser delega all'autore la gestione degli eventi del documento. Nel momento in cui il browser legge, attraverso una particolare procedura chiamata di parser, la marcatura del documento ed incontra <SCRIPT>, ne passa il contenuto all'elaboratore di script, per poi continuare l'interpretazione del resto della pagina.

I browser che non supportano la gestione di script ignorano quanto posto all'interno di <SCRIPT></SCRIPT>.

Indice