Bearbeitungszeit: bis Dienstag, 1. Juni 2004, 17:30 Uhr
Bewertungsschema
DHTML steht für dynamisches HTML. Darunter versteht man jede Möglichkeit, das Aussehen einer Website nach dem Laden und erstmaligen Darstellen zu verändern. DHTML wird am häufigsten mittels JavaScript realisiert. Die JavaScript-Programme, die wir bisher geschrieben haben, stellen bereits DHTML dar, indem die Ausgabetexte erst nach einem Buttonklick erzeugt oder verändert werden. Server-seitige Skriptsprachen wie PHP sind für DHTML nicht geeignet, da Veränderungen ja in der Regel auf Grund von Benutzereingaben geschehen sollen, die den Server nur erreichen, wenn man die Seite neu lädt. Genau das will man aber mit DHTML nicht: Eine Seite soll sich verändern, nachdem sie geladen wurde.
Bis vor einigen Jahren waren die auf den gängigen Browsern verfügbaren JavaScript-Versionen nur in der Lage, Formular-Elemente und Bilder sinnvoll zu beeinflussen. Das erste kennen Sie bereits, das zweite läuft darauf heraus, Bilder auf Knopfdruck hin zu skalieren, durch andere zu ersetzen usw. Details finden Sie (falls es Sie interessiert) im Abschnitt images von SELFHTML.
Für den Zugriff auf andere Elemente (z.B. normalen Text, Tabellen, Abschnitte usw.) hatte Microsoft das all-Objekt erfunden, während Netscape mit seinem Layer-Modell einen ganz anderen Ansatz verfolgte. Das W3 Consortium, das für die Standardisierung des Word Wide Web zuständig ist, hat sich mit dem Document Object Model für eine Lösung entschieden, die konzeptionell eher dem Microsoft-Ansatz entspricht, mit diesem allerdings ebenfalls nicht 1:1-kompatibel ist. Dieses Modell wird jedoch in den neueren Versionen aller ernst zu nehmenden Browser wie dem Internet Explorer (etwa ab Version 5.5, in der Macintosh-Ausgabe bereits ab Version 5.0, fehlerfrei jedoch erst ab Version 6), Netscape (ab Version 6) und Mozilla (ab Version 0.9) unterstützt und erlaubt nun endlich eine einheitliche Programmierung von DHTML.
Besonders attraktiv sind die Möglichkeiten, die Sichtbarkeit von Elementen zu verändern, Elemente zu verschieben und Eigenschaften von Elementen zu verändern. Damit lassen sich Effekte erzielen, die bisher nur mit Plugins (z.B. Shockwave) möglich waren. Die ehemalige Titelseite unserer Homepage zeigt ein ausgefeiltes Beispiel.
An derartige Dinge müssen wir uns allerdings langsam herantasten. Das Ziel soll vorerst sein, dass Sie ein einzelnes Objekt über den Bildschirm bewegen können.
Dazu müssen Sie zuerst lernen, wie man ein Objekt im Browser-Fenster absolut positioniert. Lesen Sie dazu den Abschnitt Positionierung und Anzeige von Elementen aus SELFHTML. Besonders wichtig sind die Unterabschnitte position, top, left, z-index, display und visibility.
Schreiben Sie eine Webseite mit vielen absolut positionierten Elementen, sowohl Bildern als auch Wörtern.
Im DOM gilt alles, was zwischen einem Start- und einem Endtag
(z.B. <span>...</span>) eingeschachtelt ist, als Element. Auf so ein Element kann man
von JavaScript aus zugreifen, indem man ihm eine ID zuweist. Das geht z.B. so:
<span id="MeinSpan">Text für diesen Bereich</span>
Nach einer solchen Definition können Sie in JavaScript darauf zugreifen, indem Sie schreiben
meinSpan = document.getElementByID("MeinSpan");
Lesen Sie dazu die Erklärung der Funktion
getElementById() und studieren Sie das Beispiel.
Um im obigen Beispiel die CSS-Eigenschaften des Objekts zu verändern, müssen Sie die Werte der Variablen
des Unterobjekts style von meinSpan ändern, die Sie mit
meinSpan.style.Eigenschaft ansprechen. Um z.B. den Abstand des Objekts vom linken Rand zu verändern,
schreiben Sie
meinSpan.style.left = neuerWert;
Zu beachten ist in diesem Fall, dass neuerWert eine Grösse mit einer Einheit sein muss, also z.B.
meinSpan.style.left = "20px";
Welche Styles Sie an einem Objekt ändern können, erfahren Sie hier.
Ergänzen Sie Ihr Dokument von Aufgabe 1 um JavaScript-Code, der bewirkt, dass sich die Objekte verändern, wenn
<img>-Element eine ID geben und dann dessen .src-Variable verändern), einen Text
verschwinden und wieder auftauchen lassen, dessen Farbe, Hintergrundfarbe, Zeichensatz, Stil oder Ausrichtung ändern,
usw. Es geht nicht darum, dass die Sache am Schluss viel Sinn macht, sondern darum, dass Sie die Techniken üben.
Je kreativer Sie sind, desto besser die Bewertung der Aufgabe!
Im zweiten Semester erstellen Sie in kleinen Gruppen selbstständig ein Webprojekt für eine Firma, eine Person oder eine Gruppe von Personen in- oder ausserhalb der Schule. Das Projekt muss folgende Bedingungen erfüllen:
Verfassen Sie eine Projektskizze, speichern Sie auf der Webseite eines Projektmitglieds ab und fügen auf Ihrer Webseite einen Link darauf hinzu. Die Projektskizze muss darüber Auskunft geben