Home > Article > Web Front-end > Javascript learning js function (summary of experience)

Javascript learning js function (summary of experience)

青灯夜游forward: 2018-10-29 16:47:323086browse

This article brings you a summary of the experience of js functions in the process of learning Javascript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Javascript functions are event-driven or reusable blocks of code that are executed when they are called. So it is of no use just creating a function without calling it. We must call it to execute it.

1. What is a function

(1) A function is a code segment that completes a certain function

(2) A function is a code segment that can be executed repeatedly

(3) Functions are convenient for maintenance and management

2. What should we pay attention to when creating functions?

(1) Function names are strictly case-sensitive

(2) Repeated function names will cause overwriting

(3) Function names are best semantic

3. Trigger function

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button onclick="Click()">点击按钮调用函数</button>
    <script>
        function Click(){
            alert('调用成功！');
        }
    </script>
</body>
</html>

4. Function that implements default parameters

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
    function calc(x,y){
        x=x||0;
        y=y||0;
        return x+y;
    }
   　　 alert(calc());
    　　alert(calc(1,2));
    </script>
</body>
</html>

5. Function in the form of variable parameters

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        function test(){
            var sum = 0 ;
            var allNum = arguments.length ; //定义allNum为传入参数的个数
            for(var i=0;i<allNum;i++){
                sum+=arguments[i];//sum = sum + arguments[i]
                document.write(arguments[i]);
            }
            return sum;
        }
        alert(test(1,2,4));
    </script>
</body>
</html>

6. Variable scope

(1) Local variables: variables declared in the function body, can only be used within the function body

(2) Global variables: global variables, can be used from the time the variable is declared to the end of the script

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        var x=1;
        function test(){
            document.write('1.函数体内的x的值为：'+x+'<br />');
            x=19;
            document.write('2.此时函数体内重新对x值赋值，此时x的值为：'+x+'<br />');
        }
        document.write('3.函数体外的x值：'+x+'<br />');//因为读写顺序先执行这段代码然后在执行函数 test()
        test();
        document.write('4.函数体外的x值：'+x+'<br />');
    </script>
</body>
</html>

This is just my personal learning experience. If there are any deficiencies, please point them out. Thank you for the great advice! !

The above is the detailed content of Javascript learning js function (summary of experience). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Which one is executed first, ready or load? What is the difference between ready and load events in jquery?Next article：Which one is executed first, ready or load? What is the difference between ready and load events in jquery?

See more