W3Schools.com


  
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOUT
BEST WEB HOSTING JustHosts

JavaScript Functions

« Previous Next Chapter »

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 page 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.


Examples

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.


« Previous Next Chapter »

Free Online Website Builder - No Downloading Needed

Create a free Flash website with our simple, online web design editing platform. Stunning templates and user-friendly tools make website building easy and fun.

Start Creating your free website now!


Altova® MapForce®
Graphical XML Conversion Tool from the Developers of XMLSpy®

Altova MapForce

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free code for recurrent conversions. New features in Version 2011!

  • Easy-to-use, graphical data mapping interface
  • Instant data transformation
  • XSLT 1.0/2.0 and XQuery code generation
  • Java, C#, and C++ code generation
  • Advanced data processing functions
  • Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
  • Integration with Altova StyleVision for report rendering
  • Visual Studio & Eclipse integration
  • Available in 32-bit and 64-bit versions

Download a fully-functional trial today!

  Altova MapForce

 

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
Top Web Hosting
$1 Domain Sale
WEB BUILDING
Download XML Editor
FREE Flash Website
6,000+ HTML Templates
Download now (FREE)
Advertise on Google
Stand out on Google search and maps Click Here
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE