JavaScript alert, prompt und confirm
Lernen Sie JavaScripts eingebaute Interaktionsfunktionen: alert() für Nachrichten, prompt() für Eingaben und confirm() für Ja/Nein-Entscheidungen.
Einführung in die interaktiven Funktionen von JavaScript
Dieses Kapitel behandelt die drei eingebauten Funktionen, die der Browser Ihnen für die direkte Kommunikation mit dem Benutzer bereitstellt — alert, prompt und confirm — sowie console.log für die Protokollierung während der Entwicklung. Wenn Sie gerade erst beginnen, sind dies die einfachsten Möglichkeiten, eine Seite auf Benutzereingaben reagieren zu lassen. Deshalb greift fast jede JavaScript-Einführung als Erstes auf alert zurück.
Alle drei sind Methoden des globalen window-Objekts, sodass window.alert(...) und alert(...) dasselbe sind. Zwei Eigenschaften sind wichtig zu verstehen, bevor Sie sie verwenden:
- Sie sind modal. Jede öffnet einen kleinen Browser-Dialog, der über der Seite liegt. Der Benutzer kann nichts anderes auf der Seite anklicken, bis er ihn schließt.
- Sie sind synchron und blockierend. Die Codezeile, die sie aufruft, wird nicht abgeschlossen, bis der Benutzer antwortet. Der gesamte JavaScript-Thread pausiert — keine Timer werden ausgelöst, kein Rendering findet statt, nichts läuft im Hintergrund. Deshalb eignen sie sich hervorragend zum schnellen Lernen und für Demos, sind aber für ausgereifte Produktionsanwendungen ungeeignet.
Da der Browser diese Dialoge zeichnet, können Sie sie weder gestalten noch positionieren oder Schaltflächenbeschriftungen ändern. Für echte Produkt-UIs werden Sie diese schließlich durch eigene Modal-Komponenten ersetzen (siehe Schlussfolgerung), aber zum Erlernen der Sprache sind sie ideal.
JavaScript Alert: Benutzerbenachrichtigungen verwalten
Die Rolle von alert()
Die Funktion alert() zeigt einen einfachen Dialog mit einer Nachricht und einer einzelnen OK-Schaltfläche an. Sie gibt undefined zurück — ihre einzige Aufgabe besteht darin, die Nachricht anzuzeigen, nicht einen Wert zurückzugeben.
Syntax und Verwendung
Die Syntax lautet einfach alert(message). Die Nachricht wird in einen string umgewandelt, sodass Sie Zahlen, boolean-Werte oder sogar Objekte übergeben können (Objekte erscheinen als [object Object], was selten das Gewünschte ist).
Der Benutzer muss auf OK klicken (oder Enter / Escape drücken), um fortzufahren. Bis dahin ist die Seite eingefroren, was alert() gut für eine einzelne, wichtige Nachricht geeignet macht, die der Benutzer bestätigen muss.
Obwohl nützlich, sollte die Alert-Box sparsam verwendet werden. Zu häufige Verwendung kann das Benutzererlebnis beeinträchtigen, da sie die Interaktion mit dem Rest der Seite blockiert, bis sie bestätigt wird.
JavaScript Prompt: Benutzereingaben abfragen
prompt() verstehen
Die Methode prompt() zeigt einen Dialog mit einer Nachricht, einem Texteingabefeld und OK/Abbrechen-Schaltflächen an. Verwenden Sie sie, wenn Sie einen einzelnen Textwert vom Benutzer benötigen, bevor Sie fortfahren.
Syntax und Verwendung
prompt(message, default) nimmt zwei Argumente entgegen:
message— der Text, der über dem Eingabefeld angezeigt wird.default— optional. Der Text, der das Eingabefeld vorab ausfüllt. Übergeben Sie einen leeren string"", wenn das Feld leer beginnen soll; lassen Sie es ganz weg, zeigen einige Browser das wörtliche Wortundefinedim Feld an — geben Sie daher immer einen Standardwert explizit an.
Umgang mit Benutzerantworten
Der Rückgabewert von prompt() ist das Wichtigste, das Sie richtig verstehen müssen:
- Wenn der Benutzer auf OK klickt, erhalten Sie den Text aus dem Eingabefeld als string (ein leerer string
"", wenn er ihn geleert und auf OK geklickt hat). - Wenn der Benutzer auf Abbrechen klickt oder Escape drückt, erhalten Sie
null.
Da das Ergebnis ein string oder null sein kann, prüfen Sie immer, bevor Sie es verwenden. Dies ist ein natürlicher Einsatzort für die bedingten Operatoren, die Sie gelernt haben:
prompt() gibt immer einen string zurück, niemals eine Zahl. Wenn Sie nach einer Zahl fragen, ist der Wert "7" immer noch Text — "7" + 1 ergibt "71", nicht 8. Konvertieren Sie ihn zunächst mit Number(value) oder parseInt(value, 10), bevor Sie Berechnungen durchführen.
JavaScript Confirm: Entscheidungen treffen
Die Methode confirm()
confirm() zeigt einen Dialog mit einer Nachricht und zwei Schaltflächen an, OK und Abbrechen. Verwenden Sie sie, um eine einfache Ja/Nein-Frage zu stellen.
Syntax und Verwendung
confirm(message) nimmt ein Argument entgegen und gibt einen boolean zurück: true, wenn der Benutzer auf OK klickt, und false, wenn er auf Abbrechen klickt oder Escape drückt. Da das Ergebnis bereits ein boolean ist, können Sie es direkt in einer if-Anweisung verwenden.
Überlegungen zum Anwendungsfall
Beachten Sie den Unterschied zu prompt(): Es gibt keinen „fehlenden" Zustand. confirm() kann nur true oder false zurückgeben — Abbrechen und Escape werden beide auf false abgebildet. Wie alert() sperrt es den Rest der Seite, bis der Benutzer antwortet — reservieren Sie es daher für echte Entscheidungen („Dieses Element löschen?") statt für routinemäßige Bestätigungen.
JavaScript Console.log: Debuggen und Protokollieren
console.log() erkunden
console.log() ist ein grundlegendes Werkzeug in JavaScript zum Debuggen und Protokollieren von Informationen in der Browser-Konsole.
Syntax und Beispiele
Diese Methode kann strings, Zahlen, Objekte und mehr ausgeben, was sie für Test- und Debugging-Zwecke unschätzbar macht.
console.log() ist eine nicht-intrusive Möglichkeit, den Zustand Ihres Codes zu überprüfen, und beeinträchtigt das Benutzererlebnis auf der Webseite nicht. Es ist ein unverzichtbares Werkzeug für jeden JavaScript-Entwickler.
Schlussfolgerung: Web-Interaktivität mit JavaScript verbessern
Diese vier Funktionen sind der einfachste Weg, eine Seite interaktiv zu gestalten, während Sie lernen. Zur Wiederholung ihrer Rückgabewerte — das Detail, an dem Anfänger am häufigsten stolpern:
| Funktion | Zeigt | Gibt zurück |
|---|---|---|
alert(message) | Eine Nachricht + OK | undefined |
prompt(message, default) | Eine Nachricht, Eingabefeld, OK/Abbrechen | den eingegebenen string, oder null bei Abbrechen |
confirm(message) | Eine Nachricht + OK/Abbrechen | einen boolean (true/false) |
Da alle drei den Haupt-Thread blockieren und nicht gestaltet werden können, ersetzen echte Anwendungen sie durch eigene Modal-Komponenten, die aus HTML und CSS erstellt werden. Aber zum Experimentieren mit der Sprache sind sie ideal. Ein natürlicher nächster Schritt ist es, diese Art von Interaktion in eigene wiederverwendbare JavaScript-Funktionen zu verpacken und anhand der Benutzerantwort mit bedingten Operatoren zu verzweigen.