IT350 - Web and Internet
Lab 07 – Arrays and Objects
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.
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:
- Your page has a prelude
declaring it as an XHTML document, and it roughly follows XHTML rules.
Validation is encouraged but not required.
- Your page is reasonably
appealing to look at (e.g. using styles, colors, etc). Your page should be
tasteful and easy to read.
- For all of the requirements
below, make use of functions where appropriate.
- Comment your code
- 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
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
c.) Do not write your own sort function. Use something built-into
- 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).
- 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.
- Your main default.htm page
should have a link to Lab07/array.html
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.
Remember that you can use single quotes in place
of doublequotes for XHTML. This allows you to do
Make use of window.alert() to display
values for debugging.
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
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”)
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.
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”, …).
- Your main web page should be
called "array.html" (without the quotes).
- 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!
- Turn in the following
hardcopy at the beginning of class on the due date, stapled together in
the following order (coversheet on top):
- A completed assignment
Your comments will help us improve the course.
- A printout of the source to your
- If you use any external
script files, include a printout of those too.