In this section of the JavaScript Diaries, we’ll look at JavaScript functions.
These help us to write more intricate programs, allowing us to accomplish more.
If you have any questions or suggestions, feel free to
Remember, we’re in this together. Also, be sure to visit the JavaScript forums. Looking over some of the posts and analyzing the different aspects of writing scripts helps to gain a better understanding, especially as you gain more knowledge of the language. Now, on to our next lesson …
JavaScript Functions
A function
is a set of statements used to perform a specific task. Whenever a function
is needed, it’s “called” from somewhere within the script or from within the
page itself. Functions organize scripts into different sections — you
can think of them as “subscripts” or “subroutines” — to be used within
the overall script. Just as a variable is a “data container,” a function is
a “code container.” It’s actually a “self-contained process.” When you create
a function, you are in fact, creating a new JavaScript command that can be called
from anywhere within the script.
Writing Functions
Like a variable, a function must be declared first in order to use it. This
is done by using the reserved word function
, followed by the name
of the function and a pair of parentheses, for example function giveName()
.
(Do not end the line with a semi-colon.) This is then followed by a pair of
curly brackets ( “{ }
” ) which contain the actual code that will
be executed when the function is called. (Do not put a semi-colon after the
closing curly bracket either; each line within the curly brackets will end with
a semi-colon.) The formatting of the curly brackets is really a matter of preference.
The two formats used most are shown below (we’ll be using the first one):
function giveName() { code goes here; code goes here; } function giveName() { code goes here; code goes here; }
Naming Rules
Function names follow the same rules as variables:
|
Calling a Function
Until it is “called,” a function merely stores code. To call a function, list
the function name followed by a pair of parentheses and a semi colon, such as
giveName();
.
A function call can be placed anywhere on the Web page — in the <head>
section within the script or in the <body>
section. It can also
be placed in an external file. If it is called within the <body>
tag, it must be enclosed within script tags just like a regular script; otherwise
the JavaScript interpreter will see it as regular text and not execute it. A
function can even be called from within another function, but the code must
first be loaded into memory in order for it to be used.
Calling a function from within the <head>
:
<script type="text/javascript"> <!-- function readyMessage() { alert("Are you ready for this?"); } readyMessage(); //--> </script>
Calling a function from within the <body>
:
<script type="text/javascript"> <!-- readyMessage(); //--> </script>
It’s important to remember that no matter where the function itself is actually
located, it will not execute until it is called. The function must be loaded
into memory in order for it to be called so it must be located before the actual
calling statement, even if it is run from within the function itself. It’s like
a software program on your computer. You already have the code loaded on your
hard drive but in order for it to run it has to be “called,” otherwise it just
sits there and doesn’t do anything.