JavaScript函数的使用

最新推荐文章于 2023-11-07 14:19:06 发布

外太空程序员

最新推荐文章于 2023-11-07 14:19:06 发布

阅读量688

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_48516121/article/details/121160705

版权

一、函数定义和分类：

（1）.函数概念：

一段封装好的代码块，给代码块取一个名字，这个名字就叫函数名，通过名字去调用它，不调用则不执行这段代码，用这种试试实现的功能

（2）.特点：

1.不调用则不执行

2.可以重复多次调用，也可以供给别调用

3.函数名建议：a.不适用关键字，b.首字母小写

（3）分类：

1.命名函数：有名字的函数，可以通过名字来调用

2.匿名函数：没有名字的函数，不可以重用，只能使用一次。但是可以通过一个变量来指向它，实现重用。

二、函数命名格式：

function 函数名（参数列表）{

//代码块

return 返回值；//可选：如果这个函数没有返回值，就不写

}

代码示例（匿名函数）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数</title>
</head>
<body>
<script>
    var sum=function (a,b) {
        return a+b;
    }
    document.write(sum(2,4));
</script>
</body>
</html>

代码示例（命名函数）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名函数</title>
</head>
<body>
<script>
    // 定义一个函数，实现加法运算
    var a=prompt("请输入加数");
    var b=prompt("请输入b被加数");
    function sum(a,b) {    //定义方法的参数叫形参
        return a+b;
        // 函数一定要调用
    }
    var  c=sum(parseInt(a),parseInt(b));
    alert("计算的结果为："+c);
</script>
</body>
</html>

三、关于函数名的重载：

1.js中没有函数的重载，后面出现的同名函数名会覆盖前面的同名函数

2.实参个数与形参个数无关，只会按照函数的名字去调用

3.在定义每个函数内部都有一个隐藏的数组，名字叫argument

函数重载程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数重载</title>
</head>
<body>
<script>
    // 定义一个函数
    function sum(a,b) {
        alert(2)
    }
    // 定义一个函数
    function sum(a) {
        alert(1)

    }
    function sum(a,b,c) {
        alert(3)

    }
    sum(3,5)
    // js中没有想java那样的函数重载功能
</script>
</body>
</html>

四、形参与实参：

1.形参：方法定义的参数

2.实参：调用的参数

五、匿名函数

（1）应用场景：

1.事件处理函数都是使用匿名函数，一般不会重用

2.可以定义一个变量让匿名函数可以重用，这种情况使用较少

（2）基本语法：

var 变量名=function（参数列表）{

//函数体

return 返回值；//可选

}

小结：

1.定义函数的关键字是function

2.函数参数和返回值不需要指定数据类型

2.函数没有重载

案例：轮播图

1.匿名函数

2.定时器

程序如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .lunbo{
        width:100%;
        height:720px;
        background-image: url(img);/*背景图片*/
        background-size:100% 100%;
    }
</style>
<body>
</div>
<div class="lunbo">
</div>
<script>
    /*需求：没播放3秒切换一张图片，当现实到最后的时候，
    在此现实第一张
    步骤：
    1.创建一个HTML网页，网页放置一个img标签，id为pic,宽度为600
    2.body的背景颜色为blue，内容居中
    3.5张图片的名字依次是0-4.jpg，放在img文件夹，图片一开始的时候为0.jpg
    4.写一个changePicture(),使用setInterval()函数，没个3秒调用一次
    5.定义全局变量，num1;
    6.ChagePicture()方法中，设置图片src是的属性为img/num.jpg
    7.判断num是否等于5，如果等于5，重置为0，否则num++*/
    var index = 1;
    function lunbo(){
        index ++ ;
        //判断number是否大于3
        if(index ==5){
            index = 0;
        }
        //获取img对象
        var img = document.getElementsByClassName("lunbo")[0];
        img.style.background = "url(img/img"+index+".jpeg)";
        img.style.backgroundSize="100% 100%";
    }
    //2.定义定时器
    setInterval(lunbo,3000);

</script>
</body>
</html>

方法	说明
document.getEIementById(id)	作用：通过id去获取网上唯一的元素（标签）：id
window.setIntverval（“函数名”（），时间）	作用：每隔一个时间段调用指定的函数一次参数1，要调用的函数名参数2，间隔的时间，单位是毫秒
window.setIntverval（函数名，时间）	写法·不同，函数名不需要加引号，也不用写小括号
window.alter	弹框
window.prompt	输入

六、window的基本运用：

window.open(), (打开窗口)

window.close(), (关闭一个窗口)

window.self()(窗口本身)

window.focus()(使当前的窗口在所有窗口之前. )

window.status=”内容” (js中状态栏显示内容:)

window.navigate(”http://www.google.com”); （js中的窗口重定向:）

window.print() (js中的打印:)

window.prompt(”message”,”defaultreply”); （js中的提示输入框:）

window.scroll(x,y) (js中的窗口滚动条)

外太空程序员

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript函数的使用

一、函数定义和分类：（1）.函数概念：一段封装好的代码块，给代码块取一个名字，这个名字就叫函数名，通过名字去调用它，不调用则不执行这段代码，用这种试试实现的功能（2）.特点：1.不调用则不执行2.可以重复多次调用，也可以供给别调用3.函数名建议：a.不适用关键字，b.首字母小写（3）分类：1.命名函数：有名字的函数，可以通过名字来调用2.匿名函数：没有名字的函数，不可以重用，只能使用一次。但是可以通过一个变量来指向它，实现重用。二、函数命名格式：function.
复制链接

扫一扫