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

spacerspacer

ASSIGNMENTS


Assignment 7 DHTML Menu (Due Tuesday, March 24th)

For this assignment we will be working with the Milonic DHTML Menu: Milonic 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) refer to this example: insideDiv

Here is the code to the main configuration file: menu_div.js

This assignment is worth 200 points!


Assignment 6 DOM Play (Due Tuesday March 10th)

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 is 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

Help? View this PARTIALLY WORKING example that may help.  It employs the viewRender.js include file to see what's going on with the DOM. It uses classes with the actor's name as 'hooks' to identify which actor to bold, etc. However, notice that when you change the class to bold, the actor's identity disappears: trialDOMPlay.

How to get beyond this? You could follow the lead of the stackClasses example from the Advanced DOM page. Or you could consider creating a custom attribute. To do this, you can make up our own attribute, so that it identifies the actor, but doesn't interfere with the class changes:

<p class="myNormal" actor="hamlet">To be, or not to be?</p>

The downside is the page would not validate. However, even this is not a permanent issue, as you could create your own XML namespace, and add anything you want, by weaving your elements into the XHTML elements. That's the power of XML!

This assignment is worth 100 points!


Assignment 5 Form Validation (Due Thursday, February 26th)

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.

Helpful examples are to be found on the Forms, Advanced Forms, and Compound Functions pages.

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
Email text optional, check for valid email*
Password password required*
Confirm Password password required* (must match Password field)
Can we spam you? radio required*
(Your choice) checkbox required*

Make this look like a PROFESSIONAL PAGE!! Please give your form a professional look and feel with a header, footer, etc. and proper formatting to make your form legible and easy to read. I will take points off for bad form!! (Bad pun)

* 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!)

Create and use an include file for all UNIVERSAL form checking functions! Every function that does not refer to a specific element on the form must be offloaded into an include file. This allows you to use the include file for other forms later. If I see any functions that could have been offloaded, there will be an automatic 10 points off (no re-grade! 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:

http://www.newmanic.com/formtest.asp

Help? View the examples page for sample code that will help you.  Pay special attention to the handouts we worked up in class, for example Validate Text, Validate Radio and Validate Select .

EMAIL if you have questions.

ASSIGNMENT 5 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 Image Funhouse (Due Tuesday, Feb. 10th)

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, or one of the examples starting at page 83 of our book. 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. For this example, see page 100 of our book, or the class examples. Book Example: Leonard's Machines

2) wraparound slideshow: implement a one page 'slide show' of other images, similar to the example given in our book on page 108 of our book. You may use this example, or any other, as long as it works on a single HTML page. Book 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 the example given on page 111 of our book. Book 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. Book 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.

ASSIGNMENT 4 IS WORTH 100 POINTS.


Assignment 3 Troubleshooting (Due Tuesday, Feb. 3rd)

For this assignment we'll practice our JS troubleshooting skills. Below is a link to a word document:

PAGES for TROUBLESHOOTING

The word document above includes 8 small pages. Please copy the text and build these pages. Each includes a JavaScript or HTML error that disables the proper display of the page. Your assignment will be to repair these pages, and link them to your assignment page.

To determine the intended functionality of the page, view the source code, and pay attention to the small page description (usually in a paragraph tag) that describes what the page is supposed to do.

For many of these pages you will need to troubleshoot in Firefox, and use the Error Console. Some pages will NOT display an error, but will not perform the requested functionality. ALL of the pages must be fixed, however!

HINT: Most of these pages have something small incorrect! You will not need to rebuild the basic logic, just understand it!

HINT HINT: Many of the pages/examples are modeled after the class examples!

FILE NAMES/LINKING: The file names are included in the text, both in the title tag and in a header. Name the files accordingly, and LINK TO YOUR ASSIGNMENT PAGE AS target="_blank". POINTS WILL BE DEDUCTED FOR ANY EXAMPLE NOT LINKED WITH target="_blank"!

ASSIGNMENT 3 IS WORTH 100 POINTS.


Assignment 2: Browser Obeisance (Due Tuesday, January 27th)

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)

>>EXAMPLE<<

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

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 indicate any special instructions next to the assignment link.

In the case of Assignment 2, indicate on your homework page which browsers will be sniffed by your page.

Your homework page must be kept up to date in the PROFILE on the class website. All your assignments must be linked from a single page on your server space.

Need help? View the new ASSIGNMENT HELP!

ASSIGNMENT 2 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, January 15th)

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.

 

ASSIGNMENT 1 IS WORTH 100 POINTS.


TESTS

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!


READING

Current Reading

Read chapter 11 of our book, JavaScript & AJAX for the web, 7th edition. Do the exercises in the book, if unsure of how the examples work. Also study the DOM demos on the DOM Intro and Advanced Dom pages of the class website.

Previous Reading

Read chapter 8 of our book, JavaScript & AJAX for the web, 7th edition. Do the exercises in the book, if unsure of how the examples work. Also study the string & forms demos on the Strings and advanced forms pages of the class website.

Read chapter 7 of our book, JavaScript & AJAX for the web, 7th edition. Do the exercises in the book, if unsure of how the examples work. Also study the forms demos on the forms page of the class website.

Read chapter 4 of our book, JavaScript & AJAX for the web, 7th edition. Do the exercises in the book, if unsure of how the examples work. Also study the rollover demos on the examples page of the class website.

Read chapter 3 of our book, JavaScript & AJAX for the web, 7th edition. Do the exercises in the book, if unsure of how the examples work. Also study the Strings and Arrays pages on the class website.

Read chapter 1 & 2 of our book, JavaScript & AJAX for the web, 7th edition. Do the exercises in the book, if unsure of how the examples work. Also study the JavaScript Introduction page on the class website.

Email me, if you have questions!

,  
Print this Page Back To Top

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