IT350 - Web and
and shown you how it can be used to customize and animate the user's
experience. For this lab you will practice using this knowledge on some warm-up
exercises and then create a dynamic table generator.
Note that you have two weeks to work on this lab – see
the calendar for specific due dates.
Read this lab completely before you begin.
You must create a folder on your web drive called
"Lab05" (without the quotes) and store your work in that directory. Copy your work from Lab03 (not Lab04)
into this directory.
- Using Firefox is highly
recommended for this lab. Make sure
- Comments are now especially
and complex parts.
- greeting.html: Create a new XHTML page, Lab05/greeting.html
controls the color scheme of the page based on the time of day. For
example, from 0500 to 1000 your page will use a "morning" color
scheme and from 1000 to 1700 it uses a "day" color scheme, and
so on. Your page must have at least three (3) different color schemes
which are all easy to read. No black text on a dark gray background! To
to output the command to load the appropriate one based on time of
be outputting HTML commands to the body of the document, which is not
technically the right place to invoke a stylesheet, but will still work).
that displays a quote which is randomly chosen from a set that you
provide. The quote should appear
at the top of your page, and you must have at least 4 different quotes
that your program chooses from.
Hitting Refresh on the page should cause a new quote to be
displayed (unless the same one is randomly picked). Start by getting this
to work with just the text “Quote1”, “Quote2”,
etc., then find real quotes once you have this working. Your quotes can
be humorous, inspirational, motivational, or whatever else you choose, so
long as they are tasteful and appropriate for a military environment and
properly attributed to their source. (Hint – see section 10.5 of
the text for help on random number generation).
flow knowledge from Chapters 8-9.
This is similar to Java/C syntax, but you should at least skim
through those chapters before proceeding.
- table.html: Create a new XHTML page, Lab05/table.html (you’ll
of questions, then produce a table showing the result:
- First, ask the user
what kind of table border they would like. For instance, you might ask something
You don’t have to ask this particular question, but it must be some
multiple choice question about table design where the correct answer is
an integer. If the user hits
cancel or enters an invalid number (like “5” or
“two”) then you must
ask this question again until the value is acceptable.
Hint 1: If the user hits Cancel, window.prompt() returns a value that is
treated as false if you test it in an if() statement.
Hint 2: To validate input, it is much more reliable to check if the input
is acceptable, then ask again if not, rather than trying to specifically
check for illegal inputs. Check
for what you want, not what you don’t want!
- Second, ask the user
another question about the table style, like this:
This question can be anything that will affect the table style. If they press cancel or enter an
invalid value (for multiple choice), you
must ask again until the value is acceptable.
- Next, ask for the
number of rows in the table:
You must check that a valid integer greater than zero is entered.
- Now start collecting
actual data for the table. You
don’t ask for the number of columns explicitly; instead, a row is
over when the user hits “Cancel” instead of entering a value. Here is how this might look for one
Your prompt must include the current row and column number that data is
being entered for.
- Finally, output the
actual table (so it is displayed in the browser window) based on the
user’s inputs. For the
entries above, this should look like something like:
You must display some kind of
welcome text that appears both above and below the table. The specific text should reflect your
overall lab topic.
Hint #1: to get a border like this, the styling must be applied directly
to the <td> element, and you must set both the CSSS border width
and style. However, you can choose to apply any kind of border to the
table, so long as it is influenced by the questions you ask, and the questions
meet the requirements above.
Hint #2: you will probably find it easier to generate the table as the
user enters input (e.g., output the HTML for each cell as soon as the
user enters the value for that call) instead of collecting all the
user’s input, then outputting all of the table.
- Debug: once everything works, comment out the call to
the starter code). Be sure to make
sure it still works after you do this!
- Links: There must be a link from your default.htm page and
from your Lab05/index.html page to both greeting.html and table.html.
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.
Your pages should have a prelude
specifying the type of XHTML document it is, and should generally look like
XHTML (including closing tags etc.) – but you are no longer
required to validate. You are
though, encouraged to do so – you will lose credit for pages that
don’t display properly in other browsers because of invalid XHTML. Note
that if your XHTML page has an empty body, you should use XHTML 1.0 Strict if
you want it to validate (like the first examples in Chapter 7).
Note that all vars are global for the life of the page. This means that vars are persistent and available to other parts of a script (or
other scripts, if you have more than one).
For a nominal amount of extra credit do some/all of the
following: (more may appear later)
your table generator so that you can make some cells span rows and or
columns. Describe on the back of the
cover sheet how the user can do this (although ideally it should be
self-explanatory from using your page).
a lot more you could do with a dynamic table generator. Make some other enhancement and describe what
it does (you may want to check with your instructor first to make sure this is
suitable for credit).
- Your pages should contain all
of the elements described in the requirements section above.
- All of your files should be
in a folder called "Lab05" (without the quotes) on your web
drive. Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it350.cs.usna.edu/Lab05/greeting.html
(and table.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
coversheet. Your comments will help us improve the
- A printout of the source to your
- A printout of the source to your Lab05/table.html
- If you use any
external script files, include a printout of those too.