Concepts of Pop Up boxes in JavaScript

🔧 Concepts of Pop-Up Boxes in JavaScript

In JavaScript, pop-up boxes are used to interact with the user, providing messages or asking for input. There are three types of pop-up boxes:

• Alert Box
• Confirm Box
• Prompt Box

📘 1. Alert Box

The Alert Box is used to display a message to the user. It only has an "OK" button to close it. It is generally used to display information or warnings.

Syntax:

alert(message);

Example:

alert("This is an alert message!");

When the above code is executed, an alert box will appear with the message "This is an alert message!" and an "OK" button to close the box.

📘 2. Confirm Box

The Confirm Box is used to ask the user for a yes/no response. It returns a boolean value: true if the user clicks "OK" and false if the user clicks "Cancel".

Syntax:

let result = confirm(message);

Example:

let userChoice = confirm("Do you want to proceed?");
if (userChoice) {
  console.log("User clicked OK");
} else {
  console.log("User clicked Cancel");
}

In this example, a confirm box will appear with the message "Do you want to proceed?". The console will log the user's response based on whether they click "OK" or "Cancel".

📘 3. Prompt Box

The Prompt Box is used to ask the user for input. It displays a text field where the user can type their response. It returns the input entered by the user as a string or null if the user clicks "Cancel".

Syntax:

let userInput = prompt(message, defaultValue);

The defaultValue is optional and provides a default value in the text field.

Example:

let name = prompt("Please enter your name:", "John Doe");
console.log("User's name is: " + name);

In this example, a prompt box will appear asking the user to enter their name, with "John Doe" as the default value. The entered name will then be logged to the console.

🔑 Summary of Pop-Up Boxes

• Alert Box – Displays a message with an "OK" button.
• Confirm Box – Asks the user for confirmation with "OK" and "Cancel" buttons, returning true or false.
• Prompt Box – Asks the user to input a value, returning the input string or null.

Pop-up boxes are a quick way to gather user input, display messages, or confirm actions. However, they should be used sparingly to avoid disrupting the user experience.