Kapitel 4: DOM 0

Kleine integrierte Objekthierarchie

Die Objekthierarchie DOM 0 steht in jedem Browser zur Verfügung, der Javascript unterstützt. Diese Objekthierarchie ist direkt in Javascript integriert. Um sie von den standardisierten Hierarchien wie DOM 1 und DOM 2 im Sprachgebrauch klar zu trennen, wurde ihr der Name DOM 0 gegeben.

DOM 0 erlaubt einen Zugriff auf ein paar ausgesuchte Elemente einer Webseite. Der Zugriff ist also nur beschränkt möglich - mit DOM 0 können Sie Webseiten nicht beliebig per Javascript ändern.

DOM 0 bietet Ihnen mehrere Objekte an, die Elemente in einer Webseite repräsentieren. Über diese Objekte können Sie auf verschiedene Eigenschaften und Methoden zugreifen und Ihre Webseite bearbeiten. Welche Objekte genau zur Verfügung gestellt werden und welche Eigenschaften und Methoden diese Objekte bieten kann nur einer Referenz entnommen werden. Als Entwickler dynamischer Webseiten müssen Sie sich daran gewöhnen, ständig nachschlagen zu müssen, welche Objekte welche Eigenschaften und Methoden bieten.

Dieses Buch kann Ihnen nur einen Einstieg in die Entwicklung dynamischer Webseiten mit DOM 0 bieten. Während Sie grundlegende Kenntnisse im Umgang mit der Objekthierarchie DOM 0 in diesem Kapitel kennenlernen werden, können selbstverständlich nicht alle möglichen Formen des Umgangs mit Objekten in DOM 0 vorgestellt werden.

Von Fenstern, Dokumenten und Bildern

Das Kürzel DOM steht für Document Object Model - also ein Modell, das verschiedene Objekte beschreibt. Welche Objekte stehen in DOM 0 zur Verfügung?

Das Objekt window ist ein Objekt, das das Anzeigefenster des Browsers repräsentiert. Über Eigenschaften von window wie defaultStatus können Sie Text in die Statusleiste des Browser schreiben. Über Methoden wie open() können Sie ein neues Browserfenster öffnen.

Das Objekt document haben Sie bereits kennengelernt gehabt: Es ermöglicht den Zugriff auf Elemente in der aktuellen Webseite. Sie können beispielsweise wie unter Abschnitt 2.7, „Objekte“ beschrieben über die Eigenschaft bgColor die Hintergrundfarbe lesen oder über die Methode write() Text direkt in die Webseite schreiben.

Objekthierarchien beschreiben nicht nur Objekte, sondern auch die Beziehungen dieser zueinander. In DOM 0 wird beispielsweise das Objekt document dem Objekt window untergeordnet. Das heißt, document ist genaugenommen eine Eigenschaft von window. Um also auf die Eigenschaft bgColor des Dokuments im aktuellen Fenster zuzugreifen, kann folgender Code verwendet werden.

alert(window.document.bgColor); 

Zuerst wird auf das Objekt window zugegriffen, dann auf die Eigenschaft document von window. Nachdem document seinerseits ein Objekt mit unterschiedlichen Eigenschaften und Methoden darstellt, wird wiederum über den Zugriffsoperator auf die Eigenschaft bgColor zugegriffen.

In einigen Beispielen haben Sie bereits mit dem Objekt document gearbeitet gehabt, ohne das Objekt window vorher anzugeben. Dies ist eine Vereinfachung der Programmierung in Javascript: Der Zugriff auf das Objekt document ist auch ohne das Objekt window möglich. Wenn Sie nämlich lediglich document angeben, ist klar, dass Sie das Dokument im aktuellen Fenster meinen.

Grundsätzlich gilt: Alle Eigenschaften und Methoden des Objekts window können auch ohne Angabe des Objektnamens in Javascript verwendet werden.

Das Unterordnen von Objekten hat den Sinn, die Zusammenhänge der Objekte wie in der Wirklichkeit nachzubilden. Das Ziel der Objektorientierung ist es ja, tatsächliche reale Verhältnisse in die Programmierung zu übernehmen. Dazu gehören auch Beziehungen zwischen Objekten. Nachdem es zum Beispiel sein kann, dass der Anwender mehrere Browser-Fenster geöffnet hat und sich in jedem Fenster eine Webseite ansieht, besitzt jedes Fenster also auch sein eigenes Dokument. Daher wird auch in DOM 0 das Objekt document dem Objekt window untergeordnet.

So wie jedes Fenster ein Dokument besitzt, kann ein Dokument beispielsweise mehrere Bilder enthalten. Tatsächlich stellt DOM 0 eine Eigenschaft namens images zur Verfügung, die zum Objekt document gehört.

