CS-090.3 Assignment 3

If you haven’t done Assignment 2 yet, do so now. This assignment adds new features to that project.

This assignment starts developing the event-handling model for projects in this course, based on code from the Core library presented in the textbook.

The end result of the project will be the same page as the one you developed for Assignment 2, but modified so that paragraphs will be highlighed when the user clicks on (or hovers over) them.

Set Up The Assignment

Create a subdirectory named Assignment_03 under your My Website directory for this assignment. Copy your web page for Assignment 2 into this directory. If you do this using Dreamweaver, it will automatically update your links to the script and stylesheet you used for Assignment 2 in this new file. Change the name of this file to index.xhtml if that is not its name already. Make a copy of your script file for Assignment 2, and change its name to assignment_03.js; fix the link in your script tag in index.xhtml so it refers to this file.

Remove the call to setInterval() from your window.onload handler.

Set Up Click Listeners

In your window.onload handler, call a function named addEventListener() for each paragraph in the document that is inside the content div. Pass three arguments to the function: a reference to the paragraph, the string "click", and a reference to the function you used in Assignment 2 for highlighting successive paragraphs. Be sure to pass a reference to the function (no parentheses after the function name) rather than calling it here. Note that the function named addListener() is one that you are going to write, but doesn’t exist yet, so do not test your code yet.

Implement W3C-only Version of addListener()

Implement the function addListener() using the following code:

function addListener(target, eventType, listener) { target.addEventListener(eventType, listener, false); }

Now you can test your code. Every time you click on any paragraph inside the content div, the next paragraph in sequence should be highlighted. At his point, it doesn’t matter which paragraph you click on; they are all handled the same. The code should work in Firefox, Opera, and Safari, but not Internet Explorer. To accomplish that, you need to modify your addListener() function to test whether target.addEventListener is defined or not and, if it is not, call target.attachEvent() instead. Remember that the first parameter passed to attachEvent() has to have 'on' prepended to it, and there is no third parameter for that function.

Test your code in all browsers to see that you can highlight successive paragraphs by clicking in any paragraph(s).

Code The Actual Event Listener

There is no way for the code you are using as an event listener to tell which paragraph the user clicked on. You simply assigned one function to serve as the event listener for click events on each paragraph. Unfortunately, Internet Explorer (even IE8, it seems) solves this issue differently from W3C browsers. To learn how to deal with this situation, we are going to change the effect our web page creates. Instead of each click highlighting the “next” paragraph in sequence, the paragraph the user clicks on will be highlighted and any other paragraphs that happen to be highlighted will be un-highlighted. If the user clicks on a paragraph that is already highlighted, it will simply be un-highlighted.

Since this effect is fairly complicated, you will implement the effect for W3C browsers first. Then when that part is working, you will add the code to make it work for Internet Explorer.

Details on setting up the event listeners and the highlight manager were covered in class on March 11.

When you have built and tested your web page, send me an email message to me saying your assignment is ready; I will get a copy from your account on the server and check it out. Send your email to:

Christopher.VickeryATqc.cuny.edu

Be sure the Subject Line of your email says CS-90.3 Assignment 3, just like that, to be sure your message does not get trapped by my spam filters.

Be sure to sign your email so I can tell who sent it!