Alert boxes can be used to warn a user or to tell them a message. Basically to create an alert box you write alert('message here'). Where we write this depends on how we want to use the box.

One method we can use is to have the box pop up as a page is loaded, just as it did with this page. To do this we write onLoad="alert('message')" inside of the BODY tag. Here is what it will look like:

<BODY onLoad="alert('Message')">

We can also have the alert box come up when the user exits the page (when you exit this page you will see how this works! Try it!). To do this we use onUnLoad instead of onLoad. Here is what it will look like:

<BODY onUnLoad="alert('Message')">

Alert boxes can also pop up when the user passes the mouse over a link. To do this we use the onMouseOver command. This can also be used with onMouseOut. Here is an example of this:

<A HREF="mouse.html" onMouseOver="alert('Mouse Over')">

Here is how it works:

Mouse Commands

Using onMouseOut uses the same idea except instead of writing onMouseOver, onMouseOut is written. Whenever the mouse leaves the link, the box will pop up. (*Note that onMouseOut doesn't work with some versions of Internet Explorer*). Here is how it works:

Mouse Commands

Alert boxes can also be used when clicking on a button in an HTML form. Here is how we would set up the button:

<FORM>
<INPUT TYPE="button" value="Go!">
</FORM>

In order for the box to pop up when the button is clicked, we need to add the onClick method to the INPUT tag. Here is how we do it:

<INPUT TYPE="button" value="Go!" onClick="alert('Put Message Here')">

Here is how it works:

Confirmation Boxes

Confirmation boxes are a little more involved than alert boxes. Confirmation boxes ask the visitor a question, and has two buttons (Yes and No). Depending on the visitor's action, two different things will happen.

In order to create a basic box we use confirm('Your question here'). Here is what a confirmation box looks like:

Confirmation Box Example

Did you notice that no matter which button you clicked nothing happened?? That is because we need to tell it what to do! We do this by writing a script.

First thing to note is that this script needs to go in the HEAD part of your page. This way you can use it as many times as you want throughout your page! Secondly, we need to save the user's input in order to do one thing if the user clicked yes, and to do another thing if the user clicked no. This is what we have so far:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

Now we need to decide what we want to do when the user selects a button. For example, we can write one message to the screen if the user selects "yes", then write a different message if the user selects "no". To do this we use "document.write('Message')". Here is how it will look:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

Or if the user selects "yes" we can direct them to one page; if they select "no" we can send them to a different page. Here is how we would do that:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

Next step is deciding where we want the confirmation box to pop up. We can use the same methods that we used for the alert boxes: onLoad, onUnLoad, onMouseOver, onMouseOut, buttons, etc. In order to do this we need to call the script we just created "confirm_box". Suppose we want the box to pop up when the page is loaded. Here is what it will look like:

<BODY onLoad="confirm_box()">

Anywhere you want to use a confirmation box, just add the name of the script!

Prompt Boxes

Prompt boxes ask the visitor to input some sort of answer to a question. Here is what one looks like:

To create a prompt box we use prompt('Question','Default Value'). The question is what you want to ask the visitor, and default value is the default you want shown in the text box. In my example my question was "What is your name" and the default response was "My Name".

Prompt boxes are similar to the confirmation boxes in that we need to create a script in the HEAD part of the page to say what to do with the response, plus we need to create a variable to store the user's answer. Here is how we set it up:

<SCRIPT>
 </SCRIPT>

Next we need to decide what to do with the user response. We can write the user's name on the screen with a welcome message. Here is how we would do that:

<SCRIPT>
 </SCRIPT>

Next we need to call this script, prompt_box, in the BODY tag using onLoad

<BODY onLoad="prompt_box()">

Or if you want the user input to be displayed somewhere farther down the page, just place the entire script wherever on the page you want it displayed instead of placing it in the HEAD section.

There are many different ways to use these boxes and this tutorial only showed several. Experiment with the boxes and you will find the possiblities are endless!

This page has been accessed

times since June 24, 2001

Last Updated March 30, 2001