VOOZH about

URL: https://it.wikipedia.org/wiki/DHTML

⇱ DHTML - Wikipedia

Vai al contenuto
Da Wikipedia, l'enciclopedia libera.

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]
👁 Composizione di DHTML
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 (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>functionchangeAll(){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>
functioninit(){
varmyObj=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:30px0;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>
functionchangeDisplayState(id){
vard=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>
functionshowMe(){
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]
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
Categoria:
Categorie nascoste: