Da wir den Browser als Demo-Umgebung verwenden, sehen wir uns einige Funktionen zur Interaktion mit dem Benutzer an: alert
, prompt
und confirm
.
Dieses hier haben wir bereits gesehen. Es zeigt eine Meldung an und wartet darauf, dass der Benutzer auf „OK“ drückt.
Zum Beispiel:
alarm("Hallo");
Das Minifenster mit der Nachricht wird als modales Fenster bezeichnet. Das Wort „modal“ bedeutet, dass der Besucher erst dann mit dem Rest der Seite interagieren, andere Tasten drücken usw. kann, wenn er sich mit dem Fenster befasst hat. In diesem Fall – bis sie „OK“ drücken.
Die prompt
akzeptiert zwei Argumente:
result = prompt(title, [default]);
Es zeigt ein modales Fenster mit einer Textnachricht, einem Eingabefeld für den Besucher und den Schaltflächen OK/Abbrechen.
title
Der Text, der dem Besucher angezeigt werden soll.
default
Ein optionaler zweiter Parameter, der Anfangswert für das Eingabefeld.
Die eckigen Klammern in der Syntax [...]
Die eckigen Klammern um default
in der obigen Syntax bedeuten, dass der Parameter optional und nicht erforderlich ist.
Der Besucher kann etwas in das Eingabefeld der Eingabeaufforderung eingeben und auf OK klicken. Dann erhalten wir diesen Text im result
. Oder sie können die Eingabe abbrechen, indem sie Abbrechen drücken oder die Esc -Taste drücken. Dann erhalten wir als result
null
.
Der Aufruf von prompt
gibt den Text aus dem Eingabefeld zurück oder null
, wenn die Eingabe abgebrochen wurde.
Zum Beispiel:
let age = prompt('Wie alt bist du?', 100); Alert(`Du bist ${age} Jahre alt!`); // Du bist 100 Jahre alt!
Im IE: Geben Sie immer einen default
an
Der zweite Parameter ist optional, aber wenn wir ihn nicht angeben, fügt Internet Explorer den Text "undefined"
in die Eingabeaufforderung ein.
Führen Sie diesen Code im Internet Explorer aus, um Folgendes anzuzeigen:
let test = prompt("Test");
Damit Eingabeaufforderungen im IE gut aussehen, empfehlen wir, immer das zweite Argument anzugeben:
let test = prompt("Test", ''); // <-- für IE
Die Syntax:
Ergebnis = bestätigen(Frage);
Die Funktion confirm
zeigt ein modales Fenster mit einer question
und zwei Schaltflächen: OK und Abbrechen.
Das Ergebnis ist true
, wenn OK gedrückt wird, andernfalls false
.
Zum Beispiel:
let isBoss = bestätigen("Sind Sie der Boss?"); alarm( isBoss ); // wahr, wenn OK gedrückt wird
Wir haben drei browserspezifische Funktionen zur Interaktion mit Besuchern abgedeckt:
alert
zeigt eine Nachricht an.
prompt
zeigt eine Meldung an, in der der Benutzer zur Texteingabe aufgefordert wird. Es gibt den Text oder, wenn auf die Schaltfläche „Abbrechen“ oder „Esc“ geklickt wird, null
zurück.
confirm
zeigt eine Meldung an und wartet darauf, dass der Benutzer „OK“ oder „Abbrechen“ drückt. Es gibt true
für „OK“ und false
für „Cancel/ Esc“ zurück.
Alle diese Methoden sind modal: Sie unterbrechen die Skriptausführung und erlauben dem Besucher nicht, mit dem Rest der Seite zu interagieren, bis das Fenster geschlossen wird.
Es gibt zwei Einschränkungen, die allen oben genannten Methoden gemeinsam sind:
Die genaue Position des modalen Fensters wird vom Browser bestimmt. Normalerweise liegt es in der Mitte.
Das genaue Aussehen des Fensters hängt auch vom Browser ab. Wir können es nicht ändern.
Das ist der Preis für die Einfachheit. Es gibt andere Möglichkeiten, schönere Fenster und eine intensivere Interaktion mit dem Besucher zu zeigen, aber wenn „Schnickschnack“ keine große Rolle spielt, funktionieren diese Methoden einwandfrei.
Wichtigkeit: 4
Erstellen Sie eine Webseite, die nach einem Namen fragt und diesen ausgibt.
Führen Sie die Demo aus
JavaScript-Code:
let name = prompt("Wie ist Ihr Name?", ""); alarm(name);
Die ganze Seite:
<!DOCTYPE html> <html> <Körper> <Skript> 'strikt verwenden'; let name = prompt("Wie ist Ihr Name?", ""); Warnung(Name); </script> </body> </html>