IT350 - Web and Internet Programming

Lab 07 – Arrays and Objects

Introduction

During class this week we introduced the concepts of arrays, objects, and cookies. This week's lab will test your ability 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 is no 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. Comment your code appropriately.
  5. You will have a form with six text input fields (see screenshots later).  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.) To sort, you will need to read values from the textboxes (that were filled in by the user). into something JavaScript can manipulate more easily.  Use an array to keep track of these values from the textboxes.
    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. Above your six text input fields, will be a drop-down selection box that lets the user choose  an appropriate “title” for the form (choose at least 3, such as “Favorite quotes”, “Favorite movies”, “Favorite courses”, …).   A button next to this selection box, called “Save Title”, will save the currently selected title as a cookie.  Your page will check for this cookie when loading and, if present, create the selection box so that the stored title is selected.
    Hint: to find what title is currently selected, you would want to access something like document.myform.mytitlebox.selectedIndex (this returns an integer, starting from zero, of the currently selected item).

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

  8. 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-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage,DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.

 

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 the following:
(NOTE: saving a backup copy of your working lab is recommended before starting on this)

1.      Modify your page to display the current date and time along with the number of days before 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 six input fields to a 4x4 table (total of 16 input fields). Then add a button for each column and row (total of 8 buttons). Each button when clicked should cause the corresponding row or column to be sorted as above. You must make use of a two-dimensional array to keep track of the input fields.

3.      Modify your page so that changing the title (e.g. selecting “Favorite courses”) immediately causes the text input labels (“Box 1”, “Box 2’, …) to change appropriately (“Course 1”, “Course 2”, …).

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.it350.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.