Webdesign mit JavaScript Nick Heinle & Bill Pena 1.Auflage Juli 2002 ISBN 3-89721-275-7 282 Seiten

Mit Fenstern arbeiten

Alles, was auf einer Webseite geschieht, findet in einem Fenster statt. Dieses Kapitel erklärt, wie Sie Fenster steuern und erzeugen und wie Sie mit ihnen kommunizieren. Sie können sowohl den Speicherort und die Abfolge von Fenstern steuern als auch neue Fenster öffnen und dabei ihre Größe und ihr Erscheinungsbild genau kontrollieren. Am mächtigsten ist jedoch die Fähigkeit Ihrer Fenster, miteinander zu kommunizieren. Die Steuerelemente zur Fernbedienung, die Sie in diesem Kapitel kennenlernen werden, sind erst der Anfang.

Grundlagen der Arbeit mit Fenstern

Beginnen wir mit einigen einfachen Fenster-Steuerelementen. In Kapitel 1 haben wir der Statuszeile mit der Eigenschaft status des window-Objekts einen beschreibenden Inhalt hinzugefügt. In diesem Abschnitt werden wir einige andere Eigenschaften und Methoden von window verwenden, um den URL zu ändern, den das Fenster anzeigt, und Links zu erzeugen, mit denen wir auf den vom Anwender besuchten Seiten vor- und zurückgehen können.

Die Adresse des Fensters ändern

Das einfachste Beispiel für die Bearbeitung eines Fensters mit JavaScript besteht darin, eine neue Seite in das aktuelle Fenster zu laden. Beispiel 2-1 zeigt den Code hierfür:

 <script language="JavaScript">
 window.location = "http://www.yahoo.de/";
 </script>

Internetsurfer sprechen normalerweise davon, auf eine andere Seite zu gehen oder von einer Website zur nächsten weiterzugehen. Natürlich ist das bildlich gemeint. Der Browser geht nirgendwohin. Vielmehr wird eine neue Seite in den Browser geladen. Daher können Sie in JavaScript den aktuellen URL ändern, indem Sie die Eigenschaft location des aktuellen Fensters ändern. Ebenso wie farbe eine Eigenschaft eines Autos ist, ist location eine Eigenschaft eines Fensters.

Das aktuelle Fenster - dasjenige, in dem sich das Skript befindet - wird als window bezeichnet. (Sie können es jedoch auch als self bezeichnen.) Wenn Sie window.location sagen, dann meinen Sie damit die Eigenschaft location des aktuellen Fensters. Diese Eigenschaft legt fest, welche Datei das aktuelle Fenster anzeigt. Im Beispiel 2-1 zeigt das Fenster die Homepage von Yahoo! an.

Obwohl Sie nur sehr selten selbst eine Datei angeben werden, die im aktuellen Fenster geladen werden soll, ist diese Fähigkeit dennoch nützlich. Nehmen wir z.B. an, der URL eines Dokuments habe sich geändert und laute nun nicht mehr http://www.beispiel.com/alteseite.html, sondern http://www.beispiel.com/neueseite.html. In diesem Fall können Sie die Eigenschaft window.location in der alten Seite so setzen, daß sie zu der neuen Seite weist, und der Anwender wird nicht erkennen, daß sich der URL geändert hat. (Dieselbe Wirkung können Sie auch mit einem Umleitungs-Header erzielen.) Der eigentliche Nutzen von window.location liegt jedoch darin, daß man damit die Seite ändern kann, die in einem anderen Fenster angezeigt wird. Dazu erfahren Sie weiter unten in diesem Kapitel mehr.

Die Adresse mit einer Schaltfläche ändern

Gestalten wir location nun noch ein wenig nützlicher. Wir könnten z.B. eine Formular-Schaltfläche erstellen, die eine neue Seite lädt, sobald der Anwender sie anklickt. Mit Formularen und JavaScript haben wir uns hier zwar noch nicht befaßt, aber wenn Sie mit den Grundlagen der Erstellung von HTML-Formularen vertraut sind, ist auch das nicht schwierig.

Zuerst erstellen wir ein einfaches Formular, das eine einzige Schaltfläche enthält. Beispiel 2-2 zeigt den entsprechenden Code.

 <form>
 <input type="button" value="Auf Seite XY gehen">
 </form>

Nun haben wir zwar eine einfache Formular-Schaltfläche, aber wie verbinden wir sie mit dem Skript? In Kapitel 1 haben Sie die Event-Handler kennengelernt, kleine Anweisungen, die ein Event »abfangen« und es dann »behandeln«. Sie werden feststellen, daß Event-Handler immer dann ins Spiel kommen, wenn Sie Ihre Seite interaktiv gestalten möchten.

In diesem Szenario möchten wir eine andere Seite laden, sobald die Formular-Schaltfläche angeklickt wird. Verwenden wir hierfür wie in Kapitel 1 onMouseOver? Nein. Das Event, das wir behandeln möchten, ist das Anklicken einer Schaltfläche. JavaScripts Handler für dieses Event heißt onClick. Wenn Sie der Formular-Schaltfläche den Event-Handler onClick hinzufügen, wird der angegebene Code ausgeführt, sobald der Anwender die Schaltfläche anklickt.

