DHTML

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.

Il DHTML non è un linguaggio; consiste invece nell'uso di JavaScript per aggiungere funzionalità interattive a documenti HTML e fogli di stile CSS.

Caratteristiche

Le caratteristiche più interessanti di questa tecnologia sono:

dinamicità degli stili
dinamicità dei contenuti
posizionamento e animazioni sugli elementi
filtri e transizioni
data binding
accesso facilitato al DOM (Document Object Model)

Stile dinamico

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

{ window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Mobile-friendly input handler for Enter key document.addEventListener('keyup', function(e) { if (e.key === 'Enter') { const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Search button click handler document.addEventListener('click', e => { const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]'); if (searchButton) { e.preventDefault(); const searchForm = searchButton.closest('form'); if (searchForm) { const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } } }); }); \n\n"}}">

<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

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

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

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

Collegamenti esterni

DHTML, su sapere.it, De Agostini.
Esempio: Mahjongg solitario gioco popolare scritto in DHTML

Controllo di autorità	LCCN (EN) sh97008021 · BNE (ES) XX546727 (data) · BNF (FR) cb13572286g (data) · J9U (EN, HE) 987007549195705171

Portale Telematica: accedi alle voci di Wikipedia che parlano di reti, telecomunicazioni e protocolli di rete