【JavaScript Tutorial】JavaScript Function-JS Tutorial-php.cn

【JavaScript Tutorial】JavaScript Function

黄舟

Release： 2016-12-24 14:50:05

Original

904 people have browsed it

JavaScript Functions

A function is an event-driven or reusable block of code that executes when it is called.

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Copy after login

JavaScript function syntax

A function is a block of code wrapped in curly braces, with the keyword function used in front:

function functionname()
{
执行代码
}

Copy after login

When the 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.

Call a function 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 (,):

myFunction(argument1,argument2)

Copy after login

When you declare a function, declare the parameters as variables:

function myFunction(var1,var2)
{
代码
}

Copy after login

Variables and parameters must appear in the same order. The first variable is the given value of the first parameter passed, and so on.

Example

<button onclick="myFunction(&#39;Harry Potter&#39;,&#39;Wizard&#39;)">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

Copy after login

The above function will prompt "Welcome Harry Potter, the Wizard" when the button is clicked.

The function is flexible, you can call it with different parameters, which will give different messages:

Example

<button onclick="myFunction(&#39;Harry Potter&#39;,&#39;Wizard&#39;)">Try it</button>
<button onclick="myFunction(&#39;Bob&#39;,&#39;Builder&#39;)">Try it</button>

Copy after login

Depending on 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 will stop execution and return the specified value.

Syntax

function myFunction()
{
var x=5;
return x;
}

Copy after login

The above function will return the value 5.

Note: The entire JavaScript will not stop executing, just the function. JavaScript will continue executing code from where the function was called.

Function calls will be replaced by return values:

var myVar=myFunction();

Copy after login

The value of the myVar variable is 5, which is the value returned by the function "myFunction()".

Even without saving it as a variable, you can use the return value:

document.getElementById("demo").innerHTML=myFunction();

Copy after login

The innerHTML of the "demo" element will be 5, which is the value returned by the function "myFunction()".

You can make the return value based on the parameters passed into the function:

Example

Calculate the product of two numbers and return the result:

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

Copy after login

The innerHTML of the "demo" element will be:

Copy after login

In case you just want You can also use the return statement when exiting a function. The return value is optional:

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

Copy after login

If a is greater than b, the above code will exit the function and 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 will recognize the variable.

As soon as the function completes running, the local variable will be deleted.

Global JavaScript variables

Variables declared outside a function are global variables and can be accessed by all scripts and functions on the web page.

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：