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.)
bridge_install functions in an xterm. The files will
be installed in /u/[your user
name]/projects/functions.
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.
Answers!
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.
Answers!
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.
Answers!
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.
Answers!
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.
Answers!
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.
Answers!
