8.3 Die Statuszeile 

Kommen wir nun zu einer der umstrittensten JavaScript-Anwendungen. Die meisten Browserfenster haben eine Statuszeile, in der während des Ladens eines 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 derzeit in der Minderheit, und in den folgenden Abschnitten soll eine deutliche Warnung ausgesprochen werden, was Sie tunlichst vermeiden sollten. Dem Benutzer dient die Statuszeile als Informationsquelle, und sie sollte nicht für Spielereien missbraucht werden.

8.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 anstelle von http://www.ihrefirma.xy/produkte/index.html steht.

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" onmouseover="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 unlogischer Ausnahme. Nur wenn der Event-Handler auf return true endet, wird der Text dauerhaft 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.

<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 zweiten 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.

Einige Browser bieten es ihren Benutzern mittlerweile an, den JavaScript-Zugriff auf die Statuszeile zu unterbinden. Sie können sich also nicht mehr darauf verlassen, dass Ihre Besucher irgendetwas in der Statuszeile sehen. Einige Versionen des Internet Explorers zeigen die Statuszeile standardmäßig überhaupt nicht an.

8.3.2 Laufschrift 

Sie kennen das sicherlich: In der Statuszeile des Browsers läuft ein Text von rechts nach links. Um es gleich vorweg zu sagen: Dieser Effekt gilt seit ungefähr acht 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 ihn 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 so genannte 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 type="text/javascript"><!--
function galileo() {
   var galileo_url = "http://www.galileo-press.de/";
   setTimeout("location.href=galileo_url", 5000);
}
//--></script>
</head>
<body onload="galileo();">
<h1>Verbinde mit Galileo Press...</h1>
</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 type="text/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 type="text/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 type="text/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 type="text/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: zur 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, so dass der Scroll-Effekt 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.

Hier klicken, um das Bild zu Vergrößern

Abbildung 8.5     Die Laufschrift in der Statuszeile des Browsers

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 (das 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, aber ansonsten gilt: Verzichten Sie auf solche Spielereien, wenn der Sinn des Ganzen im Verborgenen bleibt.

Außerdem unterbinden mittlerweile viele Browser, dass JavaScript Zugriff auf die Statuszeile erhält.

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. Alternativ 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. Das Laufschrift-Beispiel jedenfalls kann folgendermaßen umgeschrieben werden:

<html>
<head>
<title>Laufschrift </title>
<script type="text/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>
<h1>Laufschrift mit JavaScript</h1>
</body>
</html>