IT350 - Web andInternet Programming
Lab 07 – Arrays and Objects
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.
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:
- 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.
- 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".
- 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
c.) Do not write your own sort function. Use something built-into
- 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
- 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-onlyeditor.
The use of programs such as Microsoft Word, Microsoft Frontpage,DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honoroffense.
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 thefollowing:
(NOTE: saving a backup copy of your working lab is recommended before startingon this)
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”)
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.
- 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.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!
- 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
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.