# 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:

• Lisa and Catherine have prepared some template files and images that you can use in these exercises. You'll need to copy these files over before you begin working. To do this, simply type `bridge_install functions` in an xterm. The files will be installed in ```/u/[your user name]/projects/functions```.

• If you'd like to brush up on JavaScript functions, take a look at the JavaScript tutorial.

## 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.
6. Open `~/projects/Functions/functions6.html` in XEmacs.