Während jedem Fenster jedoch immer genau ein Dokument zugeordnet ist, kann ein Dokument kein, ein oder auch mehrere Grafiken besitzen. Das Objekt images ist daher ein Array. Sind in der Webseite beispielsweise vier Grafiken eingebettet, so besteht das Array images aus vier Elementen. Um auf die einzelnen Grafiken einer Webseite nun zugreifen zu können, muss die richtige Hausnummer, also der Index in eckigen Klammern hinter images angegeben werden. Bilder in Webseiten erhalten in der Reihenfolge ihre Nummer, in der sie im HTML-Code aufgelistet sind.

Ein Objekt im Array images besitzt beispielsweise eine Eigenschaft namens width. In dieser Eigenschaft ist die Breite eines Bildes in Pixeln gespeichert. Über folgende Code-Zeile kann also beispielsweise die Breite des ersten Bildes eines Dokuments im aktuellen Browserfenster am Bildschirm ausgegeben werden.

alert(window.document.images[0].width); 

Im Folgenden erhalten Sie einen Überblick über die gesamte Objekthierarchie in DOM 0.

Wie Sie sehen besteht DOM 0 genaugenommen aus zwei Objekthierarchien. Das oberste Objekt der kleineren Hierarchie ist navigator, dem zwei Objekte vom Typ Array namens plugins[] und mimeTypes[] untergeordnet sind. Das Objekt navigator repräsentiert den Browser selbst. Über plugins[] können installierte Add-Ons im Browser abgefragt werden. Das Array mimeTypes[] bietet die Möglichkeit, in Javascript vom Browser unterstützte Inhaltsformate abzufragen.

Der wesentlich interessantere Zweig in DOM 0 beginnt mit dem bereits bekannten Objekt window. Diesem Objekt ist das ebenfalls schon kennengelernte Objekt document untergeordnet. Außerdem besitzt window zwei Eigenschaften history und location. Die Eigenschaft history ermöglicht das Vor- und Zurückblättern von Webseiten, wie es die heute weit verbreiteten Browser über Pfeiltasten-Symbole anbieten. Das Objekt location bietet Eigenschaften und Methoden an, um mit dem Herkunftsort - sprich der WWW-Adresse - des aktuellen Dokuments im Browser-Fenster zu arbeiten.

Das Objekt document besitzt eine ganze Reihe an Eigenschaften, um auf einzelne Elemente einer Webseite zuzugreifen. Über applets[] kann auf Java-Applets, über links[] auf Hyperlinks, über images[] auf Bilder und über forms[] auf Formulare in einer Webseite zugegriffen werden.

Das einzige Objekt, das weitere Unterobjekte besitzt, ist forms[]. Während forms[] den Zugriff auf verschiedene Formulare ermöglicht, bietet das Unterobjekt elements[] Zugriff auf Elemente in einem Formular. Derartige Elemente können zum Beispiel Textfelder oder Auswahllisten sein. Speziell für Auswahllisten bietet das Objekt elements[] ein Unterobjekt options[] an, mit dem auf einzelne Optionen in der Auswahl zugegriffen werden kann.

Das Attribut name

Um auf einzelne Elemente in einer Webseite zugreifen zu können, benötigen Sie die richtigen Objekte. Die interessantesten Elemente einer Webseite sind jedoch alle nur über Arrays zugänglich. Egal, ob Sie auf Bilder, Hyperlinks, Java-Applets oder Formulare zugreifen, Sie müssen immer den Index angeben, um mit dem von Ihnen benötigten Element im Array zu arbeiten. Der Index orientiert sich immer daran, in welcher Reihenfolge ein Bild, Hyperlink, Java-Applet oder Formular im HTML-Code angegeben ist.

Um auf die Methode submit() des fünften Formulars in einer Webseite zuzugreifen und das Formular mit dieser Methode abzusenden, müssen Sie folgende Code-Zeile verwenden.

window.document.forms[4].submit(); 

Fügen Sie jedoch nun ein neues Formular am Seitenanfang ein, verschiebt sich die komplette Reihenfolge - und was vorher Ihr fünftes Formular war, ist nun Ihr sechstes. Das bedeutet, Änderungen in der Reihenfolge ziehen automatische eine Anpassung des Javascript-Codes mit sich. Außerdem ist es grundsätzlich ärgerlich, jedesmal die Elemente durchzählen zu müssen, um den Index herauszufinden. Das kann vor allem bei Hyperlinks schwierig werden, die auch in größeren Zahlen auf einer Webseite Verwendung finden.

Daher ist es in DOM 0 möglich, Elementen einen Namen zu geben und in Javascript nun über genau diesen Namen auf das Element zuzugreifen.

<form name="Umfrage"> 

Um dem fünften Formular in Ihrer Webseite den Namen Umfrage zu geben, fügen Sie einfach das Attribut name dem HTML-Tag <form> hinzu und setzen es auf den Wert Umfrage. Anstatt wie oben gezeigt über den Index auf das Formular zuzugreifen, ist nun auch folgender Javascript-Code möglich.

window.document.forms["Umfrage"].submit(); 

Es wird nun nicht mehr der Index in eckigen Klammern angegeben, sondern der Name des Formulars.

Eine noch kürzere Schreibweise ist wie folgt möglich.

window.document.Umfrage.submit(); 

Nun wird direkt der Name des Formulars anstelle des Arrays forms[] angegeben. Der Nachteil dieser Schreibweise ist, dass man anhand des Javascript-Codes nicht mehr erkennen kann, was Umfrage eigentlich für ein Objekt ist. Denn die Namensvergabe mit dem Attribut name im HTML-Code funktioniert nicht nur für Formulare, sondern auch für Bilder und Java-Applets. Derartige Objekte können also alle mit einer etwas einfacheren Schreibweise ohne die Verwendung eines Index in Javascript benutzt werden.

Repräsentation eines Browser-Fensters

Das Objekt window bietet Zugriff auf das aktuelle Fenster. Über die Eigenschaft defaultStatus können Sie beispielsweise Text in der Statusleiste setzen.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      window.defaultStatus = "Hallo, Welt!"; 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Das Objekt window bietet darüberhinaus Methoden, um verschiedene Fenster anzuzeigen. Sie haben die drei Methoden bereits alle kennengelernt, mit denen Fenster geöffnet werden können.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      window.alert("Hallo, Welt!"); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Die Methode alert() zeigt ein Fenster mit einem Meldungstext an. Der Anwender kann lediglich auf OK klicken, um das Fenster zu schließen.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var OK = window.confirm("Hallo, Welt?"); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Um ein Fenster anzuzeigen, das dem Anwender die Möglichkeit gibt, auf OK oder Abbruch zu klicken, verwenden Sie die Methode confirm(). Diese Methode gibt den Rückgabewert true zurück, wenn der Anwender auf OK geklickt hat, und andernfalls false.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var Text = window.prompt("Geben Sie etwas ein.", ""); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Um dem Anweder die Eingabe von Text zu ermöglichen, greifen Sie auf die Methode prompt() des Objekts window zurück und erhalten als Rückgabewert den eingegebenen Text. Der Methode können zwei Parameter übergeben werden. Der erste Parameter ist der Text, der im Meldungsfenster eingeblendet werden soll. Der zweite optionale Parameter ist die Vorgabe eines Eingabetextes im Meldungsfenster für den Anwender.

Sie hatten diese Methoden bereits alle verwendet, ohne das Objekt window jeweils voranzustellen. Das Objekt window müssen Sie eigentlich nie angeben: Alle Eigenschaften und Methoden von window können jeweils auch ohne das Voranstellen dieses Objekts verwendet werden. Während es sich also bei Methoden wie alert() oder prompt() um Funktionen handelt, die ganz klar zum Objekt window gehören, sind Funktionen wie parseInt() oder parseFloat() in Javascript integriert. Sie können und dürfen die integrierten Methoden nicht durch Voranstellen eines Objekts aufrufen.

Im Zusammenhang mit dem Objekt window gibt es noch eine Besonderheit. Bisher gingen wir davon aus, dass ein Browserfenster genau eine Webseite, also ein Dokument anzeigt. Wie sieht es jedoch aus, wenn Frames eingesetzt werden?

Frames machen es möglich, dass ein Browser-Fenster mehrere Webseiten anzeigt. Es gibt also genaugenommen nicht ein Fenster, sondern mehrere. Der HTML-Code im Frameset sieht beispielsweise wie folgt aus, um zwei Frames in einem Browser-Fenster anzuzeigen.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <frameset cols="50%,50%">
    <frame src="frame1.html">
    <frame src="frame2.html">
  </frameset>
</html>

• Beispiel ausführen

Der erste Frame enthält folgenden HTML-Code.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      parent.frames[1].document.write("Hallo, Welt!"); 
    </script>
  </head>
  <body>
  </body>
</html>

Die Webseite des zweiten Frames ist leer und enthält keinen Javascript-Code.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
  </body>
</html>

Beim Laden des Framesets stellt der Browser fest, dass er zwei Webseiten anzeigen soll. Er teilt das Browserfenster in zwei Hälften und blendet in jeder die entsprechende Webseite ein. Im ersten Frame findet er Javascript-Code, den er ausführt. Was passiert hier genau?

Die Webseite im ersten Frame möchte einen Text "Hallo, Welt!" direkt in die Webseite im zweiten Frame hineinschreiben. Sie greift dazu auf ein Objekt namens parent zu. Es handelt sich hierbei um eine Repräsentation der HTML-Seite, in der das Frameset definiert ist. Mit parent wird also eine Ebene nach oben gesprungen. Innerhalb des Framesets sind mehrere Frames definiert. Um nun auf einen konkreten Frame zuzugreifen, wird ein entsprechender Index dem Array frames[] übergeben, das eine Eigenschaft von parent ist.

Der Trick ist nun folgender: Das Array frames[] ist einfach nur eine Ansammlung mehrerer Objekte vom Typ window. Das heißt, der Code parent.frames[1] wie im obigen Beispiel ist gleichbedeutend mit einem Objekt window - und zwar dem des zweiten Frames. Nachdem dem Objekt window ein Objekt document untergeordnet ist, können Sie auch über parent.frames[1] auf ein Unterobjekt document zugreifen. Auf diese Weise ist es also möglich, die Methode write() eines anderen Dokuments in einem anderen Frame aufzurufen und Text in dieses andere Dokument hineinzuschreiben.

Der frameübergreifende Javascript-Zugriff ist aus Sicherheitsgründen nur möglich, wenn beide Frames von der gleichen Domain stammen, also beispielsweise direkt in Ihrer Homepage integriert sind. Andernfalls wären Manipulationen fremder Webseiten möglich.

Wie beim Zugriff auf Bilder, Java-Applets und Formulare können auch Frames Namen gegeben werden.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <frameset cols="50%,50%">
    <frame src="frame1.html" name="Frame1">
    <frame src="frame2.html" name="Frame2">
  </frameset>
</html>

• Beispiel ausführen

Nun können Sie im ersten Frame mit folgender Javascript-Zeile Text in den zweiten Frame hineinschreiben.

parent.frames["Frame2"].document.write("Hallo, Welt!"); 

Genausogut können Sie folgendes angeben.

parent.Frame2.document.write("Hallo, Welt!"); 

Eine Methode des Objekts window, die noch erwähnenswert ist, ist open(). Mit dieser Methode können Sie neue Browserfenster per Javascript öffnen. Das besondere: Über Parameter können Sie gezielt angegeben, wie das neue Browserfenster aussehen soll. Betrachten Sier hierzu folgendes Beispiel.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      window.open("open.html", "Open", "menubar=no,width=200,height=200"); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Der Methode open() werden bis zu drei Parameter übergeben. Der erste Parameter enthält den Dateinamen oder eine komplette URL der Webseite, die im neuen Fenster geladen werden soll. Der zweite Parameter enthält einen Namen, der dem neuen Fenster gegeben werden soll. Im dritten Parameter kann über verschiedene Angaben festgelegt werden, wie das neue Fenster aussehen soll. Im obigen Beispiel wird angegeben, dass keine Menüleiste eingeblendet werden soll und dass das Fenster in einer Größe von 200x200 Pixel geöffnet werden soll. Beachten Sie, dass im dritten Parameter alle Angaben mit Komma getrennt werden und sich kein Leerzeichen in diesem Parameter befinden darf - andernfalls akzeptieren gewisse Browser-Versionen die Angabe nicht.

Über den Rückgabewert der Methode ist es möglich, innerhalb des Fensters mit dem open()-Aufruf auf das neu erstellte Fenster per Javascript zuzugreifen. Um beispielsweise Text in das neue Fenster hineinzuschreiben, öffnen Sie dieses zuerst und greifen dann auf das Objekt document des neuen Fensters zu.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      var Open = window.open("open.html", "Open", "menubar=no,width=200,height=200"); 
      Open.document.write("Hallo, Welt!"); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Der zweite Parameter, den Sie der Methode open() übergeben haben, kann innerhalb von Hyperlinks als Ziel für das Attribut target angegeben werden, spielt in Javascript aber keine Rolle.

Zugriff auf eine Webseite

Das Objekt document kennen Sie bereits aus zahlreichen Beispielen. Es ist dem Objekt window untergeordnet und bietet Zugriff auf verschiedene Eigenschaften eines Dokuments. So können Sie mit folgender Zeile das Änderungsdatum des Dokuments mit Hilfe der Methode alert() auf den Bildschirm ausgeben.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      alert(document.lastModified); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Die wichtigste Methode des Objekts document kennen Sie ebenfalls bereits. Über write() können Sie Text direkt in eine Webseite hineinschreiben. Normalerweise wird die Methode jedoch im Zusammenhang mit open() und close() verwendet.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      document.open(); 
      document.write("Hallo, Welt!"); 
      document.close(); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Mit open() wird ein Dokument zum Schreiben geöffnet, mit write() tatsächlich beschrieben. Mit close() wird der Schreibvorgang abgeschlossen. Dies ist der korrekte Weg, um Texte in eine Webseite zu schreiben, auch wenn aktuelle Browser-Versionen den alleinigen Aufruf von write() akzeptieren.

Wenn Sie die Methode open() aufrufen, um eine Webseite zum Schreiben zu öffnen, wird der vorherige Inhalt der Webseite komplett gelöscht. Es ist mit diesen Javascript-Methoden nicht möglich, Text einem aktuellen Inhalt hinzuzufügen. Auch der direkte Aufruf von write() löscht eine Webseite, nachdem dies ein open() voraussetzt.

