其他分享
首页 > 其他分享> > JavsScript基础语法02-函数

JavsScript基础语法02-函数

作者:互联网

  1. 函数
  在 JavaScript 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for 循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JavaScript 中的函数。https://www.cqxftyyj.com
  函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
  1.1 函数的定义
  在 JavaScript 中,可以使用 function 语句来定义一个函数。这种形式是由关键字 function、函数名 加 一组参数 以及置于大括号中需要执行的 一段代码 构成的。使用 function 语句定义函数的基本语法如下:
  function 函数名([参数1, 参数2,……]){
  语句
  [return 返回值]
  }
  参数说明:
  函数名:必选,用于指定函数名。在同一个页面中,函数名必须是唯一的,并且区分大小写。
  参数:可选,用于指定参数列表。当使用多个参数时,参数间使用逗号进行分隔。一个函数最多可以有255个参数。
  语句:必选,是函数体,用于实现函数功能的语句。
  返回值:可选,用于返回函数值。返回值可以是任意的表达式、变量或常量。
  例如,定义一个不带参数的函数 hello(),在函数体中输出 Amo 你好~~~ 字符串。示例代码如下:
  <script>
  function hello() {
  console.log("Amo 你好~~~");
  }
  </script>
  例如,定义一个用于计算商品金额的函数 account(),该函数有两个参数,用于指定单价和数量,返回值为计算后的金额。示例代码如下:
  <script>
  function account(price, number) { // 定义有两个参数的函数
  let sum = price * number; // 计算金额
  return sum; //返回计算后的金额
  }
  </script>
  常见错误:在同一页面中定义了两个名称相同的函数。例如,下面的代码中定义了两个同名的函数 hello()。
  <script>
  function hello() { //定义函数名称为hello
  document.write("Amo 你好~~~"); //定义函数体
  }
  function hello() { //定义同名的函数
  alert("Amo 你好~~~"); //定义函数体
  }
  </script>
  上述代码中,由于两个函数的名称相同,第一个函数被第二个函数所覆盖,所以第一个函数不会执行,因此在同一页面中定义的函数名称必须唯一。
  1.2 函数的调用
  函数定义后并不会自动执行,要执行一个函数需要在特定的位置调用函数。调用函数的过程就像是启动一个机器一样,机器本身是不会自动工作的,只有按下相应的开关来调用这个机器,它才会执行相应的操作。调用函数需要创建调用语句,调用语句包含函数名称、参数具体值。
  1.2.1 函数的简单调用
  函数调用的语法如下:
  函数名(传递给函数的参数1, 传递给函数的参数2, ……);
  1
  例如,定义一个函数 outputImage(),这个函数的功能是在页面中输出一张图片,然后通过调用这个函数实现图片的输出,示例代码如下:
  <script>
  function outputImage() {
  document.write("<img src='https://ss3.bdstatic.com/70cFv8Sh_" +
  "Q1YnxGkpoWK1HF6hhy/it/u=1039034310,233114253&fm=26&gp=0.jpg'/>");
  }
  outputImage()
  </script>
  运行结果如下图所示。
  1.2.2 在事件响应中调用函数
  当用户单击某个按钮或某个复选框时都将触发事件,通过编写程序对事件做出反应的行为称为响应事件,在 JavaScript 语言中,将函数与事件相关联就完成了响应事件的过程。比如,按下开关按钮打开电灯就可以看作是一个响应事件的过程,按下开关相当于触发了单击事件,而电灯亮起就相当于执行了相应的函数。
  例如,当用户单击某个按钮时执行相应的函数,可以使用如下代码实现该功能。
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>函数</title>
  </head>
  <body>
  <input type="button" value="点我试试" onclick="test();">
  </body>
  </html>
  <script>
  function test() {
  alert("Amo 好帅呀~~~");
  }
  </script>
  在上述代码中可以看出,首先定义一个名为 test() 的函数,函数体比较简单,使用 alert() 语句输出一个字符串,最后在按钮 onclick 事件中调用 test() 函数。当用户单击 点我试试 按钮后将弹出相应对话框。运行结果如下图所示。
  1.2.3 通过链接调用函数
  函数除了可以在响应事件中被调用之外,还可以在链接中被调用,在 <a> 标签中的 href 属性中使用 javascript:函数名() 格式来调用函数,当用户单击这个链接时,相关函数将被执行,下面的代码实现了通过链接调用函数。
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>函数</title>
  </head>
  <body>
  <a href="javascript:test();">点我弹弹弹~</a>
  </body>
  </html>
  <script>
  function test() {
  alert("Amo 好帅呀~~~");
  }
  </script>
  一般我们可以使用这种方式来阻止 <a> 标签的跳转。示例代码如下:
  <!-- 不建议使用-->
  <a href="javascript:void(0)"></a>
  其它方式,示例代码如下:
  <!-- 这种a标签会在页面比较长的时候回到页面顶部-->
  <a href="#" class="demo"></a>
  <a href="https://www.baidu.com/" onclick="return false">跳转到百度</a>
  1.3 函数的参数
  我们把定义函数时指定的参数称为形式参数,简称 形参 。而把调用函数时实际传递的值称为实际参数,简称 实参 。如果把函数比喻成一台生产的机器,那么,运输原材料的通道就可以看作形参,而实际运输的原材料就可以看作是实参。
  在 JavaScript 中定义函数参数的格式如下:
  function函数名(形参1,形参2,……){
  函数体
  }
  定义函数时,在函数名后面的圆括号内可以指定一个或多个参数(参数之间用逗号 , 分隔)。指定参数的作用在于,当调用函数时,可以为被调用的函数传递一个或多个值。如果定义的函数有参数,那么调用该函数的语法格式如下:

标签:02,function,定义,代码,JavsScript,调用函数,语法,参数,函数
来源: https://www.cnblogs.com/zqw111/p/12898880.html