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

spacerspacer

ASSIGNMENTS

Assignment 5 DHTML Menu (Due Monday, March 20th)

For assignment 5 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 from me!

For assignment 5 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 code to be shown Monday!!) 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 downloaded, and started to work with the Milonic Menu in class on Wednesday, March 8th. There was a handout in class, that helps to install and work with the menu: Milonic Handout

Please refer to the handout, the lecture MP3 and 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

This assignment is worth 200 points!


Assignment 4 DOM Play (Due Wednesday, March 8th)

For assignment 4 you will be creating a small, single page application using the DOM. For this assignment 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)

The entire class will discuss together ways to accomplish this assignment in class on Wednesday, March 1st. If you are not able to attend that day, please listen to the class lecture.

You may use code from other sources, but when you do so, you must cite your source on your homework page. If the source is a link, please include the link. Points off for uncited external sources. If the external source has copyright recommendations, these must be followed to the letter, or points will be taken off!

Your resources for this project are is the DOM Intro page 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

This assignment is worth 100 points!

25 POINTS EXTRA CREDIT for the student (or students, in case of a tie) who achieves assignment 4 with the least lines of code (including all called functions).

NO EXTRA POINTS FOR IDENTICAL CODE!! (The exact code from the exact source may nullify the extra points!!)


Assignment 3 Universal Validator (Due Wednesday, March 1st)

Assignment 3 will have you create a Universal Form Validator include file, (INC file) and also 2 different forms that implement the validator.

The include file needs to include any UNIVERSAL functions that you will implement on your form pages. There will still be SOME JavaScript code as well to "hook" into your INC file on your form pages, but ALL CODE THAT CAN BE OFFLOADED TO THE INC FILE MUST BE OFFLOADED, OR POINT WILL BE TAKEN OFF!

You will NOT need to create custom functions for this assignment, but you are free to create or use them as you wish. The focus on this assignment is integration, not the inherent adequacy of individual functions!

Most of your examples for these pages are on the Compound Functions page. Some other pages may exist on the Forms, and Advanced Forms pages.

So, you will be building 2 pages and one file. The file is an INC file (which stores all your main functions) and the other two are 2 different forms, for 2 different purposes. Both pages must reference and use the functions inside the INC file to validate your forms!

FORM #1: This form will be a typical "user profile" form. On the 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, and whether the "capFirst" processing function must be applied to the data before the form submits:

Element Info Element Type Validation Rules/Formatting
First Name text optional,capFirst Processing
Last Name text required, capFirst Processing
Address text required, capFirst Processing
City text required, capFirst Processing
State select option required
Zip Code text required, check for valid Zip Code
Email text optional, check for valid Email, ONLY IF DATA ENTERED!! (You will likely need at adapt the code here!!)
Gender radio required
How You Heard checkbox required

Note that "Element Info" does not give you the "name" of the element. Apply an appropriate element name, for instance, you could use "xLastName", for the Last Name information. "xLastName" is named in this way to work with the "checkReq" function, which checks for required fields. See the Compound Functions page for more details.

Note the "Email" field will create special issues. How would you check for a valid email, but also allow "no email" to be entered? I would adapt the existing code, and perhaps create a NEW function called, "optionalEmail".

The second form can be designed to your choosing. However, it must NOT be the same info as the first form! You must select your own (somewhat) logical fields & elements:

Number Required: Element Type Validation Rules/Formatting
1 text optional,capFirst Processing
1 text required, capFirst Processing
1 select option required
1 password required, only alpha-numeric characters allowed, meaning a-z, A-Z and 0-9 (See Forms page, Advanced Forms page)
1 textarea Limit character entry to 50 characters (See Advanced Forms page)
1 radio required
1 checkbox required, must include "Check All" & "UnCheck All" function, (See Compound Functions)

Note the challenges here are the "password" field, which requires only alpha-numeric characters and the "textarea" which must only allow limited characters.

Regarding the password field, there are several regular expressions that can do what is required, NONE of which appear on the class site! You will need to do some searching to find that! However, once you have the regular expression in hand (either found or built by you) you can pop the regex into one of the other regex demos on the Forms page.

Regarding the limiting the textarea field, there are several way to do this, many can be found easily by searching Google. My favorite version is detailed however on the Advanced Forms page. Any version you use is fine, as long as it works in conjunction with the rest of the form!

FOR BOTH FORMS: I want this to look like a PROFESSIONAL PAGE!! Please give your form pages a professional look and feel with a header, footer, nav, etc. and proper formatting to make your form legible and easy to read. I will take points off for bad form!! (Bad pun) Unlike the snowboard cross, there are style points in this competition!

Once your forms are working, they will need to be linked to your assignment page, as target="_blank",and the forms must perform as above, and when the form has been properly validated, the form must submit data properly to:

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

This assignment is difficult, so it will be worth 200 points, and is due Monday, February 27th.


Assignment 2 Troubleshooting (Due Monday, May 8th)

Assignment 2 will have you practice your JS troubleshooting skills. Below is a link to a word document:

ASSIGNMENT 2 PAGES

The word document above includes 8 small pages. Please copy the text and build these pages. Each of the pages 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 JavaScript 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"!

DO NOT email me when your work is available. I will check all pages when the assignment is due.

DO EMAIL if you have questions.

ASSIGNMENT 2 IS WORTH 100 POINTS.


Assignment 1 Browser Obeisance (Due Wednesday, 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.

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 different custom graphic for each browser (of your choice) must appear on the page as well. EXAMPLE

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

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

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 1, indicate on your homework page which browsers will be sniffed by your page.

Your homework page must be updated in the PROFILE on the class website. All your assignments will be linked from this web address.

DO NOT email me when your work is available. I will check all pages when the assignment is due.

DO EMAIL if you have questions.

ASSIGNMENT 1 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!


Test #1

Our first test will be available this weekend, I am targeting Friday, April 14th for turning the test on. I will email you, when the test is ready.

Once the test is ready, it is open book and open computer. The test will be available from Friday until Sunday night, April 16th at 9pm. If you do not take the test by Sunday at 9, you will be assigned a zero grade!

The test will cover many items directly from our book, chapters 1-3. If you have not read the chapters, be sure to do so.

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!

Week 5

Read chapter 7 of our book, and do the exercises in the text.

Week 4

Read chapter 6 & 12 of our book, and do the exercises in the text.

Week 3

Read chapter 4 & 5 of our book, and do the exercises in the text.

Week 2

Read chapter 3 of our book, and do the exercises in the text.

Week 1

Read chapters 1 and 2 of our book, JavaScript DeMystified. Do the exercises in the book, if unsure of how the examples function.

Email me, if you have questions!

,  
Print this Page Back To Top

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