DHTML

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search

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.

Caratteristiche[modifica | modifica wikitesto]

Composizione di DHTML
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 dinamico[modifica | modifica wikitesto]

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 web[modifica | modifica wikitesto]

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 aggiuntivo[modifica | modifica wikitesto]

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 dinamici[modifica | modifica wikitesto]

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 correlate[modifica | modifica wikitesto]

Collegamenti esterni[modifica | modifica wikitesto]

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