Websiteentwicklung: JavaScript: Dialogboxen

<< Operatoren und Ausdrücke | Inhaltsverzeichnis | Index | Programmablauf und Kontrollstrukturen >>

Dialogfenster

Die drei hier vorgestellten Dialogfunktionen

alert() für eine kurze Meldung,
prompt() für eine kurze Texteingabe des Anwenders,
confirm() für eine Ja/Nein-Frage

sind Methoden des Window-Objektes von JavaScript. In fertigen Skripts werden sie sehr selten eingesetzt; während der Entwicklung einer HTML-Seite mit einem JavaScript-Programm jedoch sind sie zeitweise sehr nützlich. Bei größeren selbst erdachten und erstellten Dokumenten wird der Fall eintreten, dass eine Anweisung nicht von Anfang an so arbeitet, wie man es sich als Programmierer vorgestellt hatte. Mit etwas Glück findet man den Fehler einigermaßen schnell, indem man das Skript liest, weil es nur ein Tippfehler war; häufig aber verbergen sich – wie sorgfältig man auch vorgegangen ist – kleine logische Ungereimtheiten, die ein Skript zu Reaktionen bringen, die der Programmierer weder beabsichtigt noch erwartet hatte. Mit den drei hier vorgestellten Methoden ist es möglich, an beliebigen Stellen eines Skriptes:

festzustellen, ob das Skript die fragliche Stelle überhaupt erreicht;
festzustellen, welchen Wert bestimmte Variablen genau an dieser Stelle zu dieser Zeit haben;
festzustellen, ob die Variable an dieser Stelle überhaupt definiert ist;
einer Variablen an einer bestimmten Stelle, unabhängig vom restlichen Skript einen Wert zuzuweisen ...

... oder ähnliche zur Fehlerbehebung wichtige Auskünfte zu erlangen.

Außerdem kann man während der Entwicklung den Gesamtablauf eines unfertigen Scripts testen, indem man fehlende Script-Teile bzw. unausgeführte Funktionen durch Dummy-Funktionen mit einer Dialogbox ersetzt.

Achtung: Alle 3 Methoden erzeugen ein so genanntes „modales“ Fenster – d. h. zunächst muss dieses Fensterchen bedient werden, bevor weitere Aktionen im Browser-Fenster möglich sind.

Sie sollten sicherstellen, dass ein solches modales Fenster nicht in eine Endlosschleife eingefügt wird – zumindest nicht ohne eine nachfolgende Abbruchmöglichkeit (Confirm!), weil Sie den Prozess sonst nur noch gewaltsam abbrechen können: beispielsweise unter Windows über den Task-Manager (Tastenkombination: [STRG]+[ALT]+[ENTF]) oder unter Unix mit dem Befehl kill.

Siehe auch: Wikipedia über „Dialogfenster“

alert() für kurze Meldungen

Die einfachste Methode ist die alert()-Methode.

Schreibweise: alert("Meldung");
Wirkung: Damit wird die als Aufrufparameter übergebene Meldung in einem Dialogfensterchen ausgegeben.; Erst, nachdem der Anwender den Ok-Button ausgelöst hat, werden der nach dem Aufruf von alert() folgende Rest des Skripts und der Webseite interpretiert. Beispielsweise wird eine eventuell eingeblendete Sanduhr erst nach dem Ok zum normalen Mauszeiger.

Im folgenden Beispiel wird gleich beim Laden der Webseite ein Meldungsfensterchen angezeigt; weil alert() im Head der HTML-Seite steht, und zwar außerhalb einer Funktion und unabhängig von jedem Bedingungsausdruck. Erst nach dem Schließen des Meldungsfensters wird der HTML-Body mit dem Text „Test der alert()-Methode“ ausgegeben.


<html>
   <head>
      <title>Test der alert()-Methode</title>
      <SCRIPT type="text/javascript">
        alert("Box zum Test der alert-Methode!");
      </script>
   </head>
   <body>
       <h1>Test der alert()-Methode</h1>
   </body>
