SELFHTML: JavaScript / Allgemeines zu Dynamischem HTML

SELFHTML/Navigationshilfen Dynamisches HTML
	Allgemeines zu Dynamischem HTML
	Das "Dynamische" an Dynamischem HTML Das Problem der inkompatiblen Modelle

Das "Dynamische" an Dynamischem HTML

Dynamisches HTML (engl. "Dynamic HTML" oder abgekürzt "DHTML") ist eine Erfindung von Marktstrategen, sagen Kritiker. In der Tat ist Dynamisches HTML keine klassische HTML-Erweiterung in Gestalt neuer HTML-Elemente. Es ist auch keine neue Sprache. Dynamisches HTML ist vielmehr der Sammelbegriff für verschiedene Lösungen, um dem Autor einer Web-Seite zu ermöglichen, Elemente der Web-Seite während der Anzeige dynamisch zu ändern, sei es automatisch oder durch Einwirken des Anwenders.

Beispiel:

<html><head><title>Test</title>
</head><body>
<p id="Absatz"
onClick="document.getElementById('Absatz').firstChild.nodeValue = 'Sehen Sie!'">
Ich bin dynamisch</p>
</body></html>

Erläuterung:

Das kleine Beispiel zeigt Dynamisches HTML nach dem Document Object Model (DOM) in seiner JavaScript-Umsetzung, das in dieser Form allerdings nur mit neueren Browsern (Internet Explorer ab V5.x und Netscape ab Version 6.x) funktioniert. Es dient hier nur dem Zweck, das "Typische" an Dynamischem HTML zu verdeutlichen. In dem Beispiel wird mit <p>...</p> ein gewöhnlicher HTML-Textabsatz definiert. Am Bildschirm steht dann: Ich bin dynamisch. Damit der Textabsatz sein Versprechen auch halten kann, enthält er im einleitenden <p>-Tag einen so genannten Event-Handler, im Beispiel den Event-Handler onClick. Dieser Event-Handler tritt in Aktion, wenn der Anwender mit der Maus auf den angezeigten Text klickt. Im Beispiel verwandelt sich nach dem Anklicken des Textes dessen Inhalt in: Sehen Sie!.

Wie Sie an dem Beispiel erkennen, können Sie also bestimmte angezeigte Inhalte austauschen, ohne dafür jedesmal vollständige neue Seiten laden zu müssen. Das ist eine charakteristische Eigenschaft von Dynamischem HTML. Eine Web-Seite verhält sich also plötzlich wie eine Anwendung, die einmal in den Arbeitsspeicher geladen wird und dann z.B. durch Interaktion mit dem Anwender das Geschehen am Bildschirm bestimmt.

Dynamisches HTML bietet Gestaltern anspruchsvoller Web-Seiten schier unerschöpfliche Möglichkeiten bei der Kontrolle über das Geschehen am Bildschirm. Es fängt mit Kleinigkeiten wie dem obigen Beispiel an. Es geht weiter mit animierten Grafiken, die über den angezeigten Inhalt gleiten oder hüpfen - manche Web-Seiten versuchen, ganze Aquarien abzubilden. Und es geht hin bis zu der Möglichkeit, mit Hilfe von Grafiken und anderen Elementen komplexe, interaktive Spiele, Lernsituationen oder auch selbstablaufende Animationen zu programmieren. Der Phantasie sind kaum Grenzen gesetzt. Der Anwender kann beim Anzeigen einer dynamischen HTML-Datei auch mit viel mehr Reaktionen konfrontiert werden als beim Betrachten einer normalen, statischen Web-Seite. Das hat Vor- und Nachteile. Es kommt immer darauf an, wie man die Features nutzt, ob zur bloßen Selbstdarstellung und Angeberei, oder zum Nutzen des Anwenders. Außerdem sollte sich jeder Entwickler darüber im Klaren sein, dass dynamische Web-Seiten nicht unbedingt für Suchmaschinen-Robots und erst Recht nicht für sehbehinderte Anwender geeignet sind.

"Programmieren" ist auf jeden Fall bei allem angesagt, was mit Dynamischem HTML zu tun hat: Fortgeschrittene Programmierkenntnisse in JavaScript sind Voraussetzung. Im Web finden Sie zwar fertige Lösungen zum Abkupfern, aber wer sich ernsthaft mit der Materie beschäftigen will, um eigene kreative Lösungen zu entwickeln, kommt um die Programmierung nicht herum. Das soll jedoch keine Entmutigung sein. Es gibt durchaus nützliche Anwendungsmöglichkeiten von Dynamischem HTML, die ohne allzugroßen Programmieraufwand auskommen.

Das Problem der inkompatiblen Modelle

Dynamisches HTML wird von Netscape ab Version 4.0 und vom Internet Explorer ab Version 4.0 interpretiert. Leider ist das Thema "Dynamic HTML" bei diesen beiden Browser-Versionen jedoch zu einem Schauplatz im Browser-Krieg verkommen. Denn die Realisierungen sind in beiden Browsern grundverschieden. Vieles muss für das 4er-Level der beiden Browser getrennt kodiert werden (mit doppeltem Kenntnisaufwand), sofern man für beide Browser schreiben will. Vieles funktioniert überhaupt nur mit dem einen oder mit dem anderen Browser. Vor allem kann sich das "echte" dynamische HTML (beliebiger Zugriff auf alle HTML-Elemente einer Web-Seite), wie es der Internet Explorer ab Version 4.0 bereits beherrscht, auf dem 4er-Level der Browser noch nicht richtig durchsetzen, da dort stets auf das wesentlich primitivere, layer-orientierte Modell von Netscape Rücksicht genommen werden muss.

Mittlerweile zeichnet sich jedoch ein einheitlicher Standard ab. Zu verdanken ist dieser Standard dem W3-Konsortium, das auch HTML und CSS normiert. Für den Script-Sprachen-Zugriff auf Elemente einer Web-Seite hat das W3-Konsortium das Document Object Model (DOM) entworfen. Die neueren Versionen der führenden Browser setzen das DOM - wenn auch noch mit deutlichen Schwächen im Detail - in JavaScript um, so dass es in absehbarer Zeit wohl einfacher werden wird, Dynamisches HTML zu programmieren.

In der vorliegenden Dokumentation werden zunächst alle drei Modelle (Microsoft 4er-Level, Netscape 4er-Level und DOM) getrennt vorgestellt ( Die verschiedenen DHTML-Modelle). Denn nur wenn Sie die Konzepte klar unterscheiden können, sind Sie in der Lage, Dynamisches HTML so zu schreiben, dass es mit verschiedenen Browsern funktioniert. Im zweiten Schritt können Sie dann sehen, wie sich Dynamisches HTML browser-übergreifend realisieren lässt ( Lösungen für die Praxis).


	Das Document Object Model (DOM)
	Verweisliste als Auswahlliste

SELFHTML/Navigationshilfen Dynamisches HTML