A function is a process that incorporates a sequence of java script statement to accomplish a task. To integrate a function into document you have to first define it within a SCRIPT, which is contained in the in the head element. Then you have to call function. Calling the function can be accomplished in several ways, including the ability to call a function from within another function. In many instances function is called as the value of an event handler of an HTML element, which is called attribute assignment. The simplest way to call a function is to use it by name as statement. You can use the return statement to return a value with a function. It’s usually a good idea to define functions in the head of document so that functions are loaded first, before any of the HTML elements in the body have loaded. This precludes the generation of many java script runtime errors due to a script in one part of document trying to interact with another script that hasn’t loaded yet. This occurs when the user tries to click a button object before the page fully loads, and button needs that unloaded code before it will work. Since that required code hasn’t loaded yet, you get a runtime error. There are exceptions to HEAD Scripts.
Defining a function with function statement
Defining a function starts by using function keywords, which is followed by the name of function and then a comma-separated list of arguments that are enclosed within parentheses. You can define a function that takes no arguments, but you still have to include the parentheses. Next comes a sequence of Statements that are semicolon separated and enclosed within curly braces {}. The following function setColor() takes no Argument and sets the background color to blue when it is called.
Function setColor()
{
document.bgcolor=”blue”;
}
Syntax:
Function functionName(argument1, argument 2,………,argument)
{
Statement 1;
Statement 2;
}
Calling a function by attribute assignment
Defining a function is the first step in getting a function to execute its Statements. Next you have to call function within a SCRIIPT or you have to assign it to an event handler of an html element, which is shown in the following example:
To start the process for this scenario you could code previously defined setColor() function so that it was more useful by adding a color Argument to it like this.
Function setColor(color)
{
Document.bgcolor=color;
}
So that when setColor() function is called, background will be changed to color argument that is provided at that time, which can be different each time function is called. For instance, suppose you define three button Objects that each have setColor() function assigned to its respective onClick Event Handler, like this:
<input type=”button” value=”red it” onClick=”setColor(‘red’);”>
<input type=”button” value=”blue it” onClick=”setColor(‘blue’);”>
<input type=”button” value=”green it” onClick=”setColor(‘green’);”>
Then, if the user clicks on the first button, setColor() function uses String ‘red’ as the color argument to change the background color to red. If the user clicks on the second Button, the onClick Event Handler uses the same setColor() function but has a different String value to provide as the color argument so that the background color gets changed to blue. The same is true for the button with ‘green’ as the color argument.