</html>

prompt() für Texteingaben

Schreibweise: Einfach: (Text)Variable=prompt("Meldung");; Mit Vorgabe: Variable=prompt("Meldung", "Vorgabe");
Bildschirmausgabe: Ein Dialogfensterchen mit der übergebenen Meldung und einem Eingabe-Textfeld erscheint. Wurde eine Vorgabewert übergeben, steht dieser im Eingabefeld; anderfalls ist das Eingabefeld entweder leer oder in ihm steht „undefined“.
Rückgabewert: Auf Benutzung des Ok-Buttons: der eingegebene Text; Auf Benutzung des Abbruch-Buttons: das Objekt null

Insofern verhält sich die Prompt-Methode wie eine Funktion; sie wird mit einem Parameter ("Meldung") aufgerufen und liefert einen Wert. Anders als bei einer „echten“ Funktion ist der Rückgabewert von prompt() allerdings unabhängig von den Aufrufparametern. Mit Hilfe der Prompt-Box können wir unser Hallo-Welt-Programm so ändern, dass damit Besucher der Webseite begrüßt werden.


<HTML>
  <HEAD>
    <TITLE>Hallo in JavaScript</TITLE>
    <SCRIPT type="text/javascript">
          // Ausgabe von Hallo Name mit Prompt- und Alert-Box
          var sName=prompt("Bitte geben Sie Ihren Namen ein:");
          alert("Hallo " + sName + "!");
    </SCRIPT>
  </HEAD>
  <BODY>
    <NOSCRIPT>
      Diese Seite wird nur mit JavaScript
      korrekt dargestellt. Bitte schalten
      Sie JavaScript in Ihrem Browser ein!
    </NOSCRIPT>
  </BODY>
</HTML>

confirm() für Ja/Nein-Fragen

Schreibweise: (boolesche)Variable=confirm("Meldung");
Bildschirmausgabe: Ein Dialogfensterchen mit der übergebenen Meldung und den zwei Buttons „Ok“ und „Abbrechen“ (engl: „Cancel“) erscheint.
Rückgabewert: Auf Benutzung des Ok-Buttons: Boolean-Wert true.; Auf Abbruch durch Button oder Boxschließen: Boolean-Wert false.

Auch die Confirm-Methode verhält sich also ähnlich wie eine Funktion: Sie wird mit einem Parameter(Meldung) aufgerufen und liefert einen Wert zurück. Auch hier bleibt anzumerken: Im Unterschied zu einer „echten“ Funktion ist der Rückgabewert unabhängig vom Wert des Aufrufparameters. Mit Hilfe der Confirm-Box und einer DO .. WHILE Schleife, die erst im nächsten Kapitel näher besprochen wird, können wir unser Hallo-Welt-Programm variieren: Das Skript wird in einer Schleife laufen, und der Anweisungsblock zwischen den geschweiften Klammern {} solange ausgeführt werden, wie die Bedingung (bRepeat==true) hinter while zutrifft, was geschieht, sobald wir den Ok-Button betätigt haben.


<html>
  <head>
    <title>Confirm-Dialog in JavaScript</title>
    <script type="text/javascript">
          do
          {
             //Ausgabe von Hallo Name mit Prompt-,Alert- und ConfirmBox
             var sName=prompt("Bitte geben Sie Ihren Namen ein :");
             if (sName==null) sName = "Unbenannter";
             alert("Hallo " + sName + "!");
             var bRepeat=confirm("Abfrage wiederholen?");
          }
          while(bRepeat==true)
    </script>
  </head>
  <body>
    <noscript>
      Diese Seite wird nur mit JavaScript
      korrekt dargestellt. Bitte schalten
      Sie JavaScript in Ihrem Browser ein!
    </noscript>
  </body>
</html>

Aufgaben + Lösungen

<< Operatoren und Ausdrücke | Inhaltsverzeichnis | Index | Weblinks | Programmablauf und Kontrollstrukturen >>