Functions Exercises (and Answers!)

These exercises will help you become more comfortable with functions in JavaScript. Don't worry if you can't finish them all in the allotted time. The important thing is that you understand what you are doing and why you are doing it. Do not hesitate to ask Lisa or Catherine for help if you need it; that's what we're here for! Have fun, and good luck!

Note: The answers have now been posted. To see the answers for an exercise, click on the Answers! link, then view the source of the page. (Go to Netscape's View menu and choose Page Source.)

To get started:

The exercises:

  1. Open ~/projects/Functions/functions1.html in XEmacs.
    This page should display images and print out a little message as the user clicks on buttons. All the necessary code is there. What you need to do is define the functions. Take a look at the comments (the lines that start with //). They'll tell you where each function begins and ends and what the function's name should be.

  2. Open ~/projects/Functions/functions2.html in XEmacs.
    In this exercise, you'll write one function that squares any number. How is this possible? Through parameters! Your square function should take a number as a parameter, square the number, and pop up an alert box with the number and the square of the number. If you're at all unclear on how parameters work, be sure to ask Catherine or Lisa to clarify, as parameters are a very important concept that you'll use constantly in programming.

  3. Open ~/projects/Functions/functions3.html in XEmacs.
    If you couldn't use parameters, how would you have written exercise #2? Well, you would have had to write twelve separate functions, each of which squared a different number between 1 and 12. Clearly, parameters cut down on the amount of typing you had to do. You could have saved some typing in exercise #1 as well by using parameters. Note that the code for showFlower(), showTree(), and showText() is virtually the same. Each changes the src of document.images[0] to something and the value of document.statusForm.statusText to something. See if you can write one function to replace these three. Remember to edit the onClick attribute of the three buttons in the HTML page so it points to your new function.

  4. Open ~/projects/Functions/functions4.html in XEmacs. Make sure you understand how the document.images array works before beginning this exercise.
    This HTML page has three images of "unbloomed" flowers. You want to write one JavaScript function that makes a flower bloom when the user clicks on it. You'll have to edit the <A HREF="javascript:"> for each flower, putting the name of your function after the javascript:. You can find an image of a bloomed flower in flower.gif.

  5. Open ~/projects/Functions/functions5.html in XEmacs.
    In this exercise, you'll begin working with functions that return values. You'll extend your HTML page from exercise #4 so that, in addition to making a flower bloom when the user clicks on it, the user can also choose to make a random flower bloom. (The flower that is randomly picked to bloom may already have bloomed, but this is OK.) Be sure to read the comments in the program to see what Lisa and Catherine have provided for you and what you need to do yourself. Ask Lisa or Catherine to clarify return values if you're confused. Like parameters, this is another very important concept.

  6. Open ~/projects/Functions/functions6.html in XEmacs.
    In this exercise, you'll extend your HTML page from exercise #2 that squared numbers between 1 and 12 so that it can square a random number as well. You have four functions to write for this exercise. Make sure that you read the comments (in between the /** and the */) very carefully.