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 |
|---|
