JavaScript Message Boxes – Usage with Examples

Table of Contents

JavaScript Message Boxes

Learn about JavaScript message boxes, including alert(), confirm(), and prompt(). Understand their usage and see code examples.

Some concepts : JavaScript message boxes, JavaScript, message boxes, alert, confirm, prompt, JavaScript, message boxes, alert, confirm, prompt, usage,

In JavaScript, you can create message boxes to display various types of messages.

These message boxes are commonly used to provide information, ask for confirmation, or display warning/error messages.

There are three main types of message boxes in JavaScript:

JavaScript Alert Box:

It is commonly used to show information or notifications to the .
The alert() method displays a simple message box with a specified message and an “OK” button.

The can dismiss the message box by clicking the “OK” button

Javascript code:

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

alert():

Alert Box: complete code example in html

Here’s a complete HTML code example demonstrating how to use the alert() method in JavaScript:

<html>
<head>
  <title>Alert Box Example</title>
</head>
<body>
<!-- Click the button to trigger the alert box -->
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
  alert("This is an alert message!");
}
</script>
</body>
</html>

1-In this example, we have a simple HTML page with a button element.

2-When the button is clicked, the showAlert() function is called, which triggers the alert() method and displays the message box with the specified text (“This is an alert message!”).

3-When the clicks the “OK” button in the alert box, the message box will be dismissed.

JavaScript Confirm Box:

A confirm box is used to ask the for confirmation.
The confirm() method displays a message box with a specified message and “OK” and “Cancel” buttons.
The can click either button to respond to the prompt.
The method returns a boolean value, true if the clicks “OK,” and false if the clicks “Cancel.”
It is used to ask the for confirmation or a yes/no response.

Javascript code:

const result = confirm("Are you sure you want to proceed?");
if (result) {
  // Code to execute if the  clicks "OK"
} else {
  // Code to execute if the  clicks "Cancel"
}

Simple example:

<!DOCTYPE html>

<html>

<head>

  <title>prompt message</title>

</head>

<body>

<script>

  window.confirm("Do you really want to leave?");

</script>

</body>

</html>

Confirm Box:complete code in html

Here’s a complete HTML code example demonstrating how to use the confirm() method in JavaScript to create a confirm box:

<!DOCTYPE html>
<html>
<head>
  <title>Confirm Box Example</title>
</head>
<body>
<!-- Click the button to trigger the confirm box -->
<button onclick="showConfirm()">Show Confirm Box</button>
<script>
function showConfirm() {
  const result = confirm("Do you want to proceed?");
  if (result) {
    alert("You clicked 'OK'.");
  } else {
    alert("You clicked 'Cancel'.");
  }
}
</script>
</body>
</html>

Explanation:

1-In this example, we have an HTML page with a button element.

2-When the button is clicked, the showConfirm() function is called.

3-Inside this function, the confirm() method is used to display the confirm box with the specified message (“Do you want to proceed?”).

4-The confirm box will have two buttons, “OK” and “Cancel.” Depending on the ‘s choice, an alert message will be displayed indicating whether the clicked “OK” or “Cancel.”

JavaScript Prompt Box:

A prompt box allows the to input a value.
It displays a message along with an input field where the can type their response.
The box also has “OK” and “Cancel” buttons.
The function returns the ‘s input as a string, or null if the clicks “Cancel.”

Javascript code:

const Input = prompt("Please enter your name:");
if (Input !== null) {
  // Code to execute if the  clicks "OK" and provides an input
  console.log(" input:", Input);
} else {
  // Code to execute if the  clicks "Cancel" or closes the prompt
  console.log(" canceled the prompt.");
}

Note:

Keep in mind that these message boxes can be disruptive to the experience, especially if overused.
They should be used thoughtfully and sparingly to provide important information or obtain confirmation only when necessary.
Additionally, you should be cautious when using the prompt box for receiving input, as it can be misused to collect sensitive information in an unsecured manner.

JavaScript prompt():

The prompt() method displays a message box with a specified message, an input field, and “OK” and “Cancel” buttons. It is used to get input from the . The method returns the ‘s input as a string, or null if the clicks “Cancel.”

javascript code:

const Input = prompt("Please enter your name:");
if (Input !== null) {
  // Code to execute if the  clicks "OK" and provides an input
  console.log(" input:", Input);
} else {
  // Code to execute if the  clicks "Cancel" or closes the prompt
  console.log(" canceled the prompt.");
}

Remember that using message boxes should be done thoughtfully, and excessive use can disrupt the experience.

Use them only when necessary, such as displaying important information or seeking confirmation for critical actions. Additionally, be cautious when using the prompt method to collect sensitive information, as it can be misused if not handled properly. Always sanitize and validate inputs to ensure security.

Simple Example:

<!DOCTYPE html>

<html>

<head>

  <title>prompt message</title>

</head>

<body>

<script>

  prompt()

prompt(message)

prompt(message, defaultValue)

</script>

</body>

</html>

Prompt Box:complete code in html

