CS110Introductionsyllabusassignmentsdocumentationproject

Javascript Conditionals

This assignment gives you practice with:
  1. Javascript conditionals.
  2. Javascript Date objects, and some of the methods defined on them, like getDay() and getHours().
Some material that may be helpful:
  1. Lecture on Javascript conditionals
  2. Lecture on the Date object, and a good on-line reference, and
  3. Lab exercises on JavaScript conditionals

How to submit this assignment

For this assignment:
  • Create a folder hw5 within your protected folder.
  • Create a subfolder graphics in the hw5 folder, and upload your graphics files there.
  • Make a page assign5.html in hw5. There must be an HTML comment at the top of assign5.html indicating the author and date the page was written, something like this:
    FILE NAME: assign5.html
    WRITTEN BY: Wendy Wellesley
    WHEN: March 12, 2008

    Write the solution for this problem in file assign5.html. Also, add a sentence to tell us how many hours you spent working on this assignment.
  • Write your Javascript code clearly. The clarity of your code will be graded. Be sure to test your page on both Macs (Safari/Firefox) and PCs (Internet Explorer)! Work on your JavaScript incrementally.  Get one small piece to work at a time, instead of writing the whole program and trying to debug it.

  • Upload all the relevant files into folder hw5. As always, you need to test and make sure everything works properly from the server.

Using the Date Object to Vary Images

Your basic task will be to make images on your page change automatically depending on what time of the week it is.

You will use three distinct images (GIF or JPEG), each less than 100K. The pictures should depict in some way:

  1. studying,
  2. relaxing, and
  3. sleeping.
The images are entirely your choice: you may download them from the web or your digital camera, scan them, or create them in Fireworks or some other graphics program.

Here are the requirements:

  • Display the day of the week and the current time on the page (including am or pm), e.g. Wednesday, 3:09pm.
  • The studying image must show on the web page when the web page is visited Monday through Friday during waking hours (starting at 8:00 AM up to but not including 11:00 PM). The relaxing image must show when the page is visited Friday starting at 11:00 PM, until Monday morning, up to but not including 3:00 AM. At all other times, the sleeping picture should appear.
  • The page must display the proper image for the time of week, with some caption/description for the shown image.
  • TEST your code to make sure it works as it should. Obviously, you cannot wait for the weekend to arrive, in order to verify that this assignment works correctly (because then, your assignment would be late)!

    Helpful Hint
    Here is a way to test your code (without staying up until 3:00am on Monday):

    You can set a variable that holds the appropriate information (like the day or time) to a certain value, as you need, from within your JavaScript program.

    Here is an example: 

    	var today = new Date();   /* this reads the computer's clock */
  
	var day_of_week = today.getDay();  /* day_of_week contains 0 - 6, 
				corresponding to Sunday through Saturday */
	 
	day_of_week = 0; /* sets the day to Sunday so you can test */

    Note that none of your other code will need to change while you test. When you are done testing your code, simply comment out the line that sets the day_of_week. Do not delete it, just comment it out; we want to see how you tested your code.

Have fun!

Back to the top of the page

Introduction | Syllabus | Assignments | Documentation | Project

Computer Science 110
Last Modified: March 2008