CS 350: Lab 07 "Introduction to Event Handling in JavaScript"

resources:

Firefox FireBug Extension Sample Code client-side JavaScript 1.3 moz illa reference 1.5 event handlers DOM overview DOM Events doc O'Reilly HTML Guide Hex color codes

Background.
JavaScript is a client-side scripting language for the web. That means that the code is executed by a JavaScript engine integrated into the client browser. All current browsers support JavaScript, although not all are compliant to the same standard. For this lab and for the exam, you need only test your code under Mozilla Firefox.

JavaScript is not "baby-Java." The only relationship between Java and JavaScript is that both are object-oriented languages and both share C-style control structures and operators. That is about where the similarity ends. The choice of name is unfortunate. JavaScript was created by Netscape and the name is a trademark of Sun.

Client-side scripts are generally triggered by events that occur when the user interacts with the client browser, often through FORM elements. Since JavaScript is client-side, there are far more ways to interact with the user in JavaScript than there are with PHP. You also have more control over writing to the current page in JavaScript. Click these buttons for a demonstration:

The focus of this lab is the event-handling aspects of JavaScript, where user activity is tied to elements in the HTML document tree. Objects in the tree are linked to events and event handlers. Although a JavaScript can be in a standalone file, in this lab you will embed your scripts into an HTML file (lab07.html). Since JavaScript is client-side, you can write lab07.html on your local PC and load it onto a web server when you are finished (if you want). Otherwise, modify lab07.html directly from within /public_html in your account on sleipnir.

The debugging capabilities of the JavaScript interpreter are browser dependent. If you use Netscape, Mozilla or Firefox, you will either type 'javascript:' in the URL bar or open the Tools->Error Console from the menu (depending on the version). Any errors in your script will be displayed in the console window. All versions of Mozilla Firefox after 3 use the Tools->Error Console from the menu bar. You can also install a Firefox extension called firebug.

You will need to know a little HTML for this lab, as well as the basics of how embedding Javascript into HTML works. If you do not know any HTML, go to the CMPS 211 course page. Create a 'lab07' directory under your $HOME/public_html. (Keep the default permissions since all directories you want accessible on the Internet must have 755 permission and files must have 744.) Copy events.html into $HOME/public_html/lab07/:

    cp  /home/fac/melissa/public_html/cs350-f15/Code/JavaScript/events.html .

View the source of events.html while looking at the behavior in your browser: events.html. Everything you need to complete this lab is in the documentation in events.html.

WHAT TO DO FIRST

1. Make a backup of events.html for reference in case you need it. For the first few items, you will insert code into the opening script in events.html. The remaining items involve putting JavaScript into event handlers.

2. Download your own images for each of the image references in events.html. If you are in Rm 315, download the images onto the Desktop. To get the files onto sleipnir, open a terminal and do this:

    cd Desktop 
    ftp sleipnir // login as you
    ftp> mput *.jpg prompt  // will transfer all jpg images to your home directory
    ftp> quit
    
    Move the images from $HOME to your /public_html/Images subdirectory.
   

   Alternatively, grab an image directly from the command line on sleipnir:

      $ wget http://www.anywhere.com/some_image.jpg   // will grab some_image.jpg
   

3. Open events.html in vim.

PROBLEM #1

1. Following the syntax in the code below, create an array to hold four background images in the opening script:

   var myArray = [];  // this array will grow as needed
   myArray[0] = new Image();
   myArray[1] = new Image();
    and so on...
   

2. Assign the src attribute of each image object to one of your image filenames following this code:

      myArray[0].src = "some_image.jpg";
     and so on.... 
   

3. Modify the event handler that changes the background image of the body of the document to toggle through your array of background images.

PROBLEM #2

1. Create an array to hold 4 or five different hex color codes This code should also be in the opening script. Assign each element in the array a different hex color code; e.g.: "#AABBCC".

2. Modify the event handler that changes the background color of the upper DIV area, toggle through your array of hex color codes.

PROBLEM #3

1. In the lower DIV area, add an onClick event to one of the images to prompt the user for a hex color code:

    
        prompt('enter hex code: ','#FFFFFF');   // #FFFFFF is the default value
    

   Change the DIV area background to that color.

2. Modify the text on the page so I know which image to click.

PROBLEM #4

1. Create a display() function to write your name in the DIV area labeled myArea - an empty function named display() is already there.

2. In the lower DIV area, add an onClick event in one of the images that doesn't have one to call display().

What to submit for this lab

Email the URL of your completed file when you are ready for me to view it.