Beispiel 2-3 zeigt ein Formular, das die Datei seite.html lädt, sobald die Schaltfläche angeklickt wird. (Wenn Sie auf eine Adresse verweisen, verwenden Sie entweder einen relativen oder einen absoluten URL; in diesem Fall verwenden wir einen relativen.)

 <form>
 <input type="button" value="Auf Seite XY gehen"
        onClick="window.location = 'seite.html';">
 </form>

Auch hier gilt wieder, daß eine Schaltfläche, die irgendeine neue Seite lädt, nicht sonderlich nützlich ist. Wenn Sie eine Schaltfläche jedoch mit einem Auswahlmenü verbinden, kann der Anwender zwischen einer Reihe von Seiten wählen.

Das Verlaufsprotokoll eines Fensters bearbeiten

Das Verlaufsprotokoll bezeichnet die Abfolge der Dokumente, die der Anwender während der aktuellen Browsersitzung besucht hat. Innerhalb dieser Abfolge kann man sich vor- und zurückbewegen. Dafür ist sehr wenig Code erforderlich, da Sie nur auf das history-Objekt des Fensters zuzugreifen brauchen. Das history-Objekt stellt die Methode go() bereit, mit der man das Fenster im zeitlichen Ablauf vor- und zurückbewegen kann.

Die Zahl, die Sie an history.go() übergeben, legt fest, wie weit und in welche Richtung das Fenster im Verlaufsprotokoll des Browsers gehen soll. Um zurückzugehen, verwenden Sie eine negative Zahl, und um vorwärts zu gehen, eine positive Zahl. Der folgende Code zeigt einige Beispiele für die Methode go():

 // Gehe eine Seite zurück.
 window.history.go(-1);
 // Gehe eine Seite vor.
 window.history.go(1);
 // Gehe drei Seiten zurück.
 window.history.go(-3);
 // Gehe drei Seiten vor.
 window.history.go(3);

Angenommen, Sie möchten zwei Links erzeugen, die dieselbe Wirkung erzielen wie die Schaltflächen Vor und Zurück des Browsers. Beispiel 2-4 zeigt den Code für diese beiden Schaltflächen:

 <a href="#" onClick="window.history.go(-1); return false;">Zurück</a>
 <a href="#" onClick="window.history.go(1); return false;">Vor</a>

Beachten Sie, daß wir die Standardaktion der Links im Beispiel 2-4 geändert haben, indem wir für das Attribut href ein Hash-Zeichen (#) angegeben haben. Dieses Symbol verweist auf den Anfang des aktuellen Dokuments. Da wir das Standardverhalten des Links jedoch mit dem Event-Handler onClick überschreiben, können wir # als komfortablen Platzhalter für das Attribut href verwenden. Beachten Sie zudem, daß wir am Ende beider onClick-Event-Handler den Ausdruck return false; angeben. Damit überschreiben wir die Standardaktion des Links, die darin besteht, zum mit href angegebenen Ort zu gehen.

Neue Fenster öffnen

JavaScript ist nicht auf die Steuerung von und Arbeit mit einem einzigen Browserfenster beschränkt. Es kann genauso leicht mehrere Fenster erzeugen und verändern. Neue Fenster sind nützlich, wenn Sie verwandte oder ergänzende Inhalte darstellen möchten: Sie können ihre Maße und ihr Erscheinungsbild steuern, und der Anwender kann zu Ihrer Seite zurückkehren, indem er einfach das neue Fenster schließt. (Natürlich mißbrauchen einige Websites die neuen Fenster und verwenden sie für Werbung. Sie würden das aber nie machen, oder?)

Abbildung 2-1 zeigt eine typische Verwendung eines neuen Fensters. Wenn der Anwender auf dieser Katalogseite von REI das Bild »Sizing Chart« anklickt, werden die Größeninformationen in einem neuen Fenster angezeigt.

Diese Fenster öffnen

Wie öffnen Sie ein neues Fenster? Das ist zwar nicht schwierig, um aber den größtmöglichen Nutzen daraus zu ziehen, ist es nötig, zuvor einige Dinge zu lernen. Sehen wir uns zuerst den Code für das Bild an, das das Pop-up-Fenster startet. Beispiel 2-5 zeigt das Tag <a> für dieses Bild.

 <a href="#" onClick="window.open('size.html', 'sizechart',
    'width=500,height=400,scrollbars=yes,resizable=yes,status=yes');">
 <img src="sizechart.gif" width="163" height="26" border="0"></a>

Abbildung 2-1: Wenn der Link »Sizing Chart« angeklickt wird, öffnet sich ein neues Fenster

Wie Sie sehen, weist dieser Link nur eine Besonderheit auf: den Event-Handler onClick, der die Methode window.open() aufruft. Erwartungsgemäß öffnet diese Me-thode ein neues Browserfenster. Beachten Sie, daß wir hier denselben Trick anwenden wie in Beispiel 2-4 und für das Attribut href ein # angeben. Da wir das Standardverhalten des Links wiederum mit onClick überschreiben, können wir # bedenkenlos als Platzhalter verwenden.

Die Methode open() des window-Objekts ist ein Standardverfahren für das Öffnen eines neuen Fensters. Außerdem können Sie damit eine Gruppe von Merkmalen für das neue Fenster angeben, z.B. die Höhe, die Breite, und ob das neue Fenster eine Statuszeile und eine Bildlaufleiste hat oder nicht. Beispiel 2-5 veranschaulicht dies. window.open() nimmt die folgenden Argumente entgegen, die in der angegebenen Reihenfolge stehen müssen:

• einen URL für die Datei, die im neuen Fenster angezeigt werden soll
• einen Namen für das neue Fenster
• eine Zeichenkette mit Fenstermerkmalen

Alle diese Werte sind in Anführungszeichen eingeschlossen und werden durch Kommata voneinander getrennt.

Die ersten beiden Werte sind sehr einfach: ein URL und ein Name für das Fenster. Der URL gibt die Datei an, die in dem neuen Fenster angezeigt werden soll. Im Beispiel 2-5 ist es die Datei size.html. Mit dem Namen des Fensters (in diesem Fall haben wir sizechart angegeben) und dem Attribut target können Sie den Inhalt des neuen Fensters vom ursprünglichen Fenster aus steuern. Meist macht man dies bei Frames, es funktioniert jedoch auch bei Fenstern.

Was ist nun mit dem dritten Wert? Dieser Wert ist eine einzige Zeichenkette, die Fenstermerkmale und deren Werte enthält. Alle Name-/Wert-Paare sind durch Kommata voneinander getrennt, und zwischen dem Namen und dem Wert steht jeweils ein Gleichheitszeichen (=). Die Werte selbst sind wiederum in Anführungszeichen gefaßt. Die Name-/Wert-Paare steuern die Größe des Fensters und verschiedene andere Merkmale wie z.B., ob es eine Symbolleiste, Statuszeile, Bildlaufleiste usw. gibt. In diesem Beispiel ist das Fenster 500 Pixel breit und 400 Pixel hoch, es ist skalierbar (d.h., der Anwender kann die Größe des Fensters ändern) und hat eine Statuszeile und eine Bildlaufleiste.

Knifflige Details

Tabelle 2-1 zeigt die wesentlichen Merkmale, die man für ein neues Fenster angeben kann.

Die ersten beiden Merkmale, height und width, bedürfen keiner Erklärung. Geben Sie einfach die gewünschte Höhe und Breite des Fensters in Pixeln an. Die übrigen Merkmale in der Tabelle 2-1 können auf yes oder no gesetzt werden (oder auf 1 oder 0, wobei 1 mit yes und 0 mit no gleichbedeutend ist). Schreibt man das jeweilige Merkmal ohne genauere Spezifizierung hin, so wird standardmäßig das Merkmal auf yes gesetzt, sprich aktiviert. Anders ausgedrückt: Die beiden folgenden Anweisungen haben dieselbe Bedeutung, und beide enthalten Bildlaufleisten:

 window.open("seite.html", "dasFenster",
     "height=200,width=200,scrollbars");
 window.open("seite.html", "dasFenster",
     "height=200,width=200,scrollbars=yes");

Wenn Sie im Code zum Öffnen des Fensters ein bestimmtes Merkmal nicht angeben, wird dieses automatisch auf no gesetzt. Der folgende Code erstellt z.B. ein Fenster, das jeweils 200 Pixel breit und hoch ist, aber keine anderen besonderen Merkmale aufweist:

 window.open("seite.html", "dasFenster", "height=200,width=200");

Keine Symbolleiste, keine Statuszeile, keine Bildlaufleisten, keine Menüleiste - ein einfaches Fenster, in dem seite.html angezeigt wird. Wenn Sie jedoch noch einen Schritt weiter gehen und auch die Eigenschaften height und width weglassen, erhalten Sie das Standard-Browserfenster mit Symbolleisten und allem, was sonst noch dazugehört.

Das Fenster schließen

Wenn Sie sich Abbildung 2-1 noch einmal ansehen, werden Sie feststellen, daß das neue Fenster den Link »Close window« aufweist. Dieses Merkmal sollten Sie allen Browserfenstern hinzufügen, die Sie erstellen. Und das Beste daran ist: Es ist ganz einfach. Das Beispiel 2-6 zeigt den Code für diesen Link:

 <a href="javascript:window.close();">Close window</a>

Dieser Link zeigt ein neues Verfahren, wie man JavaScript in eine Webseite einfügen kann. Der Wert des Attributs href ist kein Standard-URL, sondern enthält JavaScript-Code. Der Wert beginnt mit javascript: und gibt damit an, daß der Link einen JavaScript-Pseudoprotokoll-URL enthält. (»Pseudo«, weil es zwar kein echtes Protokoll wie http: oder ftp: ist, aber genauso funktioniert.) Im Grunde genommen teilt das javascript: im Link dem Browser mit, daß der Link JavaScript-Code enthält; der Browser führt dann allen Code aus, der hinter dem javascript: im Link folgt. In unserem Fall ist der JavaScript-Code einfach ein Aufruf der Methode window.close(), die das aktuelle Fenster erwartungsgemäß schließt.

Bei Anfrage öffnen

Nachdem Sie nun wissen, wie Sie ein Fenster öffnen, benötigen Sie noch bessere Steuerungsmöglichkeiten. Zuerst fügen wir den Code zum Öffnen des Fensters in eine Funktion ein, damit wir Fenster nach Bedarf öffnen können, ohne in jedem Event-Handler den gesamten Code zum Öffnen des Fensters neu schreiben zu müssen.

