Using the alert() Method
alert() is the easiest of the three methods to use. You can use it to display textual information to the user in a simple, concise way. When the user is finished reading the message, she simply must click OK to get rid of it.
First, open your template HTML page in your favorite text editor and save it with a new name in a convenient location on your hard drive:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!-- Cloaking device on! // Cloaking device off --> </script> </head> <body> </body> </html>
Note - Remember to save it with the file extension HTM or HTML; otherwise, things won't work as planned.
Warning - At this stage, it is probably worth knowing that JavaScript is a case-sensitive language. You'll study this in much greater detail in future chapters, but for now, note that it is best to follow the choice for upper- and lowercase letters for all JavaScript, apart from text strings that you want to use.
To conjure the alert message box, type in the following:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> <!-- Cloaking device on! alert(); // Cloaking device off --> </script> </head> <body> </body> </html>
Note - The semicolon at the end of the alert() method is called a line terminator and is required to make your JavaScript ECMA compliant (although it will work properly without it). You will see this a lot over the next few chapters; in Chapter 4, "Handling Data with Variables," you find out exactly when and where it is used.
Now, for the message that you want displayed. This is placed inside quote marks inside the parentheses:
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!-- Cloaking device on!
alert("An alert triggered by JavaScript!");
// Cloaking device off -->
</script>
</head>
<body>
</body>
</html>
Save the page, load it into the browser, and watch the message appear (see Figure 3.7)!
){kind=link}
Figure 3.7
An alert box complete with a custom message displayed by Internet Explorer.
Making a second alert appear is just as simple as making the first one appear—just add alert() to the <script> block underneath the first and add your own message surrounded by quotes:
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!-- Cloaking device on!
alert("An alert triggered by JavaScript!");
alert("A second message appears!");
// Cloaking device off -->
</script>
</head>
<body>
</body>
</html>
Save the file in the text editor and refresh the browser. This time notice that two messages come up. But more importantly, notice how they are displayed separately, instead of one on top of the other. What this shows is that the JavaScript stopped between each and didn't just blindly run to the end of the script. It waited patiently until the user clicked OK on the first box before going on to display the second.
Tip - Remember to resave the file before viewing the changes you've made. You wouldn't believe the number of users who forget this step and think they have done something wrong!
Exercise - As an exercise, go back to the template and, from scratch, create a new JavaScript to trigger an alert box with a message of your choice.
After you have done that, add a second alert box, following the same format. Next, add the alert() method on a new line and then, inside the parentheses and in quotes, add the message you want displayed.