IT350 - Web andInternet Programming
Fall 2005

Lab 07 – Arrays and Objects

Introduction

During class this week weintroduced the concepts of arrays and objects. This week's lab will test yourability to manipulate these data types and make them do real work for you.

Requirements

You must create a folder on you Web drive called"Lab07" (without the quotes) and store your work in that directory. This lab does NOT draw on the previous labs, so there isno need to copy your old web pages into this directory.

This week you will make a single web page, array.html, such that:

  1. Your page has a prelude declaring it as an XHTML document, and it roughly follows XHTML rules._ Validation is encouraged but not required._
    (Hint: place HTML comments around your JavaScript, as the book does, so that the validator won’t complain about your JavaScript).
  2. Your page is reasonably appealing to look at (e.g. using styles, colors, etc). Your page should be tasteful and easy to read.
  3. For all of the requirements below, make use of functions where appropriate.
  4. Your page displays the last date and time it was modified – dynamically generated, of course. The format should be like "February 27, 2004 at 8:30:59am".
  5. You will have a form with six text input fields.  (The form randomly shall be labeled “Your favorite motivational quotes”, “Your favorite movies”, “Your favorite USNA courses”, etc. Be creative!) A "sort" button on this form will cause the page to reorder the text in these inputs from longest to shortest. That is, the longest string will appear in the first input field, the second longest string will appear in the second input field, and so on. Additional requirements:
    a.) Use two arrays - a preloaded array “form_labels”, and a second array “user_input” to keep track of values that are filled in by the user.)
    b.) Write and use at least one function that accepts an array as an argument.
    c.) Do not write your own sort function. Use something built-into JavaScript instead.
  6. There will be a box on your web page where the user can enter their favorite color. A button next to this input will change the text color of the page (or at least most the page) to this color AND save this value to a cookie. Upon subsequent visits to the page, the page will check for the presence of this cookie, and if found, set the text color of the page to the color indicated by this cookie. The user can then make further changes to the color if desired.
    Hint: use a <div> element to change the color for a large portion of the page.  For IE, you might need to also apply a color to the table to make this work.
    Hint #2: first get this working where you store the cookie, then the color changes next time you load the page.  Then to make the color change immediately, write code to force the browser to reload the page after you set the cookie.

  7. Your main default.htm page should have a link to Lab07/array.html

Overall, here is how your page might look upon first loading:

Then after entering some text, sorting, and changing the color, might look like this:

 


Your web page must be constructed using Notepad or a similar text-onlyeditor. The use of programs such as Microsoft Word, Microsoft Frontpage,DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honoroffense.

 

Hints:

1.      Remember that you can use single quotes in place of doublequotes for XHTML. This allows you to do things like:
document.writeln(“table border=’1’>”);

2.      Make use of window.alert() to display values for debugging.

Extra Credit

For a nominal amount of extra credit do some/all of thefollowing:
(NOTE: saving a backup copy of your working lab is recommended before startingon this)

1.      Modify your page to display the current date and time (givenin same format as with the “last modified” date) along with the number of daysbefore you are scheduled to graduate. These values must be dynamically computed!
HINT: You can create a specific date with code like var valentine = new Date(“Feb 14, 2006”)

2.      Change your ten input fields to a 4x4 table (total of 16 inputfields). Then add a button for each column and row (total of 8 buttons). Eachbutton when clicked should cause the corresponding row or column to be sortedas above. You must make use of a two-dimensional array to keep track of theinput fields.

Deliverables

  1. Your main web page should be called "array.html" (without the quotes).
  2. All of your files should be in a folder called "Lab07" (without the quotes) on the W drive. Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it.cs.usna.edu/Lab07/array.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!
  3. Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet._ Your comments will help us improve the course.
    2. A printout of the source to your Lab07/array.html file.
    3. If you use any external script files, include a printout of those too.