DHTML

Vorwort
DHTML erlaubt es Aktionen und Interaktionen in ein bisher statisches HTML-Dokument zu bringen. Benutzeraktionen könne direkt Ereignisse auslösen, ohne das die Seite neu geladen werden muss. Mit den Microsoft-Filtern stehen dem Gestalter weitere mächtige Effekte zur Verfügung (Bildübergänge, Texteffekte). In diesem Tutorial werden allerdings nur die Grundzüge der DHTML-Implementierung angerissen. Ausführlichere Informationen finden Sie unter: http://de.selfhtml.org/dhtml/index.htm.

 

Begriffserklärungen
Der HTML-Standard ist nichts endgültiges, sondern er wird ständig erweitert. Durch DOM (Document Object Model) lassen sich alle Elemente eines Dokumentes als Objekt ansprechen. Jedes Objekt besitzt dabei veränderbare Eigenschaften. Um die Dokumente flexibler zu machen wurde DHTML (Dynamic Hyper Text Markup Language) entwickelt. Dieser Oberbegriff umfasst HTML, CSS und Javascript. Cascading Style Sheets (CSS) erlaubt dem Designer von Dokumenten präziseres Arbeiten.

Was sind Cascading Style Sheets?
CSS lassen sich mit Formatvorlagen übersetzen. Das heißt es ist eine Gruppe von Vorlagen die bestimmen wie einige Objekte auf einer Webseite aussehen. Also deren Farbe, Schrift, Position, usw. Wie bei Formatvorlagen üblich ändert dann eine Änderung der Formatvorlage alle betroffenen Objekte des Dokumentes (z.B. die Überschriften) automatisch. CSS können auch als eigene Datei abgespeichert und in mehrere Dokumente eingebunden werden. Grundsätzlich können alle HTML-Tags (Befehle) mit CSS verwendet werden.

 

Javascript und DHTML

Hinweis:Grundsätzlich muss mittles document.getElementById("ID") auf ein Objekt zugegriffen werden.

Durch DHTML sind alle HTML-Elemente zu Objekten geworden. Sie besitzen daher auch alle Eigenschaften wie z.B. innerHTML, die den angezeigten Wert eines Objektes bestimmt. Somit lassen sich jetzt alle Elemente bewegen und programmieren. Aufwendige Animationen und Interkationen sind dadurch möglich geworden.

Start
<html><head> </head><body>
<p onMouseOver="this.innerHTML='Die Maus ist über dem Text!'" onMouseOut="this.innerHTML='Die Maus ist neben dem Text!'">Anfangstext</p>
</body> </html>
this.innerHTML weist dem Wert eines HTML-Objektes einen neuen zu.

 

this bezieht sich auf das Objekt in dem this aufgerufen wurde (Selbstreferenzierung).

Zugriff auf HTML-Tags

Grundsätzlich muss mittles document.getElementById("ID") auf ein Objekt zugegriffen werden. Daher empfiehlt es sich diese Schreibweise überall einzuhalten.

strings in strings

Sollen strings innerhalb von strings geschrieben werden, muß der innere string in ' statt in " gefaßt sein ( " this.innerHTML = ' Die Maus ist neben dem Text! ' " ).