IT350 - Web and Internet Programming
AY-F05

Lab 05 - Working with JavaScript

Introduction

This week we've introduced the scripting language JavaScript 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.

Requirements

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.

• greeting.html: Create a new XHTML page, Lab05/greeting.html. This page should provide a greeting appropriate to your unit, and have JavaScript that does several things:

• JavaScript that 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! (Hint: External cascading style sheets are your friend!)

• JavaScript program 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 5 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). Your quotes can be humorous, inspirational, motivational, or whatever else you choose, so long as they are 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).
  
  
• NOTE: the remainder of the lab requires JavaScript control 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. This page should ask the user a series 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 like this:
  
  
  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.
• 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 an 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 session:
  (CANCEL)
  (CANCEL)
  
  Your prompt must include the current row and column number that data is being entered for.
  
  
• Finally, output the actual table (so it is display 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 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.
  
  
• 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 (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).

Extra Credit

For a nominal amount of extra credit do some/all of the following: (more may appear later)

1. Modify your table generator so that in addition to the table itself, it displays (below the table itself) the XHTML that is needed to generate the table. (The idea here is that you should then be able to cut and paste this code into some type of text editor to use it).

2. Modify 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).

3. There’s 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).

Deliverables

1. Your pages should contain all of the elements described in the requirements section above.
2. All of your files should be in a folder called "Lab05" (without the quotes) on your web drive. You are welcome (and highly encouraged) to copy your files from Lab03 (not Lab04) into this directory. Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it.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!
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 Lab05/greeting.html file.
3. A printout of the source to your Lab05/table.html file.
4. If you use any external script files, include a printout of those too.