Unlike many programming languages, JavaScript can be written in bits and pieces. It may be interspersed with HTML code on a web page so long as the JavaScript conforms to its own programming language rules. Here is what this part of the tutorial covers:
- Using/Calling functions
- How to make your own functions
Using/Calling functions
When you call a function, the browser runs the lines of code in the function. Whether the function is built-in or one you made, call it in your program by typing the function's name. A function name always includes a pair of parenthesis at the end. There might or might not be something between the parenthesis. If you want to send data to a function when you call it, put the data between the parenthesis. For example,
alert("Hello everybody!")
is a function call that displays an alert box proclaiming: Hello everybody!
If there is more than one unit of data to send to the function, separate them with commas. (A unit of data can be either a number or a string of characters, the latter being enclosed between single or double quotes and being called a "string" in most programming languages with which I am familiar. If you send more data units than the function will use, the excess is ignored. The alert() function expects only one data unit. So sending more than one, such as
alert("Hello everybody!","extra")
will cause only the first unit to be displayed in an alert box: Hello everybody!
On the other hand, if the units of data you send to a function numbers less than the function expects, the function will assume the rest is undefined. Trying to do calculations with something undefined usually produces an error message. Printing something that is undefined will usually produce the word "undefined". For example,
alert();
will display an alert box with: undefined To find out how many units of data a built-in function expects
to receive, you can consult documentation or emulate how someone else used it. The first method is more certain to be correct while the latter may be faster with sufficient certainty for the job at hand.
How to make your own functions
Here is a function template:
function blahblah() {
alert("This is function blahblah() speaking!");
}
The first line of functions you create must contain the word "function", a space, and then the name you assign to your function. The open curly brace character can follow on the same line or be placed on the line following. Below the open curly brace is the function body, those lines of program code that will be run when the function is called.
Immediately below the function body is a close curly brace. In the above example, the function name is: blahblah() The function body between the open and close curly braces in the example is composed of one line which calls a built-in function. So when you call blahblah() an alert box appears with: This is function blahblah() speaking!
You can call your function blahblah() from an HTML anchor link such as:
click here
(Notice how the browser is told it is a link to a JavaScript function rather than to a regular URL.)
Or, you can call your function with a form button such as:
(Because the word "onClick" is JavaScript code, the browser knows blahblah() is a JavaScript function -- and when it doesn't find a built-in function by that name it looks for one
you created.) Your functions can call built-in functions and they can call functions you make. Example:
function example() {
alert('Here!');
blahblah();
alert('Back to you...');
}
When you call the example() function, it first displays an alert box with: Here! then it calls your blahblah() function which displays an alert box with: This is function blahblah() speaking! and after that, it displays an alert box with: Back to you...
The ability to call other functions from within functions that you create is highly advantageous.
Consider that your program might have a dozen or so functions, most of which require a specific action as part of their larger purpose. Let's say that action is calculating the number of milliseconds that have elapsed since the visitor arrived at your page.
So you make a function to do the calculation, called elapsedmilliseconds(). Now, instead of writing the code to do the calculation in each of your other dozen functions, you just call the elapsedmilliseconds() function where appropriate.
