Galileo Computing < openbook > Galileo 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
Galileo 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

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


Galileo Computing

8.1 Modale Fenster  downtop

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.

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


Galileo Computing

8.1.1 Warnung – nur im Notfall  downtop

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

Abbildung
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)

Galileo Computing

8.1.2 Bestätigungen  downtop

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()!

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


Galileo Computing

8.1.3 Benutzereingaben  toptop

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:

gp  Anstelle von window.prompt() können Sie wie gehabt auch prompt() verwenden.
gp  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.

Abbildung
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
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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