Schnelles Beispiel
- JavaScript kennt drei Arten von pop-up-Boxen:
// Hinweis-Box
alert("Ich bin eine Alert-Box");
// Bestätigungs-Box
confirm("Mit OK bestätigen oder abbrechen");
// Eingabeaufforderung
prompt("Bitte Text eingeben");
- alert Box
- confirm Box
- prompt (Eingabeaufforderung)
- Übungen
Inhaltsverzeichnis
alert Box
Pop-Up-Fenster werden in JavaScript durch vordefinierte Funktionen ausgeführt.
Ein ganz einfaches Pop-Up-Fenster, das eine von uns bestimmte Nachricht an den Nutzer ausgibt, lässt sich mit der Funktion alert() auslösen:
alert("Meine Devise ist surprise wie jeder weiss!");
Wir schreiben also den Funktionsnamen alert und in die runden Klammern den Text (Parameter), den wir am Bildschirm "aufpoppen" lassen wollen:
So einfach ist das! Eine solche "Alert Box" wird häufig eingesetzt, um sicherzustellen, dass der Nutzer eine bestimmte Information zur Kenntnis genommen hat. Das Pop-Up-Fenster verschwindet nämlich erst, wenn auf "Schließen" geklickt wird.
Eine tiefere Nutzer-Interaktion mit der Seite ist durch das Pop-Fenster nicht vorgesehen. Das bedeutet, dass der Nutzer nichts weiter tun kann, als das Fenster zu schließen und zur Seite zurückzukehren.
12confirm Box
Anders als bei alert fordert die Funktion confirm den Nutzer auf, eine Entscheidung zu treffen und entweder auf "OK" oder "Abbrechen" zu klicken.
Sehen wir uns die confirm Funktion zunächst einmal an:
confirm("Möchten Sie die Bestellung ausführen?");
Der Funktionsaufruf confirm verlangt wie alert die Übergabe einer Zeichenkette in den runden Klammern. Der entsprechende Text erscheint dann oberhalb der beiden Auswahlbuttons:
Mit dem Rückgabewert arbeiten
Die Funktion confirm liefert einen Rückgabewert. Je nach dem, ob der Nutzer auf "OK" oder "Abbrechen" klickt, wird entsprechend true oder false zurückgegeben.
In unserem Beispiel oben haben wir uns um diesen Rückgabewert nicht gekümmert und die Auswahl des Nutzers hatte keine Auswirkung auf unser Programm. Das ändern wir nun:
var antwort = confirm("Möchten Sie die Bestellung ausführen?");
bestellung(antwort);
//Funktionsdefinition
function bestellung(antwort){
if(antwort){
document.write("Vielen Dank, Ihre Bestellung wird ausgeführt");
}
else{
document.write("Der Bestellvorgang wurde abgebrochen.");
}
}
Wir speichern den booleschen Rückgabewert der confirm-Funktion in einer Variablen namens antwort.
Wir führen anschließend eine von uns selbst definierte Funktion namens bestellung() aus und setzen die Variable antwort als Parameter ein. Jetzt wird mittels einer if-else-Kontrollstruktur der Wert der Variablen geprüft und eine entsprechende Textmeldung am Bildschirm angezeigt.
Auf diese Art können wir die Antwort des Nutzers auf eine confirm-Box in unserem Programm auswerten.
prompt (Eingabeaufforderung)
Eine weitere sehr nützliche Art, den Nutzer zu einer Interaktion mit unserer Website aufzufordern, stellt die "Dialog-Box" dar, die wir mit der Funktion prompt einsetzen können. prompt erzeugt ein Pop-Up-Fenster, in das der Nutzer eine Zeichenkette (Text) eingeben kann, die dann an das Programm zurückgeliefert wird. Hier ein Beispiel:
var name = prompt("Bitte geben Sie Ihren Namen ein.");
document.write(usertext);
Wenn der Nutzer auf "Abbrechen" klickt, liefert die Funktion null zurück.
Ausgangswert vorgeben
Die Funktion stellt einen optionalen zweiten Parameter bereit, der als vorgegebener Ausgangswert (default value) dient und dem Nutzer als "Eingabevorschlag" im Eingabefeld erscheint:
var name = prompt("Bitte geben Sie Ihren Namen ein.", "Michael Jackson");
document.write(usertext);
Mit Zahlen arbeiten
Die Funktion prompt() arbeitet mit Zeichenketten, das bedeutet, dass auch Zahlen als Zeichen und nicht als Zahlenwerte interpretiert werden. Hier ein Beispiel:
var zahl1 = prompt("Erste Zahl");
var zahl2 = prompt("Zweite Zahl");
var summe = zahl1 + zahl2;
document.write("Die Summe lautet: " + summe);
Der Nutzer soll nacheinander zwei Zahlen eingeben. Diese sollen danach summiert und am Bildschirm ausgegeben werden. Doch kann das mit diesem Code funktionieren?
Bei der Eingabe von z.B. 3 und 4 sehen wird jedenfalls folgendes am Bildschirm angezeigt:
Die Summe lautet: 34
Das Problem liegt (wie gesagt) daran, dass Nutzereingaben in prompt() prinzipiell als Zeichenketten interpretiert werden. Der Operator + zwischen zahl1 und zahl2 wird von JavaScript dann auch nicht als mathematischer Additions-Operator, sondern entsprechend als String-Verkettungs-Operator verstanden.
Um das Problem zu lösen, müssen wir die Werte aus den Eingabefeldern in Dezimalzahlen umwandeln. Dies gelingt uns mithilfe der Funktion parseFloat():
var zahl1 = parseFloat(prompt("Erste Zahl"));
var zahl2 = parseFloat(prompt("Erste Zahl"));
var summe = zahl1 + zahl2;
document.write("Die Summe lautet: " + summe);
Noch ehe die Nutzereingaben in den einzelnen Variablen gespeichert werden, werden sie zuerst in einen Zahlenwert umgewandelt, mit dem auch gerechnet werden kann:
Die Summe lautet: 7
Übungen
einfach
Schreiben Sie folgendes Programm: Der Nutzer soll gefragt werden, ob er seinen Namen nennen möchte. Wenn er dies mit "OK" bestätigt, wird er aufgefordert, seinen Namen einzugeben. Das Ergebnis soll anschließend nach folgendem einfachen Muster am Bildschirm angezeigt werden:
Hallo Paul!
mittel
Schreiben Sie ein Programm, mit dem der Nutzer einen BMI (body mass index) errechnen kann. Die Formel zur Berechnung des BMI lautet:
BMI = Körpergewicht / (Körpergröße in m)^2
Achtung: Bei der Eingabe von Dezimalwerten muss immer mit dem Dezimalpunkt und nicht mit dem deutschen Dezimalkomma gearbeitet werden.
schwer
Programmieren wir einmal ein kleines "Ratespiel". Hierzu wollen wir eine Funktion namens gameStart() schreiben, welche die einzelnen Programmschritte beim Aufruf durchführt.
Das Programm ermittelt eine Zufallszahl zwischen 1 und 10. Anchließend wird der Spieler aufgefordert, seine eigene Zahl zwischen 1 und 10 einzugeben.
Wenn die eingegebene Zahl des Spielers der Zufallszahl entspricht, ist das Spiel beendet. Wenn nicht, wird der Spieler abermals aufgefordert, eine neue Zahl einzugeben. Das Spiel läuft so lange, bis der Spieler die Zufallszahl getroffen hat.
Bei Spielende soll außerdem die Anzahl der benötigten Versuche in einem alert-Fenster angezeigt werden.