Lesson 1: Using JavaScript to Show an Alert

Overview

In this lesson, you will use JavaScript to display an alert after the web page has loaded.

Learner Outcomes

At the completion of this exercise, you will have learned:

  1. how a client-side script fits within the context of an HTML page.
  2. some basic Javascript syntax.

Activities

Each of the activities in this module will involve writing JavaScript code. You will start by writing a simple script, then gradually build upon that script, adding more functionality to it in subsequent lessons.

Start by opening your portfolio file javascript.html using your preferred text editor.

Add the following JavaScript code to the <head> section of your web page:

  <script>
  function showAlert() {
    alert ("Hello world!");
  }
  </script>

This is a very simple function. Notice that it looks a lot like the PHP showTop() and showBottom() functions that were explained in the Beyond HTML document that you studied in the previous lesson. Most programming or scripting languages are similar to one another, including PHP and JavaScript, but there are subtle differences in their syntax (the rules of how the code must be written). One useful function that's native to JavaScript is the alert() function. This function will display text in a dialog box that pops up on the screen.

Before this function can work, we must first call the showAlert() function. JavaScript functions are called in response to events. When the page loads, or when a user clicks on, hovers over, or tabs to a specific link, these are all events. We can instruct JavaScript to watch for these events, and if or when they occur, execute the specified function.

For example, let's say we want to execute the showAlert() function after the body of the web page is fully loaded. One way to do that is to add the onload attribute to the <body> element of our web page, like this:

<body onload="showAlert()">

Try adding the above to your web page, then load the page and see if it works. If it doesn't, you probably have a bug. Be sure you typed everything exactly as it appears, including capitalization and punctuation. Programming languages can be very picky about seemingly small mistakes. (The next lesson will talk more about debugging). Once you have it working, move on to the next section.

Variables

As mentioned in Beyond HTML, a variable in a programming or scripting language is a symbolic name that represents a value. In our earlier PHP example, we used the variable $thisPage to control certain features in the showTop() function. In PHP, variable names must start with a $, but that isn't the case in JavaScript. Take a look at the following example, which uses a variable named myText to customize the text that's displayed in the alert box.

  <script>
  function showAlert() {
    var myText = "This can be whatever text you like!";
    alert (myText);
  }
  </script>

Try modifying your showAlert() script with your own custom alert message. Then test it to be sure it works.

Using the onclick event

So far in this lesson, we have called the showAlert() function when the body of the web page is loaded. However, we could trigger it using other events instead. For example, we might to display the alert only if a user clicks on a button. Try this:

  1. Remove the onload="showAlert()" attribute from the <body> element.
  2. Add the following HTML <button> element anywhere within the body of your web page:
    <button onclick="showAlert()">Show alert</button>

This new code adds a button to your web page. The button includes the onclick attribute, which causes the showAlert() to be called when a user clicks the button. The onclick event also works for keyboard users. If a user navigates to the button using the tab key, then presses enter, that too will trigger the alert.

After you have added the button, add a new <style> element to the head section of your page, and add a new style for the button element. Use CSS pseudo-classes (:hover, :focus, and :active) to make the button change its appearance when users hover over it with a mouse or tab to it with keyboard. Here's an example style sheet:

  button {
    font-size: 1.1em;
    background-color: #EBF5FF;
    color: #4312AE;
    border: 2px solid black;
    box-shadow: 4px 4px 4px #999999;
  }
  button:hover, button:focus, button:active {
    /* swap colors */
    color: #EBF5FF;
    background-color: #4312AE;
    cursor: pointer; /* displays a hand */
  }

Note that the above example includes the box-shadow property, which is CSS3 and isn't supported by all browsers, particularly older versions of browsers. Also, in this lesson you're adding CSS directly to the javascript.html file, rather than to your external CSS file, since this is the only page within your site that will have an HTML button element. However, if there's a chance you might add buttons to other pages (even though they're not required in this curriculum), or if you prefer keeping all your CSS together in one place, you could add the button style to your external CSS file instead.

After adding the new button, try clicking on it. If all is well, hovering over the button should trigger a change in style, and clicking the button hould trigger the alert, which should display your custom text. Now try it without a mouse to be sure it's working for keyboard users too (use the tab key to navigate to the button, then press Enter).

All done?

Share your web page, complete with Javascript enhancement, with your instructor. If everything's working, proceed to Lesson 2.