Kapitel 6 Fenster I

Fensterln, älter auch fenstern »abends bei seinem Mädchen in die Kammer einsteigen« (< 16. Jh.)
– Kluge, Etymologisches Wörterbuch der deutschen Sprache

Das window-Objekt ist das wohl am häufigsten verwendete JavaScript-Objekt – und das, welches am seltensten ausgeschrieben wird. Die Methoden des Fenster-Objekts können nämlich aufgerufen werden, ohne dass man das Objekt voranstellt. Sie kennen ja bereits den Befehl window. alert("Was nun, sprach Zeus"); alternativ dazu reicht auch alert("Was nun, sprach Zeus"). Die Methode document.write() ist streng genommen auch eine Abkürzung. Das document-Objekt ist ein Unterobjekt des window-Objekts, ganz korrekt wäre also window.document.write(). Das window-Objekt bezeichnet ein Browser-Fenster oder einen Frame, denn jeder Frame wird intern als eigenes Fenster behandelt. Auf den aktuellen Frame beziehungsweise das aktuelle Browser-Fenster greift man mit window oder self oder this zu. Wie gesagt – den Sermon könnte man sich sparen, aber man macht seine Skripte so übersichtlicher und programmiert auch sauberer. Als Entwickler muss man immer fürchten, dass es eine neue Browser-Version oder einen ganz neuen Browser gibt, der die Syntax etwas strenger auslegt.

In diesem Kapitel werden einige seltenere Methoden und Eigenschaften des window-Objekts vorgestellt. Mit den Details beschäftigen wir uns erst in den Kapiteln »Fenster II« und »Fenster III«.

6.1 Modale Fenster 

Unter einem modalen Fenster einer Applikation versteht man ein Fenster, das in den Vordergrund tritt, den Fokus bekommt und den Zugriff auf das Hauptapplikationsfenster sperrt: Solange das (modale) Fenster offen ist, kann auf das Hauptfenster nicht mehr zugegriffen werden. Ein Beispiel ist die Meldung einer Textverarbeitung, die den Benutzer vor dem Verlassen des Programms fragt, ob das aktuelle Dokument gespeichert werden soll (sofern es noch nicht gespeichert wurde). Sie müssen entweder auf Ja, Nein oder Abbrechen klicken, um wieder auf die Textverarbeitung zugreifen zu können. Auch die Cookie-Warnung des Netscape Navigator ist ein modales Fenster.

Abbildung 6.1  Cookie-Warnung des Netscape Navigator

Sie merken es bereits: Ein modales Fenster greift stark in die Benutzerführung ein. Sie können mit JavaScript auch modale Fenster erstellen (zu nicht-modalen Fenstern kommen wir im Kapitel »Fenster II«), aber gehen Sie damit sehr sparsam um. Zum einen geben Sie damit einem anderen Fenster den Fokus, was störend ist, und zum anderen werden modale Fenster vom Betriebssystem oft mit einem Warnton begleitet.

6.1.1 Warnung – nur im Notfall 

Eine Möglichkeit, ein modales Fenster mit JavaScript zu erstellen, haben Sie bereits kennen gelernt: window.alert() oder kurz alert(). Damit wird ein modales Fenster mit einem Text angezeigt; als Icon wird ein Warndreieck verwendet (deswegen auch der Name: »alert«, dt. »Warnung«).

Da die Syntax des Befehls sehr einfach ist – Sie schreiben alert("I have a dream"), und »I have a dream« wird angezeigt –, kommen wir gleich zu den Anwendungsmöglichkeiten. Es wird nur ein Text angezeigt, was ja auch mit anderen Mitteln möglich wäre. Die Besonderheit dieser Funktion ist gleichzeitig auch ihr großer Nachteil: Das modale Fenster muss erst einmal geschlossen werden, um weiterzumachen. Wenn Sie also eine besonders wichtige Mitteilung zu machen haben, können Sie so ein Warnfenster verwenden.