Here’s a complete HTML code example demonstrating how to use the prompt() method in JavaScript to create a prompt box:

<!DOCTYPE html>
<html>
<head>
  <title>Prompt Box Example</title>
</head>
<body>
<!-- Click the button to trigger the prompt box -->
<button onclick="showPrompt()">Show Prompt Box</button>
<script>
function showPrompt() {
  const Input = prompt("Please enter your name:");
  if (Input !== null) {
    alert("Hello, " + Input + "!");
  } else {
    alert("You clicked 'Cancel' or closed the prompt.");
  }
}
</script>
</body>
</html>

Explanation:

1-In this example, we have an HTML page with a button element.

2-When the button is clicked, the showPrompt() function is called.

3-Inside this function, the prompt() method is used to display the prompt box with the specified message (“Please enter your name:”).

4-The prompt box will have an input field where the can type their response.

5-If the clicks “OK” and provides an input, the Input variable will store the value entered by the . An alert message will then be displayed, greeting the with their entered name.

6-If the clicks “Cancel” or closes the prompt box without entering any input, the Input variable will be null, and an alert message will indicate that the clicked “Cancel” or closed the prompt.

simple example:try this example

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Message Boxes</title>
</head>
<body>
<!-- Button to trigger the Alert Box -->
<button onclick="showAlert()">Show Alert Box</button>
<!-- Button to trigger the Confirm Box -->
<button onclick="showConfirm()">Show Confirm Box</button>
<!-- Button to trigger the Prompt Box -->
<button onclick="showPrompt()">Show Prompt Box</button>
<script>
function showAlert() 
{
  alert("This is an alert message!");
}

function showConfirm() 
{
  confirm("Do you want to proceed?");
  
  }

function showPrompt() {
  prompt("Please enter your name:");
  
}
</script>
</body>
</html>

importance and uses : complete code in html

Below is a complete HTML code example that demonstrates the importance and uses of the different JavaScript message boxes (alert(), confirm(), and prompt()):

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Message Boxes</title>
</head>
<body>
<!-- Button to trigger the Alert Box -->
<button onclick="showAlert()">Show Alert Box</button>
<!-- Button to trigger the Confirm Box -->
<button onclick="showConfirm()">Show Confirm Box</button>
<!-- Button to trigger the Prompt Box -->
<button onclick="showPrompt()">Show Prompt Box</button>
<script>
function showAlert() {
  alert("This is an alert message!");
}
function showConfirm() {
  const result = confirm("Do you want to proceed?");
  if (result) {
    alert("You clicked 'OK'.");
  } else {
    alert("You clicked 'Cancel'.");
  }
}
function showPrompt() {
  const Input = prompt("Please enter your name:");
  if (Input !== null) {
    alert("Hello, " + Input + "!");
  } else {
    alert("You clicked 'Cancel' or closed the prompt.");
  }
}
</script>
</body>
</html>

Explanation:

1-In this example, we have a simple HTML page that contains three buttons.

2-Each button is associated with a JavaScript function that triggers a specific message box when clicked.

3-The first button, labeled “Show Alert Box,” triggers the showAlert() function, which displays a simple alert box with the message “This is an alert message!” when clicked.

4-The second button, labeled “Show Confirm Box,” triggers the showConfirm() function. When clicked, it displays a confirm box with the message “Do you want to proceed?” and “OK” and “Cancel” buttons.

5-Depending on the ‘s choice, an alert message will be displayed indicating whether the clicked “OK” or “Cancel.”

6-The third button, labeled “Show Prompt Box,” triggers the showPrompt() function.

7-When clicked, it displays a prompt box with the message “Please enter your name:” and an input field. If the clicks “OK” and provides an input, an alert message will greet the with their entered name.

8-If the clicks “Cancel” or closes the prompt without entering any input, an alert message will indicate that the clicked “Cancel” or closed the prompt.

These message boxes are important for providing feedback, asking for confirmation, and obtaining input in JavaScript applications, making the experience more interactive and informative. However, it is essential to use them thoughtfully and sparingly to avoid disrupting the ‘s flow and to ensure that the ‘s experience remains positive.

Application :complete code in html

Let’s create a simple web application that utilizes the JavaScript message boxes (alert(), confirm(), and prompt()) to interact with the . In this application, we’ll ask the for their name, greet them with a personalized message, and ask for their confirmation before proceeding with an action. The will also receive notifications using alert boxes.

Here’s the complete HTML code for the application:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Message Box Application</title>
</head>
<body>
<!-- Application Header -->
<h1>Welcome to JavaScript Message Box Application</h1>
<!-- Input for 's Name -->
<label for="nameInput">Please enter your name:</label>
<input type="text" id="nameInput">
<button onclick="greet()">Greet Me!</button>
<!-- Action Button -->
<button onclick="performAction()">Perform Action</button>
<script>
function greet() {
  const nameInput = document.getElementById("nameInput").value;
  if (nameInput !== "") {
    alert("Hello, " + nameInput + "! Welcome to our application!");
  } else {
    alert("Please enter your name.");
  }
}
function performAction() {
  const confirmation = confirm("Are you sure you want to perform this action?");
  if (confirmation) {
    alert("Action performed successfully!");
  } else {
    alert("Action canceled.");
  }
}
</script>

