Lab 8: JavaScript Intro

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 to display a random quote and create a dynamic table generator.

Read this lab completely before you begin.

Part 0 - Setting up (5%)

  1. Directory: You must create a folder on your web drive called "Lab08" (without the quotes) and store your work in that directory. Copy your work from Lab06 - your "ECA/unit website" (not Lab07) into this directory.

Part 1 - Random Quotes (45%)

  1. Comments: Comments are now especially important in your scripts – explain at a high level what your JavaScript is doing, and complex parts.
  2. Quotes: Add to your existing Lab08/index.html (or .php) page some JavaScript that:
    • Using document.writeln method, displays a quote that is randomly chosen from a set that you provide in your code. The quote should appear at/close to the top of your page, and you must have at least 4 different quotes that your program randomly chooses from. (Hint 1: store the quotes in an array; Hint 2- see w3schools for help on random number generation). 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 tasteful and appropriate for a military environment and properly attributed to their source.

Part 2 - Dynamic Table Generator (95%)

  1. table.html: Create a new HTML5 page, Lab08/table.html. This page should ask the user a series of questions, then produce a table showing the result:
  2. First, ask the user how many rows do they want in the table.
    js
    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: See the class exercise on asking user for a number in JavaScript intro lecture.

    Hint #2: If the user hits Cancel, window.prompt() returns null.

    Hint #3: 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 #4: Read the JavaScript given in the starter JS and copy the code from the first <script> element to your own code. Then, always use my_writeln instead of document.writeln() – to help with debugging.

  3. Now start collecting actual data for the table and display it. 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. Your prompt must include the current row and column number that data is being entered for. Here is how this might look for one session:
    (hit CANCEL)


    (hit CANCEL)

  4. Finally, output the actual table based on the user's inputs (so it is displayed in the browser window - using document.writeln or my_writeln if you copied that function from the starter JS code). For the entries above, this should look like something like:

    Hint: 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.
  5. 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.

Challenge Problem - Just a bit more (100%)

  1. Modify your table.html to allow for dynamic styling, as below:
    • 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. 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).
    • Change your table generating code to generate the table with the style provided by the user.
      Hint: To get the style for the table correctly, you might need to use inline styling to apply the style directly to the <td> element, for example to 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.

General Requirements and Deliverables

  1. Documentation: ensure you have appropriate comments in your JavaScript scripts.
  2. Links: Create two links in your top-level IT350.html page under the heading 'Lab08'
    1. Under the name 'Index', make a link to your Lab08/index.html
    2. Under the name 'Table', make a link to Lab08/table.html
  3. Put a README.txt file in the lab directory. This file should have:
    • *Lab number
    • *Your name and alpha
    • *Collaborations in completing this lab (people, online sources used outside the course website)
    • *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
    • *How long this lab took you
    • Any suggestions to improve the lab
    • Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
  4. All of your files should be in a folder called Lab08 in your public_html/IT350 folder. Your instructor will assume that your web pages are viewable at http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab08/table.html where XXXXXX is your alpha number.
  5. All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
  6. Submit all files to the online submissions system (submit.moboard.com) on or before the due date, this is Lab08. Use the command line submit script and capture the entire contents of the directory, the easiest way to do this would be to cut and paste the following while logged onto the server:

    
                            cd ~/public_html/IT350
                            ~/bin/submit -c=IT350 -p=Lab08 Lab08
    This assumes that the submit script is located in ~/bin/ and is executable.

Additional Hints / Clarifications