| |
|
Why Functions
If the same block of code is used for many times within a program, then that block of code is inserted into a function and that function is called wherever it is required. Functions have the following advantages
1) reduces the size of the code
2) helps in testing and maintainance of code, as you know that if the function runs correctly then all the places fron which the function has been called will give correct output. You don't have to test it every time.
A function starts with the keyword "function" then the name of the function. The code of the function is put inside two curly braces.Following is a prototype of function.
function function_name(){
// your code goes here;
//
}
Function Example
The simplest type of function can look like this
<script language="javascript">
function myAlert(){
window.alert("This is a test function");
}
</script>
As you can understand the name of the function is "myAlert" , and the sole purpose of the function is to display an alertbox when called.
now, the big question is from where the function should be called. Normally , a function is called from any event of an HTML page or controls like buttons, textbox etc. To get a better understanding of the events you can check the events tutorial of our site.
So, lets create an HTML which will call the above JavaScript code.
<body>
<form name="form1" method="post" action="">
<input type="button" value="click" onClick="myAlert()">
</form>
</body>
So , the full code will look like this
<html>
<head><script language=javascript>
function myAlert(){
window.alert("This is a test function");
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="button" value="click" onClick="myAlert()">
</form>
</body>
</html>
Parameters :
The above function always shows same message whenever you call it. Suppose, you want to change the message each time you call it. At this situation , you have to tell the fuction that which message you want to it to dispaly. You can do that by passing your desired message to the function through parameters.
Example functions with parameters :
<script language=javascript>
function myAlert( param){
window.alert(param);
}
</script>
You can see there is a variable named "param" between the two braces. That is the parameter of the function . you can pass values to a function through the functions parameters.
The code to call the functions will be
<body>
<form name="form1" method="post" action="">
<input name="button1" type="button" onClick="myAlert('First Button')" value="First Button">
<input name="button2" type="button" onClick="myAlert('Second Button')" value="Second Button">
</form>
</body>
Here, you can see while calling the functions "myAlert" , first it is called with the value 'First Button', so here inside the function, the value of "param" becomes 'First Button'. When the function is called with the value 'Second Button', the value of the 'param' becomes 'Second Button'.
Returning values from function: A function can return values from it with the statement
return return_value;
<html>
<body>
<script language=javascript>
function add( param1,param2){
var result = param1 + param2;
return result; // return the result
}
var x;
x=add(10,20);
document.write(x);
document.write("<br>");
x=add(40,50);
document.write(x);
</script>
</body>
</html>
In the above example , the function "add" is adding the two values 'param1' and param2' and putting it in variable 'result'. Then it is returned using the statement "return result". The varable "x" receives this value.
So , that's it . Hope you have enjoyed the tutorial. Thank You.
Back to Tutorial Index page
Your comments are most welcome admin@koderguru.com
|
|
|
