JavaScript : Defining Functions

Functions

In all programming and scripting language, a function is a block of statements that can be used as many times as needed during the running of the script.

Syntax

function functionname( parameter1, parameter2,......parametern)
{
statement(s)
}

Elements of a function

function : A function declaration starts with 'function' keyword and the word function must be written in lowercase letters.

functionname :
The rules for naming a function are similar to those for naming a variable, i.e. the first character must be a letter; the rest of the characters can include letters, numbers, dashes, and underscores. Spaces and other characters are not allowed.

parameter1, parameter2,......parametern : A list of arguments to the function, enclosed in parentheses and separated by commas.

statement(s) : The function body enclosed within a pair of braces which may contain the JavaScript statements. The opening curly brace ( { ) indicates the beginning of the function code and the closing curly ( } ) brace indicates the termination of the function.

Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark andsubscribe with our Feed. Have suggestions? comment using Disqus down this page. Thanks.

JavaScript : Calling Functions

Calling Functions

We have already learned how to define a function. Defining a function simply names the function and specifies what to do when the function is called.

Calling the function actually executes the instructions written within the function with the indicated parameters.

The arguments of a function are not limited to strings and numbers, you can pass whole objects to a function.

For example, a function called cube could call as follows.

cube()

How to use a function in a web document ?

function myfunction( )

{

document.write ("Good Morning......");

}

</script>

</head>

<body>

myfunction();

</script>
</body>
</html>

Example of a JavaScript function

The following web document accept a number from the user and the function cube() returns the cube of the number.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript: sample function.</title>
</head>
<body>
<h1 style="color: red">JavaScript simple function example</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function cube()
{
n=document.form1.text1.value;
result = n*n*n;
alert(" Cube of "+n+" = "+result);
}
//]]>
</script>
<form name="form1" action="#">
Input a number :
<input type="text" name="text1" size="5" />
<br />
<input type="button" value="Result" onclick="cube()" />
</form>
</body>
</html>

View the example in the browser

Online practice editor

Example of a JavaScript Recursive function

A function can even be recursive, that is the function can call itself. The following web document accept a number and computes factorials :

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript: Recursive function.</title>
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function factorial(n)
{
if ((n==0) || (n==1))
return 1;
else
facn = (n * factorial(n-1))
return facn;
}
//]]>
</script>
</head>
<body>
<h1 style="color: red">JavaScript Recursive function example</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function factcal()
{
n=document.form1.text1.value;
result = factorial(n);
alert(" Factorial of "+n+" = "+result);
}
//]]>
</script>
<form name="form1" action="#">
Input a number :
<input type="text" name="text1" size="5" />
<br />
<input type="button" value="Result" onclick="factcal()" />
</form>
</body>
</html>

Pages

Thursday 28 February 2013

JavaScript Functions