Boxes of joy

As annoying as they may be, JavaScript popup boxes are a good way to alert users to some relevant information, confirm a user’s decision, or collect some text input from a user. JavaScript offers three popup boxes to help us accomplish this. They are the alert box, the confirm box, and the prompt box which prompts the user to input some text. Let’s take a closer look at what these boxes can do for us.

The alert box

If you want to be absolutely sure that some information gets through to a user, you may want to try using an alert box. This is a simple (slightly annoying) but effective way of getting your message across. The syntax for an alert box is alert(“……..”); and is very easy to implement in your code. Have a look at the following code:
Code Block
Ask a Question
Download Source
JavaScript
<html>
<head>
<title> Alert Boxes </title>
<script type="text/javascript">
function showAlertBox(){
alert(" Yay! My first alert box ")	
};
</script>
</head>
<body>
<input type="button" onclick="showAlertBox();"  value="Show Alert box" />
</body>
</html>

As you can see above, we’ve created a function called ShowAlertBox(). All this function will do is make an alert box popup with the text that we specify in our alert() method. With an alert box, the user will have to click ok to proceed. Save the above code to your desktop as alertboxes.html, load it up into your browser, and click the button. You should see an alert box appear in the center of the screen. Fun, right? Let’s move on to our next oh so amazing box, the confirm box.

The Confirm Box

Similar to the alert box, the confirm box will pop up in the center of the screen once it is called. The main difference is that, unlike the alert box, the confirm box allows a user to select yes or no, and will return a value of true or false based on which option they’ve selected. Combining this with the alert box and an if statement, our next code example will popup a confirm box for the user,and then alert them to which option they’ve chosen. Here’s what the code looks like:
Code Block
Ask a Question
Download Source
JavaScript
<html>
<head>
<title>Confirm Boxes </title>
<script type="text/javascript">
function showConfirmBox(){
var c = confirm("Would you like to continue");
	if (confirm == true)
	{
	alert ("You clicked Ok");
	}
	else
	{
	alert("Ahhh, you clicked Cancel");
	}
};
</script>
</head>
<body>
<input type="button" onclick="showConfirmBox()"  value="Show Confirm box" />
</body>
</html>
As you can see, this is very similar to the alert() function, except, once again, it gives the user an option to select either OK or Cancel.

The Prompt Box

The prompt box creates a popup box that a user may enter text into. If we set the value of the prompt box to a variable, we can take the text that the user provides and use that to manipulate our program. In this example, we’ll prompt the user to enter their name. Once that’s done, we’ll take the name and write it back out to the screen with a warm and fuzzy greeting using document.write(). Let’s take a look at the code to see how it works:
Code Block
Ask a Question
Download Source
JavaScript
<html>
<head>
<title>Prompt Boxes </title>
<script type="text/javascript">
function getName(){
 
var name = prompt("What is your name");
 
var theDiv = document.getElementById('greeting');
 
theDiv.innerHTML = "Hello, " + name + " How are you today?";
};
</script>
</head>
<body>
<div id="greeting"> </div>
<input type="button" onclick="getName()"  value="Enter your name" />
</body>
</html>
Running this script and pressing the “enter your name” button will result in an oh-so-awesome prompt box being presented to you, and if you enter your name, you’ll be cordially greeted by the browser. Two quick things to point out. One is that I’ve used the getElementById() method on the document. This tells JavaScript to scan the entire current document and find any element with the ID that I’ve specified. Get used to this one, you’ll use it a lot. In our case, the method returns the div element with the ID of greeting. Once JavaScript finds the right div, it takes the name from our prompt box and injects it, along with some other friendly text, into the div via the innerHTML attribute.

Final thoughts

We’ve now seen how we can alert a visitor to something important in our program, how to confirm that they’d like to perform an action, and how to accept a text input from them. These tools will come in plenty handy in the future, and are just plain fun to mess around with anyway. Now, I think it’s a good time to learn about unobtrusive javascript. This notion basically states to you should never use JavaScript to be a jerk. Repeated pop ups and alerts will only shy your users away, so be sure to implement these techniques only when needed. Join me in my next tutorial for a more thorough look at JavaScript functions, what they accomplish, and how to write your own. See you then!

download