Javascript Function
Defining a Function
When defining a function, it is
very important that you pay close
attention to the syntax. Unlike
HTML, JavaScript is case
sensitive, and it is very
important to remember to enclose a
function within curly braces { },
separate parameters with commas,
and use a semi-colon at the end of
your line of code.
It's important to understand
the difference between defining
and calling a function.
Defining the function names the
function and specifies what to do
when the function is called. You
define a function within the
<SCRIPT>...</SCRIPT> tags within
the <HEAD>...</HEAD> tags. In
defining a function, you must also
declare the variables which you
will be calling in that function.
Here's an example of defining a
function:
function popupalert() {
alert('This is an alert box.');
}
Notice the parentheses after
the function name. It is
imperative that you include these
parentheses, even if they are
empty. If you want to pass a
parameter into the function, you
would include that parameter
inside of the parentheses. A
parameter is a bit of extra
information that cn be different
each time the function is run. It
is stored in a variable and can be
accessed just like any other
variable. Here's an example of a
function that takes a parameter:
function anotherAlert(word) {
alert(word + ' is the word that
you clicked on');
}
When you call this function, you
need to pass a parameter (such as
the word that the user clicked on)
into the function. Then the
function can use this information.
You can pass in a different word
as a parameter each time you call
the function, and the alert box
will change appropriately. You'll
see how to pass a parameter a
little later on.
You can pass in multiple
parameters, by separating them
with a comma. You would want to
pass in a few parameters if you
have more than one variable that
you either want to change or use
in your function. Here are two
examples of passing in multiple
parameters when you are defining
the function:
function
secondAlert(word,password) {
confirm(word + ' is the word that
you clicked on. The
secret password is ' + password);
}
function thirdAlert(word,password)
{
confirm(word + ' is the word you
clicked on. Please
take note of the password, ' +
password);
}
You'll notice that the same
parameters are passed into both of
these functions. However, you can
pass in whatever values you want
to use (see this same example
below in
calling the function).
Calling a
Function
Calling the function actually
performs the specified actions.
When you call a function, this is
usually within the BODY of the
HTML page, and you usually pass a
parameter into the function. A
parameter is a variable from
outside of the defined function on
which the function will act.
Here's an example of calling the
same function:
popupalert();
For the other example, this is
how you may call it:
<A HREF="#top" onClick="anotherAlert('top')">top</A>
This would bring you to the top of
the page, and bring up an alert
box that said: "top is the word
you clicked on" Try it for
yourself: top
Here is the
same example with multiple
parameters that was shown
above:
<A HREF="#top" onClick="secondAlert('awesome','pandas')">awesome</A>
<A HREF="#top" onClick="thirdAlert('computers','insert')">computers</A>
You'll notice in the code that
different values for the variables
word and password are passed in.
These values here are what the
function will need to perform the
actions in the function. Make sure
that the values you pass in are in
the correct order because the
function will take them in and
assign these values to the
parameters in the parentheses of
the function declaration. Once you
pass values into your function,
you can use them however you want
within your function.
Try it for yourself:
When you click on the words
below, a confirmation box will pop
up and then the link will bring
you to the top of the page.
awesome
computers
| 
