<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> Homework



Extra Credit: DOM Play, Act II - Enter jQuery (Due Tuesday, June 14th)

Now that we are learning jQuery, we can revisit a previous assignment (DOM Play) with a new twist!

View a different Shakespeare play snippet, a part of Act II of "A Midsummer Night's Dream"

The HTML from the play above has more built in "hooks" (classes,ids), placed to make your job of wiring via jQuery easier.

However, there are some different requirements from the aforementioned assignment. Not only must you highlight the text of each actor upon click (of a button this time) but you must use the jQuery animate() method to make the highlighted actor's text move, etc.

As a model, please view the following: animate demo

Don't forget to examine all of the other demos in the two jQuery lessons! There is also the 4th version of the JS Template, which has three jQuery examples! Find the zip file and demo for this in the examples.

This extra credit project is worth 50 points!

Assignment 6 DHTML Menu (Due Tuesday, June 7th)

When we build applications for clients we should consider leaving them with JS code that is future proofed. One way to do this is to implement a third party piece for complicated tasks like DHMTL menu systems.

We'll be working with one such system for this assignment the Milonic DHTML Menu

You may work with a different menu (other than Milonic) but you must get prior approval!

You will be required to build 8 pages, which must be fully linked via DHTML navigation. Each page must use BreadCrumbs to indicate it's position within the site navigation. Breadcrumb Example

Your menu must include 3 top level items (links or sub-menus) and at least one 3rd level item. One of your pages will be the "main" page (index?) and the other 7 pages can be sprinkled as you see fit in your navigation, as long as at least one item is a third level item.

Please select a "topic" of interest to you, for your pages, and build your pages in a professional and consistent manner. For my example, I chose "hedgehogs". Here is an example hedgehog page

Help With Milonic: We will need to download and work with the Milonic Menu. Here is a handout that helps to install and work with the menu: Milonic Handout

Please refer to the Milonic website for more info on how to work with the Milonic Menu.

To position the Menu relatively (in the normal flow of the page) view this example: insideDiv

Here is a zip file of the above example: insideDiv Zip File

This assignment is worth 100 points!

Assignment 5 Form Validation (Due Tuesday, May 24th)

For this assignment you will create JavaScript that will validate a form to certain requirements before it is submitted.

If the "required" elements are not properly inserted by the user, the page must not submit.

This form will be a "user profile" form. The following elements must be on the form. Following the element is the TYPE of element required, any VALIDATION rules that must apply for that element:

Element Info Element/Type Validation Rules
First Name text optional
Last Name text required*
Address text required*
City text optional
State select required*
Zip Code text required* (must match US zip code pattern)
Email text optional, check for valid email*
Password password required* (alphanumeric only, minimum 8 chars, maximum 16. Must include at least one letter and at least one number.)
Confirm Password password required* (must match Password field)
Can we spam you? radio required*
(Your choice) checkbox required*

* Required elements must be clearly noted as such by the design on the form. I will take at least 10 POINTS OFF for each error, even in mandatory design elements, such as this! (no regrade on this item!)

Once your form is working, link it to your assignment page, as target="_blank". The form must perform as described above and when the form has been properly validated, the form must submit data properly to:


Help? View the examples page for sample code that will help you. Start with the JS Template, version 3, which details a validation strategy: JS Template Version 3 Zip File

Then view examples on the Forms and Advanced Forms pages to meet the additional requirements.

This assignment is worth 100 points!

EXTRA CREDIT: Add a "required" checkbox (subject of your choice) that requires, (for example) 2 choices, minimum, of 3 possible selections for an additional 20 points!

Assignment 4 DOM Play (Due Thursday May 12th)

For this assignment you will be creating a small, single page application using the DOM. This time you will not be given specific code samples.

