Jump to navigation

Assignment #4

Due Tuesday, April 8

50 Points

This assignment gives you a chance to employ the JavaScript core language along with your knowledge of the DOM to begin manipulating your Web pages.

Since you will be writing separate programs, each requiring its own XHTML page and CSS, start by writing a simple XHTML page which will eventually provide links to each program’s XHTML page. Make it clear from each link’s label and/or context to which program it leads. Eventually, when the assignment is complete, publish this page (along with all the files comprising your solutions) to the wcit server and add a link to it to your home page.

Using available code

Generally, students in programming courses are expected to write their own code. However, in the “real” world it is fairly common for programmers to make use of code written by others. In fact, this is the very essence of “reusable code.” Your first task for this assignment is therefore to put the book’s stripy tables code to use within your own XHTML document.

Create an original XHTML document (not the book’s example) that contains at least two separate tables with at least six columns and eight rows each. The data these tables contain is up to you, but it should be fairly realistic. Be sure to review (or expand) your understanding of XHTML tables so that each of your tables is semantically structured with at least a head and a body. You may optionally add a foot, if appropriate.

Write an original CSS document (not the book’s example) that will present your tables clearly and effectively. Make sure your CSS provides the rule(s) necessary to support the striping of the tables.

Without modifying the JavaScript, add the necessary scripts to your XHTML page so that the tables it contains are striped as soon as the page loads.

Adapting available code

While it’s nice when you can find existing code that does exactly what you want, it’s far more common to find existing code that does something close to what you want. In such cases, experienced programmers recognize that it’s often more time-efficient to adapt the existing code to their specific needs than it would be to develop their own code from scratch. That’s what you’re going to do in this part of the assignment.

Make a separate copy of your code from the previous part of this assignment (including the book’s stripy_tables.js file) and give every file a unique name so you can tell them apart from the originals. This will allow you to modify the copies as necessary to complete this part without disrupting your solution for the first part.

The objective in this part is to stripe the columns of the tables rather than the rows. You are allowed to make minor adjustments to the XHTML and/or CSS, but you shouldn’t really need to change much more than the src attribute of one of your <script> elements. You should be able to effect your changes exclusively by modifying the book’s JavaScript code.

Of course, to do so you’ll first need a firm handle on how the book’s code works. You’ll also need a solid understanding of how the DOM is structured and the tools that JavaScript provides for accessing it. The necessary code changes are not likely to be extensive, but they will require some thought (and probably some experimentation).

Using the DOM constructively

For the last part of this assignment, you are going to put the DOM to use to provide a simple enhancement to a Web page.

XHTML provides two elements for marking up quotations. The <q> element is used to mark up short, inline quotations, and the <blockquote> element is used to mark up long quotations so that they are set off from the surrounding text. Both of these elements accept a cite attribute to indicate the source of the quotation. The value of this cite attribute is syntactically required to be a URL, since apparently its creators assumed the day would soon arrive when the only thing worth quoting would be the Web! Unfortunately, browsers generally make no use of this helpful information, so Web users need to examine the page source to find the citation for a quote. You’re going to address that problem.

For this part of the assignment, write a JavaScript file that implements an object (and initializes it as soon as the page loads) that can be added (along with core.js) to any XHTML page. When initialized, your object should look through the page for all the <q> and <blockquote> elements. For any <q> or <blockquote> element that has a cite attribute, your code should add a link at the end of the element. The link should be a member of the citation class, it should have a label of (cite) and it should have a destination equivalent to the value of the quotation’s cite attribute. After the citation link is added, you should eliminate the quotation element’s cite attribute, since it is now redundant. If a <q> or <blockquote> element does not have a cite attribute, leave it unmodified. Your submission should consist of an XHTML page that thoroughly tests your object.