JavaScript Functions
Functions
A function contains some code that will be executed by an event or a call to
that function. A function is a set of statements. You
can reuse functions within the same script, or in other documents.
You define functions at the beginning of a file (in the head section), and
call them later in the document. It is now time to take a lesson about the
alert-box:
This is JavaScript's method to alert the user.
alert("here goes the message")
|
How to Define a Function
To create a function you define its name, any values ("arguments"), and some statements:
function myfunction(argument1,argument2,etc)
{
some statements
}
|
A function with no arguments must include the parentheses:
function myfunction()
{
some statements
}
|
Arguments are variables that will be used in the function. The variable
values will be the values passed on by the function call.
By placing functions in the head section of the document, you make sure that
all the code in the function has been loaded before the function is called.
Some functions return a value to the calling expression
function result(a,b)
{
c=a+b
return c
}
|
How to Call a Function
A function is not executed before it is called.
You can call a function containing arguments:
myfunction(argument1,argument2,etc)
|
or without arguments:
The return Statement
Functions that will return a result must use the "return"
statement. This statement specifies the value which will be returned to where
the function was called from. Say you have a function that returns the sum of two numbers:
function total(a,b)
{
result=a+b
return result
}
|
When you call this function you must send two arguments with it:
The returned value from the function (5) will be stored in the variable called sum.
Examples
Function
How to call a function.
<html>
<head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()" value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert a message.
</body>
</html>
|
Function with arguments
How to pass a variable to a function, and use the variable value in the function.
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert using the argument text.
</body>
</html>
|
Function with arguments 2
How to pass variables to a function, and use these variable values in the function.
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Good Morning')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening')" value="In the Evening">
</form>
<p>By pressing a button, a function will be called. The function will alert using the argument passed to it.
</body>
</html>
|
Function that returns a value
How to let the function return a value.
<html>
<head>
<script type="text/javascript">
function myfunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p>The function returns text.
</body>
</html>
|
A function with arguments, that returns a value
How to let the function find the sum of 2 arguments and return the result.
<html>
<head>
<script type="text/javascript">
function total(numberA,numberB)
{
return numberA + numberB
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(total(2,3))
</script>
<p>The script in the body section calls a function with two arguments: 2 and 3.
<p>The function returns the sum of these two arguments.
</body>
</html>
|
|