DHTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
+{{Interfacce web}} |
|||
| (58 versioni intermedie di 44 utenti non mostrate) | |||
Riga 1:
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 ==
[[File:Dhtml-schema.png|alt=Composizione di DHTML|miniatura|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
* data binding
* accesso facilitato al DOM (
=== Stile dinamico ===
Tramite il DHTML è possibile fare cambiare lo stile CSS di un oggetto in modo dinamico. Ad esempio:
<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>
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:<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>
== 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:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
== 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:<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>
==
* [[HTML]]
* [[CSS]]
* [[JavaScript]]
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* [http://www.mah-jongg.ch Esempio: Mahjongg solitario] gioco popolare scritto in DHTML
{{Interfacce web}}
{{Controllo di autorità}}
{{Portale|Telematica}}
[[
| |||