Just like other programming languages functions or methods are also a part of javaScript, Using functions or methods in javaScript give us ability to make our code reusable and more readable and understand easy. JavaScript Function of JavaScript method is a block of code which we write to do some specific tasks. Let’s say we want to plus and minus multiple values user send to our website and show them the result. We will create a javaScript function which takes 3 values 2 are numbers which have to be plus each other and third is mathematical operator plus or minus. Then we do this calculation inside function and then return a value with answer.
Types of Functions in JavaScript.
There are three types of JavaSCript functions first is that take arguments second is return some value after all tasks and thirs is which do not return anything and do not take any argument.
JavaScript method takes arguments.
As i said above a function which takes 3 values 2 are number which have to be added in each other or subtract from each other and third is mathematical operator. These values are actually arguments of function and such functions need arguments to perform their tasks. Always keep in mind if our function is taking any argument then while we are calling function we have to send values else this will produce an error. Arguments in function declaration works like variables and we can use them with same name as declaration in function inside function.
JavaScript function returns value.
Sometime we need to return a value from our function after all tasks completion in function. Let’s say we are calculating some values inside our function then we have to return answer from function after completion of values. We can catch this value in a variable like var totalSum = calculate_func(11, -, 33);
JavaScript function takes no argument returns no value.
Sometime we need a function just to do something but not to return anything and not to take any argument. Let’s say we are using a fucntion to submit a form we will call that function on a form submit button or link click and submit that form via function by form’s name. That’s it. We can use such methods in javaScript to change background colors, images, redirecting to other pages and many more things.
How to declare a javaScript Function.
To declare a javaScript function we use function in start of function then function name and then two brackets () and after that middle brackets for its method or code block. {} function my_function(argu_1, argu_2) { alert(“Code block!”); }
Examples of JavaScript functions.
[code lang=”js”]
<script type="text/javascript">
/*JavaScript Function takes no value returns nothing.*/
function say_name() {
alert("I am saying your Name!");
}
//javaScript function that takes arguments.
function calculator(num_1, operator, num_2) {
num_one = parseInt(num_1); //First number converting to integer.
num_two = parseInt(num_2); //Second Number converting to integer.
//Third argument is a symbol and that can be in string as well.
//checking if operator is plus or minus
if(operator == ‘+’) {
sum = num_one+num_two;
} else if(operator == ‘-‘) {
sum = num_one-num_two;
} else {
alert("Sorry only + and – are allowed.");
}
//now we can write this value inside a sum div which have id sum #id <div id="sum">
document.getElementById("sum").innerHTML;
}
//JavaScript Function takes argument and returns a value.
function validate(name) {
var your_name = name;
//Checking if you are aTeeq or not.
if(you_name == ‘Ateeq’) {
ret_val = "Hey how you doing!";
} else {
ret_val = "Who are you i dont know you! :(";
}
//returning value weather you are ateeq or not.
return ret_val; //returning a variable. that saves our desired value.
}
</script>
[/code]
Calling JavaScript Functions
To call javaScript methods or functions this is very simple if you want to call that inside html document you can call them by their name but inside <script type=”text/javaScript”></script> but if you have to call in attributes of images text fields text areas like onclick, onfocus, onhover, onblur and other you can just write function names that will be called automatically.
Calling No argument no return fucntion.
This is the simplest function to call we just have to write its name no need to pass anything no need to get return anything and worry about that just call it anywhere you need.
Calling function with arguments.
To call a function which is receiving arguments you have to send arguments during its call. like my_name(“Ateeq”);.
Calling function takes arguments and return value.
The functions which return some value usually we do not use them inside html attributes like onclick, onfocus, onblur, onhover etc cause there we have no place to catch their value, The functions which returns something we declare a variable to catch their value and save it in like this function which takes an argument and returns name. var your_name = my_name(“Ateeq”);.
Examples of javaScript functions call.
[code lang=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
//calling function without arguments and return anything.
say_myname();
//calling function takes arguments.
calculator(22, ‘+’, 43);
//return function and taking argument.
var your_name = validate("Sadaf");
</script>
</head>
<body>
<div id="sum"><!–javaSCript will calculate here.–></div>
<a href="" onclick="say_myname();">on click i will call say_myname(); function</a>
<input type="text" onchange="say_myname()" /><!–onchange this field will call a function–>
So on.
</body>
</html>
[/code]