CS-090.3 Assignment 2

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

This assignment gives you some practice with JavaScript statements and functions. The project does not do anything useful (in fact, the result is a bit annoying to look at), but it gives you a chance to practice several fundamental JavaScript coding techniques.

The end result of the project will be a web page that displays several paragraphs of text. The appearances of these paragraphs will be controlled by two (or three) style sheets, and your JavaScript code will dynamically change the style of the paragraphs, one at a time in a repeating cycle. The effect was demonstrated in class on February 21. You can try my version on babbage. (Note: this is a temporary link.)

Set Up The Static Page

Change the title of your index page to something meaningful, like “Revolving Paragraphs” or “Assignment 2”. Change the h1 tag’s content to match the page’s title.

Add five paragraphs of dummy text to your index.xhtml file, inside the content div. Get the dummy text from the Lorem Ipsum Generator at lipsum.com. Go to the form in the lower right corner of the page, click on the “Generate Lorem Ipsum” button, and copy the text of the five paragraphs into your web page. You will have to put p tags around each paragraph to make them into real HTML paragraphs.

The page is pretty ugly as it is, with the paragraphs filling the entire width of the browser window. Create a stylesheet named layout.css in your site’s css directory, and put a link to it in the head of your index page, after the title element:

<link rel="stylesheet" type="text/css" href="css/layout.css" />

If you right-click on your css folder in Dreamweaver, you can select New File from the dropdown menu; when you give it a name ending in .css, Dreamweaver will automatically know it is a stylesheet. You can take out the two lines it inserts at the beginning of the file if you want to; they are not needed. (I like to put the name of the file in a comment on the first line of all stylesheet and script files, but that is a personal preference.)

You can use the following CSS rule to center the paragraphs in the content div with 10% of the window width on each side and a one character high margin above each one. Feel free to use a different rule, if you like. But you must do something to make the layout of the paragraphs better than the default.

#content p { width: 80%; margin: 1em auto; }

Give the first two paragraphs the class name, important, and create a second stylesheet named colors.css with a rule that makes the text color of elements with the important class red:

.important { color: red; }

This code is not proper CSS because it does not specify the background color. That has nothing to do with scripting, so it is acceptable for this assignment. However, I encourage you to figure out how to do it “right” for the entire project.

Add another CSS rule to colors.css so elements with class highlight have a background-color of gray and a color of white.

At this point the first two paragraphs should have red text on a white background, and the other three should have black text on a white background. And the “Need JavaScript” heading from Assignment 1 should not be displayed if JavaScript is enabled.

Set Up JavaScript

First a bit of housekeeping: use Dreamweaver to change the name of your script file from assignment_01.js to assignment_02.js. If you do this from within Dreamweaver, it will automatically update the link to it in index.xhtml for you.

You need a function that cycles through the paragraphs. Add code to your window.onload handler that captures a Node List (array) referencing all the paragraphs in the web page by calling document.getElementsByTagName('p') and saving the result in a global variable.

Optional: Try to figure out how to include just the paragraphs inside the content div in your node list.

Create a function with a name of your choice (doNext, cycleIt, etc.) that increments two global variables, thisParagraph and lastParagraph, modulo the length of the paragraph array, each time it is called. For now, have the function write the values of these two variables using the Firebug console.log() function. In the window.onload handler, check if there is more than one paragraph in the document, and set up for your function to be called periodically. Since there are no parameters being passed to the function, you can set this up either of two ways:

1. setInterval(doNext, 2500);
2. setInterval('doNext()', 2500);

Open the Firebug extension in Firefox, select the Console tab, and verify that your script runs and displays the correct values.

Implement The Animation

Now copy the hasClass(), addClass(), and removeClass() functions that are defined in the textbook starting on page 87. The code in the book has to be altered slightly: leave “Core.” off the function names, and omit the semicolon at the end of each function definition.

Add code to your interval function to add and remove the class name, highlight, to the appropriate paragraphs each time it is called:

removeClass(paragraphs[lastParagraph], 'highlight'); addClass(paragraphs[thisParagraph], 'highlight');

When you have your page working properly using Firefox, either remove or comment out the calls to console.log() and test your site using Internet Explorer, Opera, and Safari.

Click the XHTML and CSS links at the bottom of the page, which will submit it to the W3C Validators to be sure both your XHTML and CSS are perfectly valid. Make any fixes needed to get perfect ratings from both validators.

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!