2 Dynamic HTML

2 Dynamic HTML: Was ist das?

Definition nach Heston und Schoening: "DHTML ist ein Oberbegriff für die neuren Technologien, um Web-Seiten ohne Rückgriff auf den Server dynamisch zu machen, und umfasst HTML, Style Sheets und Skriptsprachen (z.B. JavaScript)."
DHTML läuft ab Version 4.0 des Microsoft Internet Explorer und ab Version 4.0 des Netscape Communicator
Beispiele für dynamische Effekte:
- Textformatierung und Textinhalt dynamisch ändern
  - Beispiel: Wechselnde Überschrift
  - Beispiel: Änderung durch Doppelklick
- Schichteneffekte
  - Beispiel: Schicht anzeigen und ausblenden
- Grafikinhalt dynamisch ändern
  - Beispiel: Web-Dias-Show
- Elementposition dynamisch ändern
  - Beispiel: Verschiebares Objekt
- Überblendeffekte
  - Beispiel: Aufblendeffekt
- Laufschrift und Animationen
  - Beispiel: Laufschrift
- Roll- und Pull-Down-Menüs
  - Beispiel: Rollmenü
  - Beispiel: Pull-Down-Menü
- Sogar komplexe, interaktive Spiele und Lernsituationen sind möglich
Beispiele unter http://www.dansteinman.com/dynduo --> DHTML Demos

2.1 Grundlagen des DHTML

keine neue Programmiersprache
drei wesentliche Teile:
- HTML stellt die Grundbefehle (tags) mit Attribute zur Verfügung
- Style Sheets (Formatvorlagen) ordnen den HTML-tags Formateigenschaften zu
- Scriptsprachen können die HTML-tags, ihre Attribute und Formateigenschaften manipulieren und animieren

Vergleich "Textbearbeitung" für Webseiten und herkömmliche Textverarbeitung (z.B. mit MS Word)

Web-Seiten	Textverarbeitungssystem (z.B. Word)
HTML	Textbearbeitung
Cascading Style Sheets	Formatvorlagen (z.B. Briefe oder Faxe)
Skripte (JavaScript oder VBScript)	"Makros" (sind z.B. mit VBA programmierbar)

Nachteil: grob zwei Versionen von DHTML ein von Microsoft Internet Explorer und eine von Netscape Communicator
Grund: unabhängige Entwicklung von Version 3.0 auf 4.0 --> unterschiedliche Objektmodellstruktur
Cross-Browser-Lösung geht in beiden Browsern

2.2 Formatvorlagen (Style Sheets)

unmittelbare Ergänzung zum HTML
Standardeigenschaften von Webseitenelemente ändern
bekannteste Sprache zum Definieren von Style-Sheets ist "Cascading Style Sheets" (CSS1)

lokale oder globale Definition

Inline-Formate: im betreffenden tag drin

<p style="fontsize:14pt">Dies ist ein Absatz</p>

Eingebettete Formate: getrennt zwischen head- und body-Teil

<html>
<head>
<title>Titel der Webseite</title>
</head>
<style>
... Hier kann man spezielle Eigenschaften, z.B. von Überschriften oder Absätze, definieren ...
</style>
<body>
... Inhalt der Webseite ...
</body>
</html>

Beispiel

Verknüpfte Formatdefinitionen: eigene Datei (css-Format), Formatvorlagen für eine ganze Gruppe von Webseiten. Webseite und Formatvorlagen-Datei müssen mit <link>-tag verknüpft werden

<link rel=stylesheet href="mystyle.css" type="text/css">
- Beispiel mit Verknüpfung
- Beispiel ohne Verknüpfung

mehrere Arten von Formatvorlagendefinitionen möglich, dann haben lokale vor globale vortritt --> "Cascading"

2.3 JavaScript

JavaScript ist eine eigene Programmiersprache (vgl. Java, VBA, C)
Werkzeug um Webseiten zu optimieren und dynamisch zu ändern
kleine Anwendungen definieren, die direkt am Client-Computer ausgeführt werden ohne Rückgriff auf den Server
--> Die Programmcodes werden vom Browser decodiert und ausgeführt ohne die Webseite neu zu laden
neue Elemente kommen hinzu: Sonderzeichen, Variablen, Wenn-Dann-Anweisungen, Schleifen, Funktionen, Methoden, Parameter, Objekte, Eigenschaften...

2.3.1 Funktionen

Funktionen = Anweisungsblöcke, definieren eigene, in sich abgeschlossene JavaScript-Prozeduren
Funktionen rufen eigene, in sich abgeschlossene JavaScript-Prozeduren auf (z.B. beim Clicken auf ein Button). Beispielfunktion:

function zeigeText() {
alert ("Hallo!");
}

grundlegender Aufbau einer Webseite mit DHTML:

<html>
<head>
<title>Titel der Webseite</title>
</head>

<style>
... Hier definieren wir unsere Style Sheets ...
</style>

<script>
...Hier kommen unsere JavaScript-Funktionen...
<script>

<body>
...Hier bauen wir unsere Webseite mit HTML-tags auf...
</body>

</html>

Funktionen in separate JavaScript-Datei definierbar (vgl. verknüpfte Formatdefinitionen)

2.3.2 Event-Handler

Funktionen können von Event-Handler aufgerufen werden
Event-Handler (Ereignis-Behandler) wichtiges Bindeglied zwischen HTML und JavaScript
Beispiel:

<img src="grafik.jpg" onClick="zeigeText()">

Insgesamt gibt es über 20 Event-Handler (onMouseOver, onMouseMove, onAbort...)

2.3.3 Objekte

jedes Browserelement stellt ein Objekt dar
Objekte von der gleichen Klasse haben gleiche Eigenschaften und Methoden
JavaScript hat vier Arten von Objekte
- HTML-Objekte: praktisch alle tags (form, button, links, images)
- Browser-Objekte: window, document, history, location, navigator
- Vordefinierte Objekte: Objekttypen ("Kopievorlagen") mit bestimmte Eigenschaften und Methoden (String, Array, Date, Math, Image)
- Selbstdefinierte Objekte
Objekte sind hierarchisch geordnet
Zugriff auf Objekte mit Punktoperator

window.document.form1.text1

Änderung des Textinhaltes

window.document.form1.text1.value="neuer Text"

Oder mit Hilfe einer Methode "changeText"

window.document.form1.text1.changeText("neuer Text")

2.3.4 Fenster und Frames

Webseiten, die aus mehreren Unterfenstern bestehen (Frames)
Frames sind auch in HTML möglich --> keine klare Abgrenzung zwischen HTML und DHTML
Beispiel

Zurück zu Inhaltsverzeichnis