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
Fensterln, älter auch fenstern, »abends bei seinem Mädchen in die Kammer einsteigen« (< 16. Jh.) – Kluge, Etymologisches Wörterbuch der deutschen Sprache # Kapitel 8 Fenster 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("I have a dream"); alternativ dazu reicht auch alert("I have a dream"). 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 Browserfenster oder einen Frame, denn jeder Frame wird intern als eigenes Fenster behandelt. Auf den aktuellen Frame beziehungsweise das aktuelle Browserfenster greift man mit window oder self oder this zu. Wie gesagt – den Sermon könnte man sich sparen, aber man macht seine Skripten auf diese Weise übersichtlicher und programmiert auch sauberer. Als Entwickler muss man immer fürchten, dass es eine neue Browserversion oder einen ganz neuen Browser gibt, der die Syntax etwas strenger auslegt (auch wenn das unwahrscheinlich ist). ## 8.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 der diversen Browser ist ein modales Fenster. Hier klicken, um das Bild zu Vergrößern Abbildung 8.1 Eine Cookiewarnung Sie merken es bereits: Ein modales Fenster greift stark in die Benutzerführung ein. Sie können mit JavaScript auch modale Fenster erstellen, aber gehen Sie mit dieser Möglichkeit sehr sparsam um. Zum einen geben Sie damit einem anderen Fenster den Fokus, was störend ist, und zum anderen gibt das Betriebssystem bei modalen Fenstern manchmal einen Warnton aus, wie man ihn nur aus schlechten Fernsehserien kennt. ### 8.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 W arndreieck 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 weitermachen zu können. Wenn Sie also eine besonders wichtige Mitteilung zu machen haben, können Sie so ein Warnfenster verwenden. Während der Programmierung wird die Funktion allerdings auch 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>
    <h1>Alle ungeraden Zahlen kleiner als 10</h1>
    <script type="text/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 8.2). Hier klicken, um das Bild zu Vergrößern Abbildung 8.2 Ein offensichtlich falsches Ergebnis 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>
    <h1>Alle ungeraden Zahlen kleiner als 10</h1>
    <script type="text/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>
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)
### 8.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. Als das Mozilla-Projekt noch ganz am Anfang stand, konnte man den aktuellen Entwicklungsstand des Browsers herunterladen. Zwar gab es schon damals in unterschiedlichen Abständen so genannte Milestones (Meilensteine), die auch schon relativ stabil liefen, aber jede Nacht wird der aktuelle Stand der Dinge direkt auf dem Entwicklungsserver automatisch kompiliert und via FTP zur Verfügung gestellt. Es ist nicht sichergestellt, dass diese Version überhaupt startet! Aus diesem Grund wurde früher 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>
    <h1>Laden Sie die Alpha-Version des neuen Browsers herunter!</h1>
    <a href="datei.zip" 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 erforderlich. 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. Auch bei confirm() handelt es sich um eine Kurzform – für window. confirm()! Hier klicken, um das Bild zu Vergrößern Abbildung 8.3 Download für Furchtlose 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.zip 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.zip wird wie geplant aufgerufen. ### 8.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. Beim Anklicken 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 und ein Name eingegeben worden ist.
    <html>
    <head>
    <title>window.prompt()</title>
    </head>
    <body>
    <h1>What's your name?</h1>
    <script type="text/javascript"><!--
    var benutzername = prompt("Wie heißen Sie?", "<Ihr Name>");
    if (benutzername) {
       alert("Guten Tag, Herr/Frau " + benutzername);
    }
    //--></script>
    </body>
    </html>
Zwei Dinge sind bemerkenswert:
| Anstelle von window.prompt() können Sie wie gehabt auch prompt() verwenden.
| Der erste Parameter von window.prompt() ist der Text, der im Fenster angezeigt wird; der zweite (optionale!) Parameter ist der Text, mit dem das Textfeld vorbelegt ist.
Hier klicken, um das Bild zu Vergrößern Abbildung 8.4 Dateneingabe mit JavaScript Wie ein Test im Browser zeigt, wird der auf if (benutzername) folgende Befehl auch dann nicht ausgeführt, wenn die Schaltfläche OK angeklickt, aber kein Name eingegeben worden ist.
<< 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