1. Function

1.1 Purpose of the function

The function is used to encapsulate some commonly used codes. After encapsulation, the user is only responsible for paying attention to the input, output and impact of the function. Even if he does not know the internal processing of the function, it does not affect the normal use of the function.

1.2 The return value of the function

After the function is executed, it can return a value representing the result of the execution.

Raise chestnuts:

<script>
        var name=prompt('请输入你的姓名：');
        alert('你的名字是：'+name);
    </script>

1.3 Parameters of the function

When calling a function, some functions support passing in one or more parameters, and multiple parameters can be separated by commas.

prompt('请输入你的姓名：','匿名');

1.4 Custom Functions

In addition to directly calling JavaScript built-in functions, users can also define their own functions to encapsulate code.

2. Case [Change the background color of the webpage]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变网页背景色</title>
    <script>
        function color(str){
            document.body.style.backgroundColor=str;
        }
    </script>
</head>
<body>
    <input type="button" value="红色" onclick="color('red')">
    <input type="button" value="绿色" onclick="color('green')">
    <input type="button" value="蓝色" onclick="color('blue')">
    <input type="button" value="自定义颜色" onclick="color('#00ff00')">
</body>
</html>

3. Array sorting

3.1 Bubble sort

In bubble sort, sort from small to large or from large to small according to the requirements, constantly compare the values of two adjacent elements in the array, and move the smaller or larger element forward. The number of rounds for bubble sort comparisons is the length of the array minus 1, and the logarithm of each round of comparisons is equal to the length of the array minus the current number of rounds.

The following is the implementation of bubble sort in JavaScript.

<title>冒泡排序</title>
    <script>
        var arr=[10,2,5,27,98,31];
        console.log('待排序数组：'+arr);
        for(var i=1;i<arr.length;++i)   //控制需要比较的轮数
        {
            for(var j=0;j<arr.length;++j)  //控制参与比较的元素
            {
                if(arr[j]>arr[j+1])    //比较相邻的两个元素
                {
                    [arr[j],arr[j+1]]=[arr[j+1],arr[j]];
                }

            }
        }
        consloe.log('排序后的数组：'+arr);

    </script>

3.2 Insertion sort

Insertion sort is an optimization of bubble sort, which is intuitive and simple. Implementation principle: By constructing the storage of ordered array elements and the storage of unsorted array elements, traverse from the last element to the first element in the sorted array, find the corresponding position and insert it. Among them, the first element of the array to be sorted is regarded as an ordered array, and the second element to the last element is regarded as an unordered array. Insertion sort is done in ascending order.

The following is an implementation of insertion sort in JavaScript.

<script>
    var arr=[4,28,7,4,2001];
    console.log('待排数组：'+arr);
    //按照从小到大的顺序排序
    for(var i=0;i<arr.length;++i) //遍历无序数组下标
    {
        for(var j=i;j>0;--j)     //遍历 比较一个无序数组元素和所有有序数组元素
        {
            if(arr[j-1]>arr[j])
            {
                [arr[j-1],arr[j]]=[arr[j],arr[j-1]];
            }
        }
    }
    //输出从小到大排序后的数组
    console.log('排序后的数组：'+arr);
</script>

JavaScript functions, cases, array sorting - JS