CS-90.3 Assignment 5

For this assignment, you are to implement a web page that uses JavaScript event handlers to modify the appearance of XHTML elements in response to user-generated events. Specifically, the assignment is to change the color of the text of some paragraphs as the user moves the mouse over them.

Set up your index page so that it contains at least 5 paragraphs of Latin text generated by the lipsum.com web site. That web site explains the rationale for placing “placeholder” text on a web page. After you read about that, use the form in the lower right corner to pick the number of paragraphs you want, and then click the “Generate Lorem Ipsum” button. Select the Latin paragraphs from the generated web page, and paste them into your site’s index.xhtml file, between the h1 element and the footer div at the bottom of the page.

Note that the paragraphs you paste into your document will not be actual XHTML paragraph elements; you will need to wrap each one in p and /p tags. In Dreamweaver, the keyboard shortcut to do this is to select the text in a paragraph and to type Ctrl-Shift-P.

Wrap one word in the h1 element and one word in the first paragraph in span and /spantags.

Create a stylesheet named assignment_05.css in your site’s css directory. Add a rule to this style sheet so that all span elements will use white text when the user moves the mouse over them. (The selector is span:hover.)

Check your web page:

• The paragraphs should be separated from each other rather than all run together, which would happen without the p and /p tags.
• Click the two validation links: there must be no XHTML and no CSS warnings or errors.
• When you hover over the two words in spans, they should disappear.

I am providing you with an outline for the JavaScript code for the assignment. Once you understand the outline, you are to extend it to implement the features listed in the Assignment Steps.

Replace all links to scripts in your index.xhtml page with a new link to a single script file named scripts/assignment_05.js. Create that file, and copy the following code into it:

Code Notes

• Lines 1 and 15 mark the beginning and end of the assignment statement that creates an event handler for the load event that occurs when the DOM has been built, just as you did in Assignment 3.
• Lines 3-6 define a named function inside the event handler. As its name suggests, this function will be the event handler for mouseover events. Because it uses the form that starts with the function keyword instead of the assignment statement form, this function could appear any place within the outer function definition. But it is common to put all function definitions at the beginning of the function that holds them.
• The event handler function will not be executed until the window.onload event occurs. At that point, line 8 calls a JavaScript built-in function that finds all the objects in the DOM tree for the paragraph elements of the web page; it returns these objects as the elements of an array, which is assigned to the variable paragraphs. Note the use of the keyword, var: the variable paragraphs will be accessible only within the anonymous window.load event handler. If the var keyword had been omitted, paragraphs would have been created inside the global (window) object.
• The console.log() call on line 9 is just to let you know the code is working. Be sure to remove from the final version of the program: its presence will cause the page to stop working in Internet Explorer.
• You should recognize lines 10-14 as a loop that iterates over all the elements of the paragraphs array. Line 12 adds a property to each paragraph object to record which paragraph is which. This particular property is simply to demonstrate how to add your own properties to objects in the DOM tree; to help show you the sorts of things you can do.
• Line 13 is a key one: it assigns the function mouseoverHandler as the onmouseover event handler for each paragraph. We could have written the actual code for the event handler here, but it would have made the code harder to read. The function only needs to be defined once (lines 3-6), so it would look odd to put the definition code inside a loop.
• Finally, note that the body of the mouseover event listener (line 5) demonstrates how an event handler can access the DOM object that provides the context for calling the function by using the special variable named this. Every time you move the mouse over a paragraph, the browser calls the mouseoverHandler function and automatically makes this refer to the corresponding paragraph object in the DOM tree. So this on line 5 will always refer to one of the elements of the paragraphs array that was assigned values on lines 12 and 13.

Assignment Steps

1. Be sure the code provided to you works, and that you understand it.

   Run the code with the JavaScript console open, and see that a “mouseover: n” message is displayed each time you move your mouse over a paragraph, and that the n in the message is a number that corresponds to which paragraph you moved the mouse over. Be sure the code displays another message every time you move your mouse over each paragraph.

2. Add a mouseout handler to each paragraph.

   Use the code given to you as a model, and add another function, named mouseoutHandler, to the project. Have it display a message that says “mouseout: n” like the one the mouseover listener displays. Add the line of code to the loop that set up this function as the onmouseout event handler for each paragraph.

   Test the code, and make sure moving the mouse over a paragraph causes one message to be displayed and that moving the mouse away from the paragraph causes the complementary message to be displayed. Be sure you get the proper sequence of messages no matter which paragraph you move the mouse over and no matter how many times you move over different paragraphs.

3. Change the text color to red when the mouse moves over a paragraph, and back to black when the mouse moves away from the paragraph.

   Here is the line of code you need to add to the mouseover event handler to make the text turn red:

   this.style.color = 'rgb(255, 0, 0)';

   You could use any CSS representation of the color for the string ('red', #F00, etc); the representation given here is what browsers use internally.

   Use similar code in the mouseout handler to make the text color turn back to black (rgb(0, 0, 0)) when the mouse moves away from it.

   Check your code to make sure the text color changes to red whenever you move the mouse over it, and back to black when you move the mouse away from it.

   Note that all this JavaScript code does exactly the same thing you could have accomplished with a single CSS rule: p:hover { color: red; }. If this was all you wanted to accomplish, there would be no reason to use JavaScript!

4. Modfy the page so each paragraph cycles through three colors.

   The first time the user moves the mouse over a paragraph, it turns red. The next time, it turns green; the next time, it turns blue; the next time, it turns red again; etc.

   If you were to remove the code that turns each paragraph black when the mouse leaves it, you could see what the current color is when the mouse enters the paragraph, and change the color to the next one. But having the the paragraphs turn black when the mouse leaves them means the current color will always be black when the mouse enters them again. The solution is to add your own property to each paragraph, where you would keep track of the last non-black color applied to it.

   First look at the logic your mouseover handler could use. In computer science, the logical steps a program follows are called, its algorithm. Here is the algorithm using English phrases in place of some of the actual JavaScript code, a form called “pseudocode:”

   if (the last color was red) { set the color to green } else if (the last color was green) { set the color to blue } else { set the color to red }

   You are to turn this pseudocode into valid JavaScript. Since you are to restore each paragraph to black when the mouse exits, you will have to use your own property to record what the last color was (instead of using this.style.color to find out what the current color is). The sample code is an example of adding your own property (which_one) to paragraphs. In this case, you can use simple strings, like 'red', 'green', and 'blue' for your property values. You could even use simple letters ('r', 'g', 'b') or even arbitrary numbers (1, 2, 3) to represent the previous color. Every time you set the color of a paragraph, record which color it is in your personal property for the paragraph.

   In class, I showed how to use a JavaScript switch statement intead of a lot of if and else if keywords to keep track of the last color a paragraph was. You may use that code for this assignment, or you can use a more complicated (but easier to understand) if else structure if you prefer.

   Note that the which_one property name is not appropriate for the actual code in this assignment. It was used above only to demonstrate how you can add your own property to a DOM object. For the assignment, you should use a more meaningful property name, like last_color that I used in my code in class.

There are no questions to answer for this assignment. When you are sure your program does everything correctly, 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 5.”

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