Multiple
functions
You often need more than one function to write powerful scripts. A function
is called and that function utilizes other functions.
Here is an example...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function SayHi()
{
GetName();
alert("Hello " + myname);
}
function GetName()
{
myname = prompt("What's your name?", "");
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:SayHi()">Click here</A>
</BODY>
</HTML>
Try it.
See what's happening here? The link calls SayHi() which in turn calls GetName().
After GetName() executes, control goes back to SayHi() and the alert box pops
up.
Now, there's an important rule that you should know about... a variable declared
within a function is only available in that function. A variable declared outside
of and before any function is available anywhere.
But, if you look at the function GetName(), you'll see the variable myname is
declared, yet it is still used in the function SayHi() in the alert command.
How is that? Well, we didn't exactly "declare" myname... we just used
it. To actually declare a variable somewhere, you must preceed it with "var".
To see the difference, alter the above example by declaring the variable myname
within GetName()...
var myname = prompt("What's your name?", "");
Try it.
Kinda sorta don't work,
right? So why did it work before? Because without an actual declaration using
"var", the script just assumes it's a global variable (a global variable
is a variable available anywhere).
So, why is this important? Why not make ALL variables global? Well, when you
get into larger scripts, you'd have to be very careful naming your variables.
Actually, you CAN make all variables global. We've been doing it all along.
We just have a choice now. You could use a variable named "name" in
ten different functions without the script confusing them, or inadvertantly
changing their values.
All this talk about multiple functions and golobal vs local variables leads
up to a very important concept... reusability. A reusable function is a function
that performs a specific task, and is portable to many applications. You write
a little snippet that does a certain something and whenever you need that certain
something done, you just toss in the function and use it like a little tool.
There's a little piece of reusable code that I reuse all the time. It's my random
number generator...
// Random number generator. If max=3 then function returns
1,2 or 3
function getRandom(max) {return (Math.floor(Math.random()*max))+1;}
(It's condensed into one line for ease of use.)
Whenever I want a random number between 1 and something, I simply call getRandom(something).
(Needless to say I place this snippet somewhere in the script, usually at or
near the top.) If I want a random number between 1 and 100 I call getRandom(100).
Remember a while back we talked about prompt boxes returning a value? Well I
made this particular function do just that. Notice the "return" statement?
This function is written to return the random number. It doesn't just generate
the random number, it actually sends it back to whatever called it.
Consider the following...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
// Random number generator. If max=3 then function returns 1,2 or 3
function getRandom(max) {return (Math.floor(Math.random()*max))+1;}
function GetNumber()
{
mynumber = getRandom(10);
alert(mynumber);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:GetNumber()">Click here</A>
</BODY>
</HTML>
Try it.
mynumber equals what the function returns. The function returns a random number
between 1 and 10, so mynumber equals a random number between 1 and 10.
Understand this concept before you move on
| Next>> | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||