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. Select any web page that you have already created in a previous lesson. Add the following code to the HEAD section of the web page's HTML:

    <script type="text/javascript">
    function show_alert() {
    alert("Congratulations!\nYou have found the secret link!!")
    }
    </script>

  2. The above script contains just one function, called "show_alert". 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 show_alert script if a user hovers over a particular link with their mouse. So, find any link in your document, and add the following attribute to it:

    onmouseover="show_alert()"

  3. 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="show_alert()"

  4. 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.