W3101: Scripting Languages: Javascript -- HW2

1. Modify HW2-1 problem to make it an automatic slideshow of images. That is,
   
   
   • 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).
   • Get rid of the user input box of HW2-1, to enter the image number. Instead have a dropdown menu where the user can select the slideshow speed as "Fast", or "Medium" or "Slow". For these values, show the corresponding image of each of the thumbnail images, one after another, at an interval of of 1 or 3 or 5 seconds, respectively. That is if the user selects "Slow", update the images once every 5 seconds.
   • Increase the border size of the thumbnail image that is being shown in the larger image box, 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.
   
   

   ---

2. Design an object called "MailHeader" that has the following public fields: To, From, Subject, Date, Content.
   1. Each field itself is an object of type MailAttribute. That is, design an object called MailAttribute that has two private fields: "name" and "value". Provide a constructor in MailAttribute that takes two strings as input and sets the first one ( e.g. "To") as the name and the second one ( "myFriend@cs.columbia.edu" ) as the value.
   2. Provide a privileged method called "printData( )" that prints the name and value fields of MailAttribute.
   3. In the MailHeader object, provide a default constructor (with no arguments). In the constructor, fill in the values for each "To", "From", "Subject", "Date" and "Content" with some dummy values (e.g., "myFriend@cs.columbia.edu,", "me@cs.columbia.edu", "Hello", "Mar 28, 2009" and "Hi there!", respectively).
   4. Create a public member function called "printData( )" in MailHeader that prints each of the five MailAttribute names and values, by calling the "printData( )" function in MailHeader, for each of the five fields.
   5. In the main body, create a MailHeader object using the the "To, From, Subject, Date, Content" MailAttribute fields. You can use the dummy values given above (or some other meaningful values). Then call the "printMailData ( )" function. The output should something look like:
      To: myFriend@cs.columbia.edu
      From: myName@cs.columbia.edu
      Subject: Hello
      Date: Sep 27, 2007
      Content: This is a dummy email message.
      

   ---

3. Bonus Credit: In this problem, have two text boxes. Whenever any of them is focussed, change the background color to any of your favorite colors (other than white). When the focus goes out of the box, dilute the color gradually over a period of about [1-2] seconds Note: You should see the effect of the color being diulted slowly. That is, assume the original background color of the box is yellow. When it loses focus, the background color should become lighther and lighter yellow gradually, over a period of about [1-2] seconds, eventually becoming white.
   Note: Please go through HTML documents to learn how to represent colors as six tuples (something like "#FFFFFF" for white). You can also send me email if you want to learn more about this representation.