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