</body>
</html>

Explanation:

In this application, we have two buttons:

“Greet Me!” Button:
When the enters their name in the input field and clicks the “Greet Me!” button, the greet() function is called.
The function retrieves the ‘s input from the input field, checks if the name is provided, and if so, displays a personalized greeting using the alert() message box. If the name is not provided, an alert box asks the to enter their name.
“Perform Action” Button:
When the “Perform Action” button is clicked, the performAction() function is called.
The function displays a confirm() message box asking for the ‘s confirmation to proceed with the action.
If the clicks “OK,” an alert box informs them that the action was performed successfully.
If the clicks “Cancel,” an alert box indicates that the action was canceled.
This simple application demonstrates how you can use JavaScript message boxes to provide feedback to the and ask for confirmation before executing critical actions.

Try to test the application by running the HTML code in a browser.

Quiz with answers

Let’s create a multi-choice quiz about JavaScript message boxes with answers. The quiz will consist of multiple questions, and each question will have multiple options. The correct answer will be indicated in each question.

The can select an answer for each question and then submit the quiz to check their score.

Here’s the complete HTML code for the multi-choice quiz:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Message Box Quiz</title>
</head>
<body>
<!-- Quiz Header -->
<h1>JavaScript Message Box Quiz</h1>
<!-- Questions and Options -->
<form id="quizForm">
  <ol>
    <!-- Question 1 -->
    <li>
      <p>Which method is used to display a simple message box with an "OK" button?</p>
      <input type="radio" name="q1" value="alert">alert()<br>
      <input type="radio" name="q1" value="confirm">confirm()<br>
      <input type="radio" name="q1" value="prompt">prompt()<br>
    </li>
    <!-- Question 2 -->
    <li>
      <p>Which method is used to ask the  for confirmation with "OK" and "Cancel" buttons?</p>
      <input type="radio" name="q2" value="alert">alert()<br>
      <input type="radio" name="q2" value="confirm">confirm()<br>
      <input type="radio" name="q2" value="prompt">prompt()<br>
    </li>
    <!-- Question 3 -->
    <li>
      <p>Which method is used to get input from the  with an input field?</p>
      <input type="radio" name="q3" value="alert">alert()<br>
      <input type="radio" name="q3" value="confirm">confirm()<br>
      <input type="radio" name="q3" value="prompt">prompt()<br>
    </li>
  </ol>
  <!-- Submit Button -->
  <input type="submit" value="Submit Quiz">
</form>
<!-- Score Display -->
<div id="scoreDisplay" style="display: none;">
  <h2>Your Quiz Score:</h2>
  <p id="score"></p>
</div>
<script>
document.getElementById("quizForm").addEventListener("submit", function(event) {
  event.preventDefault();
  const answers = {
    q1: "alert",
    q2: "confirm",
    q3: "prompt"
  };

  let score = 0;
  for (const question in answers) {
    const selectedAnswer = document.querySelector(`input[name="${question}"]:checked`);
    if (selectedAnswer !== null) {
      if (selectedAnswer.value === answers[question]) {
        score++;
      }
    }
  }
  // Display the score
  const scoreDisplay = document.getElementById("scoreDisplay");
  const scoreParagraph = document.getElementById("score");
  scoreParagraph.textContent = `${score} out of 3 correct answers.`;
  scoreDisplay.style.display = "block";
});
</script>
</body>
</html>

Explanation:

In this quiz, we have three multiple-choice questions related to JavaScript message boxes, each with three options.

The correct answers are as follows:

Question 1: Which method is used to display a simple message box with an “OK” button?
Correct Answer: alert()
Question 2: Which method is used to ask the for confirmation with “OK” and “Cancel” buttons?
Correct Answer: confirm()
Question 3: Which method is used to get input from the with an input field?
Correct Answer: prompt()

When the submits the quiz by clicking the “Submit Quiz” button, the JavaScript code will calculate the score based on the selected answers and display the result in a message box. The “Your Quiz Score” section will appear, showing how many correct answers the provided out of 3 questions.

References

Mozilla Developer Network (MDN) – JavaScript Alert:

Mozilla Developer Network (MDN) – JavaScript Confirm:

Mozilla Developer Network (MDN) – JavaScript Prompt:

JavaScript Tutorial

Curriculum

JavaScript Message Boxes – Usage with Examples

JavaScript Message Boxes

JavaScript Alert Box:

Javascript code:

Alert Box: complete code example in html

JavaScript Confirm Box:

Javascript code:

Confirm Box:complete code in html

JavaScript Prompt Box:

Note:

JavaScript prompt():

Simple Example:

Prompt Box:complete code in html

importance and uses : complete code in html

Application :complete code in html

Quiz with answers

References

Leave a Reply

Modal title