UNIT 5 > MODULE 3

Lesson 2: A Simple Javascript Program

Overview

In this assignment, you will add some simple Javascript to one of your existing web pages.

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

  1. Open the file unit5.htm. Create a new section, with a subheading "Javascript Enhancement". Add an anchor tag named "javascript" inside the subheading. Then link to this new section from the relevant item on your home page.
  2. Add the following code to the HEAD section of unit5.htm, replacing the text "Your message here" with any message you like.

    <script type="text/javascript">
    function showAlert() {
    var msg = 'Your message here';
    alert (msg);
    }
    </script>

  3. The above script contains just one function, called "showAlert". The script does nothing until it is called. The script is called in response to some event. In this case, you need to add code to your HTML that calls the showAlert script if a user hovers over a particular link with their mouse. So, create a new paragragh in the new Javascript Enhancement section of your web page. Include a link in this paragraph that includes the following attribute:

    onmouseover="showAlert()"

  4. Since some users navigate through the links on a page using their keyboard, not a mouse, any mouse-based event should be replicated with a keyboard equivalent event. The keyboard equivalent of the onmouseover event is onfocus. So, add the following attribute to the same link you added the onmouseover attribute to:

    onfocus="showAlert()"

  5. Save your work, and load the page in your browser. Try hovering over the link with your mouse. What happens? Try navigating to the same link using the keyboard (for most browsers, use the Tab key). What happens when you get to the link?

All done?

Share your web page, complete with Javascript enhancement, with your instructor.