Functions pack JavaScript statements in a block that can be used over and over again. Any programming language worth its salt allows coders to define and call functions.
What are javaScript functions? – An example
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT"> <!-- function alert_box() { alert("I am displayed by a function"); document.bgColor="#EEEEEE"; } //--> </SCRIPT>
A function consists of the function keyword, the name of the function followed by a pair of parenthesis and lastly, the JavaScript statement/s enclosed by curly braces.
You can give any name to the function as long as it is not a JavaScript reserved keyword. (The list of reserved keywords can be found here.)
The function name can contain only alphanumeric characters (alphabet and digits) and the underscore. Also, the name cannot begin with a numeral.
Some valid function names
- display_alert_box
- calculate
- _make_love_not_war
- average1
Some invalid function names
- @whats_up_doc – (uses an invalid character)
- 123calc – (function name cannot begin with a numeral)
Remember, function names are case sensitive, thus, alert_box is not the same as Alert_box.
The function block can contain several JavaScript statements enclosed between the curly braces.
The function in itself does not do anything till we call it.
Calling functions
Calling a function is simple. You have to specify its name followed by the pair of parenthesis.
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT"> <!-- alert_box(); //--> </SCRIPT>
It’s good programming practice to place all functions in the HEAD section of the HTML document between the <SCRIPT> – </SCRIPT> tags. Function calls, on the other hand, can occur in any part of the document (where ever they are needed!), even inside event handler code.
Using a function call inside event handler code
The code below, calls the function we defined at the beginning of this session. This time we call it thru the onclick() event handler.
<A HREF="javascript:void(0)" onclick="alert_box()"> Function called thru an event handler</A>
You’ll notice that a function call looks very similar to calling a method. Now, wasn’t that simple?
Opening a new window through a function
In the previous session, our event handler code for opening a new window had become very long. So instead of writing the code in the HTML tag, we shall place it inside a function and call this function from the event handler.
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT"> <!-- function open_win() { window.open('welcome.html','welcome','width=300,height=200, menubar=yes,status=yes,location=yes, toolbar=yes,scrollbars=yes'); } //--> </SCRIPT>
Note: the entire JavaScript code should be placed on a single line. For clarity, I have put the code on multiple lines.
We name this function open_win and place it in the HTML head section.
<A HREF="javascript:void(0)" onclick="open_win()"> Get a welcome message</A>
Really appreciating functions
What if you had ten links on a page each opening a new 400X200 pixel window with a different url? Writing separate code for each link can become quite a pain. A simple solution would be to create a function that opens the new window and call it through an event handler. However, we are still left with a problem! How do we instruct the same function to load a different url in each new window? Before we delve deeper into functions let us have a look at variables.