Eine noch erwähnenswerte Eigenschaft des Objekts document stellt title dar.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      document.title = "Hallo, Welt!"; 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Über diese Eigenschaft kann der Titel der Webseite gesetzt werden, der häufig in der Fensterleiste des Browsers eingeblendet wird.

Wechsel zwischen besuchten Webseiten

Weit verbreitete Browser wie der Microsoft Internet Explorer oder Netscape Navigator stellen dem Anwender häufig Schaltflächen zur Verfügung, über die zwischen besuchten Webseiten vor- und zurückgeblättert werden kann. Auf diese Funktion kann in Javascript über das Objekt history zugegriffen werden.

history.back(); 

Während die Methode back() den Anwender auf die vorherige Webseite zurückbringt, blendet folgende Methode im Browser die nächste Webseite ein.

history.forward(); 

Um nicht nur jeweils um eine Webseite vor- oder zurückzublättern, steht folgender Methodenaufruf zur Verfügung.

history.go(-2); 

Im obigen Beispiel würde die vorletzte Webseite in den Browser geladen werden, da um zwei Schritte zurückgegangen wird. Um vorzublättern wird einfach eine positive Schrittzahl in Klammern der Methode go() übergeben.

Herkunft der angezeigten Webseite

Das Objekt location macht es möglich, mit dem Herkunftsort einer Webseite zu arbeiten. Das ist für gewöhnlich eine WWW-Adresse, also eine URL. Über location können Sie auf verschiedene Bestandteile einer URL zugreifen und beispielsweise wie folgt in einem Fenster den Pfadnamen des aktuellen Dokuments einblenden.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      alert(location.pathname); 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Die Eigenschaft href des Objekts location enthält die gesamte URL. Indem Sie dieser Eigenschaft eine neue Adresse zuweisen, wird das Dokument angezeigt, auf das die neue Adresse zeigt. So können Sie in Javascript bei Bedarf neue Webseiten laden.

location.href = "http://www.highscore.de/"; 

Das Objekt location stellt nur zwei Methoden bereit, von denen Sie eine im folgenden Beispiel kennenlernen.

location.reload(); 

Über den Aufruf der Methode reload() erzwingen Sie, dass die momentan im Browser angezeigte Webseite neu geladen wird.

Zugriff auf Bilder

Das Array images[], dem Objekt document untergeordnet, ermöglicht Zugriff auf Bilder im Dokument. Sie müssen jeweils den Index des Bildes angeben, auf das Sie zugreifen möchten, oder aber den Namen, wenn Sie das Attribut name im HTML-Code angegeben haben.

Bilder bieten eine Reihe von Eigenschaften an, die großenteils jedoch nur lesbar sind. Sie können beispielsweise wie folgt die Größe der ersten Grafik im Dokument mit alert() auf den Bildschirm ausgeben.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <img src="ampel.png" width="70" height="200" alt="">
    <script type="text/javascript">
      alert(document.images[0].width + " Pixel breit und " + document.images[0].height + " Pixel hoch"); 
    </script>
  </body>
</html>

• Beispiel ausführen

Es ist jedoch nicht erlaubt, die Eigenschaften auf einen neuen Wert in Javascript zu setzen und damit dynamisch die Größe der Grafik zu ändern.

Die einzige Eigenschaft eines Bildes, die geändert werden darf und für dynamische Effekte sehr hilfreich ist, ist src. Diese Eigenschaft enthält den Pfad einer Grafik und kann beispielsweise wie folgt ausgegeben werden.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <img src="ampel.png" width="70" height="200" alt="">
    <script type="text/javascript">
      alert(document.images[0].src); 
    </script>
  </body>
</html>

• Beispiel ausführen

Es ist nun wie gesagt auch möglich, dieser Eigenschaft einen neuen Pfad zuzuweisen. Auf diese Weise wird die Grafik ausgetauscht: Das Bild erhält einen neuen Pfad, und daraufhin wird die neue Grafik geladen und anstelle des alten Bildes angezeigt. Die Größenangaben werden jedoch übernommen und nicht angepaßt.

Im Zusammenhang mit Event-Handlern werden Sie sehen, wie sich mit document.images[].src dynamische Effekte entwickeln lassen.

Arbeiten mit Java-Applets

DOM 0 bietet eine Möglichkeit an, von Javascript aus auf Java-Applets zuzugreifen. Hierfür stellt das Objekt document ein Array applets[] bereit, über das auf einzelne Java-Applets zugegriffen werden kann. Das Array bietet an sich eigentlich nur eine einzige Eigenschaft an - nämlich die, die jedes Array bietet: length. Über diese Eigenschaft kann lediglich ermittelt werden, wie viele Java-Applets eigentlich in der Webseite eingebettet sind.

Der Zugriff auf Java-Applets macht erst dann Sinn, wenn das Applet selber Eigenschaften und Methoden zum Aufruf anbietet.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      function loaded() { 
        document.applets[0].set_text("Hallo, Welt!"); 
      } 
    </script>
  </head>
  <body onload="loaded();">
    <applet code="Text.class" width="150" height="100">
    </applet>
  </body>
