This lab will gave you a chance to try your hand at writing conditionals in a number of different settings. The text will orient you about where your conditional should be placed. Before you actually write the conditional, you need to decide two things: (1) what circumstance should activate the conditional (this will help you write the test), and (2) what should happen under such circumstances (this should help you to write the body).
Conditionals in Load-Time Scripts
The first set of exercises exercises ask you to put a conditional statement into a load-time script. These are typically scripts that appear within the <body> of the document.
- Exercise One: A Door Prize
- You want a "door prize" to appear occasionally when a page is loaded.
It should have a one in ten chance of showing up (10%). (Hint: write your test
using Math.random().) The body should cause an appropriate message
to appear, something like what's shown in the following paragraph. You should
put the two lines of script within a conditional that will make the message appear
only 10% of the time. You can test your script by repeatedly reloading the page;
make sure that the message appears with approximately the right frequency.
If you wish, you may add an else clause to your conditional informing the page visitor that she has not won a door prize.
- Exercise Two: A Seasonal Image
This time you want an image to appear within a page, based upon the season of the year. Here are the four images: spring, summer, autumn, winter. Recall that the Date object has a function called getMonth() that returns a number from 0 to 11 (i.e., 0 = January, 1 = February, ..., 11 = December). You want to write a conditional that will display the spring image in March, April, or May, summer image in June, July or August, etc. You should try it two ways: first as a compound if statment, and second (if you have time, and feel ambitious) as a switch statement. The <script> tags have already been set up for you below. Currently they only display one of the four images; you should change them so that the image displayed depends upon the season. (You should be able to test this out by changing the date setting on your computer.)
Conditionals in Functions
Of course, conditionals don't need to go just in load-time scripts. They can also be used within functions. For example, suppose that you wanted to choose a background color for your page based on the season, to match the image you chose above. Since this is a style property, a function can change it after the page has loaded. In fact, there is an event specifically designed for this purpose: the <body> tag has an onLoad event that is called as soon as the page has finished loading.
To make things a little simpler, an onLoad event handler has already been added to this page. It calls a function called setBackground(), defined in the page header. Find this function definition. You will notice that the body has been left empty; all you need to do is fill it in appropriately. Since we're basing things on the seasons again, you can copy one of the conditionals you wrote above. The same tests/cases can be reused; all you need to change is what happens (i.e., the body) for each possible branch. Make each one change the background to an appropriate color. You may use the values in the table below, or make up your own.
| Spring (#DDFFDD) | Summer (#FFFFDD) | Autumn (#FFDDBB) | Winter (#DDDDFF) |