JavaScript Functions
A function will be executed by an event or by a call to the function.
JavaScript Functions
To keep the browser from executing a script when the page loads, you can put your script into a function.
A function contains code that will be executed by an event or by a call to the function.
You may call a function from anywhere within a 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 assure that a function
is read/loaded by the browser before it is called, it could be wise to put functions in the <head> section.
How to Define a Function
Syntax
function functionname(var1,var2,...,varX)
{
some code
} |
The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.
Note: A function with no parameters must include the parentheses ()
after the function name.
Note: Do not forget about the importance of capitals in JavaScript!
The word function must be written in lowercase letters, otherwise a JavaScript
error occurs! Also note that you must call a function with the exact same
capitals as in the function name.
JavaScript Function Example
Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" />
</form>
</body>
</html> |
Try it yourself »
|
If the line: alert("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 a user hits the input button. The function displaymessage()
will be executed if the input button is clicked.
You will learn more about JavaScript events in the JS Events chapter.
The return Statement
The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
The example below returns the product of two numbers (a and b):
Example
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html> |
Try it yourself »
|
The Lifetime of JavaScript Variables
If you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the
variable is destroyed. These variables are called local variables. You 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 you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and
ends when the page is closed.
 |
More Examples |
Function with a
parameter
How to pass a variable to a function, and use the variable in the function.
Function that returns a value
How to let
a function return a value.
Start Creating a stunning, Flash website. It's easy and free!
Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash websites, layouts, and more.
With added e-commerce features such as search engine visibility and professional tools, Wix is the ultimate solution for creating a spectacular site.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