Wie wir in Kapitel 1 besprochen haben, ist eine Funktion in JavaScript einfach ein Name für eine Gruppe von Anweisungen an den Webbrowser. Beispiel 2-7 zeigt die Funktion oeffnenFenster(), die die Methode window.open() aufruft, um ein Fenster zu erstellen, das seite.html anzeigt. (Machen Sie sich im Moment keine Gedanken darüber, wie die Funktion genau erstellt wird; damit werden wir uns weiter unten im Exkurs »Funktionen schreiben« befassen.)

 <html>
 <head>
 <title>Sesam öffne dich</title>
 <script language="JavaScript">
 function oeffnenFenster() {
     window.open("seite.html", "neuesFenster",
         "width=500,height=400,scrollbars=yes,resizable=yes,status=yes");
 }
 </script>
 </head>

Weiter oben in diesem Kapitel haben Sie gelernt, wie Sie die Adresse eines Fensters mit einer Formular-Schaltfläche öffnen. Mit demselben Verfahren werden wir nun ein neues Fenster öffnen. Fügen Sie einfach den Event-Handler onClick für die Schaltfläche ein und führen Sie damit die Funktion aus. Beispiel 2-8 veranschaulicht dies:

 <body>
 <form>
 <input type="button" value="Fenster öffnen" onClick="oeffnenFenster();">
 </form>
 </body>
 </html>

