Meldungsfenster
Meldungsfenster in JavaScript
In JavaScript gibt es drei vordefinierte Meldungsfenster. Mit den Methoden „alert()“, „confirm()“ und „prompt()“ des „window“-Objekts können die drei Meldungsfenster geöffnet werden:
- alert(): Meldungsfenster mit Informationstext und „OK“-Button
- confirm(): Bestätigungsfenster mit einem Informationstext une einem „OK“- und einem „Abbrechen“-Button
- prompt(): Eingabefenster mit Informationstext, einem Eingabefeld sowie einem „OK“- und einem „Abbrechen“-Button
Fenster-Methode „alert()“
Mit der Methode „alert()“ des „window“-Objekts kann ein Meldungsfenster geöffnet werden, um einem Anwender Informationen anzuzeigen. Dieses Meldungsfenster verfügt neben dem Informations-Text über einen „OK“-Button, mit dem das Fenster geschlossen werden kann:
HTML-Datei:
Ergebnis:
Beispiel 1
Fenster-Methode „confirm()“
Mit der Methode „confirm()“ des „window“-Objekts kann ebenfalls ein Meldungsfenster geöffnet werden. Dieses Meldungsfenster verfügt aber neben dem Informations-Text zusätzlich über einen „OK“- und einen „Abbrechen“-Button. Als Rückgabewert wird hier „true“ ausgegeben, wenn der „OK“-Button betätigt wurde und „false“ wenn der „Abbrechen“-Button betätigt wurde:
HTML-Datei:
Ergebnis:
Beispiel 2
Rückgabewert:
Fenster-Methode „promt()“
Mit der Methode „prompt()“ des „window“-Objekts kann ein Meldungsfenster mit einem Eingabefeld geöffnet werden. Auch dieses Fenster hat zusätzlich die beiden Button „OK“ und „Abbrechen“. Bei „OK“ wird als Rückgabewert der Inhalt des Eingabefelds zurückgegeben und bei „Abbrechen“ der Wert „null“:
HTML-Datei:
Ergebnis:
Beispiel 3
Rückgabewert:
Zeilenumbruch in Meldungsfenstern
Um einen Zeilenumbruch innerhalb des Informationstexts eines Meldungsfensters zu generieren, wird die Zeichenfolge „\n“ verwendet:
HTML-Datei:
Ergebnis:
Beispiel 4
Rückgabewert:
Abschlussübung
Als Abschlussübung kannst du :
Beispiel 5
Vorname:Nachname:
Gehe dabei wie folgt vor:
- Erstelle zwei Eingabefelder, die „readonly“ sind, d. h. nicht editiert werden können
- Gebe den Eingabefeldern das onclick-Attribut, das jeweils auf eine eigene Funktion verweist
- Öffne in den Funktionen ein Meldungsfenster mit einem Eingabefeld, um den Vornamen bzw. Nachnamen abzufragen
- Gebe das Ergebnis aus dem Meldungsfenster in dem entsprechenden Eingabefeld aus
- Erstelle den Button „Zurücksetzen“, mit einem onclick-Attribut, welches auf eine Funktion verweist, die den Inhalt der Eingabefelder zurücksetzt
- Erstelle den Button „Senden“, mit einem onclick-Attribut, das auf eine Funktion verweist
- Lese in der Funktion den Inhalt der Eingabefelder aus
- Wenn eines oder beide der Eingabefelder leer sind, dann öffne ein Meldungsfenster mit dem Hinwei, dass beide Felder zum Senden ausgefüllt sein müssen
- Wenn beide Eingabefelder nicht leer sind, öffne ein Meldungsfenster, indem der Anwender das Senden mit „OK“ bestätigen muss
- Wurde der Dialog mit „OK“ geschlossen, öffne ein Meldungsfenster, indem der Inhalt der Eingabefelder angezeigt wird
Die Lösung kannst du dir hier herunterladen:
