Dynamisches HTML oder DHTML, ist ein Überbegriff für eine Sammlung von Technologien verwendet zusammen, um interaktive und belebte Websites durch das Verwenden einer Kombination einer statischen Preiserhöhungssprache (wie HTML), eine Kundenseite scripting Sprache (wie JavaScript), eine Präsentationsdefinitionssprache (wie CSS), und das Dokumentengegenstand-Modell zu schaffen.

DHTML erlaubt scripting Sprachen, Variablen auf einer Definitionssprache einer Webseite zu ändern, die der Reihe nach den Blick und die Funktion sonst "des statischen" HTML-Seiteninhalts betrifft, nachdem die Seite völlig geladen worden ist und während des Betrachtungsprozesses. So ist die dynamische Eigenschaft von DHTML die Weise, wie es fungiert, während eine Seite angesehen wird, nicht in seiner Fähigkeit, eine einzigartige Seite mit jeder Seitenlast zu erzeugen.

Im Vergleich ist eine dynamische Webseite ein breiteres Konzept, jede Webseite erzeugt verschieden für jeden Benutzer, Lastereignis oder spezifische variable Werte bedeckend. Das schließt Seiten ein, die von der Kundenseite scripting und den geschaffen sind, die von der Server-Seite scripting geschaffen sind (wie PHP, Perl, JSP oder ASP.NET), wo der Webserver Inhalt vor dem Senden davon dem Kunden erzeugt.

Gebrauch

DHTML erlaubt Autoren, Effekten zu ihren Seiten hinzuzufügen, die sonst schwierig sind zu erreichen. Zum Beispiel erlaubt DHTML dem Seitenautor:

• Belebter Text und Images in ihrem Dokument, unabhängig jedes Element von jedem Startpunkt bis jeden endenden Punkt, im Anschluss an einen vorher bestimmten Pfad oder einen gewählten durch den Benutzer bewegend.
• Betten Sie einen Fernschreiber ein, der automatisch seinen Inhalt mit den letzten Nachrichten, Börsenkursen oder anderen Daten erfrischt.
• Verwenden Sie eine Form, um Benutzereingang zu gewinnen, und dann in einer Prozession zu gehen und darauf Daten zu antworten, ohne Daten an den Server zurücksenden zu müssen.
• Schließen Sie Knöpfe der überlappenden Eingabe oder Menüs des Falls unten ein.

Weniger übliche Anwendung soll Browser-basierte Handlungsspiele schaffen. Während des Endes der 1990er Jahre und Anfang der 2000er Jahre wurden mehrere Spiele mit DHTML geschaffen, aber Unterschiede zwischen Browsern haben das schwierig gemacht: Viele Techniken mussten im Code durchgeführt werden, um den Spielen zu ermöglichen, an vielfachen Plattformen zu arbeiten. Kürzlich sind Browser zu den Webstandards zusammengelaufen, der das Design von DHTML Spielen lebensfähiger gemacht hat. Jene Spiele können auf allen Hauptbrowsern gespielt werden, und sie können auch zu Produkten für Mac OS X und Geräten für die Windows-Aussicht getragen werden, die auf dem DHTML-Code basieren.

Der Begriff "DHTML" ist aus dem Gebrauch in den letzten Jahren gefallen, weil es mit Methoden und Vereinbarung vereinigt wurde, die dazu geneigt hat, gut zwischen verschiedenen WWW-Browsern nicht zu arbeiten. DHTML kann jetzt das unauffällige Codieren von JavaScript genannt werden (DOM Scripting), um einen Wert auf den vereinbarten beste Methoden zu legen, während er ähnliche Effekten auf eine zugängliche, standardentgegenkommende Weise erlaubt.

Grundlegende DHTML-Unterstützung wurde mit Internet Explorer 4.0 eingeführt, obwohl es ein grundlegendes dynamisches System mit dem Netscape Navigator 4.0 gab. Als es ursprünglich weit verbreitete, unterschiedliche Grade der Unterstützung unter WWW-Browsern für die beteiligten Technologien geworden ist, hat DHTML-artige Techniken schwierig gemacht, zu entwickeln und die Fehler zu beseitigen. Entwicklung ist leichter geworden, als Internet Explorer 5.0 +, Mozilla Firefox 2.0 +, und Oper 7.0 + einen geteilten DOM angenommen hat.

Mehr kürzlich haben Bibliotheken von JavaScript wie jQuery weg viele der täglichen Schwierigkeiten im Quer-Browser DOM Manipulation abstrahiert.

Struktur einer Webseite

Normalerweise wird eine Webseite mit DHTML folgendermaßen aufgestellt:

</Kopf>

var init = Funktion {\

myObj = document.getElementById ("Navigation");

//... manipulieren Sie myObj

};

window.onload = init;

</Schrift>

</Körper>

</HTML>

</Quelle>

Beispiel: Das Anzeigen eines zusätzlichen Blocks des Textes

Der folgende Code illustriert eine oft benutzte Funktion. Ein zusätzlicher Teil einer Webseite wird nur gezeigt, wenn der Benutzer darum bittet.

{background-color:#eee; }\

a:hover {background:#ff0; }\

#toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em; }\

</Stil>

</Kopf>

changeDisplayState = Funktion (id) {\

var d = document.getElementById ('showhide'),

e = document.getElementById (id);

wenn (e.style.display === 'niemand' || e.style.display ===) {\

e.style.display = 'Block';

d.innerHTML = 'Verbergen Paragrafen';

}\

sonst {\

e.style.display = 'niemand';

d.innerHTML = 'Show-Paragraf';

}\ };

document.getElementById ('showhide').onclick = Funktion {\

changeDisplayState ('toggleMe');

kehren Sie falsch zurück;

}; </Schrift> </Körper></HTML></Quelle>

Einführung ins dynamische HTML

Dynamisches HTML (DHTML) ist eine Reihe innovativer Eigenschaften, die ursprünglich in Microsoft Internet Explorer 4.0 eingeführt ist. Indem er Autoren ermöglicht, die Übergabe und den Inhalt einer Webseite weil dynamisch zu ändern, wirkt der Benutzer damit aufeinander, DHTML ermöglicht Autoren, visuell zwingende Websites ohne die Gemeinkosten von Programmen der Server-Seite oder komplizierten Sätze von Steuerungen zu schaffen, um spezielle Effekten zu erreichen.

Mit DHTML können Sie Effekten zu Ihren Seiten leicht hinzufügen, die vorher schwierig waren zu erreichen. Zum Beispiel können Sie:

• Verbergen Sie Inhalt, bis eine gegebene Zeit vergeht oder der Benutzer mit der Seite aufeinander wirkt.
• Belebter Text und Images in Ihrem Dokument, unabhängig jedes Element von jedem Startpunkt bis jeden endenden Punkt, im Anschluss an einen vorher bestimmten Pfad oder einen gewählten durch den Benutzer bewegend.
• Betten Sie einen Fernschreiber ein, der automatisch seinen Inhalt mit den letzten Nachrichten, Börsenkursen oder anderen Daten erfrischt.
• Verwenden Sie eine Form, um Benutzereingang zu gewinnen, und dann sofort in einer Prozession zu gehen und darauf Daten zu antworten.

DHTML erreicht diese Effekten durch das Ändern der Darstellung im Gedächtnis des aktuellen Dokumentes und automatisch die Wiederformatierung davon, um Änderungen zu zeigen. Es lädt das Dokument nicht um, lädt ein neues Dokument oder verlangt, dass ein entfernter Server neuen Inhalt erzeugt. Statt dessen verwendet es den Computer des Benutzers, um zu rechnen und Änderungen auszuführen. Das bedeutet, dass ein Benutzer auf den Text und die Daten nicht wartet, um zeitraubende Hin- und Rückfahrten zu und von einem Server vor dem Sehen der Ergebnisse zu vollenden. Außerdem verlangt DHTML nicht, dass zusätzliche Unterstützung aus Anwendungen oder eingebetteten Steuerungen Änderungen vornimmt. Gewöhnlich sind DHTML Dokumente, mit Stilen und einer Schrift geschlossen, um Benutzereingang zu bearbeiten und direkt die HTML-Elemente, die Attribute, die Stile und den Text des Dokumentes zu manipulieren.

Kurz gesagt, DHTML beseitigt die Mängel von statischen Seiten. Sie können innovative Websites im Internet oder in einem Intranet schaffen, ohne Leistung für die Zwischentätigkeit opfern zu müssen. Nicht nur erhöht DHTML die Wahrnehmung des Benutzers Ihrer Dokumente, es verbessert auch Server-Leistung durch das Reduzieren von Bitten auf den Server.

Die folgenden Abteilungen beschreiben DHTML ausführlicher, und wie man ihn verwendet.

• Dokumentengegenstand-Modell
• Dynamische Stile
• Dynamischer Inhalt
• Die Positionierung und Zeichentrickfilm
• Filter und Übergänge
• Schriftart-Download
• Daten, die binden
• Zusammenfassung
• Zusammenhängende Themen

Dokumentengegenstand-Modell

DHTML ist nicht eine Technologie in und von sich; eher ist es das Produkt von drei zusammenhängenden und ergänzenden Technologien: HTML, Cascading Style Sheets (CSS) und Schrift. Um Schriften und Bestandteile zur Anschlusseinrichtung des HTML und CSS zu erlauben, wurde der Inhalt des Dokumentes als Gegenstände in einem als Document Object Model (DOM) bekannten Programmiermodell vertreten.

Die DOM API ist das Fundament von DHTML, eine strukturierte Schnittstelle zur Verfügung stellend, die Ihnen dem Zugang erlaubt und manipulieren Sie eigentlich irgendetwas innerhalb des Dokumentes. Die HTML-Elemente im Dokument sind verfügbar, weil Person protestiert, meinend, dass Sie untersuchen und ein Element und seine Attribute modifizieren können, indem Sie lesen und Eigenschaften setzen, und indem Sie Methoden nennen. Der Text zwischen Elementen ist auch durch DOM Eigenschaften und Methoden verfügbar.

Der DOM stellt auch Zugang zu Benutzerhandlungen wie das Drücken eines Schlüssels und Klicken auf die Maus zur Verfügung. Sie können abfangen und diese und anderen Ereignisse bearbeiten, indem Sie Ereignis-Dressierer-Funktionen und Routinen schaffen. Der Ereignis-Dressierer erhält Kontrolle jedes Mal, wenn ein gegebenes Ereignis vorkommt und jede passende Handlung, einschließlich des Verwendens des DOM ausführen kann, um das Dokument zu ändern.

Dynamische Stile

Dynamische Stile sind ein Hauptmerkmal von DHTML. Indem Sie CSS verwenden, können Sie das Äußere und die Formatierung von Elementen in einem Dokument schnell ändern, ohne Elemente hinzuzufügen oder zu entfernen. Das hilft, Ihre Dokumente klein und die Schriften zu halten, die das Dokument schnell manipulieren.

Das Gegenstand-Modell stellt programmatic Zugang zu Stilen zur Verfügung. Das bedeutet, dass Sie Reihenstile auf individuellen Elementen ändern und Stil-Regeln mit der einfachen Schrift-basierten Programmierung ändern können. Diese Schriften können in JavaScript, Microsoft JScript oder Microsoft Visual Basic Scripting Edition (VBScript) geschrieben werden.

Reihenstile sind CSS Stil-Anweisungen, die auf ein Element mit dem Stil-Attribut angewandt worden sind. Sie können untersuchen und diese Stile setzen, indem Sie den Stil-Gegenstand für ein individuelles Element wiederbekommen. Zum Beispiel, um den Text in einem Kopfstück hervorzuheben, wenn der Benutzer den Maus-Zeigestock darüber bewegt, können Sie den Stil-Gegenstand verwenden, die Schriftart zu vergrößern und seine Farbe, wie gezeigt, im folgenden einfachen Beispiel zu ändern.

fungieren Sie showMe {\

MyHeading.style.color = "rot";

MyList.style.display ="";

}\

</Schrift>

</Kopf>

</ul>

</Körper>

</HTML></Quelle>

Datenschwergängigkeit

Datenschwergängigkeit ist eine DHTML-Eigenschaft, die Sie leicht individuelle Elemente in Ihrem Dokument zu Daten von einer anderen Quelle, wie eine Datenbank oder Komma-abgegrenzte Textdatei binden lässt. Wenn das Dokument geladen wird, die Daten wird von der Quelle automatisch wiederbekommen und formatiert und innerhalb des Elements gezeigt.

Eine praktische Weise, Datenschwergängigkeit zu verwenden, soll Tische in Ihrem Dokument automatisch und dynamisch erzeugen. Sie können das tun, indem Sie ein Tabellenelement zu einer Datenquelle binden. Wenn das Dokument angesehen wird, wird eine neue Reihe im Tisch für jede Aufzeichnung geschaffen, die von der Quelle wiederbekommen ist, und die Zellen jeder Reihe werden mit dem Text und den Daten von den Feldern der Aufzeichnung gefüllt. Weil diese Generation dynamisch ist, kann der Benutzer die Seite ansehen, während neue Reihen im Tisch geschaffen werden. Zusätzlich, einmal alle Tabellendaten ist da, können Sie (Sorte oder Filter) die Daten manipulieren ohne zu verlangen, dass der Server zusätzliche Daten sendet. Der Tisch wird einfach mit den vorher wiederbekommenen Daten regeneriert, um die neuen Reihen und Zellen des Tisches zu füllen.

Ein anderer praktischer Gebrauch der Datenschwergängigkeit soll ein oder mehr Elemente im Dokument zu spezifischen Feldern einer gegebenen Aufzeichnung binden. Wenn die Seite angesehen wird, werden die Elemente mit dem Text und den Daten von den Feldern in dieser Aufzeichnung, manchmal genannt die "aktuelle" Aufzeichnung gefüllt. Ein einfaches Beispiel ist ein Form-Brief, in dem der Name, die E-Mail-Adresse und die anderen Details über eine Person von einer Datenbank gefüllt werden. Um den Brief an ein bestimmtes Individuum anzupassen, geben Sie einfach an, welche Aufzeichnung die aktuelle Aufzeichnung sein sollte. Keine anderen Änderungen zum Brief sind erforderlich.

Und doch soll ein anderer praktischer Gebrauch die Felder in einer Form zu Feldern in einer Aufzeichnung binden. Nicht nur kann der Benutzer den Inhalt der Aufzeichnung ansehen, aber der Benutzer kann auch diesen Inhalt ändern, indem er die Einstellungen und Werte der Form ändert. Der Benutzer kann dann diese Änderungen vorlegen, so dass die neuen Daten zur Quelle — zum Beispiel, zum HTTP Server oder der Datenbank geladen werden.

Um Daten zur Verfügung zu stellen, die in Ihren Dokumenten binden, müssen Sie einen Datenquellgegenstand (DSO) zu Ihrem Dokument hinzufügen. Dieser unsichtbare Gegenstand ist einfach eine Kontrolle von ActiveX oder Java applet, der weiß, wie man mit der Datenquelle kommuniziert. Das folgende Beispiel zeigt, wie leicht es einen Tisch zu einem DSO binden soll. Wenn angesehen, zeigt dieses Beispiel die ersten drei Felder von allen Komma-abgegrenzten Aufzeichnungen der Datei "sampdata.csv" in einem klaren, easy-read Tisch.

</Gegenstand>

</tbody>

</Tisch>

</Körper></HTML></Quelle>

http://sourceforge.net/projects/jscalendar/

Außenverbindungen

• QuirksMode, eine umfassende Seite mit Testbeispielen und Instruktionen darauf, wie man DHTML-Code schreibt, der auf mehreren Browsern läuft.
• Einleitender DHTML Tutorenkurs für diejenigen, die ihre ersten Schritte in DHTML machen.
• HTML & DHTML Reference auf MSDN