Basic JavaScript – Exercise 08: Alerts, Confirm and Prompt

JavaScript pop-up boxes are very important part of web applications. JavaScript programming allows 3 types of pop-up boxes or dialog boxes.

  1. Alert boxes
  2. Confirm boxes
  3. Prompts

Alert Boxes

Alert boxes give immediate feedback to the user. There are many reasons to provide an alert message to users.

  1. To give them some information
  2. Give warning
  3. Error reporting
  4. A message about success

When a user gets an alert, he or she can click “OK” to continue working on another part of the browser. As long as an alert is displayed, it forces users to read the messages and other browser components are hidden.

Syntax:alert (“This is an example alert”);

Confirm Boxes

When you want users to accept something use a confirm box. This box is used for critical operations like deleting a file, saving a file, etc. It requires user confirmation to avoid accidental change or deletion.

Confirm boxes have two options – OK and Cancel. The OK returns “true” and Cancel returns “false”.

Syntax:confirm (“Do you wish to proceed?”);

Prompts

A prompt allows users to provide input for manipulation. When users create events like clicking a button, page load, etc. A prompt will pop-up and ask for user input. Users can click OK after providing their inputs.

Syntax:prompt (“Enter a number”,” “);

Example Program – Alert, Confirm and Prompt

In this example program, we will create a JavaScript file called alert.js and an HTML document called Ex08.html and verify the output for three JavaScript pop-up boxes.

Before you start the exercise, create a new folder – Exercise 08 and save your JavaScript file and the HTML page inside this folder.

JavaScript File – Alert.js

The step-by-step instruction to create the JavaScript file – Alert.js is given below.

Step 1: Open a notepad and save it as Alert.txt file.

Advertisements


Step 2: Insert the following code in Alert.txt and save it as Alert.js inside the Example 08 folder.

function alert_box()
{
    alert("This is an alert box!");
}

function confirm_box()
{

    var r = confirm("Press a button");

    if(r == true)
    {

        alert("That was OK");

    }
    else
    {

        alert("That was cancel");

    }
}

function prompt_box()
{

    var name = prompt("Please enter your name","Name");

    if(name!=null && name!= " ")
    {

document.write("Hello" + " " + name + " " + "Thank You!");

    }
}

Step 3: Close the file.

Now, it’s time to create an HTML page and link the JavaScript file to the HTML page.

Note:- You can also create an inline script within the HTML document.

The HTML file-Ex08.html

The step-by-step instructions to create an HTML file-Ex08.html is given below.

Step 1: Open a notepad and save it as Ex08.txt.

Step 2: Insert the given HTML code in Ex08.txt and save it as Ex08.html.

<html>

<head>

<title>
Show Alert
</title>

</head>

<body>

<p><em> This is demo for showing JavaScript Pop up.</em><p>

<input type="button" onclick="alert_box()" value="show alert box"/>

<input type="button" onclick="confirm_box()" value="show confirm     box"/>

<input type="button" onclick="prompt_box()" value="show prompt box"/>

</body>

</html>

Step 3: Add the following line of JavaScript code to link the HTML page with JavaScript file.

<script type="text/JavaScript" src="Alert.js">

Step 4: Close the file.

The final HTML code should look like following.

<html>

<head>

<title>
Show Alert
</title>

<script type="text/javascript" src="Alert.js">

</script>
</head>

<body>

<p><em> This is demo for showing JavaScript Pop up.</em><p>

<input type="button" onclick="alert_box()" value="show alert box"/>

<input type="button" onclick="confirm_box()" value="show confirm box"/>

<input type="button" onclick="prompt_box()" value="show prompt box"/>

</body>

</html>

 

Output to the Browser

The output of the program is given below. The HTML page shows three buttons one for each type of JavaScript pop-up box. When a user clicks the button, it will create an event called onclick(). As a result, the respective pop-up code is executed and output is displayed on the browser.

Output 1- Buttons JavaScript
Output 1- Buttons JavaScript

 

Output 2 - Alert Box
Output 2 – Alert Box

When a user clicks on the alert button when they see an alert – “This is an alert box

Output 3 - Confirm Box
Output 3 – Confirm Box

When a user clicks the second button- the Confirm box button, they get a pop-up with an OK and a Cancel.

The third button when clicked will display a prompt asking username as in above diagram. You need to enter and name and then click OK.

Output 4 - Input Prompt
Output 4 – Input Prompt

The following output will be displayed on the browser.

Output 5 - Output for Prompt Box
Output 5 – Output for Prompt Box
Advertisements