Sie brauchen keine Schaltfläche zu verwenden, sondern können die Seite auch so einrichten, daß der Anwender wie im REI-Beispiel einen Link anklicken muß, um ein neues Fenster zu öffnen. Hierfür erstellen Sie einfach einen Link, der die Funktion oeffnenFenster() ausführt, sobald er angeklickt wird. Eine Möglichkeit besteht darin, einen normalen Link (mit # als Platzhalter) zu schreiben und den Event-Handler onClick in den Link einzufügen; das Beispiel 2-9 zeigt den entsprechenden Code.

 <body>
 <a href="#" onClick="oeffnenFenster(); return false;">
 <img height="100" width="100" src="bild.gif"></a>
 </body>
 </html>

Beachten Sie, daß der Event-Handler onClick am Ende return false; enthält. Ebenso wie beim Beispiel mit der Statuszeile in Kapitel 1 dient dieses Codestück auch hier dazu, die Standardaktion des Links zu deaktivieren. In der Standardeinstellung lädt der Browser den im Attribut href angegebenen URL, sobald der Anwender einen Link anklickt. In diesem Fall verwenden wir für das Attribut href das Zeichen #, damit der Browser standardmäßig den Anfang des aktuellen Dokuments anzeigt. In diesem Beispiel stellt dieses Standardverhalten kein Problem dar, da die Seite nicht viel Inhalt enthält. (Anders formuliert: Wenn wir den Anfang des Dokuments anzeigen, wird das ganze Dokument angezeigt.) Befände sich dieser Link jedoch am unteren Ende einer langen Seite, dann würde die Standardaktion den Browser zwingen, zum Anfang der Seite zu scrollen, wodurch der Anwender seine Stelle im Dokument verlieren würde. Wenn wir am Ende des Event-Handlers onClick jedoch return false; einfügen, führt der Browser die Standardaktion nicht durch.

Es gibt noch eine letzte Möglichkeit, einen Link zu erstellen, der mit oeffnenFenster() ein neues Fenster öffnet. Wir haben uns das Beste für den Schluß aufgehoben, denn am besten öffnen Sie ein neues Fenster mit dem JavaScript-Pseudoprotokoll, wie wir es im Beispiel 2-10 gezeigt haben. Dieses Verfahren unterscheidet sich grundsätzlich von der Verwendung eines Event-Handlers; verwechseln Sie beides also nicht.

 <body>
 <a href="javascript:oeffnenFenster();">
 <img height=100 width=100 src="bild.gif"></a>
 </body>
 </html>

Wenn der Anwender diesen Link anklickt, führt der Browser den Code aus, der im Link hinter javascript: folgt. Dieser Code führt die Funktion oeffnenFenster() aus, die das Fenster startet. Da wir eine graphische Schaltfläche zum Starten des Fensters erstellt haben, enthält der Link einen Verweis auf ein Bild. Im Gegensatz zum Event-Handler onClick brauchen Sie sich nicht darum zu kümmern, die Standardaktion des Links zu deaktivieren, da sozusagen der Link selbst den Code ausführt.

Weitere Verbesserungen

Die Funktion oeffnenFenster() (Beispiel 2-7) öffnet immer dasselbe Dokument. Das ist dann nützlich, wenn Sie mehrere Links (oder Schaltflächen usw.) haben, die alle dasselbe Dokument in einem neuen Fenster öffnen. Was machen Sie jedoch, wenn Sie Links benötigen, die verschiedene Seiten öffnen?

Eine Lösung besteht darin, für jedes Dokument eine eigene Funktion zum Öffnen eines Fensters zu schreiben. Das wäre jedoch mühsam, wenn Sie sehr viele verschiedene Seiten öffnen möchten. Zum Glück gibt es ein besseres Verfahren.

Wir fügen nicht den Namen des Dokuments in die Funktion zum Öffnen des Fensters ein, sondern übergeben den URL für die Seite als Argument an die Funktion. Argumente sind Informationen, die man einer Funktion liefert, wenn sie aufgerufen wird. Die Funktion verwendet diese Informationen dann bei der Durchführung ihrer Aufgabe.

Beispiel 2-11 zeigt eine neue Version der Funktion oeffnenFenster(), die als einziges Argument url entgegennimmt. Da die Funktion url als das erste Argument für die Methode window.open() verwendet, zeigt das neue Fenster die Seite an der Adresse an, die an oeffnenFenster() übergeben wurde.

 <html>
 <head>
 <title>Öffne dieses Fenster</title>
 <script language="JavaScript">
 function oeffnenFenster(url) {
     window.open(url, "neuesFenster",
         "width=500,height=400,scrollbars=yes,resizable=yes,status=yes");
 }
 </script>
 </head>

Wenn Sie nun mit dem Code zum Öffnen eines Fensters eine bestimmte Seite öffnen möchten, können Sie einfach den URL dieser Seite an oeffnenFenster() übergeben, wie es im Beispiel 2-12 gezeigt wird.

 <body>
 <a href="javascript:oeffnenFenster('seite.html');">
 <img height="100" width="100" src="bild.gif"></a>
 </body>
 </html>

Dieses Beispiel veranschaulicht, wie Sie Ihre Skripte mit Funktionen, einem grundlegenden Bestandteil aller Programmiersprachen, effizienter machen können.

Woraus besteht ein Name? Wenn Sie mit diesen Möglichkeiten, ein Fenster mit oeffnenFenster() zu öffnen, experimentieren, erwarten Sie vielleicht, daß auf Ihrem Bildschirm bald viele Browserfenster geöffnet sind, die alle seite.html anzeigen. Statt dessen werden Sie aber nur ein solches Fenster haben. Dies liegt daran, daß der Browser Sie immer nur ein Fenster mit dem Namen erstellen läßt, der im zweiten Argument von window.open() angegeben ist (in unserem Fall neuesFenster). Dieser Name weist dem Fenster eine eindeutige Identität zu, und es kann nicht zwei Fenster mit demselben Namen geben. Wenn die Methode window.open() zum erstenmal mit einem bestimmten Fensternamen aufgerufen wird, öffnet sie ein neues Fenster. Beim nächsten Aufruf mit diesem Fensternamen verwendet sie hingegen erneut das vorhandene Fenster. Falls im Fenster wieder dasselbe Dokument angezeigt werden soll, aktualisiert der Browser das Fenster einfach. Ist der URL hingegen ein anderer, dann wird das neue Dokument im vorhandenen Fenster angezeigt. Dies kann nützlich sein, falls Sie ein einziges neues Fenster erstellen und dann den Inhalt anhand der Aktionen des Anwenders aktualisieren möchten. Wenn Sie mehrere neue Fenster erstellen möchen, müssen Sie diesen jedoch verschiedene Namen geben.

Fernbedienung

Wenn Sie Fenster einrichten, die intelligent zusammenarbeiten, erhalten Sie eine sinnvoll gestaltete Benutzeroberfläche. Mit einem mit JavaScript erstellten Fernbedienungsfenster kann man z.B. Inhalt im Hauptfenster des Browsers verändern. Ihre Besucher können damit zu verschiedenen Seiten in Ihrer Website springen, eine Suche durchführen und noch einige andere Aufgaben ausführen. Dies hat den Vorteil, daß die Besucher ein bekanntes Bild sehen (das Fernbedienungsfenster), während Sie auf allen Ihren Seiten Platz sparen (Navigationsleisten sind überflüssig). Selbst wenn Sie die Hilfen für die Navigation innerhalb einer Seite beibehalten, werden diese durch die Fernsteuerung sinnvoll ergänzt.

Abbildung 2-2 zeigt Camworld, Cameron Barretts Weblog. Wenn Sie das Symbol neben »Sites I Visit Often« anklicken, wird ein Fernbedienungsfenster geöffnet, mit dem Sie auf mehrere andere Seiten zugreifen können. Wenn der Anwender in diesem Fenster eine Website auswählt, wird der Inhalt dieser Site in das Hauptfenster des Browsers geladen. Dieses Verfahren erleichtert es dem Betrachter, mehrere verschiedene Websites auszuprobieren.

Abbildung 2-2: Eine Fernbedienung für den Zugriff auf andere Websites

Das Fernbedienungsfenster erstellen

Sehen wir uns nun an, wie man eine Fernbedienung wie die von Camworld hinbekommt. Zuerst schreiben wir den Code, mit dem das Fernbedienungsfenster geöffnet wird. Beispiel 2-13 zeigt, daß dieser Code die Form einer Funktion haben sollte.

 <html>
 <head>
 <title>Fernbedienung</title>
 <script language="JavaScript">
 function oeffnenFernbedienung(url){
     var fernbedienung = window.open(url, "weblogFenster",
         "width=180,height=490,scrollbars=yes,resizable=yes");
 
     if (fernbedienung.opener == null) {
         fernbedienung.opener = window;
     }
 }
 </script>
 </head>

Zuerst deklarieren wir die Funktion oeffnenFernbedienung(). Die Funktion nimmt ein einziges Argument entgegen, nämlich den URL des Dokuments, das im Fernbedienungsfenster geöffnet werden soll.

Funktionen schreiben Funktionen wie die, mit der wir gerade ein Fenster geöffnet haben, sind ein zentrales Element von JavaScript, das Sie in diesem Buch immer wieder verwenden werden. Jede Funktion hat dieselbe Form: function Funktionsname (Argumente) { auszuführender Code } Eine Funktion wird in vier Schritten geschrieben: Definieren Sie mit dem Wort function eine Funktion. Geben Sie der Funktion einen Namen. Jedesmal, wenn Sie die Funktion später verwenden, verweisen Sie mit diesem Namen auf sie. Zählen Sie die Argumente für die Funktion in runden Klammern auf. Ein Argument (oder Parameter) ist eine Information, die direkt an die Funktion übergeben wird, sobald diese aufgerufen wird. Innerhalb der Funktion können Argumente genau wie Variablen verwendet werden. Geben Sie den Code, den die Funktion jedesmal ausführen soll, wenn sie aufgerufen wird, in geschweiften Klammern an ({}). Funktionen werden normalerweise im head eines HTML-Dokuments definiert und dann im body aufgerufen, wie Sie es in den Beispielen zum Öffnen eines Fensters bereits gesehen haben. Ihre erste Funktion Hier sehen Sie eine sehr einfache Funktion: function hallosagen() { alert("Hallo"); } Diese Funktion heißt hallosagen() und zeigt ein neues JavaScript-Mitteilungsfenster an, das »Hallo« sagt. Um die Funktion auszuführen, rufen Sie sie mit ihrem Namen auf: hallosagen(); Beachten Sie die Verwendung der runden Klammern hinter dem Namen der Funktion: Wenn Sie die Funktion ausführen, folgen nach dem Funktionsnamen immer die runden Klammern. Wenn Sie einer Funktion Argumente übergeben (wozu wir gleich kommen), fügen Sie sie in diese Klammern ein. Argumente verwenden Gestalten wir die Funktion nun etwas flexibler und fügen wir ihr nach dem Wort »Hallo« noch den Namen des Anwenders hinzu. Hierfür müssen wir der Funktion ein Argument hinzufügen: function hallosagen(deinName) { alert("Hallo " + deinName); } Dieser Code erstellt die Funktion hallosagen(), die ein Argument entgegennimmt: deinName. Um diese Funktion auszuführen, müssen wir ihr innerhalb der Klammern einen Namen übergeben: hallosagen("Susanne"); Die Funktion nimmt die Daten (in unserem Beispiel »Susanne«) entgegen, die wir ihr übergeben, und speichert sie in der Variablen deinName, damit sie innerhalb der Funktion verwendet werden können. Dann hängt die Funktion den Wert von deinName an »Hallo« an und zeigt das Mitteilungsfenster mit dem Text »Hallo Susanne« an.

In der folgenden Zeile erstellen wir mit der Methode window.open() ein neues Fenster mit dem Namen weblogFenster, das 490 Pixel hoch und 180 Pixel breit ist. Neu ist an dieser Zeile lediglich, daß wir eine Variable namens fernbedienung erstellen und ihr das Ergebnis von window.open() zuweisen. Die Methode open() gibt ein Objekt zurück, das das gerade erstellte Fenster repräsentiert. In früheren Beispielen mußten wir mit dem Fenster nichts machen und haben dieses Objekt deshalb auch nicht weiter beachtet. Bei der Fernbedienung müssen wir das neue Fenster jedoch bearbeiten können, weshalb wir das Objekt der Variablen fernbedienung zuweisen.

Schließlich folgt noch eine if-Anweisung. Diese Zeile ist sehr wichtig. Wenn ein Browserfenster mit JavaScript ein neues Fenster erstellt (oder öffnet), wird das ursprüngliche Browserfenster als der Öffner bzw. Opener des neuen Fensters bezeichnet. Die Eigenschaft opener des neuen Fensters spiegelt diese Beziehung wider. Sie sollte auf das ursprüngliche window-Objekt gesetzt werden. Da einige Versionen des Navigator dies nicht automatisch machen, stellt die if-Anweisung sicher, daß opener richtig gesetzt ist. Anders ausgedrückt: Die Anweisung setzt fernbedienung.opener auf window, also auf das Hauptfenster des Browsers. Von nun an bezeichnet das Fernbedienungsfenster das ursprüngliche Browserfenster, wenn es mit diesem kommuniziert, immer als opener.

Diese Prüfung der Eigenschaft opener stellt fest, ob opener gleich null ist. null ist in JavaScript ein besonderer Wert, der »kein Wert« bedeutet. Anders ausgedrückt: Falls opener gleich null ist, bedeutet dies, daß opener keinen Wert hat und wir einen Wert setzen müssen.

Um das Fernbedienungsfenster zu starten, benötigen wir irgendwo auf der Seite einen Link. Beispiel 2-14 zeigt den entsprechenden Code.

 <body>
 <a href="javascript:oeffnenFernbedienung('weblogs.html');">
 <img src="icon.gif" width="9" height="9" border="0"></a>
 </body>
 </html>

Wir können die Funktion oeffnenFernbedienung() auch einfach im Event-Handler onLoad des body-Tags aufrufen:

 <body onLoad="oeffnenFernbedienung('weblogs.html');">

Der Event-Handler onLoad wird ausgelöst, sobald das HTML-Dokument vollständig geladen wurde. Er eignet sich gut für die Ausführung von JavaScript-Code, der ausgeführt werden muß, bevor der Anwender mit der Seite zu interagieren beginnt.

Im Fernbedienungsfenster

Nun haben wir also eine Seite namens weblogs.html in das neue Fenster geladen. Diese Seite enthält den eigentlichen Fernbedienungscode. Die HTML-Links in diesem Dokument sind größtenteils reguläre Links, allerdings mit einigen Ausnahmen. Der wichtigste Unterschied besteht darin, daß wir die Links umleiten müssen, damit sie nicht im Fernbedienungsfenster, sondern im Hauptfenster des Browsers (opener) angezeigt werden. Beispiel 2-15 zeigt die Funktion hierfür, die recht einfach ist:

 <html>
 <head>
 <title>Weblogs</title>
 <script language="JavaScript">
 function go(url) {
     opener.location = url;
 }
 </script>
 </head>

Die Funktion go() nimmt den URL entgegen, den Sie ihr übergeben, und weist das Hauptfenster des Browsers (opener) an, zu diesem URL zu gehen. Das Beispiel 2-16 zeigt, wie die Links in weblogs.html aussehen sollten.

 <body>
 <a href="javascript:go('http://10.am/')">10.am</a><br>
 <a href="javascript:go('http://a.jaundicedeye.com/weblog/')">
     A Jaundiced Eye</a><br>
 </body>
 </html>

Diese Links verwenden das JavaScript-Pseudoprotokoll, um go() auszuführen und den Link umzuleiten, sobald er angeklickt wird. Fügen Sie den gewünschten URL ein, und das Fernbedienungsfenster wird sich entsprechend verhalten.

Durch die Eigenschaft opener haben Sie direkten Zugriff auf das ursprüngliche Browserfenster. Dies bedeutet, daß Sie den opener genauso wie jedes andere Fenster behandeln können. Das Ändern der Adresse (des URL) ist nur eine Möglichkeit; Sie können auch auf das document-Objekt zugreifen. Damit ist klar, daß Sie mit dieser Fernbedienung wesentlich mehr machen können, als nur Links umzuleiten.

Ferngesteuerte Suche

Wäre es nicht schön, auch Suchmöglichkeiten in einem kleinen Suchfenster anzubieten, damit die Anwender im Suchfenster Suchbegriffe eingeben können und das Ergebnis im Hauptfenster des Browsers angezeigt wird? Mit einigen Änderungen am Code für die Fernbedienung, den wir bereits geschrieben haben, können Sie die Suchfunktion ganz einfach aktivieren. Beachten Sie jedoch, daß wir hier nur besprechen werden, wie Sie die entsprechende Fernbedienung einrichten, nicht aber, wie Sie für Ihre Website eine Suchmaschine implementieren. (Das geht über den Rahmen dieses Buches hinaus.) Abbildung 2-3 zeigt, wie man auf der Website von O'Reilly ein derartiges Suchfenster implementieren könnte.

Abbildung 2-3: Ein Suchergebnis wird an das Hauptfenster des Browsers weitergeleitet

Die Formularelemente für die Suchfunktion sind im kleinen Suchfenster leicht zu implementieren. Schwieriger ist es, das Suchergebnis im Hauptfenster des Browsers anzuzeigen. Wie zuvor schreiben wir zuerst eine Funktion, die das kleine Fenster öffnet. Beispiel 2-17 zeigt eine geänderte Version der Funktion oeffnenFernbedienung( ), mit der wir ein Suchfenster öffnen können.

 <html>
 <head>
 <title>Ferngesteuerte Suche</title>
 <script language="JavaScript">
 function oeffnenFernbedienung(){
     var fernbedienung = window.open("search.html", "Suchfenster",
         "width=350,height=400,scrollbars=yes,resizable=yes");
 
     if (fernbedienung.opener == null) {
         fernbedienung.opener = window;
     }
     fernbedienung.opener.name = "openerFenster"
 }
 </script>
 </head>

Die wesentliche Neuerung in Beispiel 2-17 ist eine zusätzliche Zeile, die die Eigenschaft name des opener-Fensters setzt. Die Eigenschaft name stimmt mit dem Fenster-namen überein, den das zweite Argument von window.open() setzt. Da wir das opener-Fenster jedoch nicht selbst erstellt haben (da es das Hauptfenster des Browsers ist), kennen wir seinen Namen auch nicht. Zum Glück können wir den Namen dennoch setzen, wie das Beispiel zeigt.

Die Eigenschaft name gleicht dem Attribut name, das wir bei Frames verwenden; allerdings setzen wir sie nicht mit HTML, sondern mit JavaScript. Ebenso wie bei den Frames, bei denen Links und Formulare mit dem Attribut target an einen bestimmten Frame weitergeleitet werden, können wir mit target auch Links und Formulare aus dem Suchfenster an das Hauptfenster umleiten. Voraussetzung ist lediglich, daß wir den name dieses Fensters kennen. So können wir z.B. einen Link im Suchfenster an das Hauptfenster des Browsers umleiten, indem wir einfach target="openerFenster" in den Link einfügen. Dies ist lediglich ein HTML-Benennungsverfahren. Verwechseln Sie es nicht mit der JavaScript-Eigenschaft opener. Wie wir bereits besprochen haben, ist die Eigenschaft opener etwas völlig anderes, und man kann auf sie nur über JavaScript zugreifen.

Moment - ist das nicht redundant? Sie fragen sich vielleicht, warum wir dieses target-Verfahren nicht bei den Links im ersten Fernbedienungsbeispiel verwendet haben. Das hat einen einfachen Grund: Wenn wir diese Methode allein verwenden, geht ein Großteil der Kontrolle verloren, die JavaScript über das Hauptfenster des Browsers hat. Da JavaScript mehr leisten kann, als nur Links umzuleiten, sollten Sie zuerst lernen, wie Sie den opener statt mit einfachem, beschränkten HTML mit JavaScript steuern. Viele verschiedene Dinge können in kleinen Fenstern untergebracht werden: Dialogfenster, Steuerungsfelder usw. Und alle diese Dinge funktionieren nur mit JavaScript. Wenn Sie beide Verfahren miteinander kombinieren, erhalten Sie das Beste aus beiden Welten.

Nachdem wir nun die Funktion oeffnenFernbedienung() geschrieben haben, müssen wir noch das Suchformular im Suchfenster erstellen, wie wir es auch in jedem anderen Szenario machen würden. Dafür brauchen wir nur das Attribut target des Formulars zu ändern. Da der Öffner nun openerFenster heißt, können wir target auf diesen Wert setzen, wie es im Beispiel 2-18 gezeigt wird.

 <form target="openerFenster" action="search.cgi">
 ...
 </form>

Im Suchfenster funktioniert das Formular genauso wie in jeder anderen Seite auch. Der Unterschied besteht darin, daß das Ergebnis des Formulars (z.B. das Suchergebnis) nicht im Suchfenster, sondern im Hauptfenster des Browsers angezeigt wird. Das Wunderbare an dieser Technik ist, daß man sie nicht nur bei Suchformularen, sondern bei einer Vielzahl von Formulararten verwenden kann.

Ein Hinweis zum Debugging Nachdem Sie nun schon etwas besser mit JavaScript vertraut sind, möchte ich eine Warnung anbringen. Wie bei jeder Arbeit, die mit dem Webdesign zu tun hat, werden Sie auch bei JavaScript Augenblicke der Frustration erleben. Sicher ist es Ihnen schon passiert, daß Sie einfach nicht herausfinden konnten, warum ein Layout nicht funktioniert oder bestimmte Schriftarten nicht richtig angezeigt werden. Jede Art der Programmierung bringt solche Frustration mit sich. Die in diesem Buch behandelten Themen bewegen sich an der Grenze zwischen Entwurf und Programmierung. Vielleicht sind Sie mit den Fallstricken des Entwurfs vertraut, wissen aber nicht, wie Sie mit Problemen umgehen, die ihre Ursache in fehlerhaftem JavaScript-Code haben. Codefehler bezeichnet man als Bugs, und das Aufspüren und Beheben dieser Fehler nennt man Debugging. Wenn Sie eine Programmiersprache zu lernen beginnen, werden Sie sehr viel Zeit mit dem Debugging verbringen. Das ist ganz normal. Es ist genauso wie beim Erlernen einer gesprochenen Sprache: Je mehr man übt, desto flüssiger spricht man, und nach einiger Zeit kann man sich problemlos unterhalten. Wenn Sie auf Probleme stoßen, finden Sie hier einige hilfreiche Techniken: Lesen Sie alle Fehlermeldungen sorgfältig. Fehlermeldungen teilen Ihnen normalerweise genau mit, an welcher Stelle der Webbrowser auf einen Fehler gestoßen ist; sie nennen die Nummer der Zeile und das Zeichen, an dem der Browser gescheitert ist. Somit können Sie sich also auf diesen Code konzentrieren und Zeit sparen. Um das Auffinden von Bugs zu erleichtern, stellt Netscape 6 ein nützliches Tool bereit: die JavaScript-Konsole. Diese Konsole ist ein separates Fenster, in dem Sie die Fehlermeldungen, die Ihre Seite provoziert hat, Schritt für Schritt durchgehen und einzelne Codezeilen ausführen können, um sie auf Fehler zu prüfen. Die JavaScript-Konsole wird über Aufgabe Æ Extras Æ JavaScript-Konsole geöffnet. Achten Sie auch auf Kleinigkeiten Ich habe einmal zweieinhalb Tage mit dem Versuch verbracht, herauszufinden, warum ein Skript an einer bestimmten Stelle hängenblieb. Schließlich mußte ich feststellen, daß ich anstelle eines »i« eine »1« geschrieben hatte, wodurch der ganze danach folgende Code nicht mehr funktioniert hat. JavaScript ist zwar so entworfen, daß es relativ leicht zu verwenden ist, aber bei der Syntax kann es leider sehr empfindlich sein. Während HTML-Code meist selbst dann noch auf dem Bildschirm angezeigt wird, wenn er schlecht formatiert ist (oder haben Sie schon jemals ein <p>-Tag geschlossen?), erlaubt JavaScript diesen Luxus nicht. Bevor Sie also frustriert aufgeben, sollten Sie Ihre Programme auf Tipp- und Syntaxfehler prüfen. Dadurch ersparen Sie sich später viel Streß. Gehen Sie spazieren. Falls Sie wirklich nicht weiterkommen und einen Fehler einfach nicht finden können, dann gehen Sie erst einmal spazieren. Nachdem man einen Code längere Zeit angestarrt hat, sieht alles irgendwie gleich aus, und man übersieht sogar die einfachsten Fehler. Nach einer Pause können Sie Ihren Code wieder unvoreingenommen und vielleicht sogar mit neuen Ideen betrachten.