CS-081 Assignment 5

For this assignment you are to write a JavaScript event handler that changes the style of a table so that alternate rows have a different background color. I am providing a web page that creates tables with varying numbers of rows dynamically for your event handler to operate on.

1. Set up the Contours web page in your own web site and test it.

   I have a web page that calculates contour intervals at http://babbage.cs.qc.edu/Contours. Visit that page and make sure you understand what it does. I am providing you with a zip file that contains index.xhtml, css/style-screen.css and scripts/contours.js: Assignment_05.zip. Do not unzip this file directly into your web site, as it would overwrite your index page and stylesheet. Instead, unzip the contents to some other directory, such as your Desktop. Then rename index.xhtml to Assignment_05.xhtml and move it to your web site. Use Dreamweaver’s code editor to merge (copy and paste) the parts of my style-screen.css that you want to use into your own screen.css, and move contours.js into your scripts directory. Finally, create a link to Assignment_05.xhtml in the unordered list you added to your index page in Assignment 4, and verify that the page works from within your web site.

2. Add a second script file containing a JavaScript event handler.

   At this point, Assignment_05.xhtml should be in your web site’s document root, and contours.js should be in your scripts directory. Add another script file, named assignment_05.js, to the script directory, and use a second script tag in the head of Assignment_05.xhtml to link to it. This second script tag must come after the tag for contours.js because it creates a variable in an object (ContourTable ) that doesn’t exist until the browser has processed contours.js. Put the following code in the new script file, and verify that it is executed whenever a new table is displayed:

   ContourTable.notifyOnChange = function(theTable) { alert(theTable); }

   Make the following changes so that this code is your “own” before proceding. Note that these changes will require you to edit parts of both contours.js and assignment_05.js.

   • Change the name of the event to DynamicTable.changeStyle
   • Change the name of the formal parameter in the event handler to aTable.

   Be sure the page still works correctly before proceeding.

3. Code the event handler so that alternate rows of the table have different backgrounds.

   There are three ground rules for doing this step. The first is that you are not allowed to change the XHTML file that I provided, nor are you to change the style sheet to add this effect. Second, except for the changes you had to make to contours.js in the previous step, you are to make no further changes to that file either. Finally, make sure your event handler changes only the data table; there is another table in the page that must not be changed.

   If you want to make your code easier, you may assume that all rows are created with a white background, so you don’t have to change the ones that are already white.