Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 8 Fenster
  gp 8.1 Modale Fenster
    gp 8.1.1 Warnung – nur im Notfall
    gp 8.1.2 Bestätigungen
    gp 8.1.3 Benutzereingaben
  gp 8.2 Navigationsleiste mit JavaScript
    gp 8.2.1 Das History-Objekt
    gp 8.2.2 Vorwärts und rückwärts, Teil 2
    gp 8.2.3 Drucken mit JavaScript
  gp 8.3 Die Statuszeile
    gp 8.3.1 Erläuternde Links
    gp 8.3.2 Laufschrift
  gp 8.4 Das location-Objekt
  gp 8.5 Ein neues Fenster öffnen
    gp 8.5.1 Ein Fenster öffnen und füllen
    gp 8.5.2 Ein Fenster öffnen und verlinken
    gp 8.5.3 Ein Fenster öffnen und anpassen
    gp 8.5.4 Modale Fenster
  gp 8.6 Fernsteuerung
    gp 8.6.1 Links mit JavaScript
    gp 8.6.2 Links ohne JavaScript
  gp 8.7 Fenster schließen
    gp 8.7.1 Andere Fenster schließen
  gp 8.8 Fenster bewegen mit JavaScript
    gp 8.8.1 Fenster verschieben
    gp 8.8.2 Fensterinhalt scrollen


Rheinwerk Computing

8.3 Die Statuszeile  downtop

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.


Rheinwerk Computing

8.3.1 Erläuternde Links  downtop

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.


Rheinwerk Computing

8.3.2 Laufschrift  toptop

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:

1. Verwenden Sie eine globale Variable.
       
2. Verwenden Sie eine eigene Funktion.
       
3. Verwenden Sie keine Variable.
       

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:

gp  In einer globalen Variablen wird der Text abgespeichert, der in der Statuszeile angezeigt werden soll.
gp  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).
gp  Dann wird ein Timeout gesetzt, der die Funktion nach Ablauf einer gewissen Zeitspanne wieder aufruft.

Abbildung
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>
 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern