Il DHTML (acronimo dall'inglese Dynamic HTML), conosciuto anche come HTML dinamico, è un insieme di tecnologie che permettono di cambiare in modo dinamico la rappresentazione e il contenuto di un documento ed aumentare l'interattività dell'utente sulla pagina.

Non è un vero e proprio linguaggio ma è una sorta di contenitore di script a cavallo tra il JavaScript, l'HTML e il CSS. Gli elementi, gli attributi e gli stili del DHTML sono basati sull'HTML esistente e sulle specifiche classiche del W3C.

CaratteristicheModifica

 
Composizione di DHTML

Le caratteristiche più interessanti di questa tecnologia sono:

  • dinamicità degli stili
  • dinamicità dei contenuti
  • posizionamento e animazioni sugli elementi
  • filtri e transizioni
  • download di font non presenti sulla macchina
  • data binding
  • accesso facilitato al DOM (Document Object Model)

Stile dinamicoModifica

Tramite il DHTML è possibile fare cambiare lo stile CSS di un oggetto in modo dinamico. Ad esempio:

<html>
<head>
 <title>DHTML Test</title>
 <script>function changeAll() { document.getElementById('div1').style.color = 'blue'; }</script>
</head>
<body>
 <div id="div1" style="color: red;" onmouseover="changeAll()">
  Benvenuti Nel test di DHTML! Passa sopra a questo testo!
 </div>
</body>
</html>

Oppure potremmo anche ordinare i dati presenti in una tabella cliccando in una determinata parte del documento: le potenzialità del linguaggio JavaScript sono molteplici, tanto che con un eloquente uso del linguaggio, si possono creare vere e proprie applicazioni web gestite direttamente dal browser, quindi senza necessità di supporto software da parte del client.

Struttura di una pagina webModifica

In genere una pagina Web che utilizza DHTML viene impostata nel modo seguente:

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8">
        <title>Esempio DHTML</title>
    </head>
    <body>
        <div id="navigation"></div>

        <script>
            function init() {
                var myObj = document.getElementById("navigation");
                // ... manipola la finestra di myObj
            }
            window.onload = init;
        </script>

        <!--
       Spesso il codice è memorizzato in un file esterno; questo viene fatto 
       collegando il file che contiene JavaScript.         
       Ciò è utile quando più pagine utilizzano lo stesso script:
        -->
        <script src="myjavascript.js"></script>
    </body>
</html>

Visualizzazione di un blocco di testo aggiuntivoModifica

Il codice seguente illustra una funzione usata spesso. Una parte aggiuntiva di una pagina web verrà visualizzata solo se l'utente lo richiede. Esempio:

<html>
    <head>
        <meta charset="utf-8">
        <title>Utilizzo di una funzione DOM</title>
        <style>
            a { background-color: #eee; }
            a:hover { background: #ff0; }
            #toggleMe { background: #cfc; display: none; margin: 30px 0; padding: 1em; }
        </style>
    </head>
    <body>
        <h1>Utilizzo di una funzione DOM</h1>
        
        <h2><a id="showhide" href="#">Mostra paragrafo</a></h2>
        
        <p id="toggleMe">Questo è un paragrafo visibile solo se richiesto.</p>
        
        <p>Il flusso generale del documento continua</p>
        
        <script>
            function changeDisplayState(id) {
                var d = document.getElementById('showhide'),
                    e = document.getElementById(id);
                if (e.style.display === 'none' || e.style.display === '') {
                    e.style.display = 'block';
                    d.innerHTML = 'Nascondo paragrafo';
                } else {
                    e.style.display = 'none';
                    d.innerHTML = 'Mostra paragrafo';
                }
            }
            document.getElementById('showhide').addEventListener('click', function (e) {
                e.preventDefault();
                changeDisplayState('toggleMe');
            });
        </script>
    </body>
</html>

Stili dinamiciModifica

Utilizzando i CSS, è possibile modificare rapidamente l'aspetto e la formattazione degli elementi in un documento senza aggiungere o rimuovere elementi. Questo aiuta a mantenere i documenti piccoli e gli script che manipolano il documento velocemente. Esempio:

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8">
        <title>Stili dinamici</title>
        <style>
            ul { display: none; }
        </style>
    </head>

    <body>
        <h1 id="firstHeader">Benvenuto nell' HTML dinamico</h1>

        <p><a id="clickableLink" href="#">Gli stili dinamici sono una caratteristica fondamentale del DHTML.</a></p>

        <ul id="unorderedList">
            <li>Cambia il colore, la dimensione e il carattere tipografico del testo</li>
            <li>Mostra e nascondi il testo/li>
            <li>E molto, molto di più</li>
        </ul>

        <p>Siamo solo all'inizio!</p>

        <script>
            function showMe() {
                document.getElementById("firstHeader").style.color = "#990000";
                document.getElementById("unorderedList").style.display = "block";
            }

            document.getElementById("clickableLink").addEventListener("click", function (e) {
                e.preventDefault();
                showMe();
            });
        </script>
    </body>
</html>

Voci correlateModifica

Collegamenti esterniModifica

Controllo di autoritàLCCN (ENsh97008021 · BNF (FRcb13572286g (data) · BNE (ESXX546727 (data)
  Portale Telematica: accedi alle voci di Wikipedia che parlano di reti, telecomunicazioni e protocolli di rete