The idea is that you are given a task as a developer to build a single page DOM application that will help members of an acting troop memorize their lines in a play. The page must:

  1. With a single click, highlight (bold or otherwise) all lines for a specific actor in a play
  2. Un-highlight (normal or otherwise) all lines from all other actors in the play
  3. The function created to do the work must accomodate any number of actors, and any number of additional lines added to the page
  4. The page must do the work without page re-loads (i.e. it must be done via JavaScript and the DOM)

Your resources for this project are the DOM Intro and Advanced Dom pages on the class website, the brainjar DOM tutorial, and other resource material you can find on the web.

If you would like an example htm file with a snippet from a play, use this: Hamlet Act III Snippet

Group Project Demonstration: Since this assignment is more involved, I'll give the option to work together in groups for the initial design phase. Each of you will be responsible to produce the assignment individually as well.

If you agree to work in a group, I will assign groups tonight in class. Your group will need to exchange email, etc. We'll have class Thursday the 5th, in which time will be provided for your group to meet. You may need to work outside of the class, however.

Every member of your group who decides to help do a quick 5 minute presentation to the class on your group's strategies to do this job can gain up to 30 extra credit points. Students must be (physically) in class to be part of the presentation, on Tuesday, May 10th.

Each student who participates must also link a word document (or other resource) on their homework page by Tuesday May 10th (before class) detailing their part in their group work to gain consideration for the 30 extra points.

This assignment is worth 100 points!

Assignment 3 Image Funhouse (Due Tuesday, May 3rd)

For this assignment, you will implement several image rollover 'tricks', all on a single HTML page. There are three main image features your page must have. All are detailed below:

1) rollovers: implement at least 4 image rollovers on the HTML page, using one of the image rollover examples as a model. Whether they are navigational buttons, or display an image when rolled over for another purpose, will be your choice.

EXTRA CREDIT: For 20 extra points, you may implement a multi-roll, where rolling over one image simultaneously rolls more than one other image. Check out this example: Leonard's Machines *

2) wraparound slideshow: implement a one page 'slide show' of other images, similar to this example: Welcome Robot Overlords! *

3) random image: implement a 'random image' that generates a different (randomized) picture on the HTML page upon reload, similar to this example: Lions, Tigers & Bears, Oh My! *

EXTRA CREDIT: For 20 extra points, you may implement an image that rotates through a sequence of pictures without reloading the page. Example: Reading Ads *

All of this must happen on a single HTML page (no other pages, no AJAX) That means you'll likely be using the DOM to perform these tricks.

The page must use the onerror.js include file (or similar) and have all errors exhibit in an alert() so I can test your code in both FF and IE.

Where To Start? We now have a JS Template on the examples page that is the best place to start! The onerror.js file is attached to it and it has some sample code built in to get you started. Also view all the rollover examples on the examples page. Make one of the image requirements work first, then backup your homework and add the next bit of functionality. You may even want to consider building each piece separately before integrating to one page.

This assignment is worth 100 points!

* The 4 examplese above are from the book we previously used for this class, 'JavaScript & AJAX', 7th, ed.

Assignment 2: Browser Obeisance (Due Tuesday, April 26th)

Occasionally on the web you will see evidence that developers are "sniffing" (determining) the browsers of their users, and either making adjustments to their pages, or providing editorial comments like "get a real browser", etc.

In this assignment you will be asked to build a single page that will "sniff" (determine) between at least 2 browsers of your choice, (for example, Internet Explorer or Netscape) and displays custom text and graphics based on the browser in question. Each "view" of your page must accomodate the following items:

  • You must "reference" the name of the browser sniffed at least 3 times in the course of your page, mixed into your page text.
  • A unique custom graphic for each browser (of your choice) must appear on the page.
  • Each browser must feature a unique color, whether in the body, or the text.
  • Each browser must be built to have a professional 'look & feel'. (No 'white' pages. No misspellings. A single flaw here will cost 10% of the grade.)
  • You will do this all with a single page, and not use alerts, popups, etc. This needs to be a seamless, professional page.
  • Your page must also include a dynamic JS copyright (see assignment 1)


