JavaScript,初识函数

307 阅读2分钟

函数的认识

函数的概念

函数就是把完成特定功能的一段代码抽象出来,使之成为程序中的一个独立实体,起个名字(函数名)。可以在同一个程序或其他程序中多次重复使用(通过函数名调用)。

function 函数

  • 函数:把同一个功能的代码块放在一起
  • 作用:封装性 + 复用性

函数分类:

系统函数 ()(例如:alert(666))
自定义函数(用户根据实际需求,需要自己封装一个函数)

函数:就是个工具, 重复使用的, 需要被人使用, 工具有的有参数,有的没有 Math.random() alert(666)

函数的封装

函数封装是一种函数的功能,它把写的一个或者多个功能通过函数、类的方式封装起来,对外只提供一个简单的函数接口。当在写程序的过程中需要执行同样的操作时,不需要写同样的函数来调用,直接可以从函数库里面调用。当需要执行这一功能的函数时,直接调用即可。

函数的定义

形参:在定义函数时,函数名后面的参数,没有实际意义
实参:在函数调用时,函数后面的参数
函数的语法
function 函数名(参数1,参数2,....){//函数可以没有形参,
语句
return 返回值;
}
例子:
给求和封装一个函数:
function sum(a,b){//sum为定义的函数名,参数a,b为相加的两个数,
var s=a+b;
retrun s;//返回值是函数执行的结果,也可以简写成 return a+b;不用重新定义一个变量
}

<script>
  //给求和封装一个函数
        function sum(a, b) {
            return a + b;
        }
        //调用并打印
        console.log(sum(100, 200))
    </script>

image.png
注意: 我们在写封装函数一定要写好注释,了解函数的功能,知道参数是干什么的。

函数的调用

通过在程序中使用函数名称,可以执行函数中包含的语句,这称为调用函数,同时传入实参。
例如 上面的求和函数,调用即可:sum(100,200);结果就为300

函数的注意点

一些系统函数:
alert(666) 直接调用函数,并且传了一个参数
var n = Math.random() 调用函数并使用一个变量接受这个结果
返回值:
--函数执行的结果
--提前结束整个函数(与break的作用相式)

例题:

判断一个随机年份是否为闰年

<body>
    <fieldset>
        <legend>判断随机年份是否为闰年</legend>
        <!-- 判断一个随机的年份是不是年份 -->
        <button id="btn1">随机年份</button>
        <input type="text" id="inp">
        <button id="btn2">判断</button>
    </fieldset>
    <script>
        //给document.getElementById()函数封装一个简化的函数
        function get(id) {
            return document.getElementById(id);
        }
        //给随机数封装一个函数,参数min为最小年份,max为最高年份
        function shuiji(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
        //拿到对象
        var oInp = get('inp');
        var oBtn1 = get('btn1');
        var oBtn2 = get('btn2');
        //绑定点击事件,点击一次调用一次函数
        oBtn1.onclick = function() {
            //定义一个a为随机产生的年份
            var a = shuiji(1000, 2000);
            inp.value = a;

            //绑定点击事件,点击来判断闰年
            oBtn2.onclick = function() {
                if (a % 4 == 0 && a % 100 != 0 || a % 400 == 0) {
                    alert(a + "年是闰年")
                } else {
                    alert(a + "年不是闰年")
                }

            }
        }
    </script>
</body>

结果如下:

image.png