6. prompt and alert in JavaScript

prompt Function:

The prompt function is used to display a dialog box that prompts the user for input. It takes two optional parameters:

  1. Message (prompt text): A string that will be displayed as a message in the prompt dialog.

  2. Default (default value): A string that will be displayed in the input field as the default value.

The prompt function returns the text entered by the user as a string. Here's an example:

let userName = prompt("Please enter your name:", "John Doe");

if (userName !== null) {
  console.log("Hello, " + userName + "!");
} else {
  console.log("User cancelled the prompt.");
}

In this example, the prompt function displays a dialog asking the user to enter their name. The default value is set to "John Doe." If the user clicks "OK" after entering their name, the entered text is stored in the variable userName. If the user clicks "Cancel" or closes the prompt, userName will be null.

alert Function:

The alert function is used to display a simple dialog box that contains a message. It takes one parameter:

  1. Message (alert text): A string that will be displayed as a message in the alert dialog.

Here's an example:

let message = "Welcome to our website!";
alert(message);

In this example, the alert function displays a dialog with the message "Welcome to our website!".

Note:

  • Both prompt and alert are blocking functions, meaning that they halt the execution of the script until the user interacts with the dialog.

  • The user can click "OK" or "Cancel" on the prompt dialog. If "OK" is clicked, the entered value is returned; if "Cancel" is clicked, null is returned.

  • The alert function only has an "OK" button, and it does not return any value.

It's important to use these functions judiciously, as excessive use of blocking dialogs can disrupt the user experience. Modern web development often prefers asynchronous approaches using events and callbacks for a smoother interaction flow.