Prev
Home
Next
Menu

JS Functions

A JS function is a reusable code-block that is executed by an event, or when the function gets called. To keep the browser from executing a script when the page loads, we can put our script into a function. A function contains code that will be executed by an event or by a call to that function.

We may call a function from anywhere within the web page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the <head> and in the <body> section of a document. However, to ensure that the function is loaded by the web browser before it is called, it could be wise to place it into the <head> section.

A function in JS is created using the “function” keyword. The syntax for creating a function is:

function function_name(var1, var2,..., varN) 
{  
   code statements
}

Here, var1, var2, etc. are the parameters passed into the function. The curly braces (i.e. { } ) define the start and end of the function. The body of the function contains code statements.

Note: A function with no parameters must include the parentheses () after the function name:

function function_name() 
{      
   code statements 
}
 
Scope and Lifetime of JS Variables within Functions

When we declare a variable within a function, the variable can only be accessed within that function. When we exit the function, the variable is destroyed. These variables are called local variables. We can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. If we declare a variable outside a function, all the functions on our page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

 

Function Examples

Following are the different types of examples of functions in JS.

1. Function with no parameter
<html>
<head>
<script type="text/javascript">
//Function with no argument
function disp_msg()
{
   document.write("Hello World!");
}
</script>
</head>
<body>
<form>
  <input type="button" value="Click me!" onclick="disp_msg()">
</form>
</body>
</html>

If the line: document.write(“Hello world!!”) in the example above had not been put within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before the user hits the button. We have added an onclick event to the button that will execute the function disp_msg() when the button is clicked.

 
2. Function with parameters
<html>
<head>
<script type="text/javascript">
//Function with no argument
function disp_msg(text)
{
   document.write(text);
}
</script>
</head>
<body>
<form>
  <input type="button" value="Click me!" onclick="disp_msg('Hello World!')">
</form>
​<p>By pressing the button, a function with an argument 
will be called. The function will display some message.</p>
</body>
</html>
 
3. Function that returns a value
<html>
<head>
<script type="text/javascript">
function myFunction()
{
	return ("Hello, have a nice day!");
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
 
4. Function with parameters and that returns a value
<html>
<head>
<script type="text/javascript">
function product(a, b)
{
	return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
	document.write(product(6, 4));
</script>
<p>The script in the body section calls a function with two parameters (6 and 4).</p>
<p>The function will return the product of these two parameters.</p>
</body>
</html>

 

 

Prev
Home
Next