TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich Warnungs-, Aufforderungs- und Bestätigungsdialogfelder mit JavaScript?

1

Dialogfeld "Warnung erstellen" mit JavaScript

Das Warndialogfeld ist ein Popup-Fenster, das nur im Browser mit einer Schaltfläche "OK" angezeigt wird, um den Benutzern eine sehr kleine Nachricht mitzuteilen. Das Warnfeld wird verwendet, um eine Warnmeldung oder eine Informationsmeldung anzuzeigen. Zum Beispiel:

  • Eine Willkommensnachricht an den Benutzer, wenn die Site geladen wird
  • Validierungsergebnis eines ungültigen Ergebnisses
  • Eine Information über die Ausfallzeit oder Wartungszeit der Site.

Hier besprechen wir, wie Sie ein Warn-Popup-Fenster mit JavaScript mit Beispielcode erstellen. Erfahren Sie mehr über das Erstellen von Warnungen in Bootstrap 4.

Wie es funktioniert?

Die JavaScript-Funktion alert() wird ausgelöst, wenn auf einer Seite ein Skript aufgerufen wird, das das String-Argument in einem Popup-Warnfeld anzeigt. Bis das Warnfeld reagiert hat, wird der Browser die Webseite nicht weiter laden.

Syntax

alert("Your Message Here");

Beispiel

Unten sehen Sie einen Beispielcode für eine Benachrichtigungsbox in JavaScript. Dieses Feld wird beim Laden der Seite als Willkommensfeld angezeigt und bietet die Möglichkeit, auf die Schaltfläche „OK” zu klicken oder das Dialogfeld in Browsern wie Google Chrome zu schließen. Sobald der Benutzer auf „OK” (oder Schließen) klickt, wird ein Bild geladen. Der Browser stoppt die Verarbeitung der Seite, bis eine Warnbox reagiert.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Unten sehen Sie das Bild einer Warnbox im Chrome-Browser, wenn der obige Code ausgeführt wird.

Wie erstelle ich Warnungs-, Aufforderungs- und Bestätigungsdialogfelder mit JavaScript?

JavaScript-Warnfeld in Google Chrome

Eingabeaufforderungsdialogfeld mit JavaScript erstellen

Das Dialogfeld Eingabeaufforderung wird verwendet, um die benutzerdefinierte Ausgabe auf einer Webseite basierend auf der Benutzereingabe anzuzeigen. Im Gegensatz zu einer Warnbox, die verwendet wird, um eine kurze Nachricht mit einer einzigen „OK”-Schaltfläche anzuzeigen, verfügt die Eingabeaufforderung über die folgenden Funktionen:

  • Zeigen Sie eine vorbestimmte Nachricht auf der Box an
  • Der Benutzer kann eine Eingabe in das Textfeld eingeben
  • Die Benutzereingabe wird an das Skript zurückgegeben
  • Eingabeaufforderungsfeld hat zwei Schaltflächen „OK” und „Abbrechen”

Wie es funktioniert?

Das Eingabeaufforderungsfeld hält auch das Laden der Webseite an, bis eine Antwort vom Benutzer empfangen wird. Es benötigt die folgenden zwei Informationen:

  • Eine Nachricht, die in der Eingabeaufforderung angezeigt werden soll
  • Standardtext, der im Textfeld angezeigt werden soll – dies ist optional; Sie können den Standardtext leer lassen
  • Wenn auf die Schaltfläche „OK” geklickt wird, wird der in das Feld eingegebene Text an das Skript übergeben
  • Wenn auf die Schaltfläche „Abbrechen” geklickt wird, wird der NULL-Wert an das Skript zurück übergeben

Syntax

prompt ("Message", "Default Value");

Beispiel

prompt ("What is the color you like?", "Green");

Praktisches Beispiel zum Erstellen eines Eingabeaufforderungsdialogfelds mit JavaScript

Die Eingabeaufforderungsbox kann in vielen praktischen Szenarien verwendet werden, und ein solches Beispiel ist die Begrüßung des Benutzers zusammen mit dem Namen. Der folgende Code fragt beim Laden der Seite nach dem Benutzernamen und fügt dann den Namen mit der Begrüßungsnachricht hinzu, um ihn im Browser anzuzeigen.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Wie es aussieht?

Unten sehen Sie das Bild einer Eingabeaufforderung im Chrome-Browser, wenn der obige Code ausgeführt wird.

Wie erstelle ich Warnungs-, Aufforderungs- und Bestätigungsdialogfelder mit JavaScript?

JavaScript-Eingabeaufforderungsfeld in Google Chrome

Wenn der Benutzer den Namen eingibt und auf die Schaltfläche „OK” drückt, wird der Name an das Skript übergeben und alle Nachrichten werden gemäß der document.write-Funktion angezeigt. Leerzeichen im Eingabefeld werden auch von der JavaScript-Eingabeaufforderung als gültiger Name betrachtet.

Eingabeaufforderungsbox mit Benutzernamen

Wenn der Benutzer auf die Schaltfläche „Abbrechen” klickt, wird der Nullwert übergeben und im Browser anstelle des Namens angezeigt.

Eingabeaufforderungsfeldanzeige mit Nullwert

Bestätigungsdialogfeld mit JavaScript erstellen

Dies ist neben Eingabeaufforderungs- und Warnfeldern eine dritte Art von Dialogfeld, die in JavaScript bereitgestellt wird. In diesem Abschnitt wird erläutert, wie Sie ein Bestätigungsdialogfeld mit JavaScript erstellen, das verwendet wird, um die vom Benutzer durchgeführte Aktion zu bestätigen.

Das Dialogfeld „Bestätigen” hat die folgenden Funktionen:

  • Eine vorgegebene Nachricht, die auf der Box angezeigt werden soll
  • Zwei Tasten – OK und Abbrechen

Wie es funktioniert?

Das Bestätigungsfeld stoppt wie andere Dialogfelder auch die Ausführung, bis die Benutzerantwort empfangen wird. Die Benutzeraktion kann entweder OK oder Abbrechen sein.

  • Der Wert true wird an das aufrufende Programm übergeben, wenn die OK-Taste gedrückt wird
  • Der Wert false wird an das aufrufende Programm übergeben, wenn die Schaltfläche Abbrechen gedrückt wird

Syntax

confirm ("Message");

Beispiel

confirm ("Do you want to close this window?");

Praxisbeispiel

Der folgende JavaScript-Code verwendet die Prompt-Methode, um dem Benutzer eine Frage zu stellen. Ein Bestätigungsfeld wird angezeigt, um anzuzeigen, dass die Antwort richtig oder falsch ist.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Wie es aussieht?

Unten sehen Sie das Bild eines Eingabeaufforderungsfelds im Chrome-Browser, wenn der obige Code ausgeführt wird und das Bestätigungsfeld basierend auf der Richtigkeit der im Eingabeaufforderungstextfeld angegebenen Antwort angezeigt wird.

JavaScript bestätigt die richtige Antwort

Wie erstelle ich Warnungs-, Aufforderungs- und Bestätigungsdialogfelder mit JavaScript?

JavaScript bestätigt falsche Antwort

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen