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
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
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
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
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
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
Collegamenti esterni modifica
- 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 |
|---|