As you can see by the example, humor is encouraged!

Error Handling Include File: Starting with this assignment, and to be included in every assignment going forward will be the requirement to turn in assignments in which all errors pop up in an alert() as an aid to troubleshooting. View the Troubleshooting page for details on how to build and apply an error handling .js include file for each assignment!

Once your browser sniff page is built, link the browser sniff page to your homework page with target="_blank" in the href. Name the link Assignment 2.

Your homework page should identify you, the class, the assignment (in the link) and which browsers your page will accommodate. Also indicate any special instructions.

Need help? View ASSIGNMENT HELP!

This assignment is worth 100 points!

An extra 5 points can be achieved for EACH browser above 2 (Max 20 points) that your 'browsersniff' page can successfully accomodate!

Assignment 1: Time Of Day (Due Thursday, April 14th)

Create an "assignments" web page that uses JavaScript to determine the hour, and presents a different image, custom message, and color based on the following times of day:

  • Morning (5am to 12 noon)
  • Afternoon (12 noon to 6pm)
  • Evening (6pm to 11pm)
  • Night (11pm to 5am)

Use the "sungoddess" example as a model for your pages.  Also include a custom "copyright" message at the bottom of your page (see copyright example).

This page will be your WEB150 "assignments" page, to which your other assignment pages will be linked.  Once this page is done, upload it to your server space, and go into "My Profile" on the class site, and point your "homework" URL to that page.

This assignment is worth 100 points!


General Test Instructions:

I will email you, when a test is ready. Once the test is ready, it is open book and open computer. If you do not take by 9pm on the specified day, you will be assigned a zero score!

The test will not be limited to ONLY the book. Lectures, website and class materials covered also may appear on the test. Remember this is open book and open computer, so that means I can make the test more exacting, because you have complete access to all possible materials!

Once the test is turned on, login to the class website, and click on the link for TESTS/GRADES. There you will see a link that will take you to a page with a link to the test highlighted in yellow. My advice is to print out the test, research the answers, and return to take the test once you have all the answers.

I will answer questions about the test for 24 hours after the test has been made available. If you are not sure about a question, be sure to check with me on email. Once you have taken the test, it would be too late!


Remember to focus on the website materials and links first, as most of the test will be built from there. Here are the study items:

Current Study

Week 10: From the class website, study the jQuery Intro and jQuery Applied pages. Also study the jQuery introduction chapter from the book.

Previous Study

Week 9: From the class website, study the CSS Positioning and DHTML Menus pages.

Week 7 - 8: From the class website, study the Forms and Advanced Forms pages. There are form examples both on the examples page and on the lesson page. Don't remember your form elements? View this Forms PowerPoint

Week 6: From the class website, study the DOM Advanced page. There are DOM examples both on the examples page and on the lesson page. Please study these.

Week 5: From the class website, study the DOM Intro and DOM Advanced pages. There are image rollover & DOM examples both on the examples page and on the lesson pages. Please study these.

Week 4: From the class website, study the arrays and DOM Intro pages. There are array & DOM examples both on the examples page and on the lesson pages. Please study these.

From the book pages 56-70 (arrays) and 90-99 (loops, functions) and 155-163 (DOM Intro).

Week 3: From the class website, study the Obj. Reference and Troubleshooting pages. A couple of test questions could come from there. Also study the strings page. Also study the examples on the example page, especially the browser sniffing examples.

From the book study pages 39-53 (variables) and 71-89 (conditionals).

Week 1-2: From the class website, study the JavaScript Introduction page. Several test questions could come from there. Also go through the JavaScript Powerpoint for a good overview of how to get started with JS. Also study the examples on the example page, especially the color particularly the bodyColor examples and the error handling handout.

Week 1: Read the introduction and chapter 1 our book, JavaScript, The Missing Manual 1st edition. Do the exercises in the book, if unsure of how the examples work.

Email if you have questions!

Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved