IT350 - Web and Internet Programming

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.

• Using Firefox or Chrome is highly recommended for this lab. Make sure you know how to use the Web Console in Firefox (Go to "Web Developer-> Web Console-JS tab) or the JavaScript Console in Chrome (Tools --> JavaScript Console) The Web/JavaScript Console will help with finding syntax errors in your JavaScript code!
• (2 points) Comments are now especially important – explain at a high level what your JavaScript is doing, and complex parts.
• (4 points) greeting: You can either modify your existing Lab05/index.html page, or create a new HTML5 page, Lab05/greeting.html (use this new JavaScript starter page). On your page you should provide a greeting appropriate to your unit, and have JavaScript that does several things:

• JavaScript that prints in the browser window (not a pop-up) a greeting based on the “minute” of the current time. In particular, if the current minute is an odd number, then print a clever greeting that contains the word “odd”. Otherwise, print a clever greeting that contains the word “even”. Find a greeting that makes sense. In addition:
1. The “odd” greeting must appear in a different color than the “even” greeting, and both must be different from the default color.
2. You must accomplish this color change using “inline” styling.

• JavaScript program 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 9.5 of the text for help on random number generation).
  
  
• NOTE: the remainder of the lab requires JavaScript control flow knowledge from Chapters 7-8. This is similar to Java/C syntax, but you should at least skim through those chapters before proceeding.
  
  
• (11 points) table.html: Create a new HTML5 page, Lab05/table.html (you’ll want to use the new JavaScript starter page). 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.
  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! (for example, "if (!what_I_want){//ask again}" is better than "if (what_I_do_NOT_want){//ask again}")
  Hint #3: Be sure to read the JavaScript given in the starter code. Then, always use my_writeln() instead of document.writeln() – to help with debugging.
• 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. If you are asking them for a string (e.g., “red”), you have to check that they didn’t hit cancel, but you don’t have to verify that it is a sensible string (e.g. a sensible color or border-style).
• Next, ask for the number of rows in the table:
  
  
  You must check that a valid integer, greater than zero is entered. If they press cancel or enter an invalid value, you must ask again until the value is acceptable.
• 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:
  (hit CANCEL)
  (hit 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 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 above the table and some text that appears 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 the CSS border width, border style, and border color. 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 my_finish() in each of your HTML pages that use JavaScript (provided in the starter code). Make sure your page still works after you do this!
• (1 point) Links: There must be a link from your default.htm page and from your Lab05/index.html page to both greeting.html (if you created an extra greeting page) 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 HTML5 document it is, and should generally look like HTML5 – 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 HTML5.

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:

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

2. 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. Your instructor will assume that your web pages are viewable at http://zee.cs.usna.edu/~mXXXXXX/Lab05/index.html (and table.html, and greeting.html if appropriate) 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 if you have one, or Lab05/index.html otherwise.
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.