Html第2集：定义函数、函数返回值、打印日志

赵彦军

已于 2022-08-24 14:53:36 修改

阅读量985

点赞数 1

分类专栏：前端学习笔记

于 2022-08-24 12:03:21 首次发布

本文链接：https://blog.csdn.net/zhaoyanjun6/article/details/126501656

版权

javascript 开发语言 html html5 css

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126501656
本文出自【赵彦军的博客】

函数定义

函数用 function 关键字声明，用 <script> 包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script>

        //无参数
        function wri() {
            document.write("hello")
        }

        //有参数
        function wri2(num) {
            document.write("hello " + num)
        }

    </script>

</head>
<body>

<button onclick="wri(3)">我是按钮</button>
<button onclick="wri2(3)">我是按钮</button>


</body>
</html>

效果如下：

在这里插入图片描述

函数调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script>

        //无参数
        function wri() {
            document.write("hello")
        }

        //有参数
        function wri2(num) {
            //函数调用
            wri()
            document.write("hello " + num)
        }

    </script>

</head>
<body>

<button onclick="wri2(3)">我是按钮</button>

</body>
</html>

效果：

在这里插入图片描述

打印日志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script>

        //有参数
        function wri2(num) {
            //信息
            console.info("hello " + num)
            //警告
            console.warn("hello " + num)
            //error
            console.error("hello " + num)
        }

    </script>

</head>
<body>

<button onclick="wri2(3)">我是按钮</button>

</body>
</html>

打开调试模式：

在这里插入图片描述

效果：

在这里插入图片描述

函数返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script>

        //有返回值函数
        function myFunction(a, b) {
            return a + b;
        }

        c = myFunction(12,4)

        console.log(c)

    </script>

</head>
<body>

</body>
</html>