Assignments

Assignment 1 - Due 28 Apr

(Note: Explanation of the exercise numbering is as follows using 123.htm as an example: 1 represents the Assignment Set Number, 2 represents the Week, & 3 represents the Exercise Number. Save each respective exercise as x.htm, where x is the exercise number as listed below, for example, 124.htm.) For submitting your homework create a links page that points to each individual exercise (sample page). This will be the page in the URL box when you submit your homework.

NOTE: For exercises 1 & 2 try to use JavaScript String Methods. 
DO NOT use any <BODY onLoad="...">'s or <FORM>'s since we "haven't" covered them yet.

  1. (121.htm) Create a script where someone can type into the prompt() dialog box either http://www.address.com or just www.address.com. If they do the latter, have JavaScript figure it out and append http:// to the front of what they typed. Display the results (http://www.address.com) as an active hyperlink on a document page.
    Hints: String Content Methods & HTML String Methods - Example
  1. (122.htm) Create a script where you prompt the user for a color (red, blue, or green) and then prompt() for her or him for a sentence. Take the user's input and write out the sentence to the document in the color the user chose. Furthermore, also make the sentence bold.
    Hint: String Appearance Methods
  1. How would you customize the output in 123.htm to include the user's name in both the alert box & the document?
  1. Extend 124.htm so that if users answer correctly, they have the choice to answer a second question, but if they get the answer wrong give them a second chance to answer the same question again.

Assignment 2 - Due 5 May
(Note: For this assignment instead of creating a links page that points to the individual exercises, create a page with a drop down box that jumps to each exercise. So 231.htm will be the links page.)
  1. (231.htm) will include status bar messages that goes from left to right, and looks like a typewriter is typing the message. The main class example above goes from right to left & scrolls. In this exercise have the status bar display several (3 - 4) different messages with a pause (different than the typing speed) between each message.
    NOTE: Don't use a for loop - this can get you into major trouble.
    Hint: A template for possible use
  1. (232.htm) Create a page with HTML & JavaScript that includes a form with three input fields. The relationship of the values of the fields are such that the second field is twice the value of the first field, and the third field is the square of the first field. The user can input a number in any field and onChange the appropriate values are outputted to the other fields.

    What should happen - if you put :
    4 into the 1st field then 8 shows up in the 2nd field, & 16 in the 3rd field.
    10 into the 2nd field then 5 shows up in the 1st field, & 25 in the 3rd field.
    36 into the 3rd field then 6 shows up in the 1st field, & 12 in the 2nd field.

    Hints:
    A template for possible use
    To make this script easier, you will probably want to use some of the Math methods.
  1. (233.htm)
    1. Create an image onMouseOver that swaps the image and takes the user back to 231.htm when the user clicks on the image. Use the images on the Images Page.
    2. Include a status bar message to go along with the onMouseOver.
    3. Make sure that you have a onMouseOut that leaves the status bar empty when the user leaves the image.
    4. Also make sure that you use "if (document.images)" and pre-load the images.
    5. Include one "text hyperlink" on the page that "points" to & explains 231.htm by using a onMouseOver. Make sure that you have a onMouseOut that leaves the status bar empty when the user leaves the hyperlink.

    Hint: Use this example

  1. (234.htm) Create a script that prompts the user for a number x (4 - 6), & then prompts the users x times, each prompt requires the user to input a single word. Once the user has inputted a number x (4 - 6) and x number of words, then print out the words in reverse order. Make sure that each word is on a separate line.
    Hints:
    - prompt("How many Words (4 - 6 is good)?", "4")
    - prompt("What's Word " + x + "?", "") - where x is 1 - 4 or 6 for example.

Assignment 3 - Due 12 May
  1. Extend the functionality of 341.htm to check whether the age entered is in a specific numeric range - (ie, at least 18 & less 21) - and, if not, warn the user.
  1. Extend 342.htm so that a drop down combo box allows surfers to choose among many images to be shown. For example, if the User chooses Picture of My Aunt in the Pull Down Menu, the picture of Me will be replaced by the picture of My Aunt. Each image is linked up to a different URL, and is clickable. On a MouseOver also have a Status Bar Message appear for each individual Image. Also make sure that this exercise is "Browser Compatible".
    Hint: Synchronizing Links with "Pictures"

Assignment 4 - Due 26 May
  • Use the form template for your homework.
  • Validate the users input before sending the information to the server.
  • Make sure that you do THOROUGH validation for ALL the possible fields (ie, First Name, Last Name, City, State, Age, etc...). Also make sure that there is only one alert box for all the required fields & not multiple alert boxes.
    NOTE: Form 1 & Form 2 will be useful for your Assignment

Assignment 5 - Due 9 Jun

Shopping Cart & Checkout, & Page Counter

  • (571.htm) Build a mini Shopping Cart and Checkout Counter which meets the following criteria:
    • Use these functions (listed above)
    • 4 Item Catalog
    • At the Checkout Counter allow the person to Delete, or Change the quantity of an item.
    • Make sure that the Total reflects the content of the Shopping Cart.

    One possible set of "templates" are the catalog & cart for this exercise - but do not use these cookie functions, use these functions instead.

    The cart should look something like the following examples:

    • Cart 1 (button with onClick)
    • Cart 2 (text field with onChange)

    To reload a page through a function you should use location.reload().

Assignment 6 - Will Not be turned in, but attempt them
  1. (681.htm) Create a horizontal frameset. On the top frame put a "menu jumpbox" and two radio buttons. The "jumpbox" will take the user to a location that the person wants to go. The two radio buttons gives the user a choice of displaying the new page in the frame below the menu or having the new page open up in a new window.
  1. (682.htm) Quick Overview of Frameset Communication. Devise a way to ensure that the frame that you are trying to communicate with is loaded (guaranteed).