Jetzt anmelden...

Login
Passwort
Registrieren

JavaScript Tutorial #8

Daten via Pop-Up-Fenster eingeben

Webentwicklungen werden erst dann interessant, wenn sie eine Interaktion mit dem Nutzer ermöglichen. Einen ersten Schritt in diese Richtung stellen die sogenannten Pop-Up-Fenster/ Boxen dar, die den Nutzer zu einer Handlung auffordern. Diese sind sehr einfach einzubauen. Lernen Sie jetzt wie.

Kommentare [0] 54 Views

Stefan 23.05.2020

Infos zum Artikel

Kategorie JavaScript
Autor Stefan
Datum 23.05.2020

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

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:

JavaScript alert pop-up box

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.

12
  • JavaScript ebook

confirm 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:

JavaScript confirm pop-up box

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.

JavaScript confirm pop-up box

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

JavaScript prompt pop-up box

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

JavaScript prompt default  box

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!

Lösung ein-/ausblenden

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.

Lösung ein-/ausblenden

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.

Lösung ein-/ausblenden

Falconbyte unterstützen

Kommentar schreiben

Nur angemeldete und aktivierte Benutzer können kommentieren.

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

Variablen in JavaScript

Lernen sie heute, wie Sie Variablen in JavaScript erstellen und einsetzen.

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2020 Stefan E. Heller

Impressum | Datenschutz

facebook programmieren lernen twitter programmieren lernen youtube programmieren lernen