JavaScript functions

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

##JavaScript Function Syntax

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

##function functionname()

{
Execution 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.

Note

: 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 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 want, separated by commas (,):

myFunction(argument1,argument2)

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

function myFunction(var1,var2)

{
Code
}

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('哈利波特','Wizard')">点击这里</button>
<script>
    function myFunction(name,job){
        alert("Welcome " + name + ", the " + job);
    }
</script>
</body>
</html>

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

Run the program and try it

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

function myFunction()
{
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.

The function call will be replaced by the return value:

var myVar=myFunction();

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

You can use the return value even without saving it as a variable:

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

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 arguments passed into the function:

Example

Calculate the product of two numbers and return the result:

<!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 the program to see the result

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

Variables declared inside JavaScript functions (using var) are local variables, so they can only be used within the function Access it internally. (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 is finished running, the local variables will be deleted.

Global JavaScript variables

Declared outside the function The variable is a global variable and can be accessed by all scripts and functions on the web page.

The lifetime of JavaScript variables

The lifetime of JavaScript variables Lifetime begins when 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 yet, the variable is automatically declared as a global variable.

This statement:

carname="Volvo";

will declare a global variable carname even if it is executed within a function.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击这个按钮，来调用带参数的函数。</p> <button onclick="myFunction('哈利波特','Wizard')">点击这里</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script> </body> </html>

submit Reset Code

Automatic operation

JavaScript functions

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]