javascript functions
JavaScript Functions
Function Definition:
A JavaScript function is executed when
"something" invokes it (calls it).
Syntax:
<script type="javascript">
<!--
function functionname (parameter-list)
{
statements
}
//-->
</script>
examples:
<script type="javascript">
<!--
function sayBye()
{
alert("Bye");
}
//-->
</script>
Calling a function:
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
The return statement:
A JavaScript function can have an optional return statement. This is required if you want to return a value from a function. This statement should be the last statement in a function.
When JavaScript
reaches a return statement, the function will stop executing. If the function
was invoked from a statement, JavaScript will "return" to execute the
code after the invoking statement.
Nested Functions:
JavaScript 1.2 allows function definitions to be nested within other functions as well. Still there is a restriction that function definitions may not appear within loops or conditionals. These restrictions on function definitions apply only to function declarations with the function statement.
<html>
<head>
<script type="text/javascript">
<!--
function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}
function secondFunction(){
var result;
result = hypotenuse(1,2);
document.write ( result );
}
//-->
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
The Function constructor
Note: Using the Function constructor to create functions is
not recommended since it needs the function body as a string which may prevent
some JS engine optimizations and can also cause other problem.
As all other objects, Function objects can be created using
the new operator:
Syntax:
<script type="text/javascript">
<script type="text/javascript">
<!--
var variablename = new Function(Arg1, Arg2, ...., "function body");
//-->
</script>
arg1,
arg2, ... argN:
Zero
or more names to be used by the function as formal parameters. Each must be a
proper JavaScript identifier.
functionBody:
A
string containing the JavaScript statements comprising the function body.
<html>
<head>
<script
type="text/javascript">
<!--
var
func = new Function("x", "y", "return
x*y;");
function
secondFunction(){
var result;
result = func(10,20);
document.write
( result );
}
//-->
</script>
</head>
<body>
<p>Click
the following button to call the function</p>
<form>
<input
type="button" onclick="secondFunction()" value="Call
Function">
</form>
<p>Use
different parameters inside the function and then try...</p>
</body>
</html>
The GeneratorFunction constructor:
Note: Arrow function expressions are an experimental technology, part
of the ECMAScript 6 proposal, and are not widely supported by browsers yet.
Note: GeneratorFunction is not a global object, but could be obtained
from generator function instance (see GeneratorFunction for more detail).
Note: Using the GeneratorFunction constructor to create functions is
not recommended since it needs the function body as a string which may prevent
some JS engine optimizations and can also cause other problems.
As all other objects, GeneratorFunction objects can be created using
the new operator:
Syntax:
new
GeneratorFunction (arg1, arg2, . . .
argN, functionBody)
arg1,
arg2, ... argN
Zero
or more names to be used by the function as formal argument names. Each must be
a string that conforms to the rules for a valid JavaScript identifier or a list
of such strings separated with a comma; for example "x",
"theValue", or "a,b".
functionBody
A
string containing the JavaScript statements comprising the function definition.
Invoking
the Function constructor as a function (without using the new operator) has the
same effect as invoking it as a constructor.
Function Literals:
JavaScript
1.2 introduces the concept of function literals which is another new way of
defining functions. A function literal is an expression that defines an unnamed
function.
Syntax
The syntax for a function literal is much like
a function statement, except that it is used as an expression rather than a
statement and no function name is required.
<script
type="text/javascript">
<!—
var
variablename = function(Argument List){
Function Body
};
//-->
</script>
Example:
<html>
<html>
<head>
<script
type="text/javascript">
<!--
var
func = function(x,y){ return x*y };
function
secondFunction(){
var result;
result = func(10,20);
document.write ( result );
}
//-->
</script>
</head>
<body>
<p>Click
the following button to call the function</p>
<form>
<input
type="button" onclick="secondFunction()" value="Call
Function">
</form>
<p>Use
different parameters inside the function and then try...</p>
</body>
</html>
Function Parameters:
The parameters to a function behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself.
The parameters to a function behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself.
An
important property of functions is that the variables created inside of them,
including their parameters, are local to the function.
var
makeNoise = function() {
console.log("Pling!");
};
makeNoise();
//
→ Pling!
var
power = function(base, exponent) {
var result = 1;
for (var count = 0; count < exponent;
count++)
result *= base;
return result;
};
24
console.log(power(2,
10));
//
→ 10
This means, for example, that the result variable in
the power example will be newly created every time the function is called, and
these separate incarnations do not interfere with each other.
Functions Used as Variables:
Functions can be used as variable values in formulas, assignments, and calculations.
Example:
We can use
var text = "The temperature is " +
toCelsius(77) + " Celsius";
Instead of:
var
x = toCelsius(32);
var
text = "The temperature is " + x + " Celsius";
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment