函数

JavaScript 函数的定义和使用免费看

如何定义函数、函数调用、在HTML中绑定函数

2020-06-13侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 12     0     703

首先我们要搞清楚,JavaScript 中的函数是什么? 函数其实就是一段可以被执行或调用任意次数的 JavaScript 代码。

打个比方说,假设现在有十行代码,这十行代码我们有三个地方需要用到,那我们就需要重复写三次,这样不仅代码冗余,还增加了我们的工作量。使用函数就可以解决这个问题,我们将这十行代码放到一个定义好的函数中,要使用的时候只需要调用这个函数即可。

那接下来我们就来讲如何定义函数,和如何调用函数。

如何定义函数

我们先来看函数的语法,如下所示:

function fun_name(parameters){
    // 要执行的代码块
}
  • 其中 function 是 JavaScript 中专门用来定义函数的关键字,fun_name 是我们定义函数时自定义的函数名。函数名可以包含字母、数字、下划线和美元符号(规则与变量名类似)。
  • 函数名后面接一对小括号 (),小括号中是参数列表(参数可以是零个或任意个),参数与参数之间使用逗号分隔。
  • 小括号后面跟一对花括号 {},这个花括号里面的就是我们要执行的代码块。

我们知道了函数的语法,接下来让我们来尝试定义一个函数。

示例:

定义函数时需要用到 function 关键字,然后我们要给函数起一个名字,例如 show_name,因为是不带参函数,所以小括号 () 中没有参数,最后在花括号中编写要执行的代码块:

function show_name(){
  console.log("你好,我是侠课岛");
}

上面的是不带参的函数,我们也可以定义带参的函数,例如定义一个求两个数之和的函数,函数带有两个参数:

function add_num(x, y){
  console.log(x + y);
}

函数定义好后,我们需要清楚一个事情,就是此时函数体内的代码是不会自动执行的,所以就算现在我们执行上面的代码,也什么都不会输出。这样做有一个好处,就是我们只要不调用这个定义好的函数,就不会消耗时间和占用内存。那我们要如何调用函数呢?

函数调用

调用函数其实很简单,例如下面这个函数:

function show_name(){
  console.log("你好,我是侠课岛");
}

如果我们我们想要调用这个函数,只需要函数名后面接一个小括号,即:

show_name();

这样我们再执行代码的时候,控制台就会输出“你好,我是侠课岛”的内容了。

这里需要注意一下的是带参函数的调用,在调用带参函数的时候,我们要在小括号中给参数赋值,例如:

function add_num(x, y){
  console.log(x + y);
}

这个函数有两个参数x、y,在调用这个函数时,我们需要分别给 x 和 y 赋值,且要注意参数的顺序:

add_num(3, 6);

执行代码,控制台输出结果为9。

在HTML中绑定函数

这里我们再来讲一下,在 HTML 代码其实我们也可以用到函数,要怎么做呢,就是通过事件将定义好的函数绑定到 HTML 的标签上。

例如我们可以通过 onclick 点击事件来绑定一个函数, 这样 onclick 事件会在元素被点击时发生,同时触发绑定的函数。

示例:

点击按钮,使浏览器弹出一个弹出层,并输出指定内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
    <button onclick="show_name()">点击按钮</button>
    <script>
      function show_name(){
        alert("你好,我是侠课岛");
      }
    </script>
</body>
</html>

在浏览器中打开这个 HTML 文件,点击页面中的按钮,页面中会弹出一个弹出层,显示“你好,我是侠课岛”。你可以把这段代码放入一个 HTML 文件看下演示效果哟。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

12

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?