CS-90.3 Assignment 6

This is the same as Assignment 5, but implemented using CSS rules and class attributes rather than direct manipulation of the style properties of the paragraphs in the DOM tree.

Create a new script file, assignment_06.js, to replace the script file you used for Assignment 5.

You can use the same stylesheet as for Assignment 5, but add the following rules to it:

.happy { color:red; } .sad { color:blue; } .envious { color: green; } .excited { font-style:italic; }

The idea is for various sequences of mouseover and mouseout events to cause the paragraphs to change color and font-style by manipulating each paragraph's class attribute. Each time the user mouses over a paragraph, it’s class is to change to the next class in the sequence happy, envious, and sad. In addition, the paragraph’s class is to alternate between excited and not on alternate mouseover events.

Unlike Assignment 5, the state of each paragraph is not to change when there are mouseout events. That is, assignment_06.js will not have a mouseoutHandler() function.

1. Set up the mouseover event handler for this assignment.

   Create a window.onload event handler function the way you did for Assignment 5, and add a function named mouseoverHandler to it, again, the way you did for Assignment 5. Set this function up as the mouseover event handler for all the paragraphs in the document. Temporarily insert a console.log() function call that prints a simple message, such as “mouseover” and verify that the message is displayed each time you move your mouse over any paragraph in the web page.

2. Add the class management functions from the textbook.

   Add three more functions to the onload event handler function: hasClass(), addClass(), and removeClass(). The code for these three functions is given on pages 383—384. Note that you will need to change each function definition so the functions are defined in your onload function instead of the (nonexistent) Core object assumed to exist by the textbook. For example, the first line of hasClass() on page 384 is:

   Core.hasClass = function(target, theClass)

   But you need to change the above line to:

   function hasClass(target, theClass)

3. Implement the font-style changes.

   Remove the console.log() statement from the mouseover event handler.

   In the mouseover event handler, use the hasClass() function to see whether the paragraph the mouse moved over is excited or not. If it is not, add that class to it; if it is, remove that class from it.

   Test your web page, and verify that each paragraph changes to italic or back each time the mouse moves over it.

4. Implement the color changes.

   Add more code to the mouseover handler so that each paragraph changes its emotional state based on whether it is currently happy, envious, or sad.

   Test your web page carefully to make sure the emotional and excitedness of each paragraph has been fully controlled by your JavaScript program.

When you are sure your program does everything correctly, and that there are no errors are warnings from the XHTML and CSS validators, nor from Firebug, just send me an email message, and I’ll check it out in the usual way.

Send your email message to me at: vickeryatbabbage.cs.qc.cuny.edu by midnight of the due date.

The Subject line of your email message must be: “CS-90.3 Assignment 6.”

Don’t forget to put your name in your email message!