Verlauf
Alle Kapitel anzeigen
Unter Dynamischem HTML versteht man die Kombination von Web-Technologien, die eine "dynamische" Veränderung von Webseiten auf dem Client ermöglichen. Dazu zählen
- HTML,
- DOM (Document Object Model),
- CSS (Cascading Style Sheets) und
- einer client-seitigen Scriptsprache wie JavaScript, JScript, VBScript o.ä.
Es handelt sich also nicht um eine Weiterentwicklung von HTML, wie oft fälschlicherweise angenommen wird, sondern um eine Ergänzung.
Typischerweise liegt die Dynamik einer solchen Seite auf Seiten des Client. D. h. die HTLM-Seite wird mit eingebettetem Code vom Server geliefert. Der Server nimmt an der betreffenden Seite keinerlei Veränderungen vor, sondern behandelt sie wie eine "normale" HTML-Seite. Dieser Code beinhaltet nun Anweisungen, wie sich die HTML-Seite in bestimmten Situationen - z. B. bei Maus-Click - verhalten, verändern soll; die Anweisungen werden vom Browser am Client ausgeführt, daher die Bezeichnung "clientseitige Scripts". Die Veränderungen können vielfältig sein: eine andere Schriftart oder -größe für den Text, ein alternativer Text, etc. Dem Gestalter von Webseiten stehen hier viele Möglichkeiten offen.
So gut der Ansatz von dynamischem HTML klingt, die Tücke liegt wie so oft im Detail: hier ist das nicht unwesentliche Detail die Interpretation der dynamischen Anweisungen durch den Browser. Haben sich schon beim Layout von Webseiten unterschiedliche Interpretationsansätze gezeigt, so werden sie hier noch deutlicher. Dynamisches HTML wird von den beiden "großen" Browsern MS Internet Explorer und Netscape Navigator jeweils erst ab der Version 4.0 unterstützt - jedoch ohne Aussicht auf Vereinheitlichung.
Einen großen Schritt in Richtung eines Standards hat Microsoft unternommen mit der Entwicklung des Document Object Model (DOM).
Das DOM basiert auf der Überlegung, dass jedes Element einer Webseite "ansprechbar" sein müsste und stellt die Webseite in einer Objekthierarchie dar: jedes anzeigbare Objekt untersteht dem <body>-Tag, jede Tabellenzelle gehört zu einer Tabelle, etc. Diese hierarchisch gegliederten Objekte müssen dann natürlich auch in der Scriptsprache (z. B. JavaScript) abgebildet sein.
Das Document Object Model ist also eine plattform- und sprachen-unabhängige Schnittstelle zur Beschreibung von HTML-Dokumenten. Obwohl es von Microsoft entwickelt wurde, gilt es als Standard, da auch das W3-Konsortium eine Spezifikation (mittlerweile Level 3) herausgegeben hat.
Einen Schritt in Richtung dynamischer Veränderung von Webinhalten auf Clientseite machen auch Cascading Style Sheets (CSS). Während mit den meisten CSS-Angaben "nur" Text (statisch) formatiert wird, können auch dynamische Elemente definiert werden. Beispielsweise werden durch den CSS-Befehl a:hover {color:#FF0000;} alle Verweise rot, wenn die Maus darüberfährt.
Allgemeines
Um nun die im DOM beschriebenen Elemente einer Webseite dynamisch verändern zu können, braucht man noch eine Scriptsprache, in der die Befehle abgefasst sind. Die am weitesten verbreitete und von den meisten Browsern interpretierbare Scriptsprache ist JavaScript.
JavaScript ist nicht Bestandteil von HTML, sondern eine Programmiersprache, die eigens für die Verwendung in HTML-Seiten entwickelt wurde. JavaScript-Programme werden nicht vorher compiliert, sondern als Code dem HTML-Code beigefügt - entweder als eigens gekennzeichneter Abschnitt in einer HTML-Seite oder in einer separaten Datei - und zur Laufzeit auf dem Client interpretiert. Der Webbrowser benötigt zur Ausführung der JavaScript-Abschnitte einen eigenen (integrierten) Interpreter.
Für viele Einsatzbereiche gibt es bereits JavaScript-Code, der im Internet frei verfügbar ist. Es ist durchaus emfpehlenswert, solche Code-Ressourcen zu nützen, da die Scripts meist von erfahrenen JavaScript-Programmierern geschrieben werden. Sie müssen dann nur noch für die eigene Webseite angepasst und ev. ergänzt werden. Um JavaScript-Programmier-Kenntnisse wird also trotzdem niemand herumkommen.
Wer JavaScript für seine WWW-Seiten verwenden will, sollte sie auf jeden Fall mit mehrere Browsern testen. Denn leider sind die JavaScript-Interpreter der am meisten verbreiteten Browser Netscape und MS Internet Explorer noch immer unterschiedlich in ihrer Leistung.
JavaScript-Versionen
JavaScript wurde von Netscape entwickelt und ist auch dort linzenziert. Ein echter Standard konnte daher bislang nicht erreicht werden.
Einen gewissen Anhaltspunkt, welche JavaScript-Befehle von welchem Browser (richtig) interpretiert werden, geben die Versionsangaben der Browser. Daran kann man sich bei der Webseiten-Entwicklung mit JavaScript orientieren. 100%ig verlassen kann man sich jedoch nicht auf die Angaben der Browser-Anbieter. Es ist auf jeden Fall empfehlenswert, HTML-Seiten mit JavaScript-Code auf mehreren Browser-Versionen zu testen.
| JavaScript-Version | Browser-Version |
| 1.0 | MS Internet Explorer 3.0 |
| 1.1 | MS Internet Explorer 4.0 |
| 1.2 | MS Internet Explorer 4.0 *) |
| 1.3 | MS Internet Explorer 5.0 |
| 1.5 | Netscape 6.0 |
*) mit Einschränkungen
JavaScript in einer HTML-Seite
Innerhalb einer HTML-Seite kann JavaScript-Code in einigen HTML-Tags oder in eigenen Script-Bereichen angegeben werden.
JavaScript in HTML-Tags
Für viele Tags können sogenannte Event-Handler formuliert werden. Das sind Anweisungen, die bei bestimmten Benutzeraktionen (z. B. Maus-Klick auf ein Element oder nur Mit-der-Maus-Darüberfahren, Abschicken eines Formulars etc.) ausgeführt werden. Solche Anweisungen bestehen meist nur aus einer einzigen (JavaScript)-Anweisung oder einem Funktionsaufruf.
Ein Beispiel dazu: In der folgenden kurzen HTML-Datei wird beim Laden der Datei (Event-Handler onLoad im <body>-Tag) ein Popup-Fenster geöffnet. Beim Anklicken des Textes (onClick im <p>-Tag) erscheint eine Meldung.
<html>
<head>
<title>JavaScript in HTML-Tags</title>
</head>
<body onLoad="window.open('popup.htm','Popup','height=100,width=300');">
<p onClick="alert('Hello World!');">Hier kommt meine Message - klich mich!</p>
</body>
</html>
Die Datei kann hier getestet werden.
Welche Event-Handler in welchen Tags erlaubt sind, kann in der Dokumentation von HTML 4.0 nachgelesen werden.
JavaScript in eigenen Bereichen
Sind in Event-Handlern komplexere Anweisungen nötig, so werden diese als Funktionen in JavaScript formuliert. Der Event-Handler ruft dann die Funktion auf. Die Definition der Funktion(en) steht in der HTML-Datei in einem eigenen (JavaScript)-Bereich, gekennzeichnet durch einen <script>-Tag. Es gibt keine Vorschriften, wo ein solcher Script-Tag stehen soll, es hat sich jedoch bewährt, ihn in den <head>-Bereich zu stellen. Ein Script-Bereich kann aber auch Anweisungen außerhalb von Funktionsdefinitionen beinhalten, diese werden dann auf jeden Fall ausgeführt:
<html>
<head>
<title>JavaScript in Script-Bereich</title>
<script type="text/javascript">
alert("Hier wird JavaScript ausgeführt");
</script>
</head>
<body>
Dokument-Inhalt...
</body>
</html>
Testen Sie das Dokument hier.
Der Mime-Type für JavaScipt (text/javascript) muss (seit der Version HTML 4.0) angegeben werden.
JavaScript in einer eigenen Datei
JavaScript-Code kann aber auch in einer eigenen Datei (Endung .js) abgespeichert werden, die dann von der HTML-Seite referenziert wird. Dies empfiehlt sich insbesondere dann, wenn JavaScript-Code mehrfach, also in mehreren HTML-Seiten, verwendet werden soll. In der HTML-Seite wird die Verbindung in Form eines <script>-Tags im <head>-Bereich hergestellt:
<html>
<head>
<title>JavaScript in eigener Datei</title>
<script type="text/javascript" src="alert.js"></script>
</head>
<body onLoad="show_alert()">
Dokument-Inhalt...
</body>
</html>
Die beigefügte Datei "alert.js" muss dann den JavaScript-Code beinhalten, also folgenden Inhalt haben:
show_alert()
{
alert("Hier wird JavaScript ausgeführt");
}