Die SmartUpdate-Applikation von Netscape, mit der man seinen Browser auf die neueste Version bringen kann, ohne das gesamte Paket herunterladen zu müssen, verwendet beispielsweise window.alert(), um den Benutzer darauf hinzuweisen, dass er seinen Browser neu starten oder gar den Rechner neu booten muss, um in den Genuss der neuen Funktionalität zu kommen. Das wurde eingeführt, weil viele Benutzer den Hinweis, der zuvor lediglich als Text dargestellt wurde, einfach weggeklickt haben, und sich dann wunderten, wo die neuen Programme blieben. Dieses Beispiel ist eine der wenigen nützlichen Anwendungen von window.alert(). Allzu oft sieht man – vor allem auf privaten Homepages – nicht ganz so wichtige Hinweise: »Sie betreten gerade dieSuper- JavaScript-Homepage von N.N.« ist Grund genug, weiterzusurfen – zum Beispiel zu MyGalileo.

Während der Programmierung wird die Funktion allerdings auch von Profis eingesetzt. Bei der Fehlersuche leistet window.alert() wertvolle Dienste, da der Wert einzelner Variablen schnell angezeigt werden kann. Ein document.write() ist ja nicht möglich, sobald ein Dokument vollständig geladen worden ist.

Im folgenden Beispiel befindet sich ein Stück Programmcode, der nicht funktioniert.

<HTML>
<HEAD>
<TITLE>Fehlersuche window.alert()</TITLE>
</HEAD>
<BODY>
<H3>Alle ungeraden Zahlen kleiner als 10</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
var rest
for (var i=1; i<10; i++){
   rest = i % 2
   if (rest=1)
      document.write(i+" ist ungerade!"+"<"+"BR"+">")
}
//--></SCRIPT>
</BODY>
</HTML>

Dieses Listing liefert als Ergebnis ein paar Zahlen zu viel (siehe//Abbildung 6.2). Mit window.alert() kommt man dem Fehler auf die Schliche, wenn man sich die Variable rest an den richtigen Stellen anzeigen lässt:

<HTML>
<HEAD>
<TITLE>Fehlersuche window.alert()</TITLE>
</HEAD>
<BODY>
<H3>Alle ungeraden Zahlen kleiner als 10</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
var rest
for (var i=1; i<10; i++){
   rest = i % 2
   alert("vorher: "+rest)

   if (rest=1){

      alert("nachher: "+rest)

      document.write(i+" ist ungerade!"+"<"+"BR"+">")
   }

}
//--></SCRIPT>
</BODY>
</HTML>

Abbildung 6.2  Ein offensichtlich falsches Ergebnis

Des Rätsels Lösung liegt in der folgenden Abfrage:

if (rest=1)

Hierdurch wird die Variable rest mit dem Wert 1 belegt, und diese Anweisung liefert – bei einer if-Anweisung – den Wert true. Korrekt wäre ein Vergleich:

if (rest==1)

Einige Versionen des Netscape Navigator lassen Zuweisungen innerhalb von Bedingungen nicht mehr zu, und geben eine Fehlermeldung aus. Ein Grund mehr, diese Fehler tunlichst zu vermeiden!

6.1.2 Bestätigungen 

Bot das letzte modale Fenster noch sehr wenig Eingriffsmöglichkeiten – nur eine OK-Schaltfläche –, so kann man mit window.confirm() ein modales Fenster mit zwei Schaltflächen anbieten: je nach Betriebssystem und Sprache OK und Cancel oder OK und Abbrechen. Klickt der Benutzer auf OK, so liefert die Methode true zurück, ansonsten false.

Auch hier macht Netscape wieder vor, wie man diese Methode sinnvoll einsetzen könnte. Unter http://www.mozilla.org kann man den aktuellen Entwicklungsstand des Generation 6-Browsers von Netscape herunterladen. Zwar gibt es in unterschiedlichen Abständen sogenannte Milestones (Meilensteine), die auch schon relativ stabil laufen, aber jede Nacht wird der aktuelle Stand der Dinge kompiliert und via FTP zur Verfügung gestellt. Es ist nicht sichergestellt, dass diese Version überhaupt startet. Aus diesem Grund wird mit JavaScript sicherheitshalber noch einmal nachgefragt, ob der Benutzer diese Version wirklich herunterladen will. Der zugehörige Code sieht dort ungefähr folgendermaßen aus:

<HTML>
<HEAD>
<TITLE>window.confirm()</TITLE>
</HEAD>
<BODY>
<H3>Laden Sie die Alpha-Version des neuen Netscape herunter!</H3>
<A HREF="datei.exe" onClick="return confirm('Are you sure you want
    to do this crazy thing?')">Hier klicken</A>
</BODY>
</HTML>

Hier sind ein paar zusätzliche Erklärungen notwendig. Der Befehl confirm('Are you sure you want to do this crazy thing?') öffnet ein modales Fenster. Klickt der Benutzer darin auf OK, wird true zurückgeliefert, ansonsten false. Stimmt der Benutzer also dem Download zu, so lautet das onClick-Attribut des <A>-Tags return true, ansonsten return false.

Die Bedeutung ist relativ einfach: Im obigen Fall kollidieren der HTML-Link und der onClick-Event-Handler. Ein Klicken auf den Link führt dazu, dass die Datei datei.exe vom Webserver angefordert wird; der onClick-Event-Handler führt den entsprechenden JavaScript-Code aus. Wer macht das Rennen?

Der Trick hierbei ist Folgender: Der JavaScript-Code wird auf jeden Fall ausgeführt. Endet der Code mit return true, so wird daraufhin das Ziel des HTML-Links aufgerufen, bei return false wird der HTML-Link nicht aufgerufen. So funktioniert auch die Abfrage von oben: Verneint der Benutzer die Frage im modalen Fenster, so lautet der onClick-Event-Handler return false, und der Link wird nicht ausgeführt. Bejaht der Benutzer die Abfrage, so lautet der onClick-Event-Handler return true und datei.exe wird wie geplant aufgerufen.

Abbildung 6.3  Download für Furchtlose

6.1.3 Benutzereingaben 

Es gibt noch eine weitere Stufe, und diese ist das luxuriöseste Fenster, das Sie mit einem einzelnen JavaScript-Befehl erzeugen können: window.prompt(). Außer den Schaltflächen OK und Cancel (oder Abbrechen) gibt es noch ein einzeiliges Texteingabefeld. Bei der Überprüfung auf Vollständigkeit von Formulareingaben kann das recht nützlich werden.

Der Rückgabewert der Methode ist der eingegebene Text, sofern der Benutzer auf OK klickt. Bei der Betätigung der Schaltfläche Cancel oder Abbrechen wird der spezielle Wert null zurückgegeben, egal was in das Textfeld eingegeben worden ist. Der folgende Code fragt den Namen des Benutzers ab und gibt ihn in einem weiteren modalen Fenster aus – sofern die Schaltfläche OK angeklickt worden und ein Name eingegeben worden ist.

<HTML>
<HEAD>
<TITLE>window.prompt()</TITLE>
</HEAD>
<BODY>
<H3>What's your name?</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
var benutzername = prompt("Wie heißen Sie?")
if (benutzername)
   alert("Guten Tag, Herr/Frau " + benutzername)
//--></SCRIPT>
</BODY>
</HTML>

Abbildung 6.4  Dateneingabe mit JavaScript

Wie die Praxis zeigt, wird der auf if (benutzername) folgende Befehl auch dann nicht ausgeführt, wenn die Schaltfläche OK betätigt, aber kein Name eingegeben worden ist.

6.2 Navigationsleiste mit JavaScript 

Die Navigationsleiste des Browsers wird ziemlich häufig benutzt. Vor allem die Schaltflächen Zurück (oder Back), Drucken (oder Print) und Neu laden (oder Aktualisieren, Refresh, Reload) werden angeblich am häufigsten betätigt. Mit JavaScript kann man diese Funktionalität nachbilden.

6.2.1 Das History-Objekt 

Die History eines Browser-Fensters oder eines Frames ist nichts weiter als eine Liste der zuvor besuchten Seiten des aktuellen Fensters oder Frames. Beim Internet Explorer gibt es einen eigenen Ordner namens History oder Verlauf, der die globale History, also alle aufgerufenen Seiten enthält, während der Netscape Navigator diese Daten in einer einzelnen Datei ablegt. Auf die Elemente des History-Objekts haben Sie natürlich keinen Schreibzugriff. Stellen Sie sich vor, eine bösartige Seite würde die gesamte History des Benutzers überschreiben. Egal, ob der Benutzer vor oder zurück will, er würde immer auf der falschen Seite landen. Aber auch der Lesezugriff ist stark eingeschränkt, und zwar aus Sicherheitsgründen. Wenn man mit JavaScript (oder anderen Mitteln) die History-Liste des Benutzers auslesen könnte, wäre der gläserne Benutzer geschaffen. Manchmal werden auch Passwörter und andere vertrauliche Informationen in der URL übertragen, ein Lesezugriff wäre also ein Unding. Mit einem signierten Skript kann man auf diese Werte zugreifen, aber das ist nicht Thema dieses Kapitels.

Schon interessanter ist es, in der History nach vorn oder hinten zu springen, wie man es auch mit den Schaltflächen in der Navigationsleiste des Browsers machen kann.

Wenn Sie einen englischsprachigen Browser verwenden, haben Sie die Funktionsnamen direkt vor sich: back() springt zurück, forward() nach vorn. Mit dem folgenden Skript wird ein Teil der Navigationsleiste nachgebildet. Beachten Sie, dass Sie zwar auch mit window.history.methode() auf die Methoden des History-Objekts zugreifen können; aber wie bereits schon mehrfach betont, kann man das window. auch weglassen.

<HTML>
<HEAD>
<TITLE>History-Objekt</TITLE>
</HEAD>
<BODY>
<H3>Navigation mit JavaScript</H3>
<A HREF="javascript:history.back()">Zurück</A> -
<A HREF="javascript:history.forward()">Vor</A>
</BODY>
</HTML>

Es gibt noch eine weitere Methode des History-Objekts: history.go(). Mit dieser Methode kann man in der History mehr als einen Eintrag vor- oder zurückspringen. Als Parameter wird hierbei angegeben, um wie viel vor (positiver Wert) oder zurück (negativer Wert) gesprungen wird. Statt history.back() kann man also auch history.go(-1) verwenden; history.forward() wird durch history.go(1) ersetzt. Mit history.go(0) wird übrigens die aktuelle Seite neu geladen. Dennoch ist es gefährlich, history.go() zu verwenden. Auf verschiedenen Plattformen gibt es fehlerhafte Implementierungen. So unterstützt beispielsweise der Internet Explorer 3 nur history.go(-1) und history.go(0); andere numerische Werte werden wie -1 behandelt.

6.2.2 Vorwärts und Rückwärts Teil 2 

Seit der Version 3 von Netscape Navigator bzw. Internet Explorer hat jeder Frame seine eigene History. Man kann also problemlos zwischen den Seiten hin- und herspringen, die in einem bestimmten Frame geladen worden sind. Nun kommt es in der Realität aber des Öfteren vor, dass sich der Inhalt mehrerer Frames ändert. Stellen Sie sich vor, Sie haben eine Webseite mit einem Frame für den Inhalt und einem Frame für Werbebanner. Der Werbebanner-Frame wird alle 60 Sekunden neu geladen, während im Inhalts-Frame immer dann neuer Inhalt geladen wird, wenn der Benutzer auf einen Link klickt. Mit den bisherigen Methoden ist es zwar möglich, die History jedes einzelnen Frames zu verfolgen, nicht aber die globale History des Fensters, die aus einer Mischung von Seiten im Inhalts- und im Werbe-Frame besteht.

Seit Netscape Navigator 4 hat das window-Objekt ebenfalls die Methoden back() und forward(), die es dem Benutzer erlauben, durch die globale History des Fensters zu navigieren. Mit dem folgenden Skript, das am besten in einem Frame platziert wird, kann der Benutzer durch die History des Hauptfensters navigieren:

<HTML>
<HEAD>
<TITLE>window-Objekt: vorwärts und rückwärts</TITLE>
</HEAD>
<BODY>
<H3>Navigation mit JavaScript</H3>
<A HREF="javascript:top.Hauptfenster.back()">Zurück</A> -
<A HREF="javascript:top.Hauptfenster.forward()">Vor</A>
</BODY>
</HTML>

6.2.3 Drucken mit JavaScript 

Eine sehr häufige Frage in Newsgroups lautet: Wie kann ich mit JavaScript drucken? Die Antwort ist nur auf den allerersten Blick unbefriedigend: Es ist nicht möglich, automatisch Daten zum Drucker zu senden – stellen Sie sich nur einmal vor, Sie surfen und plötzlich fängt Ihr Drucker an, unkontrolliert Seiten auszuspucken.

Aber zurück zum Thema: Das Dialogfenster des Drucken-Dialogs kann nicht nur mit dem entsprechenden Menübefehl oder der Schaltfläche in der Navigationsleiste aufgerufen werden. Ab JavaScript 1.2 (das heißt in diesem Fall: Ab Netscape Navigator 4 und Internet Explorer 5) gibt es die Methode print() des window-Objekts, die genau dieses Dialogfenster aufruft. Zwar haben Sie auf den ersten Blick keinen Mehrwert gegenüber der Navigationsleiste, aber viele Benutzer rufen gern das Kontextmenü des Fensters oder Frames auf und wählen dort den Drucken-Eintrag. Der Netscape Navigator erlaubt so etwas nicht, und diese Benutzer freuen sich sicherlich über den zusätzlichen Komfort, wenn Sie das Drucken mit JavaScript ermöglichen. Im Kapitel »Fenster III« werden Sie außerdem Fenster ohne Navigationsleiste und ohne Menüleiste kennen lernen. Wer hier nicht die Tastenkombination zum Drucken kennt, hat ein ernsthaftes Problem, den Inhalt des Fensters zu Papier zu bringen. Eine JavaScript-Lösung schafft hier eine Erleichterung.

Sie sollten auf jeden Fall überprüfen, ob der Browser die Methode unterstützt. Dazu müssen Sie entweder im Code mit den bekannten Methoden auf die Unterstützung von JavaScript Version 1.2 überprüfen oder eine if-Abfrage benutzen, wie wir sie bereits bei anderen Beispielen verwendet haben. Im folgenden Code sehen Sie beide Varianten:

<HTML>
<HEAD>
<TITLE>window.print()</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function drucken(){
   if (window.print)
      window.print()
   else
      window.alert("Leider nicht möglich!")
}
function drucken2(){}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
function drucken2(){
   window.print()
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Drucken mit JavaScript</H3>
<A HREF="javascript:drucken()">Drucken über if-Abfrage</A><B>
<A HREF="javascript:drucken2()">Drucken über JS-Version</A>
</BODY>
</HTML>

6.3 Die Statuszeile 

Kommen wir nun zu einer der umstrittensten JavaScript-Anwendungen. Die meisten Browser-Fenster haben eine Statuszeile, in der während des Ladens des Dokuments der Ladestatus angezeigt und beim Bewegen der Maus über einen Link das Ziel des Links angezeigt wird. Schon bald nach dem Erscheinen des Netscape Navigator 2 sind pfiffige Programmierer auf die Idee gekommen, die Statuszeile als bequeme Möglichkeit der Textausgabe zu verwenden. Natürlich ist das bequem, und es gibt auch nützliche Anwendungen. Diese sind leider zeitweise in der Minderheit, und in den folgenden Abschnitten soll eine deutliche Warnung ausgesprochen werden, was tunlichst vermieden werden sollte. Dem Benutzer dient die Statuszeile als Informationsquelle, und sie sollte nicht für Spielereien missbraucht werden.

6.3.1 Erläuternde Links 

Unerfahrenen Anwendern sollte man die Navigation im World Wide Web so einfach und intuitiv wie möglich gestalten. Irgendwann ist es in Mode gekommen, erklärende Hilfetexte in der Statuszeile des Browsers zu platzieren. Das bietet sich vor allem bei Hyperlinks an. Es ist doch viel schicker, wenn in der Statuszeile Hier geht's zu unseren Produkten steht anstelle von http://www.ihrefirma.de/produkte/index.html.

Die Umsetzung ist nicht weiter schwierig. Die entsprechende Eigenschaft, die den Text in der Statuszeile angibt, ist window.status; lediglich einen kleinen Fallstrick müssen Sie noch umgehen. Der folgende Code liefert nicht mit allen Browsern das gewünschte Ergebnis:

<A HREF="/produkte/index.html" ="window.status=
'Unsere Produkte'">Produkte</A>

Der Text wird kurzzeitig in der Statuszeile angezeigt, aber dann erscheint die Ziel-URL des Hyperlinks. Der Grund: Auch hier kollidieren der Event-Handler und die Browser-Aktion, wenn der Mauszeiger über den Hyperlink fährt. Sie wissen eigentlich bereits von oben, wie Sie dem JavaScript-Event-Handler den Vorrang geben – doch leider funktioniert das an dieser Stelle nicht. Es handelt sich hier um eine Art unlogische Ausnahme. Nur wenn der Event-Handler auf return true endet, wird der Text in der Statuszeile angezeigt, andernfalls nicht.

Noch ein kleiner Hinweis, bevor der HTML-Code präsentiert wird: Vergessen Sie nicht, mit dem onMouseout-Event-Handler die Eigenschaft window.status wieder auf eine leere Zeichenkette zu setzen; ansonsten bleibt der Text in der Stauszeile stehen. Beachten Sie dabei, dass der onMouseout-Event-Handler erst ab Netscape Navigator 3 und Internet Explorer 4 zur Verfügung steht.

<A HREF="/produkte/index.html" 
onMouseover="window.status='Unsere Produkte';
     return true" onMouseout="window.status='';
       return true">Produkte</A>

Viele erfahrene Benutzer wissen eigentlich ganz gern, wohin ein Link führt. Ich öffne beispielsweise Links gern in einem neuen Fenster. Wird jedoch die Statuszeile überschrieben, so kann man nicht feststellen, ob der Link eine HTML-Seite aufruft oder eine JavaScript-Funktion (im letzteren Fall ist das Öffnen im neuen Fenster nicht möglich). Wenn Sie auf diese Form von erklärenden Links nicht verzichten wollen, sollten Sie wenigstens zusätzlich die URL der Zielseite in der Statuszeile angeben.

6.3.2 Laufschrift 

Sie kennen das sicherlich: In der Statuszeile des Browsers läuft ein Text von rechts nach links. Um es gleich vorwegzusagen: Dieser Effekt gilt seit ungefähr vier Jahren als veraltet, sorgt nur für Verärgerung beim Benutzer und besitzt keinen wirklichen Nutzen. Warum der Effekt hier trotzdem vorgeführt wird? Es handelt sich hierbei um eines der Standardbeispiele für die Möglichkeiten von JavaScript, und man muss es einfach einmal gesehen haben.

Timeouts setzen

Oft ist es bei der JavaScript-Programmierung notwendig, einen Befehl nicht sofort auszuführen, sondern erst später. Dafür benutzt man sogenannte Timeouts, die mit einer Methode des window-Objekts gesetzt werden können. Die Befehlssyntax lautet leicht vereinfacht folgendermaßen:

window.setTimeout(Befehl, Verzögerung)

Dabei ist Befehl eine Zeichenkette, die den entsprechenden JavaScript-Befehl enthält, und Verzögerung ist die Zeitspanne in Millisekunden, die verstreichen muss, bis der Befehl ausgeführt wird. Folgender Befehl ruft nach fünf Sekunden die Homepage des Galileo-Verlags auf:

setTimeout("location.href='http://www.galileo-press.de'", 5000)

Beachten Sie, dass folgender Code nicht funktionieren wird:

<HTML>
<HEAD>
<TITLE>Timeouts</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function galileo(){
   var galileo_url = "http://www.galileo-press.de"
   setTimeout("location.href=galileo_url", 5000)
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="galileo()">
<H3>Verbinde mit Galileo Press...</H3>
</BODY>
</HTML>

Der Grund ist, dass galileo_url eine lokale Variable ist. Wenn der Befehl nach fünf Sekunden ausgeführt wird, steht diese Variable nicht mehr zur Verfügung, da sie außerhalb der Funktion ausgeführt wird. Es gibt drei Auswege aus diesem Dilemma:

Zu 1.: Der <SCRIPT>-Teil des vorherigen Listings muss folgendermaßen geändert werden:

<SCRIPT LANGUAGE="JavaScript"><!-
var galileo_url

function galileo(){
   galileo_url = "http://www.galileo-press.de"

   setTimeout("location.href=galileo_url", 5000)
}
//--></SCRIPT>

Zu 2.: Der <SCRIPT>-Teil muss folgendermaßen geändert werden:

<SCRIPT LANGUAGE="JavaScript"><!--
function galileo_laden(){
   var galileo_url = "http://www.galileo-press.de"
   location.href=galileo_url
}
function galileo(){
   setTimeout("galileo_laden()", 5000)
}
//--></SCRIPT>

Zu 3.: Der <SCRIPT>-Teil muss folgendermaßen geändert werden:

<SCRIPT LANGUAGE="JavaScript"><!--
function galileo(){
   var galileo_url = "http://www.galileo-press.de"
   setTimeout("location.href='"+galileo_url+"'", 5000)

}
//--></SCRIPT>

Timeouts löschen

Es kommt in der Praxis des Öfteren vor, dass man den Befehl dann doch nicht mehr ausführen, also den Timeout löschen will. Jeder Aufruf von setTimeout() gibt einen Wert zurück, der als eindeutiger Identifikator für den Timeout dient. Je nach Browser ist das entweder ein numerischer Wert oder ein Objekt. Hüten Sie sich also davor, numerische Berechnungen mit dem Rückgabewert auszuführen. Sie können aber jederzeit den Rückgabewert der Methode window.clearTimeout() als Parameter übergeben, um den Timeout zu löschen.

Im folgenden Beispiel wird wieder die Homepage von Galileo Press nach fünf Sekunden aufgerufen, außer der Benutzer klickt auf den Link auf der Seite. Beachten Sie, dass die von setTimeout() zurückgegebene ID in einer globalen Variablen gespeichert werden muss.

<HTML>
<HEAD>
<TITLE>Timeouts setzen und löschen</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!-
var ID
function galileo(){
   ID = setTimeout("location.href='http://www.galileo
     press.de'", 5000)
}
function kein_galileo(){
   clearTimeout(ID)
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="galileo()">
<A HREF="javascript:kein_galileo()">Laden stoppen</A>
</BODY>
</HTML>

Laufschrift mit Timeouts

Kommen wir zum ursprünglichen Beispiel zurück, der Laufschrift. Diese ist mit Timeouts recht schnell zu erstellen, und zwar folgendermaßen:

In einer globalen Variablen wird der Text abgespeichert, der in der Statuszeile angezeigt werden soll.

In einer JavaScript-Funktion wird der entsprechende Text in der Statuszeile angezeigt, und dann wird der Text verändert, sodass der Scrolleffekt entsteht (der erste Buchstabe wird entfernt und hinten wieder angehängt).

Dann wird ein Timeout gesetzt, der die Funktion nach Ablauf einer gewissen Zeitspanne wieder aufruft.

<HTML>
<HEAD>
<TITLE>Laufschrift</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
var lauftext = " +++ Read my lips: no tax on beer "
function laufschrift(){
   window.status = lauftext
   lauftext = lauftext.substring(1, lauftext.length) +
     lauftext.substring(0,1)
   setTimeout("laufschrift()", 100)  
//Weiter nach einer Zehntelsekunde
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="laufschrift()">
<H3>Laufschrift mit JavaScript</H3>
</BODY>
</HTML>

Nachteile

Noch ein paar Sätze zu Laufschriften: Ihnen wird aufgefallen sein, dass auf größeren und seriösen Seiten keine Statuszeilen-Laufschriften vorkommen (außer eine Zeit lang auf den Seiten einer Gruppe von Online-Versendern, aber Ausnahmen bestätigen bekanntermaßen die Regel). Das hat auch seinen Grund. Durch die Laufschrift ist die Statuszeile permanent belegt, und man kann beispielsweise das Ziel von Links nicht mehr sehen. Eine nützliche Anwendung für eine Laufschrift habe ich auch noch nirgends gesehen. Wichtige Mitteilungen kann man auch an exponierter Stelle auf der eigentlichen Webseite platzieren. Mit Laufschriften ist es beinahe so wie mit dem <MARQUEE>-HTML-Tag (der beim Internet Explorer eine Laufschrift erzeugt): Man disqualifiziert sich eher, als dass man mit seinen JavaScript-Kenntnissen imponiert.

Man kann auch in einem Formular-Eingabefeld eine Laufschrift erzeugen. Das ist nicht ganz so schlimm, da wenigstens die Statuszeile frei bleibt. Hat man viel Text und wenig Platz, ist das akzeptabel, weswegen dieses Beispiel im Kapitel »Formulare I« in einer Übungsaufgabe vorkommt. Aber ansonsten gilt: Verzichten Sie auf solche Spielereien, wenn der Sinn des ganzen im Verborgenen bleibt.

Bequemere Timeouts

Sie haben gesehen, dass die Implementierung der Laufschrift ein wenig umständlich war: Eine Funktion musste geschrieben werden, die sich selbst nach ein paar Sekunden wieder aufruft. Seit Netscape Navigator 4 und Internet Explorer 4 gibt es die Möglichkeit, eine Funktion von außen wiederholt aufzurufen, und zwar immer nach Ablauf einer festen Zeitspanne. Der erforderliche Befehl heißt setInterval(), und der korrespondierende Löschbefehl heißt clearInterval(). Der erste Parameter ist wieder der JavaScript-Befehl oder Funktionsname, der zweite Parameter ist die Verzögerung in Millisekunden zwischen den Aufrufen. Beim dritten Parameter verhalten sich der Netscape Navigator und der Internet Explorer unterschiedlich; hier sei auf die Referenz verwiesen. Das Laufschrift-Beispiel jedenfalls kann folgendermaßen umgeschrieben werden – aber nur für Browser ab der vierten Generation.

<HTML>
<HEAD>
<TITLE>Laufschrift für Browser der vierten Generation</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
var lauftext = " +++ Read my lips: no tax on beer "
function laufschrift(){
   window.status = lauftext
   lauftext = lauftext.substring(1, lauftext.length) +
     lauftext.substring(0,1)
}
setInterval("laufschrift()", 5000)
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Laufschrift mit JavaScript ab Browser-Version 4</H3>
</BODY>
</HTML>

6.4 Das location-Objekt 

Zum Abschluss dieses Kapitels noch ein kurzer Blick auf das Objekt location. Sie haben es ja schon bei den verschiedensten Beispielen in diesem Buch kennen gelernt, und es scheint etwas mit der aktuellen URL des Browser-Fensters zu tun zu haben.

Eine URL besteht aus verschiedenen Teilen, die Sie in der Abbildung zusammen mit dem Namen der entsprechenden JavaScript-Eigenschaft sehen können.

Abbildung 6.5  Die Eigenschaften des location-Objekts

In der Praxis wird location.href am häufigsten eingesetzt. Zwar liefert auch location die komplette URL der aktuellen Seite zurück, tut das aber nur bei neueren Browsern konsistent. Um abwärts kompatibel zu bleiben, ist die Verwendung von location.href zwingend.

Interessanter sind da schon die Methoden des location-Objekts. location.reload() (ab JavaScript Version 1.1) lädt die aktuelle URL neu. Ohne Parameter oder mit dem Parameter false wird die URL aus dem Cache des Browsers neu geladen, sofern sie verfügbar ist; wird true übergeben, so wird eine Anforderung an den Server geschickt. Das entspricht dem Klicken auf die Schaltfläche Reload der Navigationsleiste bei gleichzeitigem Drücken der Shift-Taste. Beachten Sie jedoch, dass hierbei Formulareingaben gelöscht werden. Um ein so genanntes »weiches Neuladen« zu veranlassen (das die aktuelle Scroll-Position im Dokument und in Formulareingaben beibehält), müssen Sie das bereits bekannte history.go(0) verwenden. (Das dauert allerdings beim Internet Explorer 3 relativ lange.)

JavaScript Version 1.1 hat auch die Methode location.replace() eingeführt. Hiermit kann man die History-Liste zumindest in begrenztem Umfang manipulieren. Wenn Sie mit location.replace(url) eine neue URL laden, nimmt diese in der History-Liste die Position der vorherigen Seite ein. Angenommen, Sie haben zuerst die Seite A.html geladen, gehen dann auf B.html und laden dann mittels location.replace("C.html") die Seite C.html. Ein Klick auf die Zurück-Schaltfläche in der Navigationsleiste führt dann zur Seite A.html zurück. Dies wird oft bei mehrseitigen Formularen verwendet, wenn man vermeiden will, dass der Benutzer zurückspringt und alte Eingaben nochmals ändert.

6.5 Fragen & Aufgaben