Functions are blocks of code that execute only when you call them. JavaScript features a wide range of useful built-in functions for common tasks, like mathematical calculations. You can write your own functions to create actions customized to your web page. Functions can be called from anywhere in your web page, including from other functions, letting you simplify your code by creating functions to do repetitive tasks.
Using Functions
Functions are used by "calling" them. Function calls have three basic components: the function name, the parameter list, and the return value. If the function takes parameters, the values passed in as parameters are listed in parentheses after the function name. If the function returns a value, it can be used like any other value, such as assigning it to a variable or used in a calculation.
In the following example, a built-in function named parseFloat that takes one value as parameters, and returns a value that is assigned the variable "val":
var val = parseFloat("16.0");
If a function does not take parameters, the function name is followed by empty parentheses. This example assigns the return value from the built-in Math library random function to the variable "val2":
var val2 = Math.random();
Functions don't always return a value. In that case, simply call the function. For example, this built-in function pops up an alert box with the message "Hello!":
alert("Hello!");
Writing and Using Your Own Functions
Functions are generally defined inside the script tag in the header of your web page. Define a function using the keyword "function" followed by the function name, the parameter list, and the code you want executed inside curly brackets. The following example is the definition for a function called "multiply" that takes two parameters "x" and "y" and returns the product:
function multiply (x, y)
return x * y;
Use the multiply function by passing two numbers as parameters, and doing something with the return value. For example, you can assign the return value to a variable:
var val1 = multiply (4, 9);
pass the return value to another function
var val2 = Mat.sqrt(multiply (4, 9));
or write it out into your web page by passing it to the document.write function:
document.write (multiply (4, 9)) ;
Using Functions in Your Web Page
Use the document.write function to write out the result of your function into your web page, with the code enclosed in script tags. For example:
You can use functions to cause actions to happen when an event occurs, such as a mouse click. HTML has several event attributes that can be used with nearly all HTML tags, including onclick, onmousedown, onkeypress, and onfocus to name a few. Additionally, the body tag has a special event, onload, that can be used to call a function when the page finishes loading in the browser.
In this example, when the following example web page loads, the body's onload attribute triggers the function that calculates the lottery numbers. When the user clicks the text, the p tag's onclick attribute triggers the getLotteryNumbers function, and an alert box pops up to tell her the lottery numbers. Note other things you have learned at work in this example, such as functions calling functions and functions used in calculations.
JavaScript Functions
Click here to get your lottery numbers!
