HTML 学习笔记 JavaScript (函数)

1.函数的概念

在JS中,可能会定义非常多的相同代码或者功能相似的代码这些代码可能需要大量重复的使用。这个时候我们就可以使用JS中的函数。

函数是封装了一段可以被重复使用的代码块。目的就是让大量代码重复使用。

实例

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

<body>
<button onclick="myFunction()">点击这里</button>
</body>
</html>

定义了一个button 当button被点击的时候执行myFunction()函数提示用户一些信息

2.函数的使用

JavaScript 函数语法

函数就是包裹在花括号中的代码块前面使用了关键字function：

例如:

function myFunction() {
    这里是要执行的代码块            
}

function 声明函数的关键字全部小写

函数不调用自己不执行

当函数被调用的时候会执行函数內的代码块

可以在某件事发生时直接调用函数（比如当用户点击按钮时）并且可由JavaScript在任何位置调用

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当你声明函数的时候请把参数变作变量来声明

function myFunction(var1,var2)
{
这里是要执行的代码
}

变量和参数必须以一致的顺序出现第一个变量就是第一个被传递的参数的给定的值依次类推

如果实参的个数和形参的个数一直则正常输入结果

如果实参和形参的个数不一致，如果多于形参个数去形参个数的实参

如果实参的个数小于形参的个数那就是一个其中的参数存在undefined 如果是数字类型的返回NaN

实例：

<body>
        <button onclick="myFunction('tian','CEO')">点我啊</button>
        <script>
            
            
            function myFunction(name,job) {
                alert("welcome" +name +", the" +job);
            }
            
        </script>
    </body>

带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

如果有return 返回的是值如果没有return会返回undefined

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

上面的函数会返回值 5。
注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。
即使不把它保存为变量，您也可以使用返回值：

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

"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。
您可以使返回值基于传递到函数中的参数：

实例
计算两个数字的乘积，并返回结果：

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

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

"demo" 元素的 innerHTML 将是：12

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

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

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

局部的JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript变量的生存期

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

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

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

向未声明的JavaScript 变量来分配值。

如果你把值分配给尚未声明的变量该变量将自动作为全局变量声明

carname="Volvo";

将声明一个全局变量carname 就算是他在函数內执行。

arguments 的使用

当我们不确定有多少个参数传递的时候，可以使用arguments来获取。在js中 arguments实际上是当前函数的一个内置对象所有函数都内置了一个

arguments对象。arguments对象存储了传递的所有实参。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //arguments展示形式是一个伪数组 因此可以进行遍历 伪数组具有以下特点
        //具有length属性 可以按照索引访问存储 不能使用push pop等方法
        function fn() {
            console.log(arguments);//里面存储了传递的所有实参 
        }
        fn(1, 2, 3);
    </script>
</head>

函数可以调用另一个函数

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn1() {
            console.log(11);
        }

        function fn2() {
            fn1()
        }
    </script>
</head>

函数的第二种声明方式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //第二种声明方式 匿名函数
        var fun = function () {
            console.log('我是函数表达式');
        }
        fun();
        //fun 是变量名 不是函数名
        //函数表达式方式声明方式跟变量神明方式差不多 只不过变量里面存的是值
        //而函数表达式里面存的是函数。
        //也可以传递参数
        var fun1 = function (name) {
            console.log(name);
        }
        fun1();
    </script>
</head>