</html>

• Beispiel ausführen

Das Problem beim Zugriff auf Java-Applets ist, dass diese normalerweise nicht direkt beim Laden der Webseite zur Verfügung stehen, sondern selber erst noch vom Browser geladen werden müssen. Deswegen können Sie auf Java-Applets erst zugreifen, wenn diese auch tatsächlich geladen sind - andernfalls erhalten Sie eine Fehlermeldung vom Browser. Obiges Beispiel konstruiert daher ein derartiges Javascript-Programm, das erst ausgeführt wird, wenn die Webseite komplett - also inklusive Java-Applet - geladen ist und daher der Zugriff auf das Applet auch erlaubt ist.

Im obigen Code-Beispiel wird eine Methode set_text() aufgerufen, mit der ein Text ins Java-Applet ausgegeben werden kann. Diese Methode kann nur deswegen aufgerufen werden, weil sie vom Java-Applet implementiert ist. Zugriffe auf Java-Applets sind also nur über Eigenschaften und Methoden möglich, die das Java-Applet anbietet. Sie benötigen also für Java-Applets eine entsprechende Dokumentation, um die vorhandenen Eigenschaften und Methoden kennenzulernen.

Zugriff auf Hyperlinks

Das Objekt document bietet mit dem Array links[] eine Möglichkeit des Zugriffs auf Hyperlinks in einem Dokument. Der Zugriff gestaltet sich jedoch nicht sehr weitreichend. Sie können einmal auf die Eigenschaft length wie bei jedem Array zugreifen. Außerdem können Sie über Angabe eines Index in eckigen Klammern direkt den Verweis beispielsweise wie folgt auf den Bildschirm ausgeben.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <a href="http://www.highscore.de">www.highscore.de</a>
    <script type="text/javascript">
      alert(document.links[0]); 
    </script>
  </body>
</html>

• Beispiel ausführen

Das Array links[] bietet keine Methoden und auch keine weiteren Eigenschaften mehr an. Dieses Objekt wird daher relativ selten eingesetzt.

Auf Formulare zugreifen

Das Array schlechthin in DOM 0 stellt wohl forms[] dar, das ebenfalls wie viele andere zum Objekt document gehört. Mit diesem Array ist es möglich, auf Formulare und - über Unterobjekte - auf einzelne Schaltelemente in Formularen zuzugreifen. Dieses Array wird häufig zum Überprüfen von Benutzereingaben in Formularen eingesetzt. Nachdem Formulare ein recht einfaches interaktives Element im World Wide Web sind, kommen sie häufig vor - und damit auch der Einsatz von forms[].

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <form action="mailto:test@test.de">
      <input type="text">
    </form>
    <script type="text/javascript">
      alert(document.forms[0].action); 
    </script>
  </body>
</html>

• Beispiel ausführen

Das Array forms[] bietet Eigenschaften an, um auf grundlegende Optionen eines Formulars zugreifen zu können. Im obigen Beispiel wird auf die Eigenschaft action zugegriffen, um den Wert mit alert() auf den Bildschirm auszugeben.

Interessant sind auch die Methoden submit() und reset(). Sie bewirken das gleiche wie die zwei bekannten Schaltflächen, die in HTML gesetzt werden können und ein Formular entweder absenden oder zurücksetzen.

Auf Schaltflächen in Formularen zugreifen

Während Sie mit forms[] auf einzelne Formulare an sich zugreifen können, können Sie über das Array elements[] auf einzelne Schaltflächen in einem Formular zugreifen. Nachdem in HTML unterschiedliche Arten von Schaltflächen definiert werden können - von Kontrollkästchen über Eingabefelder bis hin zu Kombinationsschaltflächen - hängt sehr von der Schaltfläche ab, welche Eigenschaften und Methoden zur Verfügung stehen und welche nicht.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <form action="">
      <input type="text" value="Hallo, Welt!">
    </form>
    <script type="text/javascript">
      alert(document.forms[0].elements[0].value); 
    </script>
  </body>
</html>

• Beispiel ausführen

Eine Eigenschaft, die alle Schaltflächen in einem Formular anbieten, ist value. Obiges Beispielprogramm greift hierbei auf den Wert zu, der im Textfeld angegeben ist, und zeigt ihn am Bildschirm an.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <form action="">
      <select>
        <option value="Hallo">Hallo</option>
        <option value="Welt">Welt</option>
      </select>
    </form>
    <script type="text/javascript">
      alert(document.forms[0].elements[0].value); 
    </script>
  </body>
</html>

• Beispiel ausführen

In diesem Beispiel wird mit value stattdessen der Wert angezeigt, der momentan in der Kombinationsschaltfläche ausgewählt ist.

Zugriff auf Auswahlmöglichkeiten

Sie wissen bereits, dass mit forms[] auf Formulare und mit elements[] auf Schaltflächen in Formularen zugegriffen werden kann. Wozu ist das Array options[] also gut?

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
  </head>
  <body>
    <form action="">
      <select>
        <option value="Hallo">Hallo</option>
        <option value="Welt">Welt</option>
      </select>
    </form>
    <script type="text/javascript">
      alert(document.forms[0].elements[0].options[1].text); 
    </script>
  </body>
</html>

• Beispiel ausführen

Sie sehen oben ein ähnliches Beispiel wie zuvor. Es wird wieder eine Kombinationsschaltfläche mit Hilfe des HTML-Tags select angezeigt. Genau für Schaltelemente dieses Typs ist das Array options[] gedacht. Sie können auf das Array options[] also wirklich nur bei select-Schaltflächen zugreifen.

Im obigen Code-Beispiel wird per Index 1 auf die zweite Auswahlmöglichkeit in der Kombinationsschaltfläche zugegriffen und der Text, der in der Schaltfläche angezeigt wird, per alert() am Bildschirm ausgegeben.

Zugriff auf Browser-Eigenschaften

Das Objekt navigator befindet sich in einer eigenen Objekthierarchie, auch wenn diese zu DOM 0 gehört. Es ist nicht mit anderen Objekten wie window oder document verwandt.

Über navigator stehen Eigenschaften und Methoden des Browsers an sich zur Verfügung. So kann beispielsweise anhand der Eigenschaft appName ermittelt werden, von welchem Hersteller der verwendete Browser stammt.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      if (navigator.appName == "Microsoft Internet Explorer") { 
        alert("Sie verwenden den Microsoft Internet Explorer."); 
      } else if (navigator.appName == "Netscape") { 
        alert("Sie verwenden den Netscape Navigator."); 
      } 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Je nachdem, ob in der Eigenschaft appName der Wert "Microsoft Internet Explorer" oder "Netscape" gespeichert ist, wird eine andere Meldung angezeigt.

Eine wichtige Methode ist javaEnabled(), die den Wert true zurückgibt, wenn der Browser Java unterstützt und Java aktiviert ist. Andernfalls wird false zurückgegeben. Damit kann frühzeitig per Javascript erkannt werden, ob beispielsweise in einem neuen Browserfenster ein Java-Applet überhaupt eingeblendet werden muss. Dies macht nur dann Sinn, wenn der Browser Java-Applets versteht und ausführt.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      if (navigator.javaEnabled() == true) { 
        document.write("Java wird unterstützt und ist aktiviert."); 
      } else { 
        document.write("Java wird nicht unterstützt oder ist deaktiviert."); 
      } 
    </script>
  </head>
  <body>
  </body>
</html>

• Beispiel ausführen

Im obigen Beispiel wird abhängig davon, ob Java unterstützt wird und aktiviert ist, eine entsprechende Meldung direkt in die Webseite hineingeschrieben.

Die beiden Unterobjekte plugins[] und mimeTypes[] des Objekts navigator werden im Rahmen dieses Buchs nicht näher beschrieben.

Auf Benutzereingaben reagieren

In allen Beispielen bisher ist der Javascript-Code immer dann ausgeführt worden, wenn die Webseite geladen wurde. In den allermeisten Situationen möchten Sie jedoch nicht Code beim Laden der Webseite ausführen, sondern erst bei bestimmten Benutzereingaben. Dies ist mit Event-Handlern möglich.

Ein Event-Handler erlaubt Ihnen die Registrierung einer Funktion für ein bestimmtes Ereignis. Sie legen hierbei fest, dass eine ganz bestimmte Javascript-Funktion aufgerufen werden soll, wenn ein bestimmtes Ereignis eintritt.

<html>
  <head>
    <title>Webseiten erstellen mit Javascript</title>
    <script type="text/javascript">
      function buttonclick() { 
        alert("Hallo, Welt!"); 
      } 
    </script>
  </head>
  <body>
    <form action="">
      <input type="button" value="Klick mich!" onclick="buttonclick();">
    </form>
  </body>
</html>

• Beispiel ausführen

Im obigen Beispiel wird eine Javascript-Funktion buttonclick() definiert. Sie enthält eine Anweisung, um die Meldung "Hallo, Welt!" per alert() am Bildschirm anzuzeigen. Nachdem im Script-Bereich der Webseite kein Aufruf der Funktion stattfindet, wird auch beim Laden der Webseite kein Javascript-Code ausgeführt. Zur Erinnerung: Eine Funktionsdefinition macht gar nichts, erst beim Aufruf passiert etwas.

Im <body>-Tag der Webseite wird ein Formular definiert, das eine Schaltfläche zum Anklicken enthält. Diese Schaltfläche verwendet erstmals einen Event-Handler: Mit dem Attribut onclick wird die im HTML-Code weiter oben definierte Funktion buttonclick() verknüpft. Sie registrieren also die Funktion buttonclick() für das Ereignis onclick. Anders ausgedrückt: Bei einem Mausklick auf die Schaltfläche soll die Funktion buttonclick() ausgeführt werden.

Laden Sie die Webseite in den Browser, und es passiert erstmal nichts. Erst wenn Sie mit der Maus auf die Schaltfläche klicken, wird Ihnen die Meldung "Hallo, Welt!" am Bildschirm ausgegeben. Klicken Sie öfter mit der Maus auf die Schaltfläche, erscheint die Meldung dementsprechend häufig. Denn jedesmal, wenn Sie klicken, wird das Ereignis ausgelöst, und die damit registrierte Funktion buttonclick() wird ausgeführt.

DOM 0 definiert eine ganze Reihe an Event-Handlern. Folgende Ereignisse können registriert werden: onabort, onblur, onchange, onclick, ondblclick, onerror, onfocus, onload, onmouseover, onmouseout, onreset, onselect, onsubmit und onunload. Das Problem ist, dass nicht jedes Objekt alle Event-Handler unterstützt. Hier hilft nur wieder der Blick in eine Referenz.

Nachfolgend wird Ihnen ein kurzer Überblick über die in DOM 0 existierenden Event-Handler gegeben.

Um weiterführende Benutzereingaben abzufangen, müssen Event-Handler aus anderen fortgeschritteneren Objekthierarchien wie DHTML verwendet werden.

Übung macht den Meister

Sie können die Lösungen zu allen Aufgaben in diesem Buch als ZIP-Datei erwerben.

1. Erstellen Sie eine Webseite, die eine Grafik enthält. Bei Mausklick auf die Grafik soll eine entsprechende Meldung per alert() auf den Bildschirm ausgegeben werden.

2. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 1 dahingehend, dass die Meldung nicht bei Mausklick ausgegeben wird, sondern beim Überfahren der Grafik mit der Maus. Außerdem soll die Meldung nicht per alert() auf den Bildschirm ausgegeben werden, sondern in einem neuen Browserfenster mit document.write(). Geben Sie im ersten Parameter der Methode open() des Objekts window den String "about:blank" an, um ein neues Browserfenster ohne Webseite zu öffnen.

3. Schreiben Sie Ihr Javascript-Programm aus Aufgabe 1 derart um, dass beim Überfahren der Grafik mit der Maus ein anderes Bild angezeigt wird. Verläßt die Maus die Grafik, soll das ursprüngliche Bild wieder angezeigt werden.

4. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 3 dahingehend, dass bei Mausklick ebenfalls eine andere Grafik eingeblendet wird.

5. Erstellen Sie eine Webseite, die ein Eingabeformular für Vorname, Nachname, Email-Adresse und Kommentar enthält, das als Feedbackformular in Websites verwendet werden könnte. Das Kommentarfeld soll durch einen <textarea>-Tag dargestellt werden, die restlichen Felder durch <input>-Tags vom Typ text. Die Einträge für Vorname, Nachname und Email-Adresse dürfen maximal 40 Zeichen lang sein, der Kommentar maximal 250 Zeichen.

6. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 6 dahingehend, dass beim Absenden des Formulars auf alle Fälle eine Email-Adresse und ein Kommentar angegeben sein muss.

7. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 7 dahingehend, dass beim Absenden und beim Zurücksetzen des Formulars eine Sicherheitsfrage erscheint und der Anwender gefragt wird, ob er wirklich absenden oder zurücksetzen möchte.

8. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 8 dahingehend, dass eine Grafik eingeblendet wird, die jeweils anzeigt, ob das Formular mit den momentanen Angaben abgesendet werden kann oder nicht. Sind die erforderlichen Eingaben vom Anwender vorgenommen worden, soll ihm durch eine andere Grafik gezeigt werden, dass er das Formular jetzt absenden könnte.

9. Erstellen Sie eine Webseite, die lediglich eine Schaltfläche besitzt, über die sich bei Mausklick ein neues Browser-Fenster öffnet. Im neuen Fenster sollen zwei Frames aufgebaut werden, wobei jeder Frame eine andere Hintergrundfarbe besitzen soll. Die gesamte Anwendung darf nur aus einer einzigen Webseite bestehen - nämlich der, in dem sich die Schaltfläche befindet. Geben Sie im ersten Parameter der Methode open() des Objekts window den String "about:blank" an, um ein neues Browserfenster ohne Webseite zu öffnen.

10. Für Experten: Erstellen Sie ein Javascript-Programm, das ein Kalenderblatt des aktuellen Monats in einer Tabelle anzeigt. Die erste Reihe der Tabelle enthält den Namen des Monats, die Reihe darunter die Kürzel Mo, Di, Mi, Do, Fr, Sa und So in genau dieser Reihenfolge. Darunter soll in mehreren Reihen der Kalendermonat aufgeschlüsselt werden. Wochenendtage sowie das aktuelle Datum sollen hierbei farblich hervorgehoben werden.