JavaScript function
A function is an event-driven or reusable block of code that executes when it is called.
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
JavaScript function syntax
A function is a block of code wrapped in curly braces, preceded by the keyword function:
{
Execute code
}
When this function is called, the code within the function will be executed.
Functions can be called directly when an event occurs (such as when the user clicks a button), and can be called from anywhere by JavaScript.
 | JavaScript is case-sensitive. The keyword function must be lowercase, and the function must be called with the same case as the function name. |
|---|
Calling functions with parameters
When you call a function, you can pass it values, which are called parameters.
These parameters can be used in functions.
You can send as many parameters as you like, separated by commas (,):
When you declare a function, declare the parameters as variables:
{
Code
}
Variables and parameters must appear in a consistent order. The first variable is the given value of the first parameter passed, and so on.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
The above function will prompt "Welcome Harry Potter, the Wizard" when the button is clicked.
The function is flexible, you can call the function with different parameters, which will give different messages:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
According to the different buttons you click, the above example will prompt "Welcome Harry Potter" , the Wizard" or "Welcome Bob, the Builder".
Functions with return values
Sometimes, we want a function to return a value to the place where it was called.
This can be achieved by using the return statement.
When using the return statement, the function stops execution and returns the specified value.
Syntax
{
var x=5;
return x;
}
The above function will return the value 5.
Note: The entire JavaScript will not stop execution, just the function. JavaScript will continue executing code from where the function was called.
Function calls will be replaced by return values:
The value of the myVar variable is 5, which is the value returned by the function "myFunction()".
You can use the return value even without saving it as a variable:
The innerHTML of the "demo" element will be 5, which is the value returned by the function "myFunction()".
You can base the return value on the parameters passed into the function:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>Run Example »
Click the "Run Example" button to view the online example
You can also use the return statement when you just want to exit the function. The return value is optional:
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}If a is greater than b, the above code will exit the function and will not calculate the sum of a and b.
Local JavaScript Variables
A variable declared inside a JavaScript function (using var) is a local variable, so it can only be accessed inside the function. (The scope of this variable is local).
You can use local variables with the same name in different functions, because only the function in which the variable is declared can recognize the variable.
As soon as the function finishes running, the local variables will be deleted.
Global JavaScript variables
Variables declared outside a function are global variables, which can be accessed by all scripts and functions on the web page.
The lifetime of JavaScript variables
The lifetime of JavaScript variables starts from the time they are declared.
Local variables will be deleted after the function is run.
Global variables will be deleted after the page is closed.
Assigning a value to an undeclared JavaScript variable
If you assign a value to a variable that has not been declared, the variable will automatically be declared as a global variable.
This statement:
will declare a global variable carname even if it is executed within a function.
