, <span> oder

erzeugt wurden.

177

9 Drei Einführungen in DHTML Layer in JavaScript Das Objekt Layer

In JavaScript gibt es bei Netscape 4 den speziellen Objekt-Typ Layer, durch den Layer-Elemente repräsentiert werden. Layer-Objekte ähneln window-Objekten (vgl. Kapitel 7), insofern jeder Layer eine eigene document-Eigenschaft besitzt. Andererseits sind Layer selbst wiederum Eigenschaften eines documentObjekts, nämlich der Repräsentation des Dokuments, in dem sie definiert wurden. Schauen wir uns noch einmal ein Beispiel an: zwei Dokumente <style> #dynamo { position:absolute; left:20px; top:100px } mein Fahrrad:

mein Dynamo:

In der Objekt-Hierarchie ist das gesamte Dokument als window.document vertreten. Es enthält einen Layer, in Form eines absolut positionierten div-Elements. Genau wie Bilder und Formulare werden die zu einem Dokument gehörenden Layer in einem Array (genauer: einer Collection) aufgelistet. Wie Sie in Kapitel 3 gelernt haben, erhalten Sie mit document.images[0] eine Referenz auf das erste Bild einer Seite. Entsprechend verweist document.layers[0]

auf den ersten Layer. Und weil Collection-Elemente im Gegensatz zu den Elementen eines gewöhnlichen Arrays auch über ihren Namen (bzw. ihre ID) herausgegriffen werden können, erreichen Sie den Layer mit der ID dynamo auch über diese Ausdrücke: document.layers["dynamo"] document.dynamo

Layer sind also, genau wie Image- oder Formular-Objekte, Eigenschaften von document.

178

Grundlagen Nun besitzt aber wie gesagt jeder Layer sein eigenes document-Objekt. Unsere Beispielseite besteht deshalb aus zwei, ineinander verschachtelten Dokumenten:

Die documentHierarchie

window.document

und window.document.dynamo.document

Das im Layer liegende Image-Objekt »dynamoBild« finden wir folglich unter window.document.dynamo.document.dynamoBild

Elemente, die in einem Layer stehen, gehören zum document-Objekt des Layers, nicht zum übergeordneten Gesamtdokument window.document. Sollten Sie versuchen, in unserem Beispiel mit document.images[1] oder document.dynamoBild auf das Dynamo-Bild zuzugreifen, erhalten Sie deshalb von Netscape 4 nur den Wert undefined. Layer-Eigenschaften Layer-Objekte besitzen eine Reihe von Eigenschaften, die Sie jederzeit lesen und ändern können. In Tabelle 9.3 sind die wichtigsten aufgelistet. Eigenschaft

Typ

Beschreibung

left

Number

die horizontale Position (in Pixeln) des Layers

top

Number

die vertikale Position des Layers

clip.top

Number

die Oberkante des sichtbaren Layer-Bereichs relativ zur Layer-Oberkante (in Pixeln). Ein Wert größer 0 schneidet also den Layer-Inhalt von oben ab.

clip.bottom

Number

die Unterkante des sichtbaren Layer-Bereichs relativ zur Layer-Oberkante

clip.left

Number

die linke Kante des sichtbaren Layer-Bereichs relativ zur linken Layer-Kante (in Pixeln). Ein Wert größer 0 schneidet also den Layer-Inhalt von links ab.

clip.right

Number

die rechte Kante des sichtbaren Layer-Bereichs relativ zur linken Layer-Kante.

zIndex

Number

die »Höhe« der Layer-Ebene in der Stapelreihenfolge. Layer mit hohem zIndex-Wert verdecken Layer mit niedrigerem Wert.

visibility

String

die Sichtbarkeit des Layers. show steht für sichtbar, hide für unsichtbar, bei inherit erbt der Layer seine Sichtbarkeit vom übergeordneten Layer. Anstatt show und hide können Sie auch visible und hidden verwenden.

src

String

URL-Angabe für externe Layer-Inhalte

Tab. 9.3: Einige Eigenschaften des Layer-Objekts

179

9 Drei Einführungen in DHTML Layer-Eigenschaften ändern

DHTML besteht beim Netscape Navigator im Wesentlichen darin, diese Werte so zu ändern, dass dadurch interessante Effekte entstehen. Zum Beispiel können wir eine Animation erzeugen, indem wir regelmäßig die left- und topKoordinaten eines Layers ändern: eine einfache Animation <style> #fahrrad { position:absolute; left:-100px; top:100px } <script> function bewegung(){ document.fahrrad.left+=5; setTimeout("bewegung()",50); } mein Fahrrad:

CSS-Attribute entsprechen LayerEigenschaften

Dieses Beispiel finden Sie auf der CD als beispiel0901.html. Wie Sie vermutlich bemerkt haben, entsprechen viele der Layer-Eigenschaften bestimmten CSSAttributen. Tatsächlich werden diese Attribute von Netscape 4 nur in Verbindung mit Layern unterstützt. Das heißt, wenn Sie einen Bereich Ihrer Seite unsichtbar machen wollen, müssen Sie ihn in einen Layer stecken, zum Beispiel in ein positioniertes div-Element. Diesem Element verpassen Sie dann die Style-Angabe »visibility:hide« (oder »visibility:hidden«). Mit document.layerID.visibility = "show"

können Sie den Bereich später auf sichtbar schalten. Noch mehr dynamische Möglichkeiten ergeben sich aus der Tatsache, dass die document-Objekte von Layern alle Eigenschaften und Methoden von window.document besitzen. Sie können deshalb einen Layer mit document.layerID.document.write("einString"); document.layerID.document.close();

neu beschreiben. Damit können Sie den Inhalt eines Seitenbereichs nach dem Laden noch verändern, etwa in Reaktion auf eine Benutzer-Eingabe.

180

Grundlagen

9.1.3

DHTML mit dem Internet Explorer

Bei Microsoft entschloss man sich, dem DHTML-Modell von Netscape nicht zu folgen. Der Internet Explorer kennt weder den -Tag noch das LayerObjekt und bietet auch keinen vergleichbaren Ersatz. Stattdessen sind die CSSEigenschaften aller HTML-Elemente über JavaScript zugänglich und veränderbar. Das verschafft dem Internet Explorer Fähigkeiten, die weit über die von Netscape 4 hinaus gehen.

CSS-Eigenschaften aller HTML-Elemente sind über JavaScript zugänglich

Ein Beispiel:

ui, ein Rollover-Effekt

Dieser Absatz wechselt beim Überfahren mit der Maus Farbe und Schriftart. (Und dabei ist kein Link im Spiel!) Die Anweisung zur Änderung der Farbe ist: this.style.color = 'red';

Der Ausdruck this bezieht sich, wenn er in einem Event-Handler steht, auf das Element, für das der Handler definiert ist, also hier das p-Element. Wie Sie sehen, erreicht man die CSS-Eigenschaften eines Elements in JavaScript als Eigenschaften des jedem Element zugeordneten Objekts style. Wenn Sie genau hinsehen, wird Ihnen auffallen, dass die Style-Eigenschaften in JavaScript manchmal etwas anders geschrieben werden als in CSS. So wird aus fontfamily fontFamily. Ebenso fanden wir bei Netscape die Eigenschaft zIndex, die dem CSS-Attribut z-index entspricht. Die Regel ist einfach: Überall, wo ein MinusZeichen ist, wird dieses weggelassen und der nachfolgende Buchstabe groß geschrieben. Der Grund dafür ist, dass das Minus-Zeichen in JavaScript eben für Minus steht. Würden Sie also einElement.style.font-family schreiben, dann würde der JavaScript-Interpreter versuchen, den Wert des Ausdrucks family von dem des Ausdrucks einElement.style.font zu subtrahieren, wobei vermutlich nichts Sinnvolles herauskäme. Die document.all-Collection In der Praxis wollen wir oft die CSS-Eigenschaften eines Elements von außerhalb des Elements verändern, so dass wir nicht mit this darauf verweisen können. Wie dann? Die document.layers-Collection, in der bei Netscape 4 LayerElemente aufgelistet sind, existiert natürlich beim Internet Explorer nicht. Aber

document.all

181

9 Drei Einführungen in DHTML es gibt eine andere Collection, die uns weiterhilft. Erinnern Sie sich: Im IE sind nicht nur einige besondere HTML-Elemente dynamisch veränderbar, sondern wirklich alle. Die entsprechende Collection heißt folgerichtig document.all. Über document.all[27] erhalten Sie zum Beispiel das 28. HTML-Element auf der Seite (das erste, mit dem Index 0, ist das html-Element, das zweite in der Regel das head-Element und so weiter). Die Referenzierung über Index-Nummern ist allerdings eher unhandlich: Immer wenn Sie ein neues Element in Ihre Seite einfügen, müssen alle Nummern angepasst werden. Geben Sie deshalb besser den Elementen, die Sie ansprechen wollen, ein ID-Attribut, dann können Sie mit document.all["elementID"]

darauf zugreifen. Wenn Sie vermuten, dass das wie bei Image- und (bei Netscape) Layer-Objekten auch mit document.elementID geht, dann haben Sie sich getäuscht. Die HTML-Elemente sind nicht als direkte Eigenschaften von document verfügbar. Es geht aber trotzdem kürzer, nämlich über window.elementID oder einfach elementID. Hier noch einmal ein Rollover-Effekt, diesmal ohne »this«:

ich bin sehr dynamisch

Man kann, wie dieses Beispiel zeigt, auch Style-Eigenschaften ändern, die zuvor gar nicht explizit definiert wurden. Beim Lesen ist das allerdings anders: Nur diejenigen style-Eigenschaften lassen sich auslesen, die inline im HTMLTag angegeben oder dem Element nachträglich mit JavaScript zugewiesen wurden. Das sollten Sie vor allem beachten, wenn Sie Style Sheets in eigenen <style>Abschnitten definieren. Netscape 4 reflektiert die dort definierten Werte in den Layer-Eigenschaften, beim Internet Explorer aber werden Sie sie in den styleEigenschaften der betroffenen Elemente nicht finden. (Seit Version 5 des Explorers gibt es als Ersatz die Eigenschaft currentStyle, die stets den aktuellen Wert enthält. Das funktioniert allerdings nur in der Windows-Version.) Element-Inhalte ändern Es gibt noch andere Wege, Teile einer Seite mit Internet Explorer dynamisch zu verändern. Wenn Sie zum Beispiel eine Überschrift definiert haben:

182

Grundlagen

Wau

dann können Sie diese nicht nur wann immer Sie wollen verstecken, vergrößern, verkleinern und verfärben, Sie können sogar ihren Inhalt austauschen. Dazu gibt es die Eigenschaften innerText und innerHTML, die sowohl gelesen als auch geschrieben werden dürfen: document.all["wau"].innerText = "Miau"

verwandelt die Überschrift »Wau« in »Miau«. Die Änderung ist sofort im Dokument sichtbar. Der Unterschied zwischen innerText und innerHTML kommt zum Tragen, wenn sich innerhalb eines Elements HTML-Tags befinden. Beim body-Element ist das zum Beispiel meistens so. Wenn Sie document.body.innerText auslesen, erhalten Sie den gesamten Inhalt des body, aber nicht die darin vorkommenden HTML-Tags. document.body.innerHTML dagegen liefert Ihnen den Inhalt mitsamt den Tags. Das folgende Beispiel erzeugt ein Dokument, dessen Inhalt Buchstabe für Buchstabe aufgebaut wird, ein bisschen so als würde man es gerade mit der Schreibmaschine schreiben. <script> var text = "Immerhin besitzt doch ein Mensch die Freiheit, " + "seine Hand auf den Kopf zu legen. (G.W. Leibniz, " + "Neue Abhandlung über den menschlichen Verstand, " + "Leipzig: Meiner 1915, S. 108)"; var zaehler = 0; function schreib(){ document.body.innerHTML+= text.charAt(zaehler); zaehler++; if (zaehler

Dieses Beispiel gibt es wieder auf CD (beispiel0902.html). body ist übrigens eine vordefinierte Eigenschaft von document und steht, wie der Name schon sagt, für das body-Element der Seite. Wie Sie bereits in Kapitel 7 erfuhren, erhält man darüber einige nützliche Werte. Beispielsweise liefert document.body.clientWidth die Breite des Dokuments – also ungefähr die innere horizontale Ausdehnung des Browserfensters.

183

9 Drei Einführungen in DHTML

9.1.4 Das DOM

DHTML mit dem W3C

Die sehr unterschiedlichen Ansätze von Microsoft und Netscape machen es schwer, Seiten zu erstellen, die auf beiden Browsern gleichermaßen funktionieren. Die DOM-Spezifikation des World Wide Web Consortiums (W3C) soll dafür sorgen, dass das in Zukunft besser wird. »DOM« bedeutet »Document Object Model«. Das Objektmodell bestimmt, wie die Elemente eines Dokuments (Links, Bilder, Überschriften usw.) in JavaScript als Objekte repräsentiert werden (vgl. Kapitel 3). So gesehen haben Netscape und Microsoft schon lange ihr eigenes DOM entwickelt. Wenn aber von dem DOM die Rede ist, dann ist das W3C-DOM gemeint: Es ist die offizielle, einheitliche Richtlinie für das Objektmodell zukünftiger Browser. Microsofts Internet Explorer unterstützt wesentliche DOM-Konzepte seit Version 5, und die aus dem Mozilla-Projekt hervorgegangene Version 6 von Netscape (eine Version 5 gab es nie) erfüllt die Richtlinien der ersten DOM-Spezifikation (Level 1) sogar schon so gut wie vollständig. Betrachten Sie Netscape 6 nicht als Nachfolger von Version 4, sondern als eigenständige Neuentwicklung. Netscape 6 ist nicht kompatibel zum Objektmodell früherer Netscape-Versionen, insbesondere kennt er kein Layer-Objekt! Alle in diesem Buch besprochenen W3C-Techniken sollten sowohl mit Internet Explorer 5 als auch mit Netscape 6 funktionieren. Netscape 6 befindet sich derzeit (Sommer 2000) noch in einer frühen BetaPhase. Es ist deshalb nicht völlig ausgeschlossen, dass Informationen, die Sie hier finden, für die Endversion gar nicht zutreffen. Mit großen Änderungen ist allerdings kaum zu rechnen. Dokumente aus der Sicht des DOM

getElementById()

Das Objektmodell des W3C stellt, noch konsequenter als das von Microsoft, alle Elemente einer Webseite – bis hin zu Kommentaren – als JavaScriptObjekte zur Verfügung. Es gibt aber nicht, wie beim Internet Explorer, eine allCollection, in der alle diese Objekte aufgelistet sind. Stattdessen besitzt das document-Objekt die Methode getElementById(), der Sie die ID eines Elements übergeben und dafür eine Referenz auf das entsprechende Objekt zurück bekommen. Befindet sich beispielsweise irgendwo im HTML-Code die Zeile Grundgedanke

dann verweist nach der Ausführung der JavaScript-Anweisung var grund = document.getElementById("Grundgedanke")

die Variable grund auf dieses HTML-Element.

184

Grundlagen Beim W3C wird auf den Unterschied zwischen Elementen, Attributen und so genannten TextNodes großen Wert gelegt. Ein Element umfasst gewöhnlich einen Start-Tag (zum Beispiel ), einen End-Tag () und alles, was dazwischen steht. Zu den Ausnahmen gehören img- und br-Elemente: Sie besitzen keinen End-Tag und keinen Inhalt. Im Start-Tag sind häufig Attribute definiert, z.B. id="Grundgedanke" oder src="bild.jpg". TextNodes schließlich sind zwischen den HTML-Tags stehende Text-Bereiche. Das Wort »Grundgedanke« im vorigen Beispiel ist ein TextNode.

W3C-Sprech

Bemühen Sie sich um korrektes HTML, wenn Sie mit DOM-Methoden arbeiten. Ein mit

begonnener Absatz muss zum Beispiel stets mit

wieder geschlossen werden. Intern werden HTML-Dokumente im DOM als Baum abgebildet. Sehen wir uns zur Veranschaulichung ein vollständiges Dokument an: Hier steht was.

Und hier kommt der Grundgedanke

Stellen Sie sich das Objekt document am besten als das Stück Papier vor, auf dem der Quelltext geschrieben ist. Dieses Papier kann in ein Fenster (ein window-Objekt) gehängt (geladen) werden, woraufhin man im Fenster sehen kann, was auf dem Papier definiert ist. Das document-Objekt ist die Wurzel des Objektbaums, auf ihm ruht die ganze HTML-Struktur. Direkt über document liegt in unserem Beispiel das html-Element (es beginnt mit , endet mit und umfasst den gesamten Quelltext). Von da an verzweigt sich der Baum in zwei Stämme: einer fußt auf dem head-Element, der andere auf body. Man bezeichnet solche Unterglieder eines Elements auch als dessen »Kinder« (ChildNodes). body und head sind also im Beispieldokument die ChildNodes von html. head besitzt selbst wiederum ein Kind, nämlich title. Das body-Element hat bei uns zwei Kinder: ein p-Element und den TextNode »Hier steht was«. Auch TextNodes sind im DOM als JavaScript-Objekte vertreten. Der Oberbegriff für Elemente, Attribute, TextNo-

Der DOM-Baum

185

9 Drei Einführungen in DHTML des und alle anderen Objekttypen im DOM ist Node (»Knoten«). Abbildung 9.1 zeigt die Nodes des Beispiel-Dokuments so, wie sie im DOM repräsentiert sind. Abbildung 9.1: Der DOM-Baum des Beispieldokuments

Klettern auf dem DOM-Baum Mit Hilfe von JavaScript können wir uns im DOM-Baum einer Webseite von unten nach oben, von oben nach unten und seitwärts in alle Richtungen fortbewegen. Dazu besitzt jeder Node die in Tabelle 9.4 angegebenen Eigenschaften. Tab. 9.4: Einige Eigenschaften von DOMNodes

Eigenschaft

Beschreibung

firstChild

der erste ChildNode in der Reihenfolge, in der sie im Quelltext definiert sind

lastChild

der letzte ChildNode vor dem Schluss-Tag des Elements

childNodes

ein Array mit allen ChildNodes des aktuellen Elements

parentNode

das Parent-Element des Nodes

previousSibling

der vorhergehende Node auf derselben DOM-Ebene (»sibling« heißt »Geschwister«.)

nextSibling

der nächste Node auf derselben DOM-Ebene

Node-Eigenschaften

Mit document.body.firstChild

erhalten wir also im obigen Beispieldokument den TextNode »Hier steht was.«

186

Grundlagen document.body.firstChild.nextSibling

liefert uns das p-Element, über document.body.firstChild.nextSibling.childNodes[1]

erreichen wir dessen zweites Kind, also das Element mit der ID »Grundgedanke«. Wir hätten auch mit document.getElementById("Grundgedanke")

direkt darauf zugreifen können. Der Ausdruck document.getElementById("Grundgedanke").parentNode

bringt uns wieder zurück zum p-Element. Lesen und schreiben im DOM-Baum Die ganze Kletterei wäre nutzlos, wenn wir mit den Nodes, die wir so erreichen, nichts anfangen könnten. Das DOM erlaubt uns, Node-Inhalte zu lesen, zu überschreiben, Nodes zu löschen, ihre Attribute zu ändern und neue Nodes ins Dokument einzufügen. Die Eigenschaft nodeValue liefert den Inhalt eines TextNodes. Hinter document.body.firstChild.nodeValue

verbirgt sich also in unserem Beispiel der String »Hier steht was.« Sie können den Wert einfach überschreiben und dadurch den Text ändern: document.body.firstChild.nodeValue = "Jetzt steht hier was anderes."

Beachten Sie, dass der nodeValue von Elementen stets null ist. Eine Eigenschaft wie innerText oder innerHTML, die den Inhalt eines Elements wiederspiegelt, stellt das DOM derzeit nicht zur Verfügung. Sie können jederzeit einen neuen Node erzeugen. Dazu gibt es die Methoden document.createElement("TagName")

und document.createTextNode("Inhalt des Nodes")

Die Anweisung var neuerAbsatz = document.createElement("P")

erzeugt zum Beispiel ein neues p-Element, einen Absatz also. Das Element ist anfangs noch leer und besitzt keine Attribute. Es hat auch noch keinen Platz im DOM-Baum. Um es ins Dokument einzubauen, müssen wir auf den Baum klettern und es dort befestigen. Das machen wir mit der Methode

187

9 Drei Einführungen in DHTML Element.appendChild(einNode)

die den Node einNode als letztes Kind an das Element Element anhängt. document.body.appendChild(neuerAbsatz)

würde also den vorhin erzeugten Absatz am Ende des body-Elements einfügen. Wenn Sie einen Node nicht als letztes Kind seines ParentNodes, sondern an einer anderen Stelle einfügen wollen, benutzen Sie statt appendChild() die Methode Element.insertBefore(einNode, nächsterNode)

wobei nächsterNode auf den Node verweist, vor dem der neue Node in den Baum eingehängt werden soll. Jetzt ist unser Absatz also Bestandteil des Dokuments, aber immer noch leer. Um ihn zu füllen, müssen wir einen TextNode erzeugen und am neuen Absatz befestigen: var inhalt = document.createTextNode("ein neuer Absatz"); neuerAbsatz.appendChild(inhalt);

Wir können dem neuen Element auch Attribute verpassen: neuerAbsatz.id = "derNeueAbsatz"; neuerAbsatz.align = "right"; neuerAbsatz.style.fontWeight = "bold";

Die Auswirkung ist dieselbe, als hätten wir den Absatz in HTML so definiert:

CSS-Eigenschaften im DOM

Diese Attribute kann man natürlich nicht nur schreiben, sondern auch lesen. Sie werden vor allem das style-Attribut gebrauchen, denn darüber stehen im DOM genau wie beim Internet Explorer die ganzen CSS-Eigenschaften des Elements zur Verfügung. Dabei gelten dieselben Regeln wie beim Internet Explorer: Lesen kann man über die style-Eigenschaft nur die CSS-Angaben, die im Start-Tag des Elements definiert oder mit JavaScript gesetzt wurden. Wenn die Werte Maßeinheiten besitzen, dann werden diese beim Lesen mit geliefert. Es ist deshalb weder beim Internet Explorer noch im DOM möglich, ein Element mit der folgenden Anweisung um 5 Pixel nach unten zu versetzen: document.getElementById("etwas").style.top+= 5;

Der Wert von style.top ist ein String, beispielsweise »200px«. Das Ergebnis der obigen Zuweisung wäre also so etwas wie »200px5«, und das ist keine erlaubte Positionsangabe. Auch die weit verbreitete Angabe von Zahlenwerten für Positions- oder Schriftgrößen ist streng genommen laut DOM nicht korrekt: Die Maßeinheit sollte nicht weggelassen werden.

188

Übungen Nodes können übrigens auch jederzeit aus dem DOM-Baum entfernt werden. Um unseren vorhin eingehängten Absatz wieder zu löschen, brauchen Sie nur diese Anweisung auszuführen: document.body.removeChild(neuerAbsatz)

9.2

Übungen

Machen Sie sich keine Sorgen, wenn Sie im Grundlagen-Teil das eine oder andere nicht gleich verstanden haben. Sie werden bei den folgenden Übungen sicher noch einige Male zurückblättern müssen. Wenn Sie eine ausführliche Referenz zur Hand haben, kann es auch nicht schaden, hin und wieder einen Blick in diese zu werfen. Die Übungen sind wie der Grundlagenteil in verschiedene Abschnitte unterteilt. Wir fangen an mit ein paar Aufgaben zu Style Sheets, die Sie überspringen können, wenn Sie damit schon Erfahrung haben. Es folgen Übungen zum DHTML-Modell von Netscape 4, dann zu dem des Internet Explorers und schließlich zum DOM des W3C. Natürlich werden Sie in der Praxis Seiten entwerfen wollen, die auf möglichst allen Browsern funktionieren. Dem CrossBrowser-DHTML ist deshalb das gesamte nächste Kapitel gewidmet. Vorher sollten Sie sich aber ein gewisses Verständnis der unterschiedlichen Ansätze von Netscape, Microsoft und dem W3C angeeignet haben.

9.2.1

Übungen mit Style Sheets

leicht

1. Übung

Nennen Sie drei Möglichkeiten, Style Sheets in eine HTML-Seite einzubinden.

2. Übung

Mit welcher Style-Angabe werden alle p-Elemente einer Seite in Schriftgröße 15pt formatiert? Und was tun Sie, wenn Sie einen einzelnen Absatz von dieser Regel ausnehmen wollen? mittel

3. Übung

Welche CSS-Angabe müsste eigentlich der gesamten Webseite eine Breite von 500 Pixel, die Schriftart Arial und einen Abstand von 20 Pixel zum linken Fensterrand geben?

189

9 Drei Einführungen in DHTML mittel

4. Übung

Erstellen Sie eine Schrift mit einem Schatten.

9.2.2

Übungen zum DHTML-Modell von Netscape 4

leicht

5. Übung

Hier ist eine HTML-Seite: Nichts Auf dieser Seite gibt es nichts zu sehen.

Warum ist tatsächlich nichts zu sehen, wenn man diese Seite mit Netscape 4 lädt? leicht

6. Übung

Mit welcher JavaScript-Anweisung könnte man den Layer von Übung 5 in den sichtbaren Fensterbereich verschieben? leicht

7. Übung

Geben Sie neun verschiedene Ausdrücke an, die alle auf das Bild mit dem Namen etwas im Dokument von Übung 5 verweisen. mittel

8. Übung

Auf dieser Seite befindet sich ein Link, durch den man einen Textabsatz einund ausblenden kann: <script> var zustand="sichtbar"; function einaus(){ if (zustand == "sichtbar"){ document.vielText.visibility = "hidden"; zustand = "unsichtbar"; } else {

190

Übungen document.vielText.visibility = "visible"; zustand = "sichtbar"; } } Hier steht ganz viel Text Text ein-/ausblenden

Schreiben Sie die Seite so um, dass darin kein Layer-Tag mehr vorkommt. mittel

9. Übung

Hier ein Ausschnitt aus einem anderen Dokument:

An welcher Position, relativ zum gesamten Dokument, liegt die linke obere Ecke des Layers BraunglasContainer? mittel

10. Übung

Mit welcher JavaScript-Anweisung kann das Bild »bier.jpg« in Übung 9 durch »milch.jpg« ersetzt werden? mittel

11. Übung

Als Nächstes ein Aquarium. Erstellen Sie mit einem Grafikprogramm ein paar Bilder von Blättern und Algen und positionieren Sie sie mit Style Sheets so im Fenster, dass ein hübsches Aquarium entsteht. Wählen Sie auch eine passende Hintergrundfarbe für den body. Es fehlen noch die Fische. Auch hier brauchen Sie geeignete Bilder, und zwar sollten Sie von jedem Fisch zwei haben: eins auf dem der Fisch nach rechts und

191

9 Drei Einführungen in DHTML eins auf dem er nach links schwimmt. Besonders elegant wird es, wenn Sie animierte Grafiken verwenden, dann können Sie sogar die Flossen schlagen lassen. Lassen Sie nun Ihre Fische langsam hin und her durchs Wasser ziehen. schwer

12. Übung

Layer sind durchsichtig: Überall dort, wo das Dokument eines Layers keine (oder durchsichtige) Elemente enthält, ist das unter dem Layer liegende Dokument zu sehen. Um den Layer undurchsichtig zu machen, müssen Sie ihm eine Hintergrundfarbe oder ein Hintergrundbild geben. Die CSS-Angaben dafür sind: background-image:url(dasHintergrundbild.jpg) layer-background-image:url(dasHintergrundbild.jpg) background-color:#6666ff; layer-background-color:#6666ff;

Sie sollten zusätzlich zum W3C-konformen background-color-Attribut stets auch layer-background-color angeben, denn mit background-color alleine werden nur die Layer-Bereiche farbig hinterlegt, auf denen Text oder HTML-Elemente stehen. Dasselbe gilt für background-image und layer-background-image. (Der Effekt ist nicht ganz einfach zu beschreiben – wenn Sie es ausprobieren, werden Sie sofort verstehen, was gemeint ist.) Schreiben Sie nun eine Seite mit fünf farbigen, leicht versetzt übereinander gestapelten Quadraten. Mit Hilfe von Formular-Buttons soll man die Stapelreihenfolge der Quadrate verändern können: Ein Button stellt die dunklen nach oben, einer die hellen, ein dritter sortiert sie nach dem Zufallsprinzip. Um einen Layer auf quadratische Form zu strecken, benutzen Sie das CSSAttribut clip:

ein Quadrat mit Größ e 200x200 Pixel

Eine Zufallszahl zwischen 0 und 1 liefert die Anweisung Math.random(). mittel

13. Übung

Schicke Effekte lassen sich mit halbtransparenten Hintergrundbildern erzielen. Gemeint sind kleine Bilder im gif-Format, die gleichmäßig verteilte transparente Anteile haben (vgl. Abbildung 9.2).

192

Übungen Abbildung 9.2: Ein »halbtransparentes« Pixelmuster (vergrößert)

Für die nächste Aufgabe geben Sie einer Seite im body-Tag ein Hintergrundbild. Dann erstellen Sie einen Layer mit halbtransparentem Hintergrund, der einige Links enthält (der Layer natürlich, nicht der Hintergrund). Dieses Navigationsmenü soll anfangs aber nicht zu sehen sein. Erst wenn man auf einen Button klickt, erscheint es – und zwar indem es sich von oben nach unten ausfährt. Dazu ändern Sie einfach nach und nach den clip.bottom -Wert des Layers. Benutzen Sie folgende Style-Definition: <style type="text/css"> #menu { position:absolute; left:10; top:30; clip:rect(0px 200px 0px 0px); width:200px; background-image:url(semitrans.gif); padding:10px } a { font-weight:bold; color:black; text-decoration:none }

Das Bild »semitrans.gif« müssen Sie natürlich erst einmal erstellen (oder von der beiliegenden CD kopieren). Der nicht-transparente Anteil sollte dabei weiß sein. mittel

14. Übung

Eine der Stärken des Objektmodells von Netscape liegt in der einfachen Einbeziehung externer Inhalte in ein Dokument: Im Grunde kann jeder Layer auf einer Seite von einem anderen URL stammen. Wäre dieses Konzept weiterentwickelt worden, würden wir Frames kaum noch benötigen. Erweitern Sie die Lösung von Übung 13 so, dass bei der Auswahl eines Menüpunkts die dazugehörige Datei auf derselben Seite angezeigt wird. Auch hier soll der Hintergrund halb durchsichtig sein.

193

9 Drei Einführungen in DHTML

9.2.3

Übungen zum DHTML-Modell von Microsoft

leicht

15. Übung

Wie kann man im Internet Explorer mit JavaScript auf dieses Element verweisen?

Das Meer ist voll Wasser – das soll einer verstehen.

Und wie jetzt?

Das Meer ist voll Wasser – das soll einer verstehen.

leicht

16. Übung

Sehen Sie sich dieses Stück Quelltext an:

Das Meer ist voll Wasser – das soll einer verstehen.

abwesend

Der Wert 50 liegt genau in der Mitte zwischen unsichtbar (0) und undurchsichtig (100). Wie alle style-Angaben lässt sich auch die »Filterstärke« mit JavaScript verändern. Schreiben Sie eine Seite, deren gesamter Inhalt nach dem Laden langsam eingefadet wird. schwer

22. Übung

In Übung 14 sahen Sie, wie man bei Netscape 4 mit Hilfe von Layern eine externe HTML-Seite nachträglich in ein bestehendes Dokument einfügen kann. Der Internet Explorer kennt kein Layer-Objekt. Wie könnte man den gewünschten Effekt trotzdem erreichen?

195

9 Drei Einführungen in DHTML

9.2.4

Übungen zum W3C DOM

leicht

23. Übung

Zeichnen Sie den DOM-Baum des folgenden Dokuments. Wo

Wo kämen wir hin...

...wenn jeder sagte: Wo kämen wir hin?,
und keiner ginge, um zu sehen, wohin wir kämen, wenn wir gingen?

Vergessen Sie nicht, dass auch TextNodes im DOM eigene Objekte sind! leicht

24. Übung

Im Dokument der vorherigen Übung: Worauf verweisen diese beiden Ausdrücke? document.body.childNodes[0].firstChild document.childNodes[0].lastChild.firstChild. childNodes[0] leicht

25. Übung

Und worauf zeigt dieses Ungetüm? document.body.previousSibling.lastChild.parentNode. parentNode.childNodes[1].childNodes[1].previousSibling. lastChild

Gehen Sie Schritt für Schritt der Referenzierung durch den DOM-Baum nach. leicht

26. Übung

Wieso löschen diese Anweisungen nicht den Inhalt der Überschrift? var el = document.body.childNodes[0].firstChild; document.body.removeChild(el); mittel

27. Übung

Schreiben Sie eine Funktion, die, wenn Sie onload aufgerufen wird, alle Überschriften der Seite automatisch durchnummeriert. Das heißt, wenn die erste Überschrift »Der Treibhauseffekt« heißt, dann soll daraus »1. Der Treibhauseffekt« werden, und so weiter.

196

Übungen Gehen Sie der Einfachheit halber davon aus, dass alle Überschriften direkte Kinder des body-Elements sind, so dass Sie den DOM-Baum nicht weiter zu durchsuchen brauchen. Sie müssen allerdings herausfinden, ob es sich bei einem bestimmten Node um eine Überschrift handelt. Dabei hilft Ihnen die Element-Eigenschaft tagName, die den Tag-Namen in Großbuchstaben enthält, also zum Beispiel "H1". schwer

28. Übung

Verbessern Sie die Funktion aus der letzten Übung, so dass sie nicht nur die Überschriften durchnummeriert, sondern zusätzlich am Anfang der Seite ein kleines Inhaltsverzeichnis einfügt, das mit lokalen Links auf die einzelnen Unterabschnitte verweist. Die Einträge im Inhaltsverzeichnis sollen dem Text der dazugehörigen Überschriften entsprechen. schwer

29. Übung

Schreiben Sie eine JavaScript-Funktion, die ein neues Fenster öffnet und darin den DOM-Baum des Ausgangsfensters darstellt. Die Ausgabe könnte zum Beispiel so aussehen: + HTML | +--+ HEAD | | | +--+ TITLE | | | +-- ein Titel | +--+ BODY | +-- vergessen Sie nie den | +--+ B | +-- Grundgedanken leicht

30. Übung

Benutzen Sie das Skript aus der letzten Übung, um sich anzusehen, wie die neuesten Browser den DOM-Baum verschiedener Seiten intern abbilden. Dazu können Sie das Bookmark von der CD benutzen oder den Quelltext, den Sie testen wollen, einfach zusammen mit dem Script auf eine Seite stellen. Sie werden einige Besonderheiten entdecken, die Sie bei der Arbeit mit DOMMethoden beachten sollten.

197

9 Drei Einführungen in DHTML

9.3

Tipps

Tipp zu 4: 왘 Sie brauchen zwei Elemente, die beide denselben Text enthalten und leicht

versetzt zueinander positioniert werden. Vergessen Sie nicht, mit z-index die Stapelreihenfolge festzulegen. Tipps zu 11: 왘 Geben Sie allen Elementen im Aquarium einen z-index-Wert, damit ein

Eindruck von Tiefe entsteht. 왘 Um die Fische zu bewegen, stellen Sie sie in Layer und verändern in regel-

mäßigem Abstand deren left-Eigenschaft. Wenn ein Fisch am AquariumRand angekommen ist, dann tauschen Sie das Bild durch den in die andere Richtung schwimmenden Fisch aus. Tipps zu 12: 왘 Definieren Sie drei Funktionen hellhoch(), dunkelhoch() und mischen(),

die von den Formularbuttons onclick aufgerufen werden. In diesen Funktionen ändern Sie die zIndex-Werte der Layer. 왘 Möglicherweise spielen Sie mit der Idee, die div-Elemente dynamisch per

document.write zu schreiben. In diesem Fall sollten Sie auf jeden Fall die style-Angaben aus den Tags heraus nehmen. Ein Fehler in Netscape 4 führt dazu, dass andernfalls in solchen Situationen der Browser oft Unsinn macht. (Mehr über Netscape-Bugs erfahren Sie im Anhang zum nächsten Kapitel.) Für die vorliegende Aufgabe können Sie die Layer ruhig einzeln in HTML definieren – es sind ja nur 5. Tipps zu 14: 왘 Sie werden merken: Die Einbindung externer Dateien ist nicht ganz ausge-

reift. Beispielsweise verliert ein Layer alle seine Formatierungen, wenn Sie ihn mit einem neuen Dokument überschreiben, auch sein Hintergrundbild. Als Workaround könnten Sie nach dem Überschreiben den Hintergrund jeweils neu festlegen. Dazu gibt es die Anweisung: document.LayerID.background.src = "dasBild.gif"

Eine Alternative ist, zwei getrennte Layer einzusetzen: einen für den externen Inhalt, und einen anderen, etwas größeren, der darunter liegt und sozusagen das (halb durchsichtige) Papier für den Inhalt darstellt. 왘 Ein zusätzliches Problem entsteht dadurch, dass Sie mit der Zuweisung zu

src praktisch keinen Einfluss darauf haben, welche Breite der Layer annimmt, wenn eine externe Seite hineingeladen wird. Abhilfe bietet hier

198

Tipps die Layer-Methode load, die Sie statt der src-Zuweisung benutzen können und die einen Parameter für die gewünschte Breite hat: document.LayerID.load("seite.html",500)

Tipp zu 19: 왘 Setzen Sie bei jedem zoom-Schritt den color-String aus seinen Bestandtei-

len neu zusammen. Dabei können Sie dieselbe Variable für den Rot-, den Grün- und den Blau-Anteil einsetzen, der Farbwechsel erfolgt dann in Graustufen. Tipp zu 20: 왘 Lassen Sie sich nicht abschrecken, es ist ganz einfach. Sie brauchen nur

eine einzige Zeile JavaScript-Code. Tipps zu 21: 왘 Die Filter-Angabe ist ein String. Um sie zu ändern, müssen Sie also die

gewünschte Stärke in den String einbauen und der style-Eigenschaft filter zuweisen. 왘 Also so:

Element.style.filter = "alpha(opacity="+variable+")"; 왘 Welches Element würde sich anbieten, wenn auf die gesamte Seite ein Fil-

ter gelegt werden soll? Tipps zu 22: 왘 Die Seite, die eingebunden werden soll, muss irgendwohin geladen wer-

den. Laden wir sie ins aktuelle Fenster, verschwindet aber das bestehende Dokument. Wo könnte man die Seite sonst noch hin laden? 왘 Richtig: in einen Frame. Das ist jedoch nicht, was wir wollten: Framesets

sind schnöde, und Effekte wie in Übung 14 lassen sich damit nicht erzielen. Einen gewissen Fortschritt erreichen Sie, wenn Sie statt eines Framesets einen Iframe einsetzen. IE unterstützt schon seit Version 4 den HTML-Tag <iframe>, durch den Frames in ein normales Dokument eingebaut werden können. Wir definieren also einen Iframe und laden dort hinein die externe Seite. Das ist zwar besser, aber immer noch nicht das Wahre: Iframes sind eigene window-Objekte und als solche (jedenfalls bis IE5.5) immer undurchsichtig und durch andere Seitenelemente nicht verdeckbar. Weiter kommen Sie, indem Sie den Iframe zum Beispiel durch eine Größenangabe von 0 x 0 px unsichtbar machen. Wozu könnte das gut sein? 왘 Denken Sie an innerHTML.

199

9 Drei Einführungen in DHTML 왘 Sie können mit innerHTML den Inhalt des Iframe (oder vom darin liegenden

body) auslesen. Anschließend können Sie diesen Inhalt ebenfalls mit innerHTML in ein Element Ihrer Wahl auf der Hauptseite schreiben. 왘 Nun müssen Sie nur noch irgendwie mitbekommen, wann der Iframe fertig

geladen ist. Ein onload-Handler im iframe-Element funktioniert leider nicht. Was tun? 왘 Die einfachste Lösung ist: Sie schreiben in den body-Tag der externen Seite

einen onload-Handler, der eine Funktion auf der Hauptseite aufruft. Tipps zu 27: 왘 Wir unterscheiden nicht zwischen Überschriften erster, zweiter oder dritter

Ordnung, sondern zählen einfach alle durch. Überlegen Sie sich, wie Sie alle Kinder des body mit Hilfe von tagName darauf prüfen können, ob es sich um eine Überschrift handelt. 왘 Gehen Sie in einer for-Schleife die ChildNodes des body durch und prüfen

Sie bei jedem Durchgang, ob der aktuelle Node als TagName "H1", "H2", "H3", "H4" oder "H5" hat. Wenn ja, lesen Sie den Inhalt des Elements (sein erstes Kind) aus und überschreiben ihn durch denselben Inhalt mit der korrekten Zahl davor. Tipps zu 28: 왘 Halten Sie beim Umbenennen der Überschriften deren Text in einem Array

fest. Dann können Sie später aus dem Array das Inhaltsverzeichnis zusammenstellen. 왘 Es ist nicht anzunehmen, dass vor jedem Absatz bereits ein Anker-Element

steht, welches Sie nur mit einem lokalen Link anzuspringen brauchen. Denken Sie sich mindestens zwei Möglichkeiten aus, wie man trotzdem vom Inhaltsverzeichnis aus zu den Absätzen springen könnte. 왘 Die nahe liegende Möglichkeit ist, die fehlenden Anker-Elemente einfach

nachträglich zu erzeugen. Wenn Sie das versuchen, werden Sie zweierlei bemerken: 1. Es ist gefährlich, die Zahl der Einträge eines Node-Arrays zu erhöhen, während man ihn in einer for-Schleife durchläuft. Dadurch können Loops entstehen, die im schlimmsten Fall den Browser – beim Internet Explorer auch gerne das ganze Betriebssystem – zum Absturz bringen. 2. Aus unerfindlichen Gründen erkennt der Internet Explorer dynamisch erstellte Anker nicht. Weder tauchen Sie in der document.anchors Collection auf, noch können sie mit einem lokalen Link angesprungen werden. Gut also, dass Sie sich mindestens zwei Möglichkeiten ausgedacht haben.

200

Tipps Eine andere Möglichkeit wäre zum Beispiel, sich die Position der Überschriften im Dokument zu merken. Die Links im Inhaltsverzeichnis würden dann eine JavaScript-Funktion aufrufen, durch die die Seite an die entsprechende Position gescrollt wird. Es geht aber viel einfacher: Gemäß der HTML 4-Spezifikation des W3C können lokale Links nicht nur auf Anker-Elemente verweisen, sondern auf ein beliebiges Seitenelement, und zwar über dessen ID. Ein lokaler Link auf eine Überschrift kann deshalb in den neuesten Browsern auch so aussehen: zum ersten Absatz ...

erster Absatz

Tipps zu 29: 왘 Sie müssen herausbekommen, ob es sich bei einem Node um ein Element

oder einen TextNode handelt. Dabei hilft Ihnen die Eigenschaft nodeType: Für Elemente ist ihr Wert 1, für TextNodes 3. (Die 2 steht für AttributNodes.) Den Tag-Namen eines Elements erhalten Sie über die Eigenschaft tagName. 왘 Wählen Sie geeignete HTML-Elemente, um die richtige Formatierung zu

erreichen. Es wäre beispielsweise gut, wenn Sie für die Einrückungen mehrere Leerzeichen hintereinander schreiben können, ohne verwenden zu müssen. Entities wie und ä sind im DOM eigene Nodes. Eine Anweisung wie text = document.createTextNode("Mäh")

ist deshalb nicht erlaubt. Sie dürfen aber den Umlaut direkt in den Quelltext schreiben:

Sonderzeichen im DOM

text = document.createTextNode("Mäh")

Das ist korrekt und sollte, sofern der richtige Zeichensatz angegeben wurde, auch wie gewünscht aussehen. Den Zeichensatz legen Sie beispielsweise mit diesem meta-Tag fest: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Alternativ können in JavaScript Sonderzeichen auch als Unicode-Sequenz maskiert werden. Dabei wird aus beispielsweise \u00A0. Erfahrungsgemäß funktioniert das zuverlässiger als die unmaskierte Schreibweise der Sonderzeichen. 왘 Sie könnten den ganzen Baum in ein pre-Element schreiben. Dadurch

bekommen Sie neben der Möglichkeit, beliebig viele Leerzeichen zu verwenden, auch gleich die gewünschte nicht-proportionale Schriftart. Als Ele-

201

9 Drei Einführungen in DHTML ment-Typ für die einzelnen Einträge empfielt sich div, weil das automatisch einen Zeilenumbruch mit sich bringt, ohne wie p gleich einen zu großen Absatz zu erzeugen. 왘 Schreiben Sie zuerst die Nodes der untersten DOM-Ebene. Gehen Sie dazu

die document.childNodes durch und erzeugen Sie für jedes darin liegende Element ein entsprechendes Element im Popup-Fenster. 왘 Wenn wir davon ausgehen, dass auf der untersten Ebene in einem korrek-

ten HTML-Dokument nie TextNodes stehen, sieht die Routine für diese unterste Ebene ungefähr so aus: var baum = popup.document.createElement("PRE"); for (var i=0; i<document.childNodes.length; i++){ var kind = document.childNodes[i]; var el = popup.document.createElement("DIV"); var divInhalt = "+ "+kind.tagName; var txtNode = popup.document.createTextNode(divInhalt); el.appendChild(txtNode); baum.appendChild(el); holeKinder(document.childNodes[i]); } 왘 Was jetzt noch fehlt, ist die Funktion holeKinder(), die rekursiv die Unter-

elemente im Dokument-Baum durchsucht und im Popup-Fenster auflistet. Sie ähnelt der abgedruckten Routine für die unterste Ebene – der Hauptunterschied ist, dass sie auch TextNodes auflistet. 왘 Überlegen Sie sich, wie Sie die aus Plus- und Minuszeichen bestehende

Baum-"Grafik« hinbekommen könnten. Das ist vermutlich der schwierigste Teil der Übung. Wenn er Ihnen nicht so recht gelingen will, dann zerbrechen Sie sich darüber nicht den Kopf, sondern lassen ihn einfach weg – oder sehen in der Lösung nach, wie es geht.

9.4

Lösungen

Lösung zu 1: 1. CSS-Eigenschaften können direkt im HTML-Tag des betroffenen Elements mit Hilfe des style-Attributs definiert werden. 2. CSS-Angaben können in einem eigenen style-Element im head der Seite stehen. 3. Um Formate für mehrere Seiten zu nutzen, können diese auch als externe Dateien eingebunden werden. Dazu gibt es den link-Tag.

202

Lösungen Lösung zu 2: Wir legen in einem style-Element die Schriftgröße aller Absätze auf 15pt fest: p { font-size: 15pt }

Den einen Absatz, der anders dargestellt werden soll, versehen wir mit einer ID und weisen ihm so eine andere Schriftgröße zu: #wichtigerAbsatz { font-size: 25pt }

Lösung zu 3: body { width:520px; padding:20px; font-family:Arial }

So jedenfalls sollte es funktionieren. Wenn Sie es ausprobieren, werden Sie aber bemerken, dass sich hier bei Netscape und Internet Explorer Bugs eingeschlichen haben: Der Internet Explorer ignoriert die width-Angabe, bei Netscape 4 geht häufig die Schriftart verloren, zum Beispiel in und nach einer Tabelle. Auf solche Bugs werden Sie noch häufig stoßen. Es empfielt sich deshalb, CSSAngaben immer sofort mit den Browsern zu testen, um sich später eine mühsame Fehlersuche zu ersparen. Lösung zu 4: Die Style-Definition für die beiden Elemente könnte so aussehen: <style type="text/css"> #schrift { position:absolute; left:25px; top: 15px; color:#3333ff; font-size:30px; z-index:20; } #schatten { position:absolute; left:27px; top: 18px; color:#bbbbbb; font-size:30px; z-index:10; }

Im body brauchen nur noch die beiden Elemente angelegt zu werden:

Wo Schatten ist, ist Licht.

Lösung zu 5: Der gesamte Inhalt des body steht in einem Layer. Die linke Kante des Layers ist auf -100 Pixel gesetzt, das heißt auf 100 Pixel links vom linken Rand des Browserfensters. Da außerdem die Layerbreite auf 100 Pixel beschränkt ist, liegt der ganze Layer außerhalb des sichtbaren Bereichs. Lösung zu 6: Die horizontale Position des Layers ist in der left-Eigenschaft des LayerObjekts festgelegt. Um die Layerposition zu verändern, brauchen Sie diesen Wert nur zu überschreiben:

203

9 Drei Einführungen in DHTML document.layers["nichts"].left = 0;

Jetzt befindet sich der Layer genau in der linken oberen Ecke des Fensters. Lösung zu 7: Die neun Ausdrücke, die Sie gefunden haben sollten, sind: document.layers[0].document.images[0] document.layers[0].document.images["etwas"] document.layers[0].document.etwas document.layers["nichts"].document.images[0] document.layers["nichts"].document.images["etwas"] document.layers["nichts"].document.etwas document.nichts.document.images[0] document.nichts.document.images["etwas"] document.nichts.document.etwas

Es gibt sogar noch mehr. Zum Beispiel können Sie auf Collection-Elemente auch zugreifen, indem Sie das Element als Eigenschaft der Collection ansprechen: document.layers.nichts.document.images.etwas

Was dagegen nicht funktioniert, ist: document.images[0] document.images["etwas"] document.etwas

Lösung zu 8: Die Faustregel lautet: Alle durch

mit absoluter CSS-Positionierung ersetzen. Da positionierte div-Elemente von JavaScript als Layer behandelt werden, ändert sich am Skript-Bereich überhaupt nichts. Nur der Layer selbst wird anders geschrieben:

Hier steht ganz viel Text

Lösung zu 9: Die Positionsangaben im Style-Attribut der div-Tags werden (genau wie die in einem layer-Tag) immer relativ zu demjenigen Dokument ausgewertet, in dem das div-Element sich befindet. Die Beispielseite enthält vier Dokumente: Das Dokument des BraunglasContainers liegt innerhalb des AltglasContainerDokuments, dieses wiederum liegt innerhalb des RecyclingHofs, welcher sich schließlich im Hauptdokument befindet. Um die Position des BraunglasContainers zu bestimmen, müssen Sie die Koordinaten zusammenzählen: Seine

204

Lösungen linke Kante ist 0px entfernt von der linken Kante des BraunglasContainers, diese Kante ist 100px rechts von der des RecyclingHofs, welche 300px von der linken Fensterkante entfernt liegt. Die resultierende x-Koordinate ist also 400px. Die y-Koordinate ergibt, wie Sie leicht nachprüfen können, 310px. Lösung zu 10: Zum Beispiel mit document.RecyclingHof.document.AltglasContainer.document. BraunglasContainer.document.Bierflasche.src = "milch.jpg";

Wenn Ihnen Übung 7 Spaß gemacht hat, können Sie jetzt die 255 anderen Möglichkeiten aufzählen, wie man eine Referenz auf das Bild erhalten kann. Lösung zu 11: Zuerst verteilen wir ein paar Pflanzen:

z-index:20">

z-index:30">

z-index:10">

z-index:40">

z-index:20">

Wie Sie sehen, war ich faul und habe nur zwei Grafiken erstellt, die ich in verschiedene Größen skaliere. Genauso mache ich es bei den Fischen:

Jetzt müssen wir die Fische animieren. Dazu brauchen wir JavaScript.

205

9 Drei Einführungen in DHTML Es gibt zahlreiche Herangehensweisen für Animations-Effekte. Hier ein ganz einfacher Vorschlag. Im Laufe dieses und des nächsten Kapitels werden Ihnen noch elegantere Lösungen begegnen. Erst einmal halten wir die aktuelle Bewegungsrichtung unserer Fische fest: var richtung_fisch1 = "rechts"; var richtung_fisch2 = "links";

Dann brauchen wir eine Funktion, die die Fische um einen Schritt vorwärts bewegt und gegebenenfalls die Richtung wechselt: function bewegeFische(){ if (richtung_fisch1=="rechts") { // Fisch schwimmt nach rechts if (document.fisch1.left<800) // 3 Pixel vorwärts document.fisch1.left+=3; else { // wenden richtung_fisch1 = "links"; document.fisch1.document.f1.src="fischli.gif"; } } else { // Fisch schwimmt nach links if (document.fisch1.left>100) document.fisch1.left-=3; else { // wenden richtung_fisch1 = "rechts"; document.fisch1.document.f1.src="fischre.gif"; } } // Dasselbe fuer den zweiten Fisch: if (richtung_fisch2=="rechts") { if (document.fisch2.left<600) // dieser Fisch ist etwas langsamer: document.fisch2.left+=2; else { richtung_fisch2 = "links"; document.fisch2.document.f2.src="fischli.gif"; } } else { if (document.fisch2.left>0) document.fisch2.left-=2; else { richtung_fisch2 = "rechts"; document.fisch2.document.f2.src="fischre.gif"; } } }

206

Lösungen Mit setInterval rufen wir diese Funktion alle 50 Millisekunden auf: setInterval("bewegeFische()",50);

Für flüssige Bewegungen sollten Sie stets einen Zeitabstand von 30-50 Millisekunden wählen. Ein gewisses Ruckeln ist dabei leider immer noch zu erkennen. Niedrigere Werte können die Browser aber (zumindest auf Windows-Betriebssystemen) nicht verarbeiten. Nur auf MacIntosh und Unix/Linux sind wirklich weiche Bewegungsabläufe möglich. Lösung zu 12: Wir schreiben erst einmal die Layer. So sieht der erste aus:

Quadrat 1

Um die Stapelreihenfolge festzulegen, habe ich ihm neben einer Position und einer Hintergrundfarbe einen festen z-index-Wert zugewiesen. Lässt man bei einer Layer-Definition die z-index-Angabe weg, dann gibt Netscape dem Layer automatisch den z-index-Wert des zuletzt erzeugten Layers. Bei gleichem zindex-Wert liegt der zuletzt definierte Layer oben. Die anderen Quadrate sehen ähnlich aus, ich ändere einfach Namen, Position, Farbe und z-index:

Quadrat 2

Quadrat 3

Quadrat 4

207

9 Drei Einführungen in DHTML

Quadrat 5

Als Nächstes brauche ich ein Formular zur Steuerung der Stapelreihenfolge:

Jetzt fehlen nur noch die JavaScript-Funktionen. Diese sind ganz einfach: function hellhoch() { for (i=1;i<=5;i++) { document.layers["q"+i].zIndex=i; } } function dunkelhoch() { for (i=1;i<=5;i++) { document.layers["q"+i].zIndex=6-i; } } function mischen() { for (i=1;i<=5;i++) { document.layers["q"+i].zIndex=Math.random()*10; } }

Ich mache mir hier die Tatsache zu Nutze, dass beim Verweisen auf Layer mittels document.layers["LayerID"]

208

Lösungen der Layername als String angegeben wird. Deshalb kann ich innerhalb der eckigen Klammern String-Operationen ausführen und Variablen einsetzen. Mit anderen Schreibweisen wie document.LayerID

wäre das nicht möglich. Zusammen mit den strategisch günstig gewählten Layernamen erhalte ich so angenehm schlanke Funktionen. Lösung zu 13: Nachdem die CSS-Angaben im style-Bereich untergebracht sind, sieht das Menü wie folgt aus:

Dazu kommt der einfache Button, der die JavaScript-Funktion aufruft:

Die Funktion will erst einmal wissen, ob das Menü im Moment aus- oder eingeklappt ist. Deshalb definieren wir eine globale Variable, die den aktuellen Menüzustand speichert: var zustand = "versteckt";

Die Funktion selbst sollte Ihnen keine allzu großen Schwierigkeiten bereiten, sie entspricht weitgehend den Funktionen zum Bewegen der Fische im Aquarium. Mein Vorschlag sieht diesmal so aus: function menuEinAus() { if (zustand == "versteckt") { document.menu.clip.bottom+=5; if (document.menu.clip.bottom>150) { zustand = "sichtbar"; return; } } else { document.menu.clip.bottom-=5; if (document.menu.clip.bottom<1) {

209

9 Drei Einführungen in DHTML zustand = "versteckt"; return; } } setTimeout("menuEinAus()",30); }

Diesmal habe ich die return-Anweisung eingesetzt: Wenn die Bewegung an ihrem Ziel angelangt ist, wird damit die Abarbeitung der Funktion beendet. Lösung zu 14: Sie brauchen zwei ineinander verschachtelte Layer hintergrund und inhalt:

Die Style-Definitionen aus Übung 13 muss dazu um die folgenden Einträge ergänzt werden: #hintergrund { position:absolute; left:250; top:30; clip:rect(0px 500px 500px 0px); layer-background-image:url(semitrans.gif) } #inhalt { position:absolute; left:10; top:10 }

In der JavaScript-Funktion, die den Inhalt von inhalt wechselt, können Sie entweder mit src oder mit load arbeiten. Die erste Variante sieht so aus: function lade(url) { document.hintergrund.document.inhalt.src = url; }

Wir nehmen aber besser load, um dadurch die Layer-Breite bestimmen zu können. Außerdem wollen wir, dass nach der Auswahl eines Menüpunktes das Menü wieder zuklappt. Deshalb wird noch menuEinAus() aufgerufen: function lade(url) { document.hintergrund.document.inhalt.load(url,480); menuEinAus(); }

Anschließend müssen nur noch die Menü-Einträge angepasst werden, damit sie die Funktion lade() aufrufen:

Lösung zu 15: Mit document.all["Satie"]

oder document.all.Satie

oder window.Satie

oder Satie

Ob sich das Element in einem div befindet (positioniert oder nicht), ist dem Internet Explorer ziemlich egal. Lösung zu 16: Was passiert ist Folgendes: Dem Objekt document.all.Satie wird eine neue Eigenschaft verpasst, nämlich visibility, und dieser Eigenschaft wird als Wert der String "hidden" zugewiesen. Sonst passiert nichts. Um das Satie-Element unsichtbar zu machen, muss die Eigenschaft visi bility seines style-Objekts geändert werden: document.all["Satie"].style.visibility = "hidden";

Lösung zu 17:

... erster Absatz ...

... zweiter Absatz ...

... dritter Absatz ...

211

9 Drei Einführungen in DHTML Lösung zu 18: Zuerst brauchen wir ein Element, in dem der Text steht. Anfangs hat dieser eine sehr kleine Schriftgröße:

der Zoom-Text

Wenn die Seite fertig geladen ist, wird eine JavaScript-Funktion aufgerufen, die die Schrift vergrößert:

Um nicht jedesmal die aktuelle Schriftgröße auslesen zu müssen, legen wir eine Variable an, die den derzeitigen Wert enthält: var schriftGroesse = 2;

Bei jedem Funktionsaufruf wird die Schrift um 5 Pixel vergrößert. Wenn 200px erreicht sind, bricht die Funktion ab, andernfalls ruft sie sich mit 30 Millisekunden Verzögerung erneut auf. function zoom() { schriftGroesse+=5; zoomDiv.style.fontSize = schriftGroesse+"px"; if (schriftGroesse<200) setTimeout("zoom()",30); }

Wenn Sie das Beispiel ausprobiert haben, konnten Sie vermutlich (wenn Sie nicht gerade eine Kinoleinwand als Bildschirm verwenden) feststellen, wie der Internet Explorer das Dokument ständig neu rendert: Er fügt zum Beispiel wenn nötig Zeilenumbrüche ein, um den Text im Fenster unterzubringen. Lösung zu 19: Drei Textbereiche sollen eingezoomt werden:

Kein Angst!

Es ist nur

DHTML...

212

Lösungen Für die zoom-Funktion brauchen wir diesmal neben der Größen-Variable auch eine Variable, die den aktuellen Grauwert speichert. Am Anfang ist er 255, die Schrift also weiß: var schriftGroesse = 2; var farbe = 255;

Jetzt könnte man einfach drei Funktionen schreiben, von denen die erste den ersten div-Bereich einzoomt, wenn sie fertig ist, die zweite aufruft, die den zweiten einzoomt, und so weiter. Es geht aber kompakter, indem das aktuelle div-Element ebenfalls in einer Variablen mitgezählt wird. Die Referenzierung auf das Element geht dann so: document.all["zoomDiv"+divZaehler]

Hier die vollständige Funktion: var divZaehler = 1; function zoom(){ schriftGroesse += 5; // jeder Absatz wird in 20 Schritten gezoomt, deshalb // machen wir die Schrift bei jedem Schritt um 255/20 // dunkler, so dass wir am Schluss bei 0 ankommen: farbe -= 255/20; var el = document.all["zoomDiv"+divZaehler]; el.style.fontSize = schriftGroesse+"px"; el.style.color = "rgb("+farbe+","+farbe+","+farbe+")"; if (schriftGroesse>100) { // ab in die nächste Runde divZaehler++; schriftGroesse = 2; farbe = 255; } if (divZaehler<4) setTimeout("zoom()",30); }

Lösung zu 20: Zuerst das Formular mit dem Eingabefeld:

Dann das graue Rechteck:

213

9 Drei Einführungen in DHTML (Beachten Sie, dass bei Internet Explorer keine clip-Angabe nötig ist, um die Fläche des div zu erweitern, width und height reichen aus. Das Attribut layer-background-color gibt es natürlich auch nicht.) Schließlich die verblüffend simple JavaScript-Funktion: function schreib() { document.all.rechteck.innerHTML = document.forms['formular'].eingabe.value; }

Sie können den »HTML-Editor«-Effekt übrigens noch verbessern, indem Sie den Button weglassen und stattdessen im textarea-Tag einen onkeyup-Handler einsetzen:

Damit wirkt sich jede Eingabe ins Formularfeld automatisch im Anzeige-Rechteck aus. Lösung zu 21: Ich wende den Filter auf das body-Element an: gar nicht fade <script> var z = 0; function fadein(){ z+=5; document.body.style.filter = "alpha(opacity:"+z+")"; if (z<100) setTimeout("fadein()",50); } ...der Seiteninhalt...

Für einfache Effekte wie Ein-, Aus- und Überblenden bietet Microsoft vorgefertigte dynamische Filter an. Das folgende Beispiel zeigt einen eleganten, mit Hilfe des blendTrans-Filters realisierten Mouseover-Effekt:

214

Lösungen <script> function rollover() { document.all.bild.filters.blendTrans.Apply(); document.all.bild.src = "bildOver.gif"; document.all.bild.filters.blendTrans.Play(); } function rollout(){ document.all.bild.filters.blendTrans.Apply(); document.all.bild.src = "bild.gif"; document.all.bild.filters.blendTrans.Play(); }

Dynamische Filter funktionieren derzeit nur mit Internet Explorer auf Windows, und auch hier nicht in allen Versionen: Manche IE 4 ignorieren sie völlig, und selbst IE 5.5 versteht viele Filtereffekte nicht mehr (- dafür kennt er ein paar Neue). Lösung zu 22: Im HTML-Quelltext der Hauptseite steht ein Element, in dem das externe Dokument angezeigt werden soll:

Dann brauchen wir einen Iframe, der den Seiteninhalt zwischenspeichert. Mit geeigneten Style-Angaben wird er unsichtbar: <iframe id="puffer" style="width:0px; height:0px">

Um die externe Seite einzubinden, wird die Funktion lade() aufgerufen: eine andere Seite

Diese Funktion tut nichts anderes, als die übergebene Adresse in den Iframe zu laden:

215

9 Drei Einführungen in DHTML function lade(url) { puffer.location.href = url; }

Schließlich brauchen wir noch eine Funktion, die aufgerufen wird, wenn der Iframe-Inhalt fertig geladen ist. Dann nämlich kann der Inhalt des Iframe-body ausgelesen und in den anzeige-div kopiert werden: function fertig(){ document.all.anzeige.innerHTML = puffer.document.body.innerHTML; }

Was noch fehlt, ist nur ein entsprechender Eintrag im body-Tag der externen Seite:

Das war's. In Version 5 des Internet Explorers gibt es noch einen besseren Weg, der auf einem DHTML-Behavior beruht. Behaviors werden derzeit von Netscape 6 und der Windows-Version des IE5 unterstützt (das Format ist allerdings zwischen beiden sehr unterschiedlich). Es handelt sich dabei um externe Komponenten, die das Standardverhalten bestimmter HTML-Elemente festlegen. Bei Microsoft gibt eine Reihe von Default-Behaviors, die jedoch keine Extra-Datei verlangen. Dazu gehört auch das Download-Behavior. Die Syntax ist ganz einfach: Wir nehmen irgendein Element und verpassen ihm das Behavior:

(Bei gewöhnlichen Behaviors würde man dort, wo hier #default#download steht, den URL der externen Datei eintragen.) Damit besitzt das Element automatisch die Methode startDownload(), der zwei Parameter übergeben werden: Eine einzulesende (Text-)Datei und eine Funktion, die aufgerufen wird, wenn die Datei fertig gelesen ist. Dieser Funktion wird dann der Datei-Inhalt automatisch als String übergeben. Für unser Beispiel sähe das so aus: schaufel.startDownload('eins.html', fertig); function fertig(text) { document.all.anzeige.innerHTML = text; }

Lösung zu 23: Siehe hierzu Abbildung 9.3.

216

Lösungen Abbildung 9.3: Der DOM-Baum von Übung 23

html

body

head

title

p

h2

“Wo”

“Wo kämen wir hin...”

“...wenn jeder sagte: ”

b

,

br

“Wo kämen wir hin?”

“und keiner ginge, um zu sehen, wohin wir kämen, wenn wir gingen?” Lösung zu 24: Beide Ausdrücke zeigen auf den TextNode »Wo kämen wir hin...«. document.childNodes[0].lastChild entspricht auf der Beispielseite document.body, und »Wo kämen wir hin...« ist das erste Kind des ersten Kindes (das h2-Element) des body. Das erste Kind eines Elements erreicht man wahlweise mit firstChild oder childNodes[0]. Lösung zu 25: Sie ahnten es: Auch dieser Ausdruck verweist auf »Wo kämen wir hin...«. Schauen wir uns die einzelnen Schritte an: Wir starten mit document.body.previousSibling

beim head-Element, machen mit lastChild.parentNode

von dort einen nutzlosen Abstecher zum title und zurück. Über parentNode

landen wir beim Eltern-Element des head, also bei html, von da an geht es mit

217

9 Drei Einführungen in DHTML childNodes[1].childNodes[1]

über den body zum TextNode »...wenn jeder sagte: ». Dessen vorangehender Node, previousSibling

ist das h2-Element. lastChild

führt uns schließlich zu dessen einzigem Kind: »Wo kämen wir hin...«. Lösung zu 26: Die Methoden zum Anhängen und Entfernen von Nodes beziehen sich immer auf die Kinder des Elements, von dem aus Sie aufgerufen werden. (Daher das »child« in appendChild und removeChild.) Der Inhalt der Überschrift ist aber ein Kind des h2-Elements, nicht von document.body. Korrekt müsste es also heißen: var el = document.body.childNodes[0].firstChild; document.body.childNodes[0].removeChild(el);

oder: var el = document.body.childNodes[0].firstChild; el.parentNode.removeChild(el);

Lösung zu 27: function ordnung() { // In einem Array speichern wir die zu überprüfenden // Tags: var tags = new Array("H1","H2","H3","H4","H5"); // Dann brauchen wir eine Variable, die die Überschriften // zählt: var zaehler = 1; // Jetzt durchsuchen wir die Kinder von body // und ändern den Inhalt aller Überschriften: for (i=0; i<document.body.childNodes.length; i++){ kind = document.body.childNodes[i]; for (j=0; j
218

Lösungen Lösung zu 28: function ordnung(){ // Zuerst die globalen Variablen, angefangen mit dem // Überschriften-Zähler und dem Array für die gesuchten // Tags: var tags = new Array("H1","H2","H3","H4","H5"); var zaehler = 1; // Wir brauchen außerdem einen Array für die Texte der // Überschriften, aus denen wir das Inhaltsverzeichnis // aufbauen: var inhalt = new Array(); // Als Nächstes durchsuchen wir die Kinder des body // nach Überschriften, geben ihnen IDs, benennen ihren // Inhalt um und sammeln ihn im Array inhalt: for (i=0; i<document.body.childNodes.length; i++){ kind = document.body.childNodes[i]; for (j=0; j
219

9 Drei Einführungen in DHTML // hinter jeden Link einen Zeilenumbruch: var punktBr=document.createElement("br"); inhaltEl.appendChild(punktBr); } }

Lösung zu 29: // Neues Fenster öffnen: popup=open("","ausgabeFenster"); // pre-Element für den Baum erzeugen: var pd = popup.document; var baum = pd.createElement("PRE"); pd.body.appendChild(baum); // unterste DOM-Ebene schreiben: for (var i=0; i<document.childNodes.length; i++){ var kind = document.childNodes[i]; var el = pd.createElement("DIV"); if (document.childNodes[i].nodeType==1){ var inh = pd.createTextNode("+ "+kind.tagName); el.appendChild(inh); baum.appendChild(el); holeKinder("",document.childNodes[i]); } } function holeKinder(plusminus, element){ for (var i=0; i<element.childNodes.length; i++){ // Erst einmal den Baum um eine Zeile weitermalen. // Die Reihe von Strichen und Plus-Zeichen, die // links von denen der aktuellen DOM-Ebene stehen, // wurde als Parameter plusminus übergeben. var el = pd.createElement("DIV"); var inh = pd.createTextNode(plusminus+"|"); el.appendChild(inh); baum.appendChild(el); // Dann schreiben wir die Inhalte der TextNodes und // die Tag-Namen der Elemente dieser Ebene: var kind = element.childNodes[i]; var el = pd.createElement("DIV"); if (element.childNodes[i].nodeType==1){ var neuInh = plusminus + "+--+ " + kind.tagName; var inh = pd.createTextNode(neuInh); el.appendChild(inh);

220

Lösungen baum.appendChild(el); // nächsten Rekursionsschritt starten: if (element.childNodes.length>i+1) holeKinder(plusminus+"| ", kind); else holeKinder(plusminus+" ", kind); } else if (element.childNodes[i].nodeType==3){ var neuInh = plusminus + "+-- " + kind.nodeValue; var inh = pd.createTextNode(neuInh); el.appendChild(inh); baum.appendChild(el); } } }

Auf der CD finden Sie eine Version dieses Skripts, die Sie als Bookmark speichern können. Wenn Sie dieses Bookmark auf einer beliebigen Seite aufrufen, malt es Ihnen den DOM-Baum des Dokuments in ein neues Fenster. Lösung zu 30: Eine eigentliche Lösung zu dieser Übung gibt es natürlich nicht. Falls Sie jedoch bei Ihren Versuchen auf nichts Interessantes gestoßen sind, hier ein paar Anregungen: 왘 Sehen Sie sich die Unterschiede zwischen der DOM-Darstellung von Net-

scape 6 und Internet Explorer 5 an. Beispielsweise werden Sie entdecken, dass bei IE5 der im title angegebene Titel kein Kind des title-Elements ist. Auch die Behandlung von Zeilenumbrüchen zwischen Tags und in TextNodes ist unterschiedlich: Netscape macht (genau wie IE5 auf MacIntosh) aus jedem Zeilenumbruch zwischen einzelnen Elementen im body einen TextNode. 왘 Nehmen Sie einmal unter die Lupe, was die Browser aus falschem HTML-

Quellcode machen, etwa aus: au

weia

Sie werden feststellen: Um die Fehler auszugleichen, werden intern Elemente erzeugt, die im Quelltext gar nicht vorkommen. 왘 Wenn Sie nicht regelmäßig HTML-Spezifikationen lesen, dürften Sie auch

beim Betrachten einer table in der Baum-Ansicht überrascht sein: Laut W3C steht innerhalb des table-Elements stets ein tbody-Element. Wurde es vom Autor der Seite weggelassen, fügen es die Browser von alleine ein.

221

10

DHTML: Cross-Browser-Strategien Von Wolfgang Schwarz, [email protected]

10.1

Grundlagen

Kennen Sie das? Sie haben eine Webseite entwickelt, mit Ihrem Lieblingsbrowser getestet, vielleicht noch ein paar Fehler behoben und Bugs umschifft – schließlich läuft alles wie gewünscht. Dann kommen Sie (oder Ihr Arbeitgeber) mit einem anderen Browser vorbei, und die Seite fliegt Ihnen um die Ohren: Das Layout ist verwüstet, es hagelt Fehlermeldungen, wenn Sie Pech haben, stürzt auch gleich der Browser ab. Diese Erfahrung ist so etwas wie der Initiationsritus für Cross-Browser-DHTML. Das Problem heißt Inkompatibilität: Die völlig unterschiedlichen Objektmodelle der verschiedenen Browser zusammen mit den zahlreichen Bugs, die sich in ihre Implementierung eingeschlichen haben, machen es unmöglich, dass eine Seite, die für einen bestimmten Browser entwickelt wurde, ohne erheblichen Aufwand auch auf einem anderen zum Laufen zu bringen ist. In diesem Kapitel erfahren Sie, wie man DHTML-Seiten von Anfang an so entwickelt, dass sie später mit mehr als nur einer Browserversion funktionieren. Ich werde Ihnen unterschiedliche Herangehensweisen vorstellen, mit denen Sie im Übungsteil ausgiebig experimentieren können. Am Ende des Kapitels dürfte Ihnen der Gedanke an Cross-Browser-DHTML keinen Schrecken mehr einjagen. Auf jeden Fall sollten Sie, bevor Sie dieses Kapitel durcharbeiten, Kapitel 9 gründlich gelesen haben. Es ist nicht möglich, die verschiedenen Objektmodelle von Microsoft, Netscape und W3C unter ein Dach zu bringen, ohne diese Objektmodelle überhaupt zu kennen. Vorüberlegungen zur Zielgruppe Wir wollen, dass unsere DHTML-Seiten möglichst mit allen Browsern auf allen Plattformen ohne Abstürze und Augenschmerzen betrachtet werden können. Nun gibt es, wie Sie vermutlich wissen, ziemlich viele Betriebssysteme, und mindestens ebenso viele Browserversionen. Wir müssen also erst einmal sortieren. Da wären als Erstes all jene Browser, die gar nichts können. Zu diesen Puristen gehören Textbrowser wie Lynx, aber auch neueste Netscape- oder Internet Explorer-Versionen, bei denen JavaScript ausgeschaltet ist.

Browser-Gruppen

223

10 DHTML: Cross-Browser-Strategien Eine zweite Gruppe bilden diejenigen Browser, die zwar ein wenig JavaScript und vielleicht CSS beherrschen, aber kein DHTML. Hierunter fallen zum Beispiel die Versionen 2 und 3 von Netscape, der Internet Explorer 3 und Opera. Die dritte Gruppe schließlich bilden die zumindest prinzipiell DHTML-fähigen Browser. Dazu gehören natürlich Netscape und Internet Explorer ab Version 4, aber auch zum Beispiel einige AOL-Browser der Versionen 3, 4 und 5. Allerdings gibt es von diesen AOL-Browsern unzählige Versionen, die zwar fast alle auf Internet Explorer basieren, aber in ihrer JavaScript-Funktionalität in ziemlich unberechenbarer Weise eingeschränkt sind. Da AOL (genau wie Opera) praktisch keine Dokumentation bereitstellt, müssen Sie, wenn Sie für AOL-Browser entwickeln, mindestens 5 von ihnen auf verschiedenen Betriebssystemen installiert haben, um damit jede Anweisung zu testen. In der Praxis macht das natürlich kein Mensch. Man verbannt AOL stattdessen einfach in Gruppe 2 und lässt ihn erst gar nicht an die DHTML-Skripte heran. Es bleiben an DHTML-fähigen Browsern also Internet Explorer ab 4, Netscape 4 und W3C-konforme Browser wie Netscape 6. Diese Liste wird in absehbarer Zeit noch ziemlich wachsen, denn bei vielen kleineren Browsern (einschließlich Opera) ist eine DOM-Unterstützung geplant. Von den DHTML-Browsern gibt es nun wiederum unterschiedliche Versionen je nach Betriebssystem. Während sich Netscape unter Windows, MacIntosh und Unix relativ ähnlich verhält, sind die MacIntosh-Versionen von Internet Explorer 4 und 5 in vieler Hinsicht ganz andere Browser als ihre Windows-Kollegen – insbesondere enthalten sie eine Reihe zusätzlicher Bugs, die oft nur schwer zu umgehen sind. Wenn Sie also keinen Mac zum Testen haben, dann schicken Sie sicherheitshalber auch diese Browser in Gruppe 2. Browser-Check Soviel zur Theorie. Jetzt brauchen wir ein Skript, das den Browser des Besuchers überprüft und in seine Gruppe einweist, wo er dann fachgerecht behandelt werden kann. BrowserErkennung

Die beiden Möglichkeiten zur Browser-Erkennung haben Sie bereits in Kapitel 3 kennen gelernt: Entweder man liest die Eigenschaften des navigatorObjekts aus oder testet die Verfügbarkeit bestimmter Objekte. Zum Beispiel gibt es das Objekt document.layers nur im Objektmodell von Netscape 4, Sie können deshalb davon ausgehen, dass eine mit if (document.layers)

eingeleitete Anweisung nur von diesem Browser ausgeführt wird. Ebenso testet man üblicherweise auf das Objektmodell von Internet Explorer mit if (document.all)

und auf das W3C DOM mit if (document.getElementById)

224

Grundlagen Aber Vorsicht! Das sind keine verlässlichen Browsertests. Es kann jederzeit ein neuer Browser erscheinen, der zwar das überprüfte Objekt kennt, das dazugehörige Objektmodell aber nur unvollständig umsetzt. So wird aller Voraussicht nach der neue MacIntosh-Browser iCab neben dem W3C DOM auch einen Teil des Microsoft-Objektmodells verstehen, darunter die Collection document.all. Noch gefährlicher ist Opera 4 bzw. 5, bei dem einige DOM-Methoden wie document.getElementById() zwar bereits vorhanden sind, aber davon kaum etwas funktioniert. Idealerweise würde man bei bei jedem einzelnen Objekt und jeder Methode vor der Verwendung überprüfen, ob es vorhanden ist und richtig funktioniert. Das ist in der Praxis aber selten machbar. Es bleibt deshalb nichts anderes übrig, als den Browsermarkt im Auge zu behalten und eventuelle Störenfriede einzeln abzufangen und in ihre Gruppe einzuweisen. Hierbei ist die userAgentEigenschaft des navigator-Objekts ganz brauchbar: if (document.all && navigator.userAgent.toLowerCase().indexOf("mac")>-1)

erkennt die MacIntosh-Ausgabe des Internet Explorers, if (navigator.userAgent.toLowerCase().indexOf("aol")>-1)

testet auf AOL-Browser, if (navigator.userAgent.toLowerCase().indexOf("icab")>-1)

auf iCab und if (navigator.userAgent.toLowerCase().indexOf("opera")>-1)

auf Opera. Strategie 1: Verschiedene Seiten für verschiedene Browser Nachdem wir unsere Besucher nun in hübsche Gruppen einteilen können, müssen wir uns überlegen, was wir dort mit ihnen anfangen. Zum Beispiel könnten wir mehrere Versionen der Seite erstellen und auf der Startseite die Browser entsprechend umleiten. Das sieht dann ungefähr so aus:

BrowserUmleitung

if (document.getElementById) // W3C-kompatibel location.replace("w3cdhtml.html"); else if (document.layers) // Netscape 4 location.replace("netscape4dhtml.html"); else if (document.all) // IE4 location.replace("ie4dhtml.html"); else location.href = "nodhtml.html";

Hier werden Netscape 4, Internet Explorer 4 und W3C-kompatible Browser (sowie solche, die vorgeben W3C-kompatibel zu sein) auf eine jeweils eigene Seitenversion geschickt. Alle anderen Browser kommen, sofern sie JavaScript

225

10 DHTML: Cross-Browser-Strategien verstehen, nach nodhtml.html. Die Puristen, die kein JavaScript verstehen, bleiben einfach auf der Umleitungsseite stehen, wo wir Ihnen beispielsweise einen Link nach nodhtml.html anbieten können. Verwenden Sie für JavaScript-Umleitungen möglichst immer location.replace() und nicht location.href. Denn nur bei location.replace kommt man mit dem Back-Button des Browsers von der DHTML-Seite aus wie gewünscht zurück auf die Seite, auf der man vorher war (vgl. Kapitel 3). Browser-Umleitungen haben den Vorteil, dass Sie auf den DHTML-Seiten keine Rücksicht mehr auf Inkompatibilitäten zu nehmen brauchen. Es gibt einfach für jedes Objektmodell eine eigene Seite. Der Nachteil ist, dass Sie auf diese Weise schnell sehr viele Seiten erhalten, die sich nur schwer warten lassen. Außerdem müssen Sie zum Beispiel dafür sorgen, dass, wenn jemand einen Link auf Sie setzt, dieser immer auf die Umleitungsseite führt. Strategie 2: Verschiedene Anweisungen für verschiedene Browser Häufig ist es bequemer, nur eine einzige Seite für alle Browser zu haben. In diesem Fall ist dafür zu sorgen, dass jede Browserversion nur diejenigen SkriptBereiche zu sehen bekommt, die sie versteht. Die Puristen bereiten hier wenig Schwierigkeiten: Sie ignorieren ohnehin alle Skripte. Schwieriger wird es mit den Browsern der zweiten Gruppe, die JavaScript kennen und deshalb versuchen werden, die DHTML-Funktionen auszuführen – um dabei unweigerlich zu scheitern. Dieses Problem ließe sich im Grunde einfach lösen, indem man in allen scriptTags das Attribut language auf JavaScript1.2 setzt. Ihr Inhalt wird dann von Netscape und Internet Explorer erst ab Version 4 ausgewertet. Leider geben jedoch auch die neueren Opera-Versionen vor, JavaScript1.2 zu unterstützen, und Netscape 3 ignoriert Sprachangaben bei extern eingebundenen Skripten völlig. SkriptVerzweigung

Am besten verzweigt man deshalb in den Skript-Blöcken selbst je nach Browser auf die entsprechenden Anweisungen: <script language="JavaScript1.2">
226

Grundlagen ... Anweisungen für alle anderen ... } // -->

Von diesen Verzweigungen braucht man in der Praxis eine ganze Menge, denn bei DHTML kommt fast in jedem Skriptblock, in jeder Funktion zum Beispiel, etwas vor, was nicht alle Browser verstehen. Es ist deshalb üblich, am Anfang der Seite Abkürzungen anzulegen: var n4 = document.layers; var ie = document.all; var w3c = document.getElementById;

Dann sieht von da an eine Abfrage auf Netscape 4 zum Beispiel nur noch so aus: if (n4) { ... }

Am besten fangen Sie an der Stelle auch die Browser ab, die das jeweilige Objektmodell nicht ausreichend verstehen. Wenn Sie wie ich finden, Opera habe in der w3c-Kategorie nichts verloren, dann sieht die Abfrage aufs W3C DOM so aus: var w3c = (document.getElementById && (navigator.userAgent.toLowerCase().indexOf("opera")==-1)

Strategie 3: Cross-Browser-Funktionen Nehmen wir an, Sie möchten die visibility-Eigenschaft eines positionierten div-Elements ändern. Cross-Browser geht das so: if (document.getElementById) // W3C document.getElementById("divID").style.visibility = "hidden"; else if (document.layers) // Netscape 4 document.layers["divID"].visibility = "hidden"; else if (document.all) // IE 4/5 document.all["divID"].style.visibility = "hidden";

So etwas ist in Ordnung, wenn es ein- oder zweimal auf einer Seite verwendet wird. Spätestens beim zwanzigsten Wechsel von visibility werden Sie diese Vorgehensweise aber als ziemlich unhandlich empfinden. Besser wäre es, wenn man eine Funktion hätte, die die ganze Verzweigung übernimmt, und die man jedes Mal nur noch aufzurufen braucht. Wir definieren also eine Cross-Browser-Funktion verstecke(), der die ID eines positionierten Elements übergeben wird, woraufhin sie dessen visibilityEigenschaft auf "hidden" schaltet:

227

10 DHTML: Cross-Browser-Strategien function verstecke(id) { if (document.getElementById) { // W3C document.getElementById(id).style.visibility = "hidden"; } else if (document.layers) { // Netscape 4 document.layers[id].visibility = "hidden"; } else if (document.all) { // IE 4/5 document.all[id].style.visibility = "hidden"; } }

Der Vorteil dürfte einleuchten: Ist die Funktion einmal definiert, brauchen Sie nur noch verstecke("elementID") aufzurufen, um das Element mit der ID elementID unsichtbar zu machen. Die inkompatiblen Objektmodelle der einzelnen Browser brauchen Sie dabei nicht mehr zu interessieren. Cross-BrowserLibraries

Wenn Sie DHTML auf mehr als nur einer Seite einsetzen, dann können Sie sich eine Reihe allgemein verwendbarer Cross-Browser-Funktionen basteln, diese in einem externen Skript-File ablegen und auf jeder DHTML-Seite einbinden. Der Cross-Browser-Code wird durch diese Funktionen wesentlich einfacher und übersichtlicher – Browser-Verzweigungen sind auf der Seite selbst fast gar nicht mehr nötig. Wir werden im Übungsteil einige Cross-Browser-Funktionen schreiben. Fertige und umfassendere Bibliotheken finden Sie im Internet, zum Beispiel auf http://www.brainjar.com/dhtml/dhtmllib.html. Strategie 4: Cross-Browser-Objekte JavaScript ist zwar keine streng objektorientierte Sprache wie Java, aber trotzdem lässt sich damit recht gut objektorientiert programmieren. Folglich kann man statt Cross-Browser-Funktionen auch eigens erstellte Cross-BrowserObjekte verwenden. Angenommen, Sie haben einen DHTML-Newsticker auf Ihrer Seite. Dann könnten Sie einen Objekttyp Ticker definieren und für Ihren Newsticker eine Instanz dieses Typs erzeugen: newsticker = new Ticker();

Zur Steuerung des Tickers verwenden Sie Methoden, die Sie für das Objekt definiert haben, um Beispiel: newsticker.stop();

oder newsticker.richtungswechsel();

228

Grundlagen Keine Angst, wenn Ihnen das im Moment nicht allzu viel sagt. In den Übungen zu diesem Teil wird genau erklärt, wie die einzelnen Schritte funktionieren und wozu das Ganze gut ist. Auch fertige Bibliotheken mit nützlichen Cross-Browser-Objekten gibt es im Internet, etwa unter http://www.dansteinman.com/dynduo/. (Mehr und aktuellere Links finden Sie auf der Webseite zu diesem Buch: http://www.javascriptworkshop.de/.) Noch ein paar Grundregeln Die wichtigste Regel für DHTML ist wahrscheinlich: Testen. Die vorhandenen Browser enthalten in Sachen DHTML derart viele Bugs, dass Sie darauf vertrauen können, bei jeder Seite mindestens einem von ihnen zu begegnen. Wenn Sie regelmäßig Ihre Skripte testen, dann können Sie ziemlich genau herausfinden, ab wann etwas nicht mehr funktioniert und die entsprechende Stelle verändern. Andernfalls werden Sie Stunden damit verbringen, in einem 1.000-Zeilen-Code diese eine Stelle zu suchen, an der dem Browser etwas nicht gefällt.

Testen

Testen Sie mit möglichst vielen Browsern, wenn es geht auch auf verschiedenen Plattformen. Sie können ohne Weiteres mehrere Netscape-Versionen nebeneinander installieren – laden Sie sich also gleich ein paar davon herunter. Vor allem einen aus der Reihe 4.01-4.05 sollten Sie besitzen, da diese noch kein JavaScript1.3 verstehen. Leider ist es zumindest unter Windows praktisch unmöglich, mehrere Versionen des Internet Explorers gleichzeitig zu betreiben. Bevor Sie sich an die Programmierung machen, überlegen Sie sich erst einmal, wie Sie das gewünschte Ergebnis auf allen Ziel-Browsern realisieren können. Oft ist es hilfreich, dabei zuerst an Netscape 4 zu denken, denn dessen DHTML-Fähigkeiten sind in vieler Hinsicht die schwächsten. Ein Ansatz für Netscape 4 lässt sich in der Regel ohne allzu große Probleme auf Internet Explorer übertragen – anders herum geht das häufig nicht.

Nachdenken

Wollen Sie beispielsweise eine Animation erzeugen, dann könnten Sie dazu mit Internet Explorer die style-Eigenschaften eines beliebiges Elements verändern. Für Netscape 4 brauchen Sie aber einen Layer, weshalb Sie am besten von Anfang an ein positioniertes div-Element verwenden. Wenn Sie einen Ansatz für Netscape 4 und Internet Explorer gefunden haben, dann dürfte Ihnen das W3C DOM kein Kopfzerbrechen mehr bereiten: In der Regel können Sie genauso vorgehen wie beim Internet Explorer – lediglich die syntaktischen Unterschiede müssen berücksichtigt werden. Zum Beispiel heißt es beim W3C nicht document.all["elementID"], sondern document. getElementById("elementID"). Die schon bei Netscape 3 vorhandenen Collections document.images, document.forms usw. existieren übrigens im W3C DOM nach wie vor.

229

10 DHTML: Cross-Browser-Strategien

10.2

Übungen

DHTML-Übungen mit mehr Interaktion zwischen Webseite und Besucher finden Sie im Kapitel »Erweitertes Event-Handling«. leicht

1. Übung

Hier ist ein Stück aus einem HTML-Dokument:

Nichts ist besser als nichts.

Wie spricht man das Element mit der ID sohn in Netscape 4 an, wie im Internet Explorer, und wie im W3C DOM? leicht

2. Übung

Wie könnte man für alle drei Objektmodelle den sohn aus der vorigen Übung über seine clip-Eigenschaft(en) nachträglich unsichtbar machen? leicht

3. Übung

Welche Anweisungen verschieben für alle DHTML-Browser das Element vater aus Übung 3 an die Koordinaten 10/200? Nachdem dieses Skript ausgeführt wurde, wo steht dann das Element sohn? leicht

4. Übung

Nehmen wir an, Sie wollen beim Klick auf einen Link den Inhalt einer Tabellenzelle wechseln. Wie lässt sich das mit Internet Explorer und Netscape 6 erreichen? mittel

5. Übung

Gibt es zur vorigen Übung auch eine Lösung für Netscape 4? leicht

6. Übung

Schreiben Sie eine Seite, auf der stets die aktuelle Zeit im Format »Stunden:Minuten:Sekunden« angezeigt wird. Tauschen Sie dazu den Inhalt eines positionierten Elements einmal pro Sekunde durch die neue Zeit aus.

230

Übungen leicht

7. Übung

Programmieren Sie eine Funktion beschreibe(), die cross-browser den Inhalt eines positionierten Elements überschreibt. Der neue Inhalt wird als String an die Funktion übergeben, ebenso die ID des positionierten Elements. leicht

8. Übung

Wir wollen noch ein paar weitere Cross-Browser-Funktionen zusammenstellen. Schreiben Sie als Nächstes eine Funktion bewege(), die das Element mit der übergebenen ID an die ebenfalls als Parameter übergebenen Koordinaten stellt. mittel

9. Übung

Die nächste Funktion heißt schiebe(). Sie stellt ebenfalls das gewünschte Element an die gewünschte Position, allerdings nicht ruckartig, sondern in einer gleitenden Bewegung. Die Zahl der pro Schritt zurückzulegenden Pixel, also die Geschwindigkeit, wird als zusätzlicher Parameter übergeben. Wenn Sie Angst vor Zahlen haben, dann machen Sie eine Version, die das Element nur in einer Richtung verschiebt, also entweder horizontal oder vertikal. mittel

10. Übung

Die Objektmodelle von Netscape 4, Internet Explorer und W3C unterscheiden sich besonders stark beim Schreiben und Lesen der clip-Werte positionierter Elemente. Netscape 4 stellt dafür eine Reihe getrennter Eigenschaften bereit: clip.top; clip.right; clip.bottom; clip.left; clip.height; clip.width;

Beim Internet Explorer und ebenso beim W3C gibt es hingegen nur eine einzige style-Eigenschaft clip, in deren Wert, einem String, die vier clip-Kanten versteckt sind. Zum Beispiel: "rect(0px 200px 100px 10px)"

In der Praxis erweist sich das Modell von Netscape 4 meist als bequemer: String-Manipulationen sind mühsam, und die Reihenfolge der Kantenwerte bei IE und W3C (oben, rechts, unten, links) kann sich auch keiner merken. Schreiben Sie deshalb vier Cross-Browser-Funktionen zum Clippen: clipTop(), clipRight(), clipBottom() und clipLeft(). Wenn als Parameter nur die Element-ID übergeben wird, sollen diese Funktionen den aktuellen Wert der

231

10 DHTML: Cross-Browser-Strategien Kante, für die sie zuständig sind, zurückgeben. Wird hingegen zusätzlich ein weiterer Parameter übergeben, ändern sie die Kante auf den übergebenen Wert. leicht

11. Übung

Jetzt wollen wir unsere kleine Funktionsbibliothek einmal praktisch anwenden. Schreiben Sie eine Seite, deren Inhalt wie ein Filmabspann von unten nach oben über den Bildschirm läuft. Benutzen Sie dazu die Funktionen schiebe() und bewege(). Letztere brauchen Sie, um den Inhalt am Anfang an die Unterseite des Fensters zu bringen. Wie Sie die Fensterhöhe herausbekommen, erfahren Sie in Anhang 2 zu diesem Kapitel. mittel

12. Übung

Verbessern Sie die Lösung der vorigen Übung, so dass die Laufschrift erst mit 100px Abstand vom unteren Fensterrand erscheint und bereits 100px vor dem oberen Fensterrand wieder verschwindet. Das ergibt nicht nur einen hübschen Rand, es verhindert auch, dass man den Inhalt bereits vorzeitig lesen kann, indem man nach unten scrollt. Verwenden Sie weiterhin nur ein einziges positioniertes Element. mittel

13. Übung

Wir verbessern noch einmal unser Lauftext-Skript: Der Inhalt soll nun nicht mehr automatisch durchlaufen. Stattdessen stellen Sie zwei Links auf die Seite, mit denen man den Text nach oben bzw. nach unten bewegen kann. leicht

14. Übung

In den nächsten Übungen sehen wir uns an, wie man selbst definierte Objekttypen für den Cross-Browser-Einsatz anlegt. Auf den ersten Blick mag Ihnen dieser Weg, besonders wenn Sie mit objektorientierter Programmierung noch nicht so vertraut sind, vielleicht abwegig erscheinen. Für komplexe Seiten ist er aber oft die sauberste und übersichtlichste Methode. Wir werden einen Objekttyp XElement definieren, der für alle DHTML-Browser ungefähr das darstellt, was Netscape 4 durch den eingebauten Objekttyp Layer anbietet. Objekttypen definiert man durch eine Konstruktorfunktion: function XElement() { }

Wir können nun beispielsweise mit var grauschwarzeEbene = new XElement()

ein neues Objekt (eine Instanz) vom Typ XElement erzeugen.

232

Übungen Eine leere Konstruktorfunktion macht in der Regel wenig Sinn. In der Konstruktorfunktion werden wir vielmehr diejenigen Eigenschaften definieren, die alle Instanzen des Objekttyps besitzen sollen. Das sieht dann zum Beispiel so aus: function XElement() { this.x = 0; this.y = 0; }

Die Eigenschaften x und y sollen für die Koordinaten des XElements (das heißt: seine linke obere Ecke) stehen. Wie in Kapitel 4 erklärt verweist this auf die jeweils durch den Aufruf des Konstruktors erzeugte Instanz. Jede Instanz des Objekttyps XElement soll für ein bestimmtes div-Element auf der HTML-Seite stehen. Diese Elemente liegen vermutlich nicht alle in der linken oberen Ecke des Browserfensters. Wir könnten dem Konstruktor die aktuelle Position in Form von zwei Funktionsargumenten übergeben: function XElement(x, y) { this.x = x; this.y = y; } var grauschwarzeEbene = new XElement(100, 200);

Wir werden aber anders vorgehen: Der Konstruktor bekommt nur eine einzige Argumentstelle, und zwar übergeben wir ihm die ID des div-Elements. Es ist dann Aufgabe der Konstruktorfunktion, herauszufinden, an welcher Position sich das Element mit dieser ID befindet. Schreiben Sie nun diesen Konstruktor. mittel

15. Übung

Angenommen, auf einer HTML-Seite befindet sich ein positioniertes div-Element:

ein Gedanke

Mit Hilfe des Konstruktors XElement() wird ein Objekt angelegt, das dieses Element repräsentiert: var grauschwarzeEbene = new XElement("grauschwarz");

Was passiert, wenn Sie anschließend folgende JavaScript-Anweisungen aufrufen?

233

10 DHTML: Cross-Browser-Strategien alert(grauschwarzEbene.y); grauschwarzeEbene.y = 50; alert(grauschwarzeEbene.y); leicht

16. Übung

Erweitern Sie die Konstruktorfunktion XElement(), so dass sie neben der Position des Elements auch dessen Breite und Höhe sowie seinen z-index-Wert als Eigenschaften widerspiegelt. Außerdem sollen XElement-Objekte eine Eigenschaft el besitzen, die auf das HTML-Element verweist, das sie repräsentieren. Wie Sie die Breite und Höhe eines Elements herausbekommen, steht in Anhang 2. mittel

17. Übung

Es empfielt sich, neben el – der Referenz auf das repräsentierte Element selbst – noch eine Eigenschaft bereitzustellen, die auf die style-Property des Elements verweist. Nennen wir diese Eigenschaft css. Netscape 4 kennt kein style-Objekt, deshalb zeigt css hier einfach auf das Element selbst. Der Konstruktor sieht jetzt so aus: function XElement(id) { if (document.getElementById) { this.el = document.getElementById(id); this.css = this.el.style; } else if (document.all) { this.el = document.all[id]; this.css = this.el.style; } else if (document.layers) { this.el = document.layers[id]; this.css = this.el; } this.x = parseInt(this.css.left); this.y = parseInt(this.css.top); this.zIndex = this.css.zIndex; if (document.layers) { this.breite = this.el.document.width; this.hoehe = this.el.document.height; } else { this.breite = this.el.offsetWidth; this.hoehe = this.el.offsetHeight; } }

234

Übungen Bisher ist unser Cross-Browser-Objekt noch ziemlich nutzlos. Das ändert sich, wenn wir ihm jetzt ein paar Methoden verpassen. Objekt-Methoden werden genau wie Objekt-Eigenschaften definiert. Der Unterschied ist nur, dass dem Methodennamen als Wert die Referenz auf eine Funktion zugewiesen wird (also der Funktionsname ohne Klammern, vgl. Kapitel 4). Mit Hilfe von Methoden lösen wir die Schwierigkeit, der wir in Übung 15 begegneten. Sie erinnern sich: Die Änderung von XElement-Eigenschaften wirken sich nicht auf das repräsentierte HTML-Element aus. Geben Sie dem Objekttyp XElement eine Methode gehNach(x,y), die das HTML-Element an die übergebenen Koordinaten stellt. Die x- und y-Eigenschaften des XElement-Objekts sollen natürlich dabei auch aktualisiert werden. leicht

18. Übung

Mittlerweile sollte Ihnen dämmern, wozu Cross-Browser-Objekttypen gut sein können: Immer wenn Sie ein positioniertes Element definiert haben, das Sie hin- und herbewegen wollen, brauchen Sie nur eine entsprechende Instanz von XElement zu erzeugen und können dann dessen gehNach()-Methode benutzen, ohne sich um die drei verschiedenen Objektmodelle Gedanken zu machen. Und sollte demnächst zur allgemeinen Freude noch ein viertes Objektmodell auftauchen, dann brauchen Sie nur den Konstruktor XElement() zu verändern. Die konkreten Anwendungen bleiben, solange sie nur die Objektmethoden einsetzen, unberührt. Im Gegensatz zu Cross-Browser-Funktionen sind außerdem zusammengehörige Variablen und Funktionen auch ordentlich zusammen abgelegt. Erweitern Sie XElement noch um zwei weitere Methoden: zeige() und verstecke(). mittel

19. Übung

Als erste Anwendung des Cross-Browser-Objekttyps XElement lassen wir es nun regnen. Schreiben Sie eine Webseite mit 50 kleinen, grauen, länglichen Layern: die Regentropfen. Jeder Regentropfen wird durch ein eigenes XElement repräsentiert. Regentropfen fallen, wie Sie wissen, gewöhnlich von oben nach unten. Wenn sie am unteren Fensterrand angekommen sind, stellen Sie sie wieder nach ganz oben. Die horizontale Position überlassen Sie am besten dem Zufall. schwer

20. Übung

Setzen Sie XElement() jetzt ein, um das nicht besonders originelle, aber vermutlich beliebteste DHTML-Skript zu erstellen: Ein Menü, das ähnlich wie die Dateimanager vieler Betriebssysteme beim Klick auf einen Hauptpunkt eine Reihe von Unterpunkten einblendet und bei erneutem Klick wieder ausblendet.

235

10 DHTML: Cross-Browser-Strategien Ihr Menü braucht nur eine Untermenütiefe zu unterstützen, das heißt, Sie können annehmen, dass keine Unterpunkte im Menü vorgesehen sind, die selbst wieder Unterunterpunkte einblenden. schwer

21. Übung

Entwickeln Sie einen neuen Objekttyp KlappMenu, der ein ganzes Menü von der Art, wie wir es in der letzten Übung gebaut haben, repräsentiert. Im Unterschied zu XElement() erzeugt der KlappMenu-Konstruktor selbst die Elemente, die er repräsentiert. Das bedeutet: Im Konstruktor wird mit document.write der HTML-Quelltext des Menüs geschrieben. Objekte vom Typ KlappMenu müssen deshalb erzeugt werden, noch bevor die Seite fertig gerendert ist. Dem Konstruktor werden neben der Position des Menüs zwei Arrays übergeben: eine Liste mit den Hauptmenü-Punkten und eine mit den Untermenüs. Die Elemente des zweiten Arrays sind also selbst wieder Arrays, sie enthalten die Namen der Untermenü-Punkte und den dazugehörenden URL. Ein Aufruf könnte also wie folgt aussehen: ... <script> klappHaupt = new Array("Früchte", "Tonarten"); klappSub = new Array( new Array("Apfel", "apfel.html", "Birne", "birne.html", "Kirsche", "kirsche.html"), new Array("a Moll", "amoll.html", "cis Dur", "cisdur.html") ); klapp = new KlappMenu(20, 100, klappHaupt, klappSub);

Diese Anweisungen sollen ausreichen, um das gewünschte Menü, voll funktionsfähig, an der gewünschten Position auf der Seite erscheinen zu lassen. mittel

22. Übung

Eines haben wir bislang sowohl bei den Cross-Browser-Funktionen als auch bei den Methoden von XElement übersehen: Layer können ineinander verschachtelt sein:

236

Übungen Hier liegt für Netscape 4 das eine positionierte div-Element im document des andern. Wenn wir die ID tochter an den XElement-Konstruktor oder eine der Cross-Browser-Funktionen übergeben, erhielten wir eine Fehlermeldung, denn document.layers["tochter"]

existiert nicht. Die korrekte Referenz wäre zum Beispiel: document.layers["mutter"].document.layers["tochter"].

Wie könnte man diese Schwierigkeit umgehen? leicht

23. Übung

Viele der in diesem Kapitel vorgestellten Lösungen führen auf DHTML-unkundigen Browsern zu Fehlermeldungen. Zum Abschluss deshalb noch zwei Aufgaben zum Umgang mit solchen Besuchern. Häufig legt man, besonders bei komplexen Auftritten, neben der DHTML-Seite eine Alternativseite für alle die Browser an, die kein DHTML beherrschen. Es handelt sich dabei meist um eine einfache HTML-Seite, die die wichtigsten Inhalte und Links des Angebots zusammenfasst. (Bei Angeboten ohne Inhalt enthält sie folgerichtig nur den Hinweis, dass man den falschen Browser verwendet.) Schreiben Sie eine Browser-Umleitung, die Netscape ab Version 4 und die Windows-Versionen von Internet Explorer 4 und 5 zur DHTML-Seite schickt, alle anderen dagegen auf die Alternativ-Seite. Überlegen Sie sich, ob man auch Browser, die kein JavaScript verstehen, direkt zur Alternativseite bringen könnte (und wenn ja, wie). mittel

24. Übung

Würden Sie für jede Browserversion eine eigene Seite schreiben, dann hätten Sie am Ende etwa 200 Versionen, die bei jeder Änderung alle überarbeitet werden müssen. Am schönsten wäre es deshalb, eine einzige Seite für alle zu haben. Die DHTML-Seite sollte also am besten auch mit Browsern betrachtet werden können, die kein DHTML oder sogar kein JavaScript verstehen. Ob das möglich ist, müssen Sie im Einzelfall selbst entscheiden. Bei der folgenden Seite ist es möglich. Allerdings muss dazu der Quelltext etwas umgebaut werden. Versuchen Sie es. <script> function menuEinAus(){ ... } function zeige(seite){ ...

237

10 DHTML: Cross-Browser-Strategien }

Menü anzeigen

Bla bla

10.3

Tipps

Tipp zu 4: 왘 Geben Sie der Zelle eine ID.

Tipps zu 5: 왘 Wie kann man bei Netscape 4 Element-Inhalte wechseln? 왘 Nur bei Layer-Objekten lässt sich der Inhalt wechseln, und zwar mit der

document.write()-Methode. Wie lässt sich das für diese Aufgabe einsetzen? 왘 Theoretisch könnte man in die Zelle ein relativ positioniertes Element stel-

len, dessen Inhalt ausgetauscht wird. Das funktioniert aber nicht, weil der Navigator nur den Inhalt von absolut positionierten Layern überschreiben kann. (Es handelt sich um einen Bug, vgl. Netscape-Checkliste in Anhang 1.) Was man dagegen auch bei relativ positionierten Elementen ändern

238

Tipps kann, ist die visibility-Eigenschaft. Sie können also den Inhalt der Tabellenzelle, in ein relativ positioniertes span verpackt, sichtbar und unsichtbar machen. Hilft das weiter? 왘 Ja. Sie können nämlich auch die Koordinaten des relativ positionierten Lay-

ers ermitteln (siehe Anhang 2). 왘 An diese Koordinaten schieben Sie einen zweiten Layer, der absolut positio-

niert ist. Dessen Inhalt wechseln Sie dann mit document.write. Tipps zu 6: 왘 Wie Sie den Stunden-, Minuten- und Sekundenwert der aktuellen Zeit

herausbekommen, erfahren Sie in Kapitel 8. 왘 Übung 30 von Kapitel 9 zeigte Ihnen, dass beim Internet Explorer 5 Zeilen-

umbrüche und Leerzeichen im Quelltext nicht in TextNodes umgewandelt werden. (Davon ist übrigens nur die Windows-Version betroffen.) Ein Element wie

hat also keine ChildNodes. Erst wenn Sie beispielsweise hineinschreiben, bekommt uhr ein Kind, dessen nodeValue geändernt werden kann. Tipp zu 7: 왘 Sie brauchen nur die Schreib-Funktion aus der letzten Übung ein wenig zu

verallgemeinern. Tipps zu 9: 왘 Berechnen Sie, um wie viele Pixel das Element bei jedem Schritt nach rechts

und um wie viele es nach unten bewegt werden muss. Dabei helfen Ihnen die Funktion Math.sqrt(), die die Quadratwurzel einer Zahl liefert, und der Satz des Pythagoras. 왘 Rechnen Sie die horizontale und die vertikale Entfernung vom Zielpunkt

aus. Der Satz des Pythagoras liefert Ihnen dann die Gesamt-Entfernung. Was sagt Ihnen der Quotient aus horizontaler Entfernung und GesamtEnfernung? 왘 Er sagt Ihnen, um wie viel sich das Element in horizontaler Richtung

bewegt, wenn es einen Pixel auf das Ziel zugeht. Um wie viele Pixel muss also das Element pro Schritt nach rechts geschoben werden? 왘 Die Zahl der Pixel ist: (HorizontaleDistanz/GesamtDistanz)*Geschwindig-

keit.

239

10 DHTML: Cross-Browser-Strategien 왘 Wenn die Gesamt-Entfernung kleiner als die übergebene Geschwindigkeit

ist, stellen Sie das Element an den Zielpunkt und beenden die Bewegung. Vergessen Sie nicht, dass eine Bewegung auch nach links oder oben gehen kann! Tipps zu 10: 왘 Selbst wenn Sie nur einen clip-Wert setzen wollen, müssen Sie für Inter-

net Explorer und W3C alle vier Kanten-Abstände angeben. Dazu brauchen Sie die aktuellen Werte der anderen Kanten. 왘 Am einfachsten bekommen Sie diese Werte durch einen Aufruf der drei

jeweils anderen clip-Funktionen. 왘 Versuchen Sie, aus dem style.clip-String die vier Werte herauszulesen. 왘 Das geht zum Beispiel so:

var clipWerte = style.clip.split("rect(")[1].split(")")[0].split("px"); Diese etwas kryptische Anweisung liefert bei W3C und IE einen Array mit den vier Werten. Tipps zu 12: 왘 Sie brauchen die Funktionen clipTop() und clipBottom(). Vergessen Sie

nicht, dem div-Element clip-Werte zuzuweisen, bevor Sie diese Funktionen benutzen, sonst können Internet Explorer und Netscape 6 die aktuellen Werte nicht ermitteln. 왘 Die clip-Eigenschaften müssen bei jedem Bewegungsschritt angepasst wer-

den. Deshalb können Sie schiebe() nicht mehr verwenden. Sie müssen mit bewege(), clipTop() und clipBottom() auskommen. 왘 Sowohl Netscape als auch Internet Explorer zeigen gerne den vertikalen

Scrollbalken, obwohl er eigentlich gar nicht gebraucht wird. In so einem Fall setzen Sie bei Netscape 4 document.height auf den Wert von win dow.innerHeight, bei W3C-kompatiblen Browsern geben Sie dem bodyElement das CSS-Attribut overflow:hidden und setzen document.body. height auf die Fenster-Innenhöhe. Tipps zu 13: 왘 Schreiben Sie eine Funktion hoch(), die den Inhalt nach unten bewegt, und

eine Funktion runter(), die ihn nach oben schiebt. (Irritiert? Dann sehen Sie sich eine gewöhnliche Scrollleiste an: Wenn Sie auf den Abwärts-Pfeil drücken, bewegt sich der Fensterinhalt nicht etwa nach unten, sondern nach oben.)

240

Tipps 왘 Rufen Sie diese Funktionen im entsprechenden Link bei onmousedown auf.

onmouseup muss die Bewegung angehalten werden. Wie könnte man das erreichen? 왘 Definieren Sie eine globale Variable laeuft, die auf true gesetzt ist, wenn

der Inhalt gerade scrollt, andernfalls auf false. In den Funktionen hoch() und runter() sehen Sie dann nach, welchen Wert laeuft gerade hat und brechen im Fall von false die Bewegung ab. Beim ersten Aufruf der Funktionen müssen Sie laeuft auf true setzen. Die onmouseup-Anweisung lautet dann einfach: laeuft=false. Tipp zu 14: 왘 Vergessen Sie nicht, in der Konstruktorfunktion die drei gängigen Objekt-

modelle zu berücksichtigen. Bei Netscape 4 bekommen Sie die Position nicht auf dieselbe Weise wie bei Internet Explorer 4 oder beim W3C. Tipps zu 19: 왘 Wie Sie die Fensterhöhe und -breite herausbekommen, steht in Anhang 2. 왘 Erzeugen Sie die Tropfen-Elemente mit document.write() in einer Schleife.

Auch für die XElemente brauchen Sie keine 50 Variablen, nehmen Sie stattdessen einen Array. 왘 Math.random() gibt Ihnen eine Zufallszahl zwischen 0 und 1. 왘 Die Style-Definition für die Regentropfen könnte etwa so aussehen:

.tropf { position:absolute; width:2px; height:8px; clip:rect(0px 2px 8px 0px); background-color:#999999; layer-backgroundcolor:#999999 }

Tipps zu 20: Es gibt eine beachtliche Anzahl solcher Menüs im Internet und fast ebenso viele Variationen in der technischen Umsetzung. Ich kann Ihnen deshalb nur eine von vielen Möglichkeiten hier vorstellen. Wenn Sie eine ganz andere Lösung gefunden haben, dann kann die genauso gut oder besser sein. Wenn Sie aber bei Ihrem eigenen Ansatz nicht mehr weiterkommen (was bei dieser Übung kein Grund zur Sorge ist) oder bereits mehrere hundert Programmzeilen verbraucht haben, dann versuchen Sie es mit den folgenden Tipps. 왘 Erstellen Sie zuerst die Menü-Einträge ganz normal in HTML. Sie müssen sie

nur so in positionierte Elemente verpacken, dass Sie später mit JavaScript darauf zugreifen können.

241

10 DHTML: Cross-Browser-Strategien 왘 Der Quelltext für einen Menü-Punkt und sein Untermenü könnte etwa so

aussehen:

Früchte

Apfel
Birne
Kirsche

Ich nehme also für jeden Hauptmenüpunkt ein eigenes positioniertes Element. Die Unterpunkte kommen dagegen jeweils zusammen in einen divContainer. Das Menü ist so angelegt, dass es auch ohne JavaScript bedienbar ist: Die Unterpunkte verweisen über ihr href-Attribut direkt auf die entsprechende Seite. Die JavaScript-Funktion zeige(), die die Seite anzeigt (in einem Layer, einem neuen Fenster oder wie immer Sie wollen), wird onclick aufgerufen. Ich spare mir die zweite Nennung des Dateinamens, indem ich im onclickHandler stattdessen this.href einsetze. this ist eine Referenz auf das Element, in dem der Event-Handler steht, in diesem Fall also auf den Link. this.href zeigt folglich auf den href-Wert des Links. return false blockiert das Anspringen des href-Werts, wie es normalerweise passieren würde, wenn man den einen Link klickt. Noch dazu hat es den angenehmen Nebeneffekt, im Gegensatz zu ...

den Mauszeiger nicht in eine Sanduhr zu verwandeln und animierte gif-Grafiken auf der Seite weiter laufen zu lassen. Die CSS-Klassen .haupt und .sub enthalten lediglich Angaben über das Aussehen der Links. Zum Beispiel wollen wir nicht, dass die Menü-Einträge unterstrichen sind, und vielleicht sollen die Hauptmenü-Punkte etwas größer geschrieben sein als die Unterpunkte. 왘 Im head-Bereich der Seite bauen Sie jetzt den Konstruktor XElement() ein.

Eine Initialisierungsfunktion soll onload für jedes Menü-div ein XElementObjekt anlegen. Versuchen Sie es. Lesen Sie im nächsten Tipp, wie ich es gemacht habe.

242

Tipps 왘 Es erleichtert die Aufgabe, wenn Sie wie bei den Regentropfen eine

Namenskonvention für die Element-IDs einhalten. Bei mir heißen die Haupt-Einträge menu1, menu2 usw., die dazugehörigen Untermenüs menu1sub, menu2sub usw. Damit kann man zur Konstruktion der XElementObjekte eine for-Schleife benutzen. Wir müssen nur wissen, wie oft die Schleife durchlaufen werden soll. Im Grunde wäre es möglich, dies automatisch zu ermitteln, indem wir bei jedem Durchgang überprüfen, ob ein Element namens menuN existiert, wobei N für den aktuellen Wert der Zählvariablen steht. Ich mache es mir aber leicht und setze stattdessen eine globale Variable hauptMenuPunkte auf den entsprechenden Wert. Wenn man die Zahl der Menüpunkte ändert, muss eben jedesmal der Wert dieser Variablen angepasst werden. Bei der Gelegenheit definiere ich auch gleich zwei weitere globale Variablen, menuX und menuY, die die gewünschte Position (links/oben) des Menüs enthalten. hauptMenuPunkte = 3; menuY = 100; menuX = 20; function init() { hauptMenu = new Array(); subMenu = new Array(); for (i=1;i<=hauptMenuPunkte;i++) { hauptMenu[i] = new XElement("menu"+i); subMenu[i] = new XElement("menu"+i+"sub"); subMenu[i].verstecke(); } ordnen(); }

Wie Sie sehen, lege ich zwei Arrays an: Eines enthält die HauptmenüPunkte, das andere die dazugehörigen Untermenüs. Da letztere am Anfang alle ausgeblendet sind, verstecke ich sie auch sofort mit der entsprechenden XElement-Methode. Am Ende der init()-Funktion wird die Funktion ordnen() aufgerufen. Und das ist die nächste Aufgabe: 왘 Wir wollen die Menü-Einträge untereinander anordnen. Bei jedem Auf-

und Zuklappen eines Untermenüs muss diese Ordnung natürlich revidiert werden, denn beim Aufklappen eines Menüpunkts verschiebt sich die Position aller darunter liegenden Punkte nach unten, umgekehrt beim Zuklappen. Die Funktion ordnen() wird deshalb bei jeder Menü-Änderung aufgerufen. Sie sieht nach, welche Menüpunkte aufgeklappt sind, und positioniert die nachfolgenden Punkte entsprechend. Der nächste Tipp verrät Ihnen, wie die Funktion bei mir aussieht.

243

10 DHTML: Cross-Browser-Strategien 왘 Ich gehe einfach das Menü von oben nach unten durch. Eine Variable posY

zählt die vertikale Position mit, an der ich gerade stehe. Am Anfang steht sie auf menuY, dem Wert für die Oberkante des Menüs. Für jedes sichtbare Element addiere ich die Element-Höhe: function ordnen() { var posY = menuY; for (i=1;i<=hauptMenuPunkte;i++) { hauptMenu[i].gehNach(menuX,posY); posY+=hauptMenu[i].hoehe; if (subMenu[i].sichtbar) { subMenu[i].gehNach(menuX+20,posY); posY+=subMenu[i].hoehe; } } } 왘 Jetzt sind wir fast fertig. Es fehlt nur noch die Funktion klapp(). Sie schaut

nach, ob das übergebene Untermenü sichtbar ist, schaltet es entsprechend an oder aus und ruft dann ordnen() auf. Die ganze Lösung am Stück finden Sie im Lösungsteil. Tipps zu 21: 왘 Definieren Sie alle Funktionen und Variablen aus der letzten Übung als

Methoden und Eigenschaften von KlappMenu. Aus der Funktion klapp() wird zum Beispiel die Methode: this.klapp = KlappMenu_klapp; ... function KlappMenu_klapp(nr) { if (this.subMenu[nr].sichtbar) this.subMenu[nr].verstecke(); else this.subMenu[nr].zeige(); this.ordnen(); } 왘 Der schwierigste Teil der Übung besteht darin, das Menü korrekt mit docu-

ment.write ins Dokument zu schreiben. Hier müssen Sie die übergebenen Arrays durchgehen und um die Array-Einträge herum die div- und Link-Elemente aufbauen. Es gibt dabei zwei besondere Schwierigkeiten: Zum einen muss jede div-ID eindeutig sein. Auch wenn die Konstruktorfunktion mehrmals aufgerufen wird, darf kein Name doppelt vergeben sein. Es empfielt sich deshalb, eine globale Variable klappMenuZaehler anzulegen, die bei jedem Konstruktor-Aufruf um eins hochgezählt wird. In die IDs der dynamisch erzeugten Elemente bauen Sie dann die Nummer der aktuellen Instanz mit ein.

244

Tipps Ein weiteres Problem ist, dass Sie in den Links Methoden der jeweiligen KlappMenu-Instanz aufrufen wollen. So funktioniert es zum Beispiel nicht: ' ... onclick="'+this+'.zeige(this.href) ... '

Hier wird der Broswer this über dessen toString()-Methode in einen String verwandeln. Je nach Browser kommt dabei im dynamisch geschriebenen Quelltext etwas heraus wie: ... onclick="[object Object].zeige(this.href) ...

Und das führt natürlich bei einem Klick nur zu einer Fehlermeldung. Sie brauchen eine globale Variable, die auf die aktuelle Objektinstanz verweist. Eine solche wird bei der Instanz-Erzeugung angelegt: klapp = new KlappMenu(...)

Leider können Sie aber in der Konstruktorfunktion nicht herausbekommen, wie diese Variable (hier klapp) heißt. Ein möglicher Ausweg ist, dem Konstruktor als zusätzliches Argument den Variablennamen zu übergeben. Sie können aber ebenso gut eine neue globale Variable vom Konstruktor aus anlegen: function KlappMenu(...) { dieseVariableVerweistAufDieErzeugteInstanz = this;

Auch hier brauchen Sie jedoch einen eindeutigen Namen, der bei jedem Konstruktoraufruf wechselt. Setzen Sie also wieder den Zähler ein. Beispielsweise könnten Sie die Variable so definieren: function KlappMenu(...) { self["klappMenu"+klappMenuZaehler] = this;

Ist der klappMenuZaehler zum Beispiel gerade bei 4, entsteht so die globale Variable klappMenu4, die auf die gerade erzeugte KlappMenu-Instanz zeigt. Falls die Schreibweise mit den eckigen Klammern Sie irritiert: Globale Variablen sind in JavaScript Eigenschaften des window-Objekts. Die Anweisung bla = 1 ist nur eine Kurzform von window.bla = 1 oder self.bla = 1. Wie jede Objekt-Eigenschaft können Sie auch die Eigenschaften von window nicht nur über den Punkt-Operator ansprechen, sondern auch über eckige Klammern, in denen der Name der Eigenschaft als String angegeben wird. self["klappMenu"+4] = this ist also gleichbedeutend mit self.klapp Menu4 = this oder kurz klappMenu4 = this. Die erste Version erlaubt jedoch, bei der Definition Variablen einzusetzen und String-Operationen (wie »+«) zu benutzen, ohne dabei eval zu bemühen. 왘 Netscape 4 mag es nicht, wenn div-Tags mit style-Attribut per document.

write() geschrieben werden. Definieren Sie deshalb eine CSS-Klasse .abs { position:absolute }

und schreiben Sie in die div-Tags statt der inline-style-Angabe: class="abs".

245

10 DHTML: Cross-Browser-Strategien Tipp zu 22: 왘 Es gibt mal wieder mehrere Ansätze. Einer wäre, der Funktion nicht die ID,

sondern gleich eine Referenz auf das Element zu übergeben. Dann müsste man allerdings beim Aufruf immer eine Browser-Verzweigung durchführen. Häufig wird deshalb ein anderer Weg gewählt: Man übergibt der Konstruktorfunktion bei verschachtelten Layern neben der Element-ID noch ein zweites Argument, das den übergeordneten Layer angibt. Was muss in der Funktion geändert werden? Tipps zu 24: 왘 Sie müssen den (nicht abgedruckten) Inhalt der beiden DHTML-Funktionen

vor veralteten Browsern verstecken. Wenn Sie die Funktionen aber einfach in einen JavaScript1.2-Bereich stellen, liefern die alten Browser eine Fehlermeldung, weil beim Klick auf die Menübereiche für sie undefinierte Funktionen aufgerufen werden. Wie lässt sich das verhindern? 왘 Ändern Sie die Reihenfolge der Seitenelemente. Eins der Elemente ist für

DHTML-unfähige Browser überflüssig. Versuchen Sie es für diese unsichtbar zu machen.

10.4

Lösungen

Lösung zu 1: Mit Netscape 4: document.layers["vater"].document.layers["sohn"]

Mit Internet Explorer: document.all["sohn"]

Im W3C DOM: document.getElementById("sohn")

Lösung zu 2: Ein Element wird unsichtbar, wenn man beispielsweise die untere clip-Kante an die Element-Obergrenze legt, oder die rechte clip-Kante an die linke Element-Grenze, oder beides: if (document.getElementById) // W3C document.getElementById("sohn").style.clip = 'rect(0px 0px 0px 0px)'; else if (document.all) // IE document.all.sohn.style.clip = 'rect(0px 0px 0px 0px)'; else if (document.layers) // Netscape 4 document.vater.document.sohn.clip.bottom = 0;

246

Lösungen Lösung zu 3: if (document.getElementById) // W3C document.getElementById("vater").style.top = "200px"; else if (document.all) // IE document.all["vater"].style.top = "200px"; else if (document.layers) // Netscape 4 document.layers["vater"].top = 200;

Absolute Positionierung ist immer relativ zum nächsthöheren positionierten Element. Beim vater ist dies die Wurzel des Hauptdokuments, welche immer die Koordinaten 0/0 hat, beim sohn ist es das vater-Element. Mit dem vater wurde also auch der sohn verschoben: Er befindet sich jetzt an den Koordinaten 10/210. Es gibt dabei keine Unterschiede zwischen den Browsern. Lösung zu 4: Angenommen, die Tabellenzelle, die überschrieben werden soll, hat die ID »zelle«. Dann geht das beispielsweise so: function aendern(text) { if (document.getElementById) { var zelleEl = document.getElementById("zelle"); zelleEl.firstChild.nodeValue = text; } else if (document.all) { document.all.zelle.innerText = text; } }

Lösung zu 5: Und so sieht die Cross-Browser-Lösung aus: <script> function aendern(text){ if (document.getElementById) { var zelleEl = document.getElementById("zelle"); zelleEl.firstChild.nodeValue = text; } else if (document.all) { document.all.zelle.innerText = text; } else if (document.layers) { document.hilfsLayer.top = document.zelle.pageY; document.hilfsLayer.left = document.zelle.pageX; document.hilfsLayer.document.write(text); document.hilfsLayer.document.close(); document.zelle.visibility = "hidden";

247

10 DHTML: Cross-Browser-Strategien document.hilfsLayer.visibility = "visible"; } }

erste Zelle

<span id="zelle" style="position:relative"> zweite Zelle

Zelleninhalt ändern

In Kapitel 9 habe ich erwähnt, dass auch td-Elemente durch Positionierung in Layer verwandelt werden. Anstatt in die Tabellenzelle ein span-Element zu setzen, ginge deshalb theoretisch auch: zweite Zelle

Die Erfahrung zeigt aber, dass positionierte Tabellenzellen häufig Ärger machen. Internet Explorer 4 kommt damit zum Beispiel überhaupt nicht klar. Ganz ähnlich können Sie übrigens vorgehen, um einen Rollover-Effekt bei TextLinks mit Netscape 4 zu erreichen. Zugegeben, für diese Lösung musste man um ein paar Ecken denken. Das Ergebnis ist immer noch nicht perfekt: Die Zellengröße passt sich beim Netscape Navigator nicht dynamisch an den Inhalt an – wenn man zu viel hineinschreibt, ragt der Inhalt einfach über die Zelle hinaus.

248

Lösungen Lösung zu 6: Die Zeit es ist:

... hier steht der ganze Inhalt ...

Vorausgesetzt, die Funktionen bewege() und schiebe() sind auf der Seite eingebunden, brauchen wir nur noch folgende Zeilen aufzurufen, wenn die Seite fertig geladen ist: if (window.innerHeight) var fensterHoehe = window.innerHeight;

252

Lösungen else var fensterHoehe = document.body.clientHeight; bewege("inhalt", 0, fensterHoehe); schiebe("inhalt", 0, -1000, 2);

So wird der Inhalt einfach bis -1000 Pixel nach oben gezogen. Besser wäre natürlich, die Größe des Elements zu messen und den Wert entsprechend anzupassen. Lösung zu 12: function init(){ if (document.all) { fensterHoehe = document.body.clientHeight; fensterBreite = document.body.clientWidth; document.all["inhalt"].style.clip = "rect(0px "+fensterBreite+"px 0px 0px)"; } else { fensterHoehe = window.innerHeight; fensterBreite = window.innerWidth; if (document.layers) document.height = fensterHoehe; else if (document.getElementById) document.getElementById("inhalt").style.clip = "rect(0px "+fensterBreite+"px 0px 0px)"; } if (document.getElementById) document.body.style.height = fensterHoehe+"px"; posY = fensterHoehe-100; lauf(); } window.onload = init; function lauf(){ posY-=2; clipTop("inhalt", 100-posY); clipBottom("inhalt", fensterHoehe-100-posY); bewege("inhalt", 0, posY); if (posY>-1000) setTimeout("lauf()",40); }

Lösung zu 13: Hier erst einmal die beiden Links: hoch

253

10 DHTML: Cross-Browser-Strategien runter

Gewöhnen Sie sich an, bei MouseDown-Handlern immer ein return false einzufügen, weil andernfalls auf MacIntosh plötzlich das Kontextmenü angezeigt wird. Dann brauchen wir wieder die bekannte Initialisierung, die onload oder am Ende des body-Bereichs ausgeführt wird: function init(){ if (document.all) { fensterHoehe = document.body.clientHeight; fensterBreite = document.body.clientWidth; document.all["inhalt"].style.clip = "rect(0px "+fensterBreite+"px 0px 0px)"; } else { fensterHoehe = window.innerHeight; fensterBreite = window.innerWidth; if (document.layers) document.height = fensterHoehe; else if (document.getElementById) document.getElementById("inhalt").style.clip = "rect(0px "+fensterBreite+"px 0px 0px)"; } if (document.getElementById) document.body.style.height = fensterHoehe+"px";

Weil der Inhalt diesmal nicht gleich zu scrollen beginnt, müssen wir ihn bei der Initialisierung schon richtig positionieren und clippen: bewege("inhalt", 0, 50); clipTop("inhalt", 0); clipBottom("inhalt", fensterHoehe-100); }

Schließlich werden die beiden globalen Variablen und die Scroll-Funktionen definiert: posY = 50; laeuft = 0; function hoch(){ posY+=2; clipTop("inhalt", 50-posY); clipBottom("inhalt", fensterHoehe-50-posY); bewege("inhalt", 0, posY); if (laeuft) setTimeout("hoch()",40); }

254

Lösungen function runter(){ posY-=2; clipTop("inhalt", 50-posY); clipBottom("inhalt", fensterHoehe-50-posY); bewege("inhalt", 0, posY); if (laeuft) setTimeout("runter()", 40); }

Sie haben damit eine Seite, die man ohne die Standard-Scrollleiste des Browsers hoch- und runterscrollen kann. Um das Ganze schöner zu machen, können Sie anstelle der einfachen TextLinks hübsche Pfeil-Buttons nehmen, die Sie an der Ober- und Unterseite des Fensters positionieren. Sogar die normalerweise zwischen den Pfeilbuttons liegende Leiste mit dem beim Scrollen wandernden Balken lässt sich mit DHTML realisieren – allerdings nicht ohne einigen Aufwand. Lösung zu 14: function XElement(id) { if (document.getElementById) { var el = document.getElementById(id); this.x = parseInt(el.style.left); this.y = parseInt(el.style.top); } else if (document.all) { this.x = document.all[id].style.pixelLeft; this.y = document.all[id].style.pixelTop; } else if (document.layers) { this.x = document.layers[id].left; this.y = document.layers[id].top; } }

Lösung zu 15: Der erste Aufruf von alert(grauschwarzEbene.y)

zeigt die aktuelle y-Position des div-Blocks, also 200. Dann wird der y-Wert von grauschwarzeEbene mit grauschwarzeEbene.y = 50;

auf 50 gesetzt. Der zweite Aufruf von alert(grauschwarzEbene.y)

liefert deshalb 50.

255

10 DHTML: Cross-Browser-Strategien Das bedeutet aber nicht, dass der div-Block sich um 150 Pixel nach oben bewegt hat. Er steht immer noch an seiner alten Stelle. Es wurde der y-Wert des Objekts grauschwarzeEbene geändert, nicht der des HTML-Elements. Der JavaScript-Interpreter kann bei der Ausführung nicht ahnen, dass das Objekt grauschwarzeEbene dieses div-Element repräsentieren soll. Es gibt auch in JavaScript keine Möglichkeit, den y-Wert des Objekts mit dem style.top-Wert des HTML-Elements so zu koppeln, dass eine Änderung des einen immer eine Änderung des anderen nach sich zieht. Wir werden bald sehen, wie man diese Schwierigkeit umgeht. Merken Sie sich an dieser Stelle nur, dass ein Objekt vom Typ XElement für JavaScript nicht ein und dasselbe Objekt ist wie das div-Element, welches es repräsentiert. Lösung zu 16: Wir definieren zuerst die Eigenschaft el. Wir können sie dann gleich gebrauchen, um die anderen Werte zu bestimmen. function XElement(id) { if (document.getElementById) this.el = document.getElementById(id); else if (document.all) this.el = document.all[id]; else if (document.layers) this.el = document.layers[id]; if (document.layers) { this.x = this.el.left; this.y = this.el.top; this.zIndex = this.el.zIndex; this.breite = this.el.document.width; this.hoehe = this.el.document.height; } else { this.x = parseInt(this.el.style.left); this.y = parseInt(this.el.style.top); this.zIndex = this.el.style.zIndex; this.breite = this.el.offsetWidth; this.hoehe = this.el.offsetHeight; } }

Wie Sie sehen, erspart uns this.el die Verzweigung zwischen Microsoft- und W3C-Syntax: Bei beiden findet sich beispielsweise der z-index-Wert unter this.el.style.zIndex. Lösung zu 17: function XElement_gehNach(x,y) { // Element verschieben: this.css.left = x; this.css.top = y;

256

Lösungen // Werte aktualisieren: this.x = x; this.y = y; } function XElement(id) { ... die bisherigen Angaben ... this.gehNach = XElement_gehNach; }

Die css-Eigenschaft stellt sich hier als sehr nützlich heraus: Wir brauchen überhaupt keine Browser-Verzweigung. Vielleicht fragen Sie sich, wieso das jetzt funktioniert, wohingegen die einfache Änderung der x- und y-Eigenschaften keine Wirkung zeigte. Der Grund ist: Die Werte von XElement.x und XElement.y sind Kopien der entsprechenden div-Koordinaten. Ändern wir diese Kopien, dann bleiben die Originale unberührt. Dagegen sind XElement.el und XElement.css keine Kopien der HTML-Objekte bzw. ihrer Style-Eigenschaften, sondern Referenzen auf diese. Wenn wir deshalb css.left ändern, dann ändern wir tatsächlich die StyleEigenschaft left des HTML-Elements. In JavaScript werden grundsätzlich einfache Datentypen wie Zahlen und Zeichenketten bei einer Zuweisung kopiert, wohingegen bei komplexen Datentypen wie Objekten und Funktionen eine Referenz angelegt wird. In ihrem derzeitigen Umfang bietet JavaScript keine Einflussmöglichkeit auf dieses Verhalten. Lösung zu 18: Hier ist der vollständige Konstruktor, wie wir ihn in den nächsten Übungen verwenden wollen: function XElement(id) { if (document.getElementById) { this.el = document.getElementById(id); this.css = this.el.style; } else if (document.all) { this.el = document.all[id]; this.css = this.el.style; } else if (document.layers) { this.el = document.layers[id]; this.css = this.el; }

257

10 DHTML: Cross-Browser-Strategien this.x = parseInt(this.css.left); this.y = parseInt(this.css.top); this.zIndex = this.css.zIndex; this.sichtbar = true; if (document.layers) { this.breite = this.el.document.width; this.hoehe = this.el.document.height; } else { this.breite = this.el.offsetWidth; this.hoehe = this.el.offsetHeight; } this.gehNach = XElement_gehNach; this.zeige = XElement_zeige; this.verstecke = XElement_verstecke; } function XElement_gehNach(x,y) { this.css.left = x; this.css.top = y; this.x = x; this.y = y; } function XElement_zeige() { this.css.visibility = "visible"; this.sichtbar = true; } function XElement_verstecke() { this.css.visibility = "hidden"; this.sichtbar = false; }

Ein universell einsetzbarer Objekttyp müsste natürlich noch mehr können, zum Beispiel bräuchte er Methoden zum Clipping, auch eine unserer schiebe()Funktion entsprechende Methode wäre nützlich. Wenn Sie wollen, könnten Sie auch eine Methode wechsleHintergrundFarbe() oder geheDreiMalImKreis() definieren. Lösung zu 19: Angenommen, im head der Seite ist der XElement-Konstruktor und die StyleDefinition für die Regentropfen eingebaut. Dann schreiben wir im body die 50 Tropfen:

258

Lösungen for (i=0;i<50;i++) { var str = '

'; document.write(str); }

Eine init()-Funktion erzeugt die XElement-Instanzen und verteilt die Tropfen zufällig auf dem Bildschirm. Dazu wird als Erstes die Fenstergröße ausgemessen: function init() { if (window.innerWidth) { fensterBreite = innerWidth; fensterHoehe = innerHeight; } else { fensterBreite = document.body.clientWidth; fensterHoehe = document.body.clientHeight; } tropfen = new Array(); for (i=0;i<50;i++) { tropfen[i] = new XElement("tropfen"+i); tropfen[i].gehNach(Math.random()*(fensterBreite-15), Math.random()*(fensterHoehe-15)); } setInterval("regne()",40); } window.onload = init;

Ich habe ein bisschen Abstand zum rechten und unteren Fensterrand gelassen, damit keine Regentropfen darüber hinausstehen und die Scrollleiste angezeigt wird. Wie in init() festgelegt, wird von jetzt an alle 40 Millisekunden die Funktion regne() aufgerufen. Darin schieben wir alle Tropfen ein Stück nach unten. Die, die schon ganz unten sind, verteilen wir wieder an der Fensteroberkante. function regne(){ for (i=0;i
259

10 DHTML: Cross-Browser-Strategien Lösung zu 20: Ausführliche Kommentare zum folgenden Quelltext entnehmen Sie den Tipps zu dieser Übung. <style type="text/css"> a.haupt { text-decoration:none; font-family:Verdana,Arial,sans-serif; font-size:14pt; } a.sub { text-decoration:none; font-family:Verdana,Arial,sans-serif; font-size:12pt; } <script language="JavaScript">
260

Lösungen } } } function klapp(nr) { if (subMenu[nr].sichtbar) subMenu[nr].verstecke(); else subMenu[nr].zeige(); ordnen(); } // -->

Früchte

Apfel
Birne
Kirsche

Tonarten

a Moll
[usw.]

261

10 DHTML: Cross-Browser-Strategien Zu verbessern wäre jetzt nur noch, dass das Ganze bei Browsern, die wie Netscape 3 und IE 3 zwar JavaScript, aber kein DHTML kennen, nicht zu Fehlermeldungen führt. Wie man dabei vorgeht, üben wir demnächst. Lösung zu 21: klappMenuZaehler = 0; function KlappMenu(x,y,hauptArray,subArrays) { this.nr = klappMenuZaehler++; // Referenz erzeugen: self["klappMenu"+this.nr] = this; this.hauptMenuPunkte = hauptArray.length; this.menuY = y; this.menuX = x; this.ordnen = KlappMenu_ordnen; this.klapp = KlappMenu_klapp; // Menü schreiben var str = ""; for (var i=0;i' + '' + hauptArray[i] + '

'; // Untermenue: str+=''; } document.write(str); this.hauptMenu = new Array(); this.subMenu = new Array(); for (i=0;i
262

Lösungen function KlappMenu_ordnen() { var posY = this.menuY; for (i=0;i
Mit Hilfe dieses Konstruktors können Sie jetzt ohne großen Aufwand 27 Klappmenüs auf Ihrer Seite platzieren, wenn es Ihnen gefällt. Lösung zu 22: Der parent-Layer wird am besten als String (und nicht als Referenz) übergeben, denn sonst bräuchte man ja beim Aufruf wieder Browser-Verzweigungen. Ein Aufruf sieht also etwa so aus: Xtochter = new XElement("tochter", "document.mutter");

Wie gehen wir jetzt in der Konstruktorfunktion damit um? Es muss lediglich die Definition von el geändert werden. Am einfachsten geht das mit eval: function XElement(id, parent) { if (document.layers) { if (parent) this.el = eval(parent + ".document." +id); else this.el = document.layers[id]; } ... der Rest bleibt wie gehabt... }

eval führt den JavaScript-Code aus, der ihm als String übergeben wird. Dabei wird intern ein neuer Skript-Block erzeugt, was die Ausführung leider etwas verzögert und fehleranfällig macht. Um ohne eval auszukommen, könnten wir den parent-String durchsuchen und daraus von Hand die Referenz auf den übergeordneten Layer zusammensetzen: function XElement(id, parent) { if (document.layers) { if (parent) {

263

10 DHTML: Cross-Browser-Strategien var vorfahren = parent.split(1.*document\./); var par = window; for (var i=1; i
Hier wird vorausgesetzt, dass die übergeordneten Layer immer als »document.layerID" übergeben werden und nicht etwa als "document.lay ers.layerID" oder "document.layers['layerID']". Eine andere, und vermutlich die schönste Lösung der Aufgabe bestünde darin, überhaupt keinen zweiten Parameter zu benutzen und stattdessen die Konstruktorfunktion nach dem Ziel-Element suchen zu lassen. Dazu müsste sie rekursiv die document.layers-Hierarchie durchwandern. Lösung zu 23: Eine einfache Lösung ist diese: <script> bitte eintreten

Bei Browsern ohne JavaScript muss der Link »bitte eintreten« geklickt werden, um zur Alternativseite zu gelangen. Dies lässt sich umgehen, indem wir die Umleitungsseite selbst zur Alternativseite machen:

264

Lösungen Willkommen <script> ... hier steht der Text für DHTML-unkundige Browser...

Eine Browser-Umleitung ist aber auch ohne JavaScript möglich, und zwar mit Hilfe dieses meta-Tags: <meta http-equiv="refresh" content="10;URL=irgendwohin.html">

Die erste Angabe im content-Attribut bestimmt die Zeit (hier 10 Sekunden), nach der die Seite mit der angegebenen Adresse geladen wird. Damit können wir nun auch JavaScript-unkundige Browser umleiten. Eine weitere Lösung der Aufgabe sieht also so aus: Willkommen <script> <meta http-equiv="refresh" content="0;URL= alternativSeite.html">

265

10 DHTML: Cross-Browser-Strategien Hereinspaziert

Ich habe den Link zur Alternativseite vorsichtshalber nicht weggenommen. Schließlich könnte es ja Browser geben, die nicht nur kein JavaScript kennen, sondern auch mit dem Meta-Tag nichts anzufangen wissen. Übrigens sollte wegen eines Bugs in Netscape 4 die JavaScript-Umleitung im Quelltext immer oberhalb des Meta-Tags stehen. Lösung zu 24: Die DHTML-Funktionen sollen vor alten Browsern versteckt werden. Eine Möglichkeit, dies ohne Fehlermeldungen zu erreichen, ist diese: <script> <script language="JavaScript1.2">

Die Funktionen werden einfach zweimal definiert, zuerst als leere DummyFunktionen für alle Browser, dann werden sie für JavaScript1.2-kompatible Browser mit den richtigen Funktionen überschrieben. Da aber Opera zum Beispiel auch als JavaScript1.2 gekennzeichnete Anweisungen ausführt, ist es sicherer, statt der ganzen Funktionsdefinition nur den Funktionsinhalt zu verstecken: <script>
266

Lösungen function menuEinAus(){ if (!dhtml) return; ... } function zeige(seite){ if (!dhtml) return; ... } // -->

Diesmal habe ich nicht den UserAgent abgefragt, sondern einfach ein Objekt gesucht, das die »richtigen« W3C-Browser kennen, Opera aber nicht: document.documentElement. Im body empfehlen sich drei Änderungen: Erstens bringen wir den Block mit dem Inhalt an den Anfang der Seite. Für DHTML-fähige Browser wird die Position ohnehin über CSS definiert, deshalb können wir die divs im Quelltext nach Belieben umsortieren. Als Zweites wollen wir für Nicht-DHTML-Browser den Link »Menü anzeigen« loswerden. Das Menü ist schließlich in diesen Browsern ohnehin immer zu sehen. Wir schreiben den Link deshalb für die »richtigen« Browser per JavaScript ins Dokument. Schließlich sollen die Links im Menü auch ohne JavaScript funktionieren. Dazu ändern wir die href-Eigenschaft in die Adresse der entsprechende Seite und rufen die Funktion zeige() bei onclick auf. Der onclick-Handler gibt false zurück, um den Link zu deaktivieren. Der body-Bereich sieht jetzt so aus:

Bla bla

class="menu">Seinstreue
class="menu">Selbstverzweigung
class="menu">Farnwalduniversum
class="menu">Samtallergie

Lösung zu 10: Kommentare im Quelltext zeigen an, wo sich im Vergleich zur Lösung der vorigen Übung etwas geändert hat. <script> function init() { menu = (document.all) ? document.all["container"] : (document.layers) ? document.layers["container"] : document.getElementById("container"); menucss = (document.layers) ? menu : menu.style; menu.onmouseout = menuOut; menu.onmouseover = menuOver; // den Handler für die rechte Maustaste registrieren: if (document.captureEvents) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown = menuAn; } else if (document.all && document.getElementById) { document.oncontextmenu = menuAn; } } function menuOut(){ if (document.layers) menu.visibility="hidden"; else timer=setTimeout('menucss.visibility="hidden"',100); }

299

11 Erweitertes Event-Handling function menuOver(){ if (window.timer) clearTimeout(timer); } function menuAn(e){ // Diese Funktion bestimmt jetzt den Ort des Maus-Events, // positioniert das Menü an die entsprechende Stelle und // macht es sichtbar. Außerdem wird die Anzeige des // Kontextmenüs unterdrückt. if (e && e.which != 3) { // wenn bei Netscape nicht die rechte Maustaste // gedrückt ist, abbrechen: return true; } if (menucss.visibility=="show" || menucss.visibility=="visible") return; if (document.all) { menucss.left = event.clientX+document.body.scrollLeft; menucss.top = event.clientY+document.body.scrollTop; menucss.visibility = "visible"; } else { menucss.left = e.pageX; menucss.top = e.pageY; menucss.visibility = "visible"; } // Standard-Reaktion verhindern return false; }

Das Ganze funktioniert natürlich nicht auf dem MacIntosh. Selbst wenn dort eine rechte Maustaste vorhanden ist können die Browser sie nicht auswerten. Der oncontextmenu-Handler hat beim Internet Explorer auf MacIntosh auch keine Wirkung. Lösung zu 11: <script> var erlaubteZeichen = "0123456789"; function pruefen(e) { if (e) var keyC = e.which; else var keyC = event.keyCode; var zeichen = String.fromCharCode(keyC); if (erlaubteZeichen.indexOf(zeichen)>-1) return true; else return false; }

300

Lösungen function init(){ document.formular.zahlEingabe.onkeydown = pruefen; } window.onload = init;

Das funktioniert leider nicht mit Internet Explorer 4 auf MacIntosh, da dieser den Rückgabewert des Handlers ignoriert. Lösung zu 12: Wir wollen die Lösung Schritt für Schritt durchgehen. Zuerst der vorgegebene HTML-Teil: Eine DHTML-Textarea Beweisen Sie Gödels zweites Unvollständigkeitstheorem:

Nun folgt der Script-Bereich. <script language="JavaScript1.2" type="text/javascript">

Hier registrieren wir als Erstes einen Handler für Keypress-Events: if (document.captureEvents) // Netscape document.captureEvents(Event.KEYPRESS) document.onkeypress = eingabe;

Keypress hat den Vorteil, dass wir uns so (anders als bei Keydown und Keyup) das Abfragen der Umschalt-Taste und die Umrechnung von Groß- und Kleinbuchstaben beim Internet Explorer sparen können. Dann wird eine Variable angelegt, die den Inhalt der selbst gebastelten »Textarea« speichert. Im Moment ist sie noch leer: var inhalt="";

301

11 Erweitertes Event-Handling Die Funktion schreib() überträgt den Wert dieser Variablem in das div-Element: function schreib() { var str = inhalt+"|"; if (document.layers) { // Netscape document.rahmen.document.feld.document.write(str); document.rahmen.document.feld.document.close(); } else if (document.all) { // IE feld.innerText = str; } }

Wie Sie sehen, hänge ich hinter den Text immer noch das Zeichen »|«, das als Cursor dient. Jetzt zur Funktion eingabe(), die bei jedem Keypress-Event aufgerufen wird: function eingabe(e) { var keyCode=(e) ? e.which : event.keyCode; if (keyCode == 8) inhalt = inhalt.substring(0, inhalt.length-1); else if (keyCode>0){ var buchstabe = String.fromCharCode(keyCode); inhalt += buchstabe; } schreib(); }

Sehen wir uns das genauer an: In der ersten Zeile wird der Variablen keyCode der Tastatur-Code der gedrückten Taste zugewiesen: Bei Netscape erhalten wir diesen aus der Eigenschaft which des dem Handler übergebenen event-Objekts e, beim Internet Explorer aus der Eigenschaft keyCode des Objekts window.event. Der KeyCode 8 steht für die Backspace-Taste, die das Zeichen links vom Cursor löschen soll. Deshalb wird beim Eintreffen dieses Codes inhalt mit Hilfe der substring()-Methode um einen Buchstaben verkürzt. Wenn eine Taste gedrückt wurde, die einen KeyCode größer als 0 liefert – also nicht z.B. eine Cursor-Taste oder Shift –, dann holen wir uns mit String. fromCharCode() das dazugehörige Zeichen, hängen es hinten an die Variable inhalt und aktualisieren den Inhalt der »Textarea«, indem wir die oben definierte Funktion schreib() aufrufen. Soweit funktioniert das alles sehr schön mit Netscape. Leider reagiert onkey press im Internet Explorer aber nicht auf die Backspace-Taste. Wir müssen also noch einen weiteren Handler einsetzen:

302

Lösungen if (document.all) // Abfrage nur bei IE nötig document.onkeydown = sonderEingabe; function sonderEingabe(e){ if (event.keyCode==8) { // Backspace inhalt = inhalt.substring(0, inhalt.length-1); schreib(); return false; } }

Der onkeydown-Handler feuert auch bei Backspace. Und nur wenn diese Taste gedrückt wurde, passiert etwas: Wie bereits oben für Netscape wird der Wert von inhalt um ein Zeichen verkürzt und ins div-Element geschrieben. return false blockiert die »Back«-Funktion. Damit ist das Formularfeld auf beiden Browsern funktionsfähig, und wir können den Skript-Bereich beenden.

Im Internet Explorer gibt es übrigens seit Version 5.5 das Attribut contentEditable für praktisch alle HTML-Elemente. Damit können Sie sehr einfach beliebige Teile einer Webseite durch die Besucher verändern lassen. Sie müssen dazu nur der Eigenschaft contentEditable des Elements den Wert true zuweisen. Lösung zu 13: Zuerst die Seite mit dem einfachen Drag&Drop: Drag'n'Drop Test <script language="JavaScript1.2" type="text/javascript">
303

11 Erweitertes Event-Handling testDiv = (document.layers) ? document.test : (document.all) ? window.test : document.getElementById("test"); // Jetzt fangen wir die Events ab: if (testDiv.captureEvents) { // Netscape 4 testDiv.captureEvents(Event.MOUSEDOWN); document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } testDiv.onmousedown = mdown; document.onmouseup = mup; document.onmousemove = mmove; } // init-Funktion onload aufrufen: window.onload = init; function mdown(e){ // Der MouseDown-Handler setzt die Variable drag auf // "aktiv" und bestimmt die aktuelle Mausposition. drag = "aktiv"; aktivX = (e) ? e.pageX : event.clientX + document.body.scrollLeft; aktivY = (e) ? e.pageY : event.clientY + document.body.scrollTop; // Damit auf dem MacIntosh nicht das Kontextmenü // erscheint, sollte man onmousedown immer false // zurückgeben: return false; } function mmove(e){ // Im MouseMove-Handler passiert nur etwas, wenn drag auf // "aktiv" steht: if (drag == "inaktiv") return; // Jetzt wird die neue Mausposition gemessen: var neuX = (e) ? e.pageX : event.clientX + document.body.scrollLeft; var neuY = (e) ? e.pageY : event.clientY + document.body.scrollTop; // ...der Abstand zur vorherigen Position berechnet: var distX = (neuX-aktivX); var distY = (neuY-aktivY);

304

Lösungen // ...die neue Position in den globalen Variablen // gespeichert: aktivX = neuX; aktivY = neuY; // ...und schließlich das Test-Div um die berechnete // Distanz verschoben: if (document.layers) { // Netscape 4 testDiv.left += distX; testDiv.top += distY; } else { testDiv.style.left = parseInt(testDiv.style.left) + distX; testDiv.style.top = parseInt(testDiv.style.top) + distY; } } function mup(e){ // onmouseup setzen wir einfach drag auf "inaktiv": drag = "inaktiv"; } //-->

test

Vielleicht fallen Ihnen diese Zeilen in der init()-Funktion auf: if (testDiv.captureEvents) { // Netscape 4 testDiv.captureEvents(Event.MOUSEDOWN); document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } testDiv.onmousedown = mdown; testDiv.onmouseup = mup; document.onmousemove = mmove;

305

11 Erweitertes Event-Handling Anders als in den vorherigen Übungen setze ich captureEvents() nur bei Netscape 4, nicht aber bei Netscape 6 ein. Warum? Weil captureEvents() ausschließlich eine Methode von window-, document- und layer-Objekten ist. testDiv wird von Netscape 4 als Layer angesehen. Netscape 6 kennt aber keine Layer, weshalb er beim Versuch, auf testDiv die Methode captureEvents() anzuwenden, einen Fehler bringen würde. Man kann auf captureEvents() für Netscape 6 ruhig verzichten, weil dieser wie Internet Explorer Event-Bubbling unterstützt. Wenn Sie Schwierigkeiten beim »einfachen« Drag&Drop hatten, dann kopieren Sie sich die Lösung und versuchen Sie jetzt, sie so weiter zu entwickeln, dass sie universell einsetzbar wird. (Auf der CD finden Sie das oben abgedruckte Skript im Verzeichnis »sonstiges« als »dragndrop.html«). Hier ist die fertige Lösung: <script language="JavaScript1.2" type="text/javascript">
306

Lösungen // die andern Handler nicht vergessen: if (document.captureEvents) // Netscape document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); document.onmouseup = mup; document.onmousemove = mmove; } window.onload = init; function mdown(e){ // Wir müssen onmousedown herausfinden, welches div// Element aktiviert wurde. Dazu benutzen wir "this". // Dann zählen wir den bislang höchsten z-Index-Wert eins // nach oben und weisen ihn dem aktiven div zu. Der Rest // ist wie gehabt. aktivDiv = this; if (document.layers) aktivDiv.zIndex = aktivZindex++; else aktivDiv.style.zIndex = aktivZindex++; drag = "aktiv"; aktivX = (e) ? e.pageX : event.clientX + document.body.scrollLeft; aktivY = (e) ? e.pageY : event.clientY + document.body.scrollTop; return false; } function mmove(e){ // fast keine Änderungen im Vergleich zum einfachen // Drag&Drop if (drag == "inaktiv") return; var neuX = (e) ? e.pageX : event.clientX + document.body.scrollLeft; var neuY = (e) ? e.pageY : event.clientY + document.body.scrollTop; var distX = (neuX-aktivX); var distY = (neuY-aktivY); aktivX = neuX; aktivY = neuY; if (document.layers) { aktivDiv.left += distX; aktivDiv.top += distY; } else { aktivDiv.style.left = parseInt(aktivDiv.style.left) + distX; aktivDiv.style.top =

307

11 Erweitertes Event-Handling parseInt(aktivDiv.style.top) + distY; } } function mup(e){ drag = "inaktiv"; } //-->

Was noch fehlt, ist die Speicherung des Layouts in einem Cookie. Mit Hilfe der Cookie-Funktionen aus Kapitel 8 ist das gar nicht so schwierig. Zuerst ergänzen wir die Funktion mup() so, dass bei jedem Mouseup-Event die aktuellen div-Positionen in den Cookie geschrieben werden. Dazu gehen wir den Array divs[] durch, fragen die Koordinaten ab und hängen sie zusammen an einen String. Aus diesem String müssen wir später die Koordinaten wieder rekonstruieren können, deshalb stellen wir zwischen zwei zusammengehörige x/y-Werte jeweils ein Komma und trennen sie vom nächsten Wertpaar mit einem Plus-Zeichen: function mup(e){ drag = "inaktiv"; // Cookie-String zusammenstellen: var cookieString = ""; for (i=0; i
In der init()-Funktion lesen wir den Cookie aus und setzen alle Elemente an ihren dort gespeicherten Platz:

308

Lösungen function init() { ... bisherige Anweisungen ... // Cookie lesen: var cookieString = liesCookie("Layout"); if (cookieString) { // Array mit Wertpaaren erzeugen: var divPosArray = cookieString.split("+"); for (i=0; i
Lösung zu 14: Sie müssen ein Image-Objekt in Ihre Seite einbinden, dessen src-Atttribut auf ein Bild verweist, das auf dem Server liegt, den Sie testen wollen. Wenn der Error-Handler feuert, konnte das Bild nicht geladen werden – der Server ist nicht erreichbar. Das Image-Objekt kann entweder in HTML oder per JavaScript erzeugt werden. Die erste Version sieht etwa so aus:

Die andere Lösung benötigt kein sichtbares Bild: <script> function bildErrorHandler(e) { alert("Server nicht erreichbar!");

309

11 Erweitertes Event-Handling } function bildLoadHandler(e) { alert("Alles klar."); } testBild = new Image(); testBild.onerror = bildErrorHandler; testBild.onload = bildLoadHandler; testBild.src = "http://zu.testender.server.de/einBild.jpg”;

Das Bild einBild.jpg muss natürlich auf dem Testserver vorhanden sein, damit der Error-Event nicht immer eintritt. Lösung zu 15: // Error-Handler definieren function errorHandler() { // Error-Handler wieder abschalten window.onerror = keinErrorHandling; window.status = "Fehler!"; weiter(); return true; } function keinErrorHandling(){ return false; } // Error-Handler registrieren window.onerror = errorHandler; // riskante Anweisung riskanteAnweisung(); // nichts passiert? Dann geht es hier weiter window.onerror = keinErrorHandling; weiter();

Wenn kein Fehler eintritt, wird der Skriptblock einfach von oben nach unten abgearbeitet, wo nach riskanteAnweisug() weiter() aufgerufen wird. Im Fehlerfall bricht die Abarbeitung bei riskanteAnweisung() ab, window.onerror feuert, und die Funktion errorHandler() wird gestartet. Diese schreibt »Fehler!« in die Statuszeile und ruft ihrerseits weiter() auf. Eine hübsche Alternative besteht darin, für den Aufruf von weiter() einen neuen JavaScript-Block zu erzeugen. Dazu können Sie setTimeout() verwenden:

310

Lösungen function errorHandler() { window.status = "Fehler!"; window.onerror = keinErrorHandling; return true; } window.onerror = errorHandler; window.setTimeout("weiter()", 0); riskanteAnweisung(); window.onerror = keinErrorHandling;

Das funktioniert, weil bei einem JavaScript-Error nur der aktuelle Skriptblock abgebrochen wird. Die setTimeout-Anweisung erzeugt aber intern einen neuen Block. Der zweite Parameter bei setTimeout gibt an, wann dieser Block ausgeführt werden soll. Ich habe 0 Millisekunden eingetragen. Das bedeutet aber nicht, dass sofort mit der Abarbeitung des neuen Blocks begonnen wird. Im Allgemeinen verarbeiten die Browser JavaScript-Blöcke immer der Reihe nach. Das heißt, es wird zuerst der aktuelle Block fertig ausgeführt, dann erst wird auf die Uhr geschaut und nachgesehen, ob irgendwelche anderen Blöcke sich für diese Zeit angemeldet haben. Sehen wir uns an, was im Listing passiert, wenn ein Fehler eintritt. Zuerst wird ein Error-Handler definiert und registriert, dann der neue Skriptblock erstellt und für »sofort« zur Abarbeitung bestimmt: window.setTimeout("weiter()", 0);

Im Moment interessiert das den Browser aber nicht, denn zuerst muss ja noch der gegenwärtige Block beendet werden. Als Nächstes kommt: riskanteAnweisung();

und dabei passiert ein Fehler. Der Error-Handler springt an, schreibt »Fehler!« in die Statuszeile und unterdrückt die Fehlermeldung des Browsers. Der Skriptblock, in dem der Fehler auftrat, wird abgebrochen. Jetzt schaut der Browser auf die Uhr, sieht, dass er bereits vor einigen Millisekunden einen neuen Skriptblock hätte starten sollen, und beeilt sich, das nachzuholen. Der neue Block enthält nur eine einzige Anweisung, nämlich weiter(), die nun ausgeführt wird. Lösung zu 16: function str = str+= str+= str+= str+= str+=

errorHandler(meldung, url, zeile) { '

Ohje, ein JavaScript-Fehler!

'; '';

var neuesFenster = window.open("","Fehlerfenster"); neuesFenster.document.write(str); neuesFenster.document.close(); return true; } window.onerror = errorHandler;

Bei der MacIntosh-Ausführung von Internet Explorer 4 werden die Fehler-Informationen nicht als Parameter übergeben. Sie erhalten deshalb bei diesem Browser jeweils nur »undefined«. Lösung zu 17: Die Lösung, die natürlich in einer einzigen Zeile stehen muss, ist: javascript:void(document.onmousedown=function(e){var ziel=e?e.target:event.srcElement;ziel.parentNode.removeChild(ziel);})

Etwas übersichtlicher formatiert und weniger kompakt lauten die Anweisungen: function mDownHandler(e) { var ziel=(e) ? e.target : event.srcElement; ziel.parentNode.removeChild(ziel); } document.onmousedown = mDownHandler;

Ich benutze onmousedown anstatt onclick, damit das Ziel-Element keine Gelegenheit bekommt, vor seiner Zerstörung noch auf den Klick zu reagieren, um zum Beispiel ein Popup-Fenster zu öffnen.

312

12

LiveConnect

Von Tobias Trelle, [email protected], http://www.CyCoSys.com/

12.1

Grundlagen

LiveConnect bezeichnet einen Mechanismus innerhalb des Web-Browsers, der die Kommunikation zwischen Java-Applets und Plug-ins auf der einen und JavaScript auf der anderen Seite ermöglicht.

LiveConnect

LiveConnect gehört zu der bereits in der Einleitung angesprochenen Gruppe von Begriffen, die vom Browser-Hersteller Netscape geprägt wurden. Wir werden uns bei unseren Betrachtungen jedoch nicht auf den Netscape Navigator beschränken. Im Internet Explorer sind bei Java-Applets die gleichen, bei Plugins entsprechende Mechanismen vorhanden. Für den Entwickler stellt sich LiveConnect im Wesentlichen als Definition von Schnittstellen dar. Neben einer ausführlichen Betrachtung aus der Sichtweise von JavaScript werden wir für ein umfassendes Verständnis auch auf Konzepte der Sprache Java zurückgreifen müssen. Vorkenntnisse in diesem Bereich sind daher von Vorteil, da wir uns aufgrund der Fülle nur sehr rudimentär mit JavaGrundlagen beschäftigen können. Eine Einführung in Java-Programmierung finden Sie zum Beispiel in [FLAN97].

Java

Nach dem Durcharbeiten dieses Kapitels werden Sie in der Lage sein, mit JavaScript-Befehlen innerhalb Ihrer HTML-Seiten Java-Applets und Plug-ins zu steuern und Event-Handler zum Empfangen von Nachrichten dieser eingebetteten Objekte zu definieren. Da wir den aktuellen Stand der Entwicklung berücksichtigen wollen, sollten Sie die Beispiele und Übungen in diesem Kapitel mindestens mit dem IE4 und NN4.5 durcharbeiten. Wir möchten an dieser Stelle darauf hinweisen, dass wir das DOM des NN6PR1 nicht berücksichtigen, da LiveConnect voraussichtlich komplett anders realisiert werden wird.

12.1.1

Kommunikation mit Java-Applets

Was ist ein Java-Applet? Java-Applets sind kleine Programme, die in der Programmiersprache Java entwickelt werden. (»Applet« = Verniedlichung von »Application« in der englischen Sprache). Im Folgenden werden wir die Begriffe Applet und Java-Applet synonym verwenden. Ein wesentlicher Aspekt von Applets ist die Möglichkeit,

Java-Applet

313

12 LiveConnect sie in andere Anwendungen einzubetten. Die bekannteste dieser einbettenden Anwendungen ist der Web-Browser. Auf diesen wollen wir uns im Folgenden konzentrieren. Die grafische Ausgabe von Applets erfolgt in einem rechteckigen Ausschnitt innerhalb einer HTML-Seite. Dabei werden bestimmte Methoden des Applets in einer fest definierten Reihenfolge aufgerufen. Diese bestimmt den Lebenszyklus des Applets. JVM

Eine wesentliche Eigenschaft von Applets (und Java-Anwendungen im Allgemeinen) ist die Plattformunabhängigkeit. Ein auf Betriebssystem A erstelltes Applet ist auch auf Betriebssystem B lauffähig, sofern es für beide eine JavaUnterstützung gibt. Die Plattformunabhängigkeit wird dadurch erreicht, dass bei der Kompilierung nicht direkt in betriebssystem-spezifischen Objektcode übersetzt wird. Stattdessen wird ein so genannter Bytecode generiert, der von der Java Virtual Machine (JVM) und nicht vom Betriebssystem ausgeführt wird. Jeder Java-fähige Web-Browser beinhaltet eine solche JVM. Bitte beachten Sie, dass die gängigen Browser, d.h. Microsoft Internet Explorer 5.x und Netscape Navigator 4.x, ohne Zusatzmaßnahmen nur Java in der Version 1.1 unterstützen. Unter Zuhilfenahme des Java1.3-Plug-ins18 kann jedoch auch Java in der Version 1.3 unterstützt werden. Ältere Web-Browser unterstützen teilweise nur Java in der Version 1.0.2. Denken Sie daran, wenn Sie auf Abwärtskompatibilität besonderen Wert legen (müssen). Aus Sicherheitsgründen stehen dem Entwickler innerhalb von Applets nicht alle Befehle der Programmiersprache Java zur Verfügung. Unter anderem können keine Zugriffe auf das lokale Dateisystem vorgenommen oder Netzwerkverbindungen zu beliebigen fremden Rechnern aufgebaut werden. Diese Sicherheitsbeschränkungen können durch technische Maßnahmen aufgehoben werden, sie sind für uns allerdings nicht relevant und werden daher im Folgenden nicht berücksichtigt.

Java-Konsole

In der Einleitung wurde bereits darauf hingewiesen, wie die JavaScript-Konsole im NN zur Fehleranalyse automatisch angezeigt werden kann. Auch die JVM des Web-Browsers bietet die Möglichkeit, Text in einem Konsolenfenster auszugeben. Davon werden wir im Folgenden Gebrauch machen. Innerhalb eines Applets können Sie dazu unter anderem den Befehl System.out.println(String sMessage);

verwenden. Um die Java-Konsole zu aktivieren, wählen Sie im Internet Explorer 5 den Menüpunkt Ansicht/Java-Befehlszeile

und im Netscape Navigator 4 Communicator/Tools/Java Console 18. Die aktuelle Version des Java-Plug-ins finden Sie unter http://java.sun.com/products/plugin/

314

Grundlagen Einbettung von Applets in HTML-Seiten Ein Applet konkretisiert sich in einer oder mehreren Datei(en) mit der Endung .class. Bei der Einbettung des Applets gibt es eine Hauptklasse, die von java.applet.Applet abgeleitet wird. Der Name dieser Klasse wird in der HTML-Seite angegeben: <param name="message" value="Hello LiveConnect"> Alternativtext für Browser ohne Java-Unterstützung

Obiges HTML-Element bindet ein Applet ein, dessen Klasse HelloLiveConnect heißt und sich (da relativ adressiert) im gleichen Verzeichnis wie die HTMLDatei befinden muss. Der Name des Applets ist myApplet. Dies wird später von Belang sein, wenn das Applet per JavaScript gesteuert wird. Durch die Angabe der Parameter width und height wird die Dimension des Applets festgelegt. Das Applet hat die Möglichkeit, diese Werte abzufragen und gegebenenfalls darauf zu reagieren, zum Beispiel für eine zentrierte Textausgabe. Die Parameter width und height sind sowohl von JavaScript als auch von Java aus betrachtet nur lesbar, können also nicht nachträglich vom Programm verändert werden. In der Regel bestehen Applets aus mehr als einer .class-Datei. Die Browser bieten ab der Version 4 (genauer gesagt: seit sie eine JVM der Version 1.1 benutzen) die Möglichkeit, alle .class-Dateien in einem JAR- oder ZIP-Archiv zusammenzufassen. Dies beschleunigt den Download einerseits, weil nicht mehr für jede einzelne Datei ein eigener HTTP-Request durchgeführt werden muss, andererseits, weil die Dateien außerdem auch noch komprimiert werden können. JAR steht dabei für JavaARchive. Technisch ist ein JAR nichts anderes als eine ZIP-Datei. Die Browser können mit Archiven der Endung .jar und .zip gleichermaßen gut umgehen. Wenn Sie ein Archiv einsetzen wollen, erzeugen Sie zum Beispiel ein JAR namens mypack.jar mit all Ihren .class-Dateien. Dies geschieht in der Regel mit dem Java-Tool namens jar (dies ist Bestandteil des Java Development Kits, kurz auch JDK), Ihrer Lieblings-Java-IDE oder einfach mit einem ZIP-Tool, z.B. WinZIP. Den Namen des Archivs teilen Sie dem Applet über das Attribut archive mit:

archive JAR, ZIP

Der Browser lädt nun nur noch das Archiv mypack.jar und extrahiert daraus die Klasse HelloLiveConnect und alle anderen Dateien. Sie können sogar mehrere solcher Archive angeben, indem Sie sie durch Kommata trennen: archive="mypack0.jar,mypack1.zip,mypack2.zip"

315

12 LiveConnect getParameter(String)

Eigene Parameter definieren Sie über das HTML-Element param. In unserem Beispiel wird ein Parameter mit Namen message definiert, dessen Wert »Hello LiveConnect« ist. So definierte Parameter können innerhalb des Applets über die Methode getParameter(String sParamName) abgefragt werden. Ein wie oben benanntes Applet ist im DOM als document.myApplet document.applets["myApplet"] document.applets[0]

sichtbar, sofern wir von einem Applet pro Seite ausgehen. Bei letzterer Schreibweise besitzt jedes Applet einen anderen Index innerhalb des applets-Arrays. Der Index wird bestimmt durch die Reihenfolge, in der die Applets in der HTML-Seite eingebettet sind. Dabei startet die Nummerierung mit dem Wert 0. Aus Gründen der Übersichlichkeit sollten Sie nur mit einer der ersten beiden Varianten arbeiten. Wir werden im Folgenden stets mit der ersten Variante, also document.myApplet, arbeiten. Das Beispiel 1 demonstriert, wie das Applet über alle drei Varianten ansprechbar ist: alert(document.myApplet); alert(document.applets["myApplet"]); alert(document.applets[0]);

Das vollständige Beispiel finden Sie auf dem beiliegenden Datenträger unter Buchdaten\kapitel12\beispiele\01\index.html. Beachten Sie bei der Verwendung von Layern, dass der NN pro Layer ein separates document-Objekt vorhält, d.h., ein Applet myApplet im Layer myLayer wird als document.layers["myLayer"].document.myApplet

adressiert. Applets werden übrigens unabhängig vom z-Index des Layers immer im Vordergrund dargestellt. navigator.javaEnabled

Um zu testen, ob Ihr Browser Applets darstellen kann, können Sie die JavaScript-Funktion navigator.javaEnabled() verwenden. Sie liefert true zurück, wenn der Browser eine Java-Unterstützung hat, ansonsten false: alert("Java enabled: " + navigator.javaEnabled());

Dies können Sie ebenfalls in Beispiel 1 ausprobieren. Lebenszyklus eines Java-Applets Werfen wir nun noch kurz einen Blick auf den Lebenszyklus eines Applets. import java.awt.*; import java.awt.event.*;

316

Grundlagen public class Sizelet extends java.applet.Applet { public void init() { ... } public void start() { ... } public void stop() { ... } public void destroy() { ... } ... }

Vier Methoden spielen in jedem Applet eine besondere Rolle, da diese zu bestimmten Zeitpunkten ganz ohne unser Zutun vom Web-Browser aufgerufen werden. Dies sind init(), start(), stop() und destroy() in genau dieser Reihenfolge. Gemäß Spezifikation werden init() und destroy() jeweils nur einmal bei Anlegen und Zerstören des Applets aufgerufen. So erhält der Programmierer die Gelegenheit, in init() Variablen zu initialisieren und Objekte anzulegen und später bei Beendigung in destroy() gegebenenfalls benutzte Ressourcen wieder freizugeben.

init(), destroy()

Ein anschauliches Beispiel hierfür ist eine Netzwerkverbindung eines Chat-Applets zu einem zentralen Server, die in init() aufgebaut und in destroy() sauber wieder geschlossen wird. Der Aufruf der Methoden start() und stop() erfolgt ebenso symmetrisch, d.h., zu jedem Aufruf von start() gibt es zu einem späteren Zeitpunkt auch ein stop(). Allerdings können diese beiden Methoden mehr als nur einmal aufgerufen werden.

start(), stop()

Ein denkbares Ereignis, das den Aufruf von start() und stop() mehrfach auslösen kann, ist das Sichtbar- beziehungsweise Unsichtbarwerden des Applets beim Scrollen einer HTML-Seite oder das Minimieren oder Maximieren des Browser-Fensters. Eine rechenintensive Animation könnte so sinnvoll angehalten und bei Bedarf wieder gestartet werden. Leider leben wir nicht in einer idealen Welt, und so verhalten sich der IE und der NN an dieser Stelle auch inkonsistent. Testen Sie das Beispiel 2 mit eingeschalteter Java-Konsole. Ändern Sie die Größe des Browser-Fensters oder wechseln Sie zu dem verlinkten URL und wieder zurück. Beobachten Sie dabei die Ausgabe im Konsolenfenster. Das vollständige Beispiel finden Sie auf dem beiliegenden Datenträger unter Buchdaten\kapitel12\beispiele\02\index.html. Grundsätzlich kann die Kommunikation zwischen JavaScript und Java-Applets bidirektional verlaufen, also in beide Richtungen. Einerseits können wir mittels JavaScript ein Applet durch Methodenaufrufe steuern, andererseits hat ein Applet Zugriff auf das DOM und damit auf die JavaScript-Objekte des Browsers. Wir werden uns in dieser Reihenfolge näher mit Applets beschäftigen.

317

12 LiveConnect JavaScript steuert Applet Werfen wir zunächst einen Blick auf den Quelltext dieses einfachen Applets: import java.awt.*; public class HelloLiveConnect extends java.applet.Applet { public String sMessage; // text message public void db(String sText) { System.out.println(sText); } public String getJavaVersion() { return "Java version: " + System.getProperty("java.version"); } public void init() { // init global values sMessage = getParameter("message"); if (sMessage==null) sMessage = "<Parameter missing>"; // paint the applet repaint(); } public void paint(Graphics g) { // draw background g.setColor(Color.blue); // blue g.fillRect(0,0, getSize().width, getSize().height); // draw message g.setColor(Color.white); g.drawString(sMessage, 0, 20); } } Listing 12.1: HelloLiveConnect.java

Dieses Applet gibt eine Textnachricht in weißer Schrift auf blauem Hintergrund aus.

318

Grundlagen Wie können wir nun mit dem Applet in Verbindung treten, uns LiveConnecten? Prinzipiell ist alles recht einfach: Sie können auf öffentliche Variablen des Applets lesend und schreibend zugreifen sowie öffentliche Methoden aufrufen. Variablen und Methoden werden in Java durch das Schlüsselwort public als öffentlich zugänglich gekennzeichnet. In obigem Listing sind dies u.a. die String-Variable sMessage und die Methoden db(String sText) und get JavaVersion(). Daneben besitzt jedes Applet eine Reihe weiterer öffentlicher Standard-Methoden. Eine davon ist von besonderem Interesse: repaint(). Wenn sich die Inhalte von Variablen, die die grafische Ausgabe des Applets beeinflussen, geändert haben, sollten Sie immer ein repaint() durchführen, entweder innerhalb des Applets selbst oder per JavaScript. Erst sein Aufruf löst das Neuzeichnen aus.

public

Greifen wir nun einmal per JavaScript auf die Variable sMessage zu: alert(document.myApplet.sMessage);

Ebenso simpel ist der Aufruf der Methode db(String sText). Aktivieren Sie bitte vorher die Java-Konsole: document.myApplet.db("We are LiveConnected!");

Methoden können auch Rückgabewerte liefern. Rufen Sie die Methode get JavaVersion() auf, die einen String mit Informationen über die Version der JVM zurückliefert: alert(document.myApplet.getJavaVersion());

Das vollständige Beispiel finden Sie auf dem beiliegenden Datenträger unter Buchdaten\kapitel12\beispiele\03\index.html. Bitte beachten Sie, dass Sie ein Applet erst manipulieren sollten, nachdem es vollständig geladen wurde. Abhängig von der Größe und Anzahl der benötigten class-Dateien kann der Download aus dem Netz durchaus einige Zeit in Anspruch nehmen. Generell gilt die Regel: Applets erst nach dem onLoad-Event (siehe Event-Handling) des Bodys manipulieren. Um ganz sicherzugehen, fragen Sie die Existenz des Applets ab, bevor Sie auf seine Methoden oder Properties zugreifen: if (document.myApplet) { alert(document.myApplet.getJavaVersion()); }

Applet kommuniziert mit Browser Unabhängig von LiveConnect sieht die Sprache Java Methoden vor, mit denen ein Applet den Applikationskontext (in unserem Fall: den Web-Browser) zur Anzeige von (Status)-Informationen veranlassen kann. Diese Methoden kön-

319

12 LiveConnect nen durchaus nützlich sein, daher sollen sie hier auch Erwähnung finden. Im Einzelnen sind dies: showDocument(URL url); showDocument(URL url, String sTarget); showStatus(String sStatus);

Im Web-Browser lösen diese Methoden folgende Aktionen aus: showDocument(...) showStatus(...)

Die Methode showDocument(URL url) lädt eine unter dem URL url befindliche HTML-Seite in das aktuelle Browser-Fenster, showDocument(URL url, String sTarget) lädt diese in einen HTML-Frame beziehungsweise ein Window namens sTarget. Dabei sind die reservierten Namen _self, _parent, _top und _blank als Ziel zulässig. So ruft beispielsweise URL url = URL("http://www.addison-wesley.de/"); showDocument(url, "_blank");

die Homepage unseres Verlags in einem neuen Browser-Fenster auf. Mit showStatus(String sStatus) können Sie den Text sStatus in die Statuszeile des Web-Browsers schreiben. Diese Methode kann also mit der JavaScript-Anweisung window.status = sStatus;

verglichen werden. Ein exemplarischer Zugriff auf die Statuszeile des Browsers kann so aussehen: showStatus("Applet talks to browser.");

Neben der Ausführung obiger Aktionen kann ein Applet noch Informationen über seine Herkunft und die JVM einholen. Mit den Methoden URL getDocumentBase(); URL getCodeBase(); getDocumentBase() getCodeBase()

erhalten wir den URL der einbettenden HTML-Seite beziehungsweise des Verzeichnisses der Klassendatei des Applets. Dies kann von Bedeutung sein, wenn etwa Dateien aus dem gleichen Verzeichnis manuell nachgeladen werden müssen. Mit der Methode String System.getProperty(String sPropName);

getProperty(String)

können verschiedene Systemeigenschaften der JVM abgefragt werden. Für uns sind besonders die Eigenschaften "java.version", "java.vendor" und "browser" interessant. Letztere ist nicht Bestandteil des Java-Standards, sondern kommt nur in den JVMs von Web-Browsern vor. import java.awt.*;

320

Grundlagen public class Java2Browser extends java.applet.Applet { java.awt.TextArea tb_info = new java.awt.TextArea("",0,0,TextArea.SCROLLBARS_VERTICAL_ONLY); public void init() { setLayout(new BorderLayout(0,0)); setSize(426,266); add(BorderLayout.CENTER,tb_info); String sInfo = "getDocumentBase(): " + getDocumentBase().toString() + "\n" + "getCodeBase(): " + getCodeBase().toString() + "\n"; String props[] = {"java.vendor", "java.version", "browser"}; for (int i=0;i<props.length; i++) sInfo += props[i] + ": " + System.getProperty(props[i]) + "\n"; tb_info.setText(sInfo); } } Listing 12.2: Java2Browser.java

In Beispiel 4 können Sie sehen, welche Werte diese Eigenschaften in Ihrem Browser haben. Das vollständige Beispiel finden Sie auf dem beiliegenden Datenträger unter Buchdaten\kapitel12\beispiele\04\index.html. Applet steuert JavaScript Dieser Abschnitt setzt durchschnittliche Java-Kenntnisse voraus. Sie sollten insbesondere wissen, wie man den Java-Compiler konfiguriert. Wir werden sehen, wie man von einem Java-Applet aus auf JavaScript-Objekte zugreifen und deren Methoden aufrufen und Properties lesen bzw. setzen kann. Die Browser-JVMs beinhalten zur Ansprache von JavaScript-Objekten ein JavaPackage, das nicht Bestandteil des Standardumfangs von Java ist. Dabei handelt es sich um das Package netscape.javascript. Im Netscape Navigator gibt es dies seit der Version 3.0, im Internet Explorer seit der Version 4.0.

netscape.javascript

321

12 LiveConnect Bevor wir uns näher mit den Objekten und Methoden dieses Packages beschäftigen, müssen wir wissen, wie Applets kompiliert werden, die LiveConnect benutzen. Innerhalb des Applets wird zunächst das Package über die import-Anweisung bekannt gemacht: import netscape.javascript.*; ... Classpath

Nun müssen wir den Classpath des Java-Compilers so anpassen, dass er anschließend das Package netscape.javascript bearbeiten kann. Wie Sie den Classpath Ihres Compilers anpassen, hängt von der Entwicklungsumgebung ab, mit der Sie arbeiten. Konsultieren Sie bitte die entsprechende Dokumentation. Wenn Sie mit dem Internet Explorer arbeiten, sollten Sie in der Regel unter C:\Windows\JAVA\Packages

eine Reihe von ZIP-Dateien finden. Die Namen dieser Dateien sind auf jedem System unterschiedlich. Die Datei, die am größten ist (ca. 5,6 MB), etwa C:\Windows\JAVA\Packages\BLN5V7VR.ZIP

ist das Archiv, welches das Java-Package netscape.javascript enthält. Diesen Namen fügen Sie dem bestehenden Classpath hinzu. Wenn Sie mit dem Netscape Navigator auf Windows-Systemen arbeiten, heißt das entsprechende Archiv in der Regel C:\Programme\Netscape\Communicator\Program\Java\classes\java40.jar

und unter UNIX-Systemen zum Beispiel /opt/netscape/java/classes/java40.jar

Sollten Sie Ihren Web-Browser in ein anderes Verzeichnis installiert haben, muss der Dateiname entsprechend anders gewählt werden. Bitte beachten Sie, dass sich im Navigator Version 4.6 ein Fehler in die JVM eingeschlichen hat. Das Package netscape.javascript kann nicht benutzt werden. Ein Zugriff darauf liefert immer eine Fehlermeldung. Mit der Version 4.61 wurde dieser Fehler von Netscape wieder behoben. Die Version 4.6 findet sich nicht im Download-Archiv von Netscape. Auf einigen Mirrors ist sie jedoch noch verfügbar, falls Sie damit experimentieren möchten. Kleiner Tipp am Rande: Öffnen Sie das Archiv einmal mit WinZIP (oder einem vergleichbarem Tool) und schauen Sie sich die Einträge im Unterverzeichnis netscape/javascript an. Dort finden Sie die Java-Klassen, die wir verwenden werden.

322

Grundlagen Bevor wir uns an die Programmierung eines LiveConnect-Applets begeben, müssen wir zunächst noch die einbettende HTML-Seite entsprechend vorbereiten. Dem Applet ist explizit der Zugriff auf die JavaScript-Objekthierarchie zu erlauben. Dies geschieht durch die Angabe des Attributes mayscript:

mayscript

Das Package netscape.javascript stellt uns im Wesentlichen eine Klasse JSObject zur Verfügung, durch deren Instanzen JavaScript-Objekte repräsentiert werden. Die Klasse JSObject hat unter anderem folgende Methoden:

JSObject

public public public public public public public public

static JSObject getWindow(java.applet.Applet applet); Object getMember(String sMemberName); Object getSlot(int iSlotIndex); void setMember(String sMemberName, Object oValue); void setSlot(int iSlotIndex, Object oValue); void removeMember(String sMemberName); Object call(String sMethodName, Object[] args); Object eval(String sCode);

Mit Hilfe dieser Methoden können JavaScript-Objekte des hierarchischen Browser-DOMs leicht auf Java-Objekte innerhalb des Applets abgebildet werden. Die Wurzel der gesamten Objekthierarchie bildet das window-Objekt, dem alle anderen Objekte untergeordnet sind:

window

try { JSObject window = JSObject.getWindow(this); } catch (Exception e) { }

wobei this eine Referenz auf das Applet ist. Mit der Methode call() eines solchen Objekts können Sie seine Methoden aufrufen, zum Beisiel:

call(...)

try { JSObject window = JSObject.getWindow(this); Object[] args = {"Hello LiveConnect!"}; window.call("alert", args); } catch (Exception e) { }

323

12 LiveConnect eval(...)

Mit der JavaScript-Methode eval(String sCode) wird der JavaScript-Code in sCode ausgeführt. So gibt try { JSObject window = JSObject.getWindow(this); window.eval("s=''; for(i=0; i<10; i++) s += i + ' '; alert(s)"); } catch (Exception e) { }

einen String mit den Zahlen von 0 bis 9 in einer alert-Box aus. getMember(...)

Mit getMember(String sMemberName) beziehungsweise getSlot(int iSlotIndex) können nun Referenzen auf Properties von JavaScript-Objekten angefordert werden. Versuchen wir also einmal auf den Text des Input-Feldes des Formulares

zuzugreifen. Vom Applet aus arbeiten wir mit try { JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.getMember("document"); JSObject frm = (JSObject)doc.getMember("myForm"); JSObject inp = (JSObject)frm.getMember("myInput"); String val = (String)inp.getMember("value"); // output on java console System.out.println("value=" + val); } catch (Exception e) { }

Ein Zugriff, der getSlot(...) verwendet, würde so aussehen: try { JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject)win.getMember("document"); JSObject frms = (JSObject)doc.getMember("forms"); JSObject frm = (JSObject)frms.getSlot(0); JSObject elms = (JSObject)frm.getMember("elements"); JSObject inp = (JSObject)elms.getSlot(0); String val = (String)inp.getMember("value"); // output on java console

324

Grundlagen System.out.println("value=" + val); } catch (Exception e) { }

Der Internet Explorer unterstützt die Methode getSlot(...) nicht! Wir werden daher im Folgenden immer mit der Variante getMember(...) arbeiten, die in beiden Browsern funktioniert. Analog zu den get-Methoden zum Lesen können Sie mit setMember(String sMemberName) bzw. setSlot(int iSlotIndex) schreibend auf JavaScriptObjekte zugreifen. Hier gelten die gleichen Restriktionen beim Schreibzugriff wie unter JavaScript.

setMember(...)

Versuchen wir also einmal, den Wert des Input-Feldes des obigen HTML-Formulars zu ändern. In JavaScript würden wir eine Wertzuweisung so vornehmen: document.myForm.myInput.value = "LiveConnect";

In unserem Applet arbeiten wir uns zunächst mit einer Reihe von Aufrufen von getMember(...) zu der Referenz auf myInput vor, um dann mit einem Aufruf von setMember(...) dessen Member value zu setzen: try { JSObject JSObject JSObject JSObject

win doc frm inp

= = = =

JSObject.getWindow(this); (JSObject)win.getMember("document"); (JSObject)doc.getMember("myForm"); (JSObject)frm.getMember("myInput");

// set value inp.setMember("value", "LiveConnect"); } catch (Exception e) { }

Wie Sie unschwer erkennen, werden bei tief im DOM liegenden JavaScriptObjekten so viele stets ähnliche Befehle verwendet. Wir werden in den Übungen daher eine Java-Klasse entwerfen, die den Zugriff auf DOM-Objekte wesentlich vereinfacht. Beispiel 5 demonstiert den Umgang mit der Klasse JSObject. Das vollständige Beispiel finden Sie auf dem beiliegenden Datenträger unter Buchdaten\kapitel12\ beispiele\05\index.html.

325

12 LiveConnect Zusammenfassung Abbildung 12.1 fasst die Kommunikation zwischen Applets und JavaScript noch einmal zusammen: Abbildung 12.1: Applet/JavaScriptKommunikation

12.1.2

Kommunikation mit Plug-ins

Was ist ein Plug-in? Plug-in

Im Allgemeinen versteht man unter einem Plug-in die funktionale Erweiterung einer Anwendung über eine allgemein gehaltene Schnittstelle, das so genannte Plug-in-API. Wir werden uns bei unseren Betrachtungen auf die Anwendungen Microsoft Internet Explorer und Netscape Navigator konzentrieren. Jeder der großen Browser-Hersteller verfolgt dabei einen eigenen Ansatz, was sich für den Webdesigner, aber insbesondere auch für den Programmierer von Plug-ins in deutlichem Mehraufwand niederschlägt. Im Gegensatz zu JavaApplets klinken sich Plug-ins direkt in den Web-Browser ein und müssen daher in betriebsssystem-spezifischem Objektcode vorliegen. In der Regel werden Plug-ins verwendet, um zusätzliche Medientypen wie Videos oder 3-D-Welten anzuzeigen. Die grafische Ausgabe erfolgt dabei in

326

Grundlagen einem rechteckigen Bereich einer HTML-Seite. Es sind jedoch auch unsichtbare Plug-ins denkbar, die zum Beispiel Werbebanner aus HTML-Seiten filtern. Wir werden die Verwendung von Plug-ins anhand des Macromedia Flash Plugins (im Folgenden kurz Flash) besprechen. Diese Wahl wurde aufgrund des steigenden Verbreitungsgrades dieses Plug-ins getroffen. Die zu besprechenden Techniken sind prinzipiell jedoch allgemeiner Natur. Flash-spezifische Sachverhalte werden ausdrücklich als solche gekennzeichnet werden.

Macromedia Flash

Um die Beispiele und Übungen dieses Abschnitts zu bearbeiten, benötigen Sie die Version 4 des Flash Plug-ins. Dieses können Sie kostenlos von der Website http://www.macromedia.com/ herunterladen. Vorkenntnisse in der Erstellung von Flash-Movies sind nicht notwendig, wenngleich dieser Abschnitt auch für Flash-Entwickler interessant ist. Einbettung von Plug-ins mit dem Internet Explorer Im Internet Explorer sind Plug-ins technisch als ActiveX-Objekte realisiert. Unter einem ActiveX-Objekt können wir uns stark vereinfacht eine Softwarekomponente vorstellen, die von anderen Anwendungen eingebettet werden kann und deren Properties, Methoden und Events nach außen hin direkt sichtbar sind.

ActiveX

Die Einbettung in eine Webseite wird über das HTML-Element object vorgenommen. Wir werden aus der Vielzahl seiner Attribute nur diejenigen besprechen, die für uns von Bedeutung sind. Eine vollständige Auflistung finden Sie in [GOOD98].