Javascript functions

A function is a segment of code grouped into a single entity. The great thing about functions is that you can re-use them. By doing so, you eliminate the need to re-type the same code over and over again. Once you implement a function, you can use its code by calling that function.

This lesson focuses on:

Creating functions
Using parameters
Calling functions
Returning values
Javascript's built-in functions
Variable scope

Creating functions

To create a function, use the function keyword, followed by the function name, followed by parentheses, followed by an opening brace and a closing brace. The lines of code which make up the function will go in between the braces.

Syntax:

function function_name(){
code for function goes here;
}

Example:

<script type="text/javascript">
function printMessage(){
document.write("Hello, this is a function");
}
</script>

NOTE: Functions should be specified in a script in the head section of an HTML document because a script placed in the head section of a webpage will be executed when it is called, or when certain events are triggered such as the clicking of a button or when a form is submitted.

Using parameters

Parameters are variables placed inside the parentheses of a function which are used by the code inside the function in some way. Parameters are separated by commas.

Syntax:

function function_name(param1, param2, etc.){ 
code for function goes here;
}

Example:

<script type="text/javascript">
function printMessage(name){
document.write("Hello " + name + "!");
}
</script>

This function takes a value supplied by its name parameter and prints a message on a webpage.

Calling functions

Once you create a function, how do you actually use it? You have to call the function.

To call a function, refer to the function name and pass the appropriate parameter values to it (if the function has any parameters).

Example:

<html>
<head>
<script type="text/javascript">
function subtract(num1, num2){
document.write(num1 - num2);
}
</script>
<title>Calling functions</title>
</head>
<body>
<script type="text/javascript">
subtract(10, 5);
</script>
</body>
</html>

This code declares a function in the head section of the document that will subtract one value from another value, and calls the function in the body section of the document.

Output of this code:

Returning values

Functions can be used to return values. By doing so, the function simply acts as a value after its code has been executed. This way, a variable can take the value of a function which returns a value.

To return a value from a function, the return keyword is used within the function.

Example:

<script type="text/javascript">
function add(num1, num2){
return num1 + num2;
}
</script>

In the above code, the function add(num1, num2) will return the value of the addition of its two parameters. Since this function returns a value, a variable can take its value.

Example:

<html>
<head>
<script type="text/javascript">
function add(num1, num2){
return num1 + num2;
}
</script>
<title>Calling functions</title>
</head>
<body>
<script type="text/javascript">
var additionResult = add(5, 2);
document.write(additionResult);
</script>
</body>
</html>

Output:

Javascript's built-in functions

Javascript has several built-in functions you can use for various purposes.

NOTE: Javascript's built-in functions are known as methods since they are part of an object definition.

Some of Javascript's built-in functions:

alert()

This function will display a message in an alert box.

Example:

<html>
<head>
<title>Displaying a message</title>
</head>
<body>
<input type="button" value="Click here for a message" 
onclick="alert('Javascript is cool!');"
</body>
</html>

Output:

Click on the button to receive a message in an alert box.

document.write()

This function will print some data on a webpage. You can include HTML tags within this function that will be included on a webpage as regular HTML.

Example:

<html>
<head>
<title>Printing data</title>
</head>
<body>
<script type="text/javascript">
document.write("Here is some text");
document.write("<br /><a href='http://www.yahoo.com'>
Go to Yahoo!</a>");
</script>
</body>
</html>

Output:

Here is some text
Go to Yahoo!

Math.max()

This function will return the biggest of two numbers.

Example:

<html>
<head>
<title>Printing data</title>
</head>
<body>
<script type="text/javascript">
document.write(Math.max(5, 10));
</script>
</body>
</html>

Output:

Math.round()

This function will round a number to the nearest integer.

Example:

<html>
<head>
<title>Printing data</title>
</head>
<body>
<script type="text/javascript">
document.write(Math.round(1.6));
</script>
</body>
</html>

Output:

Variable scope

The scope of a variable is the area of a script in which the variable can be used. There are local variables and global variables.

Local variables

Local variables are variables declared inside a function (including parameters of functions as well). These variables have no scope outside of the function they are declared in.

Global variables

Global variables are variables declared outside of a function. Global variables have scope through out the entire script on a page, as well as any other scripts on the same page, and external scripts.

Example:

<html>
<head>
<script type="text/javascript">
function afunction(){
var a_variable = "this is a local variable";
}
</script>
<title>Variable scope</title>
</head>
<body>
<script type="text/javascript">
document.write("the value of the variable a_variable is " + 
a_variable);
</script>
</body>
</html>

In the above code, the variable a_variable is a local variable, for this reason it has no scope outside of the function in which it is declared. When you try to access it, you will get no output.

The above example rewritten with a_variable being a global variable:

<html>
<head>
<script type="text/javascript">
var a_variable = "this is a global variable";
</script>
<title>Variable scope</title>
</head>
<body>
<script type="text/javascript">
document.write("the value of the variable a_variable is " + 
a_variable);
</script>
</body>
</html>

Output:

the value of the variable a_variable is this is a global variable

In the above code the variable a_variable is a global variable, for this reason it has global scope and when you try to access it you get its value.