W3101: Scripting Languages: Javascript -- HW2


Due: 9 AM on Wednesday, Mar 25.
Please name the file as "yourname"-HW2-1.html, HW2-2.html and HW2-3.html for the three problems. You also need to submit some sample image file that you use with problems 1 and 2 (see the questions below). Submit a zipped version of the files in Courseworks.
  1. In this problem, you need to write Javascript code in a html file to display larger images of thumbnail images.
    1. First show about [6-10] images as thumbnails (of about 50 x 50 pixels in size). Also have one large image (of about 200 x 200 pixels in size).
    2. Include a button that the user can click. When the button is clicked, prompt the user to select a number i in the range [1-n] where n is the number of images you used in your program. If the user enters anything outside this range, popup an alert box saying that an illegal value was entered. Otherwise, show ith image in the larger image box.
    3. Increase the border size of the ith thumbnail image, and keep the border size of the other thumbnail images normal.

    Submit the html file along the images you use. Please do not use separate images for thumbnails (smaller version) and original images. You can only only the larger version, but display them in a smaller size for thumbnails.

    Note: This can be converted to an automatic slide show of images. Instead of using a button to prompt the user to enter an image number, you can automatically display images one after another for every 3 seconds or so. However, Javascript does not provide a easy to use "sleep( )" function and hence it can be a little messy to implement the automatic slideshow effect.

  2. Implement a slightly different variation of displaying thumbnail images. Have about [6-10] thumbnail images as in the previous problem. When the mouse is focussed on any of these images, a slightly bigger window (say about 450 x 350 pixels) should pop upand display the bigger image. When the mouse if focussed on another thumbnail image, the window that was already popped up should show the new image on which the mouse if focussed. Please do not pop up a separate window for each thumbnail image, but use only one window to show any of the thumbnail images on which the mouse is focussed.

  3. Note:
    1. Please use the same images as in the previous problem. Do not submit two sets of images, one for each problem.
    2. You can use "window.open(..)" to open a new window. Make sure your browswer's popup blocker is temporarily disabled to test your program.

  4. Extend the form to open a bank account as follows:
    1. Add a field for date of birth. Make sure that only valid dates are entered for date of birth. You can use any format (like drop down menu, textbox, etc.). You should either make sure the user can enter only valid date, or popup an alert box if an invalid date (e.g., Feb 30) is entered.
    2. Pop up an alert box saying "Welcome to XYZ bank" when the html page is loaded. Also, pop up another box saying, "Thank you for using the form" (or some such message) when the user leaves the page, i.e., when the user unloads the page.
    3. Add a reset button to reset that, when clicked, resets all the fields the user entered.
    4. Add a function that throws an exception when an error condition (event) occurs.

Note: Please refer to HTML tutorial for any HTML related issues. You can also send mail to me, but please refer to the page first.
risukapalli
Last modified: Sun Mar 15 23:56:20 EDT 2009