A brief introduction to JavaScript functions-JS Tutorial-php.cn

A brief introduction to JavaScript functions

青灯夜游

Release： 2018-09-14 09:21:48

Original

1294 people have browsed it

This chapter gives you a brief introduction to JavaScript functions, so that everyone can have a preliminary understanding of JavaScript functions. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is a JavaScript function?

In JavaScript, functions are objects that can be manipulated by programs at will. Functions can be nested and defined in other functions, so that they can be accessed in the scope in which they are defined. any variable.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 函数</title>
</head>
<body>
    <!-- 当按钮被点击之后 -->
    <button onclick="MyFunction()">点一下</button>
</body>

<script type="text/javascript">
    function MyFunction() {
        alert("么么哒");
    }
</script>

</html>

Copy after login

JavaScript function syntax

A function is a block of code wrapped in curly braces, preceded by the keyword function:

function myFunction(){
　　//执行代码
}
//当调用该函数时，会执行函数内的代码
//可以在某事件发生时直接调用函数（比如当用户点击按钮时）并且可有JavaScript在任何位置进行调用。

Copy after login

JavaScript is case-sensitive, the keyword function must be in lowercase, and the function must be called with the same case as the function name.

The curly braces in function are required, even if the function body contains only one statement.

Calling functions with parameters

When calling a function, you can pass values, which are called parameters. These parameters can be used in functions.

You can pass any number of functions, separated by English commas:

myFunction(num1,num2,num3)

Copy after login

When declaring a function, declare the parameters as variables:

function myFunction(var1,var2){
　　//代码
}

Copy after login

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

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
</body>
<script type="text/javascript">
    function myFunction(num1, num2) {
        alert(num1 + num2);
    }
</script>
</html>

Copy after login

The above function will be called after the button is clicked. The display effect is as follows:

A brief introduction to JavaScript functions

Function with return value

Sometimes we need the function to return the processed data to Where it is called, it can be achieved through the return statement.

When using the return statement, the function stops execution and returns the specified value.

<script type="text/javascript">
    function myFunction() {
        var x=9;
        return x;
    }
</script>

Copy after login

The above function will return the value of x 9;

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

Function calls will be replaced by return values.

<script type="text/javascript">
    function myFunction() {
        var x=9;
        return x;
    }
    var aa=myFunction();
</script>

Copy after login

The value of aa is 9; that is, the return value of the function "myFunction()".

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
    <p id="demo"></p>
</body>
<script type="text/javascript">
    function myFunction() {
        var x=9;
        return x;
    }
    var aa=myFunction();
    document.getElementById("demo").innerHTML=myFunction();
</script>
</html>

Copy after login

The above code selects the element by id and writes the return value of the function myFunction.

If you want to launch a function, you can also use the return statement. The return value is optional. Or not.

<script type="text/javascript">
    function myFunction(a,b) {
        if (a>b) {
            return;
        }
        x=a+b;
    }
</script>

Copy after login

The above code will push out the function if a is greater than b. It does not calculate the sum of ab.

Local JavaScript variables

Variables declared inside a JavaScript function (using var) are local variables, so they can only be accessed inside the function. (The scope of this variable is the function, which can also be said to be local).

The same variable name can be used in different functions. Because only the function that declares the variable can recognize the variable. As soon as the function has finished running, the local variables are deleted.

Local variables have higher priority than global variables with the same name, so local variables will hide global variables with the same name.

Global JavaScript variables

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

The lifetime of JavaScript variables

The lifetime of JavaScript variables begins when they are declared.

Local variables are 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 an undeclared variable, the variable will automatically be treated as a global variable statement.

The above is the detailed content of A brief introduction to JavaScript functions. For more information, please follow other related articles on the PHP Chinese website!