Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 8 Fenster
|  | 8.1 Modale Fenster
|  |  | 8.1.1 Warnung – nur im Notfall
|  |  | 8.1.2 Bestätigungen
|  |  | 8.1.3 Benutzereingaben
|  | 8.2 Navigationsleiste mit JavaScript
|  |  | 8.2.1 Das History-Objekt
|  |  | 8.2.2 Vorwärts und rückwärts, Teil 2
|  |  | 8.2.3 Drucken mit JavaScript
|  | 8.3 Die Statuszeile
|  |  | 8.3.1 Erläuternde Links
|  |  | 8.3.2 Laufschrift
|  | 8.4 Das location-Objekt
|  | 8.5 Ein neues Fenster öffnen
|  |  | 8.5.1 Ein Fenster öffnen und füllen
|  |  | 8.5.2 Ein Fenster öffnen und verlinken
|  |  | 8.5.3 Ein Fenster öffnen und anpassen
|  |  | 8.5.4 Modale Fenster
|  | 8.6 Fernsteuerung
|  |  | 8.6.1 Links mit JavaScript
|  |  | 8.6.2 Links ohne JavaScript
|  | 8.7 Fenster schließen
|  |  | 8.7.1 Andere Fenster schließen
|  | 8.8 Fenster bewegen mit JavaScript
|  |  | 8.8.1 Fenster verschieben
|  |  | 8.8.2 Fensterinhalt scrollen
## 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:
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:
| 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>
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de