CS-090.3 Assignment 2

This exercise uses CSS to set up styles, and a JavaScript event listener to change the class attribute of paragraphs when the user hovers over them, thereby triggering dynamic style changes.

Edit your web site’s index page so it has five paragraphs of Lorem Ipsum text. Give the first two paragraphs a class attribute with the value "important". Add script tags to the head of the document to core.js and to a new script file named assignment_02.js. Download core.js into your scripts directory and create a new file named assignment_02.js there. Note that the tag for core.js must be before the tag for assignment_02.js because the latter uses program elements that are defined in the former.

Create a stylesheet named assignment_02.css and add a link to it in the head of your index page. If you prefer, you can change the name of assignment_01.css to assignments.css and just adjust the link you already have.

Edit your style sheet so paragraphs have different appearances depending on the combination of class values: important, selected, or both:

.important { … } .selected { … } [code~="important"][code~="selected"] { … }

In your JavaScript code, create a global variable that references an object that contains a function named init(), and pass a reference to this object to Core.start():

var CS903 = { init: function() { … } }; Core.start(CS903);

Test your code by putting an alert() or console.log() call inside your init() function and viewing your web page.

Remove the alert() or console.log() call from the code, and add two functions to your global object, one of which uses Core.addClass() to add selected to the class attribute of an element, and another that uses Core.removeClass() to remove it. Set these two functions up as event listeners for the mouseover and mouseout events for every paragraph in the content div of your document.

Test your code to be sure that each paragraph changes its appearance when the mouse hovers over it and that important paragraphs look different from regular paragraphs when the mouse hovers over them.

Test your code using Internet Explorer, Firefox, Safari, Opera, and (optionally) Chrome.

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 2, 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!