JavaScript Alert - What is it? (JavaScript Tutorial part 17)

If you do not have JavaScript enabled on your web browser, then you may have been able to avoid "alerts" in your internet adventures. The JavaScript alert is a dialogue box that pops up and takes the focus away from the current window and forces the web browser to read the message. View an alert message.

You may have noticed that you didn't get a JavaScript alert popup when you came to this page. That is because doing so would be in bad taste for a web designer. You see, alerts should be very, very rarely used and even then these following guidelines should be considered when using them.

When to Use Popups / Alerts

JavaScript alerts are ideal for the following situations:

• If you want to be absolutely sure they see a message before doing anything on the website.
• You would like to warn the user about something. For example "the following page contains humor not suitable for those under the age of 14."
• An error has occurred and you want to inform the user of the problem.
• When asking users for confirmation of some action. For example, if they have just agreed to sign over the deed to their house and you want to ask them again if they are absolutely positive they want to go through with this decision!

Even though the above situations would all be valid times to use the alert function, you could also skip the alert popup and just have the error message, confirmation, etc displayed in plain HTML. More and more bigger sites are opting to lose JavaScript alerts and instead keep everything in HTML.

Coding a Simple JavaScript Alert

Just for fun, let's suppose that we are making an alert for some website that asks people to hand over the deed to their house. We need to add an alert to be sure these people are in agreement. The following code will add an alert by using an HTML button and the onClick event.

HTML & JavaScript Code:

<form>
<input type="button" onclick=
"alert('Are you sure you want to give us the deed to your house?')" 
value="Confirmation Alert">
</form>

Display:

The string that appears between the single quotes is what will be printed inside the alert box when the user clicks on the button. If the HTML Forms are confusing to you, be sure to brush up on our HTML Forms Lesson. Continue the tutorial to learn more about the different kinds of JavaScript pop ups that are at your disposal.