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