Programming Assignment 2

Intro to the Internet II

Programming Assignment 2

Please choose TWO of the following THREE (A, B, C) options. This is a tougher assignment than the last, so completing all
requirements will earn a middle A. Getting an A+ will require some additional creativity (features not mentioned here) in your
final project. Also, heavy commenting and testing in Netscape and IE is required. Please contact me with questions.

Resources:

All of this material was covered in class on week 5.
Browser redirection is also in the book, chapter 16.
Forms are covered on chapter 14.
Web resources:
Take a look at class slides first. If you still can't figure it out:
Echoecho Browser detection: http://www.echoecho.com/jsbrowserdetection.htm
Echoecho cookies: http://www.echoecho.com/jscookies.htm
JavaScript for the World Wide Web:
http://www.chalcedony.com/javascript/
(LOTS of good sample code here)

Part A Browser Redirection:

Some HTML tags and JavaScript syntax can only be interpreted by a specific browser. Though it is usually not a good idea to maintain two sets of the same data, you can find the browser that the user is using and tailor the content of the page to make the most of this browser.

Create a page that determines which browser the user is using (either Microsoft or Netscape). If the browser is Microsoft
Internet Explorer, render a page that has text between the <MARQUEE> and </MARQUEE> tags, which are only interpreted by IE.

If the browser is Netscape, render a page with text between <BLINK> and </BLINK> tags, which are only interpreted by Netscape.

Note, you can either redirect the user to a brand new page which is specific for each type of browser, or you can use one page, where the <BLINK> or <MARQUEE> tags are generated dynamically, again, based on the browser. But, under no circumstance should a page have both MARQUEE and BLINK tags. In other words, you could redirect Netscape users to Netscape.html and IE users to IE.html, or you could have one page that simply writes <BLINK> for Netscape OR <MARQUEE> for IE.

Your boss wants you to collect browser data to determine if it is worthwhile to maintain two separate pages for each of the dominant browsers. Thus, you must collect this data from the user. The only way to do this is by passing this info through a link. In the page, make a dynamic link with the document.write() method. The link should be in the syntax:

http://www.uc.edu/browser.pl?browserName=browser&browserVersion=version

where the blue text signifies data you get from the navigator object and the black text is static; it will be the same no matter what. You can write this entire line with document.write().

Hints

Write your functions in the <HEAD> section.
Use the navigator DOM object.
Generate the dynamic link from the HEAD section, using document.write(). All you need to do is concatenate the static text with the values obtained from the navigator object. You may use hidden fields if you like, if you are familiar with them.
If you choose to have a separate page for IE and Netscape, those separate pages can contain the JavaScript for the dynamic link. The JavaScript need not all be in one page.
If you generate the browser-specific tags dynamically, all you have to do is use document.write to write the specific tags. This can be done from the HEAD section.

Part B:

Prompt the user for his/her name, either with an HTML form or with the JavaScript prompt() method. Save the user's name to a cookie. When the user returns, if a cookie is present, pop up a new window with window.open(). The new window should have a message welcoming that user by his/her name. The window size should be 400 pixels wide and 350 pixels high.

Hints

Follow my example from class.
To set a cookie, where expire is a Date() object instance you have declared earlier:

document.cookie = "name="+username+";expires=" + expire.toGMTString();

Important note:

name

blue

name

value

name

your last name.

To get the value back out of a cookie:

username = document.cookie.split("=")[1];

To see if a cookie exists:

if (document.cookie != "") {

// code to execute if the cookie exists goes here

}

Part C:

Create a simulated customer sign up form, similar to ones you might see on amazon.com, dell.com, or any other ecommerce
site. The form should have the following fields:

   ·       Radio buttons for individual or corporate account
   ·       Text fields:
         o      First name
         o      Last Name
         o      Address
         o      City
         o      Zip
   ·       Drop Down ( <SELECT> ) fields:
         o      State (not all 50 states, just IN, KY, OH will be adequate.)
   ·       Check Box: Do you want to receive future offers?

You must add these validations to the fields:
   ·       All text fields must contain data. Check to make sure that the length of the text in each field is greater than 1.
   ·       The e-mail field must contain a '@' character. One way to check this would be to use the indexOf() method to verify
      that it does.
   ·       If the offers check box is checked, pop up a confirm box asking if it is OK to send offers to that e-mail address. Put
      the e-mail address itself in the popup box. (Example: "May we send offers to jonesbl@one.net?")