Lesson 13: Function Part 1

❮ Previous Lesson Next Lesson ❯

What is a function in JavaScript? A JavaScript function is a type of program that can be called from the main JavaScript program to perform certain tasks. We can also define a function as a module of the main JavaScript program. A professionally written JavaScript program usually consists of numerous functions. It is easier to construct, debug and maintain a large program that makes up of smaller modules, because the programmer needs only debug a module or modules if certain errors occur, instead of having to search for the whole program and trying to locate the error code.

There are two kinds of functions in JavaScript, the built-in functions, and the user-defined functions. Built-in functions are also known as methods that are tied to certain objects. For example, functions that are tied to the Math object are round, pow and more. There are also string manipulation functions, date and time functions and many more, please refer to our previous lessons for more information on these functions.

13.2 Creating User-Defined Functions

To create a JavaScript function, You can declare the variables by listing them within parentheses after the function name. These variables are also known as parameters. They are also known as the local variable, which means that they are known only in the function in which they are defined. When we pass values to the parameters, they are called arguments. After creating a function, you can call the function by using its name followed by the parentheses and the arguments within the parentheses.

The syntax of a function is:

function   NameOfFuntion(parameter1, parameter2, parameter3,......)

{Statements}

For example, you can write a simple welcoming message function as follows:

function Message()

{ alert("Welcome to JavaScript Function")

However, you need to create an event to call the function. Here I will show you how to create a click event. You can use the code as follow:

<form>
<input type="button" onclick="Message()" value="View Message">
</form>

The complete program is shown in Example 13.1

Example 13.1


<script>

function Message()
{ alert("Welcome to JavaScript Function"); }

</script>

Click on the "View Message" button to view the output.

Here is another example. In this example, we create a financial calculator that calculates the future value of a present sum invested for a number of years compounded on a certain annual interest rate. In this program, we create the FV() function that can be called to perform the calculation.

Let's use the function name FV to denote Future Value and use the parameters PV to denote present value, n to denote the number of years and r to denotes annual interest rate in percentage form. The formula to calculate the future value is

FV=PV(1+r/100)ⁿ

The function written in JavaScript is shown below

function FV(PV, n, r)
{ FV=PV*Math.pow(1+r/100, n):

The fully functional future value calculator is shown in Example 13.2.

Example 13.2

<html>

<script>function FV(){
PV=window.prompt( "Enter the present value:", "0" );
n=window.prompt( "Enter number of years :", "0" );
r=window.prompt( "Enter the annual rate:", "0" );

 FV=PV*Math.pow(1+r/100, n);

var fv=FV.toFixed(2);
document.getElementById('ans').textContent=fv; }

</script>

Click on the "Calculate" button to calculate the future value.

The Future Value is:

Check out a more sophisticated future value calculator here

❮ Previous Lesson Next Lesson ❯