User-defined Functions

Contact Us or call 1-877-932-8228
User-defined Functions

User-defined Functions

Writing functions makes it possible to reuse code for common tasks. Functions can also be used to hide complex code. For example, an experienced developer can write a function for performing a complicated task. Other developers do not need to know how that function works; they only need to know how to call it.

Function Syntax

JavaScript functions generally appear in the head of the page or in external JavaScript files. A function is written using the function keyword followed by the name of the function.

Syntax

function doSomething(){
	//function statements go here
}

As you can see, the body of the function is contained within curly brackets ({}). The following example demonstrates the use of simple functions:

Code Sample:

JavaScriptFunctions/Demos/SimpleFunctions.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Simple Functions</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function changeBgRed(){
		document.bgColor = "red";
	}
	
	function changeBgWhite(){
		document.bgColor = "white";
	}
</script>
</head>
<body>
<p>
	<span onclick="changeBgRed();">Red</span> |
	<span onclick="changeBgWhite();">White</span>
</p>
</body>
</html>

Passing Values to Functions

The functions above aren't very useful because they always do the same thing. Every time we wanted to add another color, we would have to write another function. Also, if we want to modify the behavior, we will have to do it in each function. The example below shows how to create a single function to handle changing the background color.

Code Sample:

JavaScriptFunctions/Demos/PassingValues.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Passing Values</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function changeBg(color){
		document.bgColor = color;
	}
</script>
</head>
<body>
<p>
	<span onclick="changeBg('red');">Red</span> |
	<span onclick="changeBg('white');">White</span>
</p>
</body>
</html>

As you can see, when calling the changeBg() function, we pass a value (e.g, 'red'), which is assigned to the color variable. We can then refer to the color variable throughout the function. Variables created in this way are called function arguments or parameters. A function can have any number of arguments, separated by commas.

A Note on Variable Scope

Variables created through function arguments or declared within a function with var are local to the function, meaning that they cannot be accessed outside of the function.

Variables declared with var outside of a function and variables that are used without being declared are global, meaning that they can be used anywhere on the page.

Returning Values from Functions

The return keyword is used to return values from functions as the following example illustrates:

Code Sample:

JavaScriptFunctions/Demos/ReturnValue.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
function setBgColor(){
	document.bgColor = prompt("Set Background Color:", ""); 
}

function getBgColor(){
	return document.bgColor;
}
</script>
</head>
<body>
<form>
	<input type="button" value="Set Background Color"
		onclick="setBgColor();">
	<input type="button" value="Get Background Color" 
		onclick="alert(getBgColor());">
</form>
</body>
</html>

When the user clicks on the "Get Background Color" button, an alert pops up with a value returned from the getBgColor() function. This is a very simple example. Generally, functions that return values are a bit more involved. We'll see many more functions that return values throughout the course.

Next