JavaScript入门指南---（三）、函数

最新推荐文章于 2024-08-19 15:26:06 发布

george_zyf

最新推荐文章于 2024-08-19 15:26:06 发布

阅读量387

点赞数 1

分类专栏： H5+CSS+JS 文章标签： javascript 函数脚本入门 function

本文链接：https://blog.csdn.net/android_zyf/article/details/62890074

版权

H5+CSS+JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原创文章，转载请注明出处：http://blog.csdn.net/android_zyf/article/details/62890074

什么是函数?

大多数情况下,程序在执行过程中,会反复完成相同或类似的内容,为了避免多次重复编写相同的代码段,JS将部分代码包装为能够重复使用的模块,称为”函数”;
函数是JavaScript的基本模块之一,基本会出现在每个脚本中.

一,基本语法

涉及到语法,也就没什么难的了,无非就是在各种情况下的固定格式而已.

function sayHello() {
  alert("hello function");
}

关键字function:定义一个函数,必须小写
sayHello:函数名,符合见名知意,驼峰结构
注: 可以在一个<script>中添加多个function代码块(创建多个函数)

二,调用函数

当页面加载时,包含在function内部(函数内)的代码块是不会被执行的,只有当函数被调用时,函数内的代码才会被执行.
将函数写在<head>标签中,这样就可以在页面(HTML文档)的任何一个位置调用它.
也就是说需要将<script>标签写在<head>标签中.

方法调用的示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>函数示例</title>
    <script>
    // 函数的定义写在了head中的script内
      function sayHello() {
        alert("hello function~");
      }
    </script>
  </head>
  <body>

<!-- 函数的调用body中,当点击button时才调用  -->
    <input type="button" value="点我say hello~" onclick="sayHello()"/>

  </body>
</html>

点击button调用函数

三,参数

可以在调用函数时,向函数中传递内容,在函数中对接收到的内容做操作,得到不同的结果.像函数中传递内容的操作,叫做传递参数.
下面是一个调用含参函数的示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>函数示例</title>
    <script>
      // 定义两个变量,用来演示加法函数
      // 需要注意的是,函数中的a,b与这里定义的x,y在起名上是没有任何关系的
      // a,b只是占位符,传进去多少,就是多少
      var x = 3;
      var y = 4;

      function sayHello() {
        alert("hello function~");
      }

      function getSum(a,b) {
        alert(a+b);
      }

    </script>
  </head>
  <body>

    <input type="button" value="点我say hello~" onclick="sayHello()"/>
    <!-- 这里传入的4,在getSum方法中就是a的值,5同理 -->
    <input type="button" value="点我显示相加的结果" onclick="getSum(4,5)" />
    <!-- 也可以传入变量进行计算 -->
    <input type="button" value="点我显示x+y的结果" onclick="getSum(x,y)"/>
  </body>
</html>

注:若调用函数时,传入的参数个数少于声明函数时小括号内的参数,那么JS可能会报错,或者参数执行不正确
注:使用多个参数时,每个参数要用逗号隔开,如果在调用时传入过多的参数,JS会将多余的参数忽略掉
下面是一个多参数函数的使用过程演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>多个参数的函数示例</title>
    <script>
      function showButtonMessage(buttonId,buttonName,buttonValue) {

        // 在函数中,建立三个变量,并且给每个变量赋值
        // 因为这三个变量是在当前这个函数中定义的,所以这三个变量只在当前函数中有效
        var idMessage = "Button id is " + buttonId + "\n";
        var nameMessage = "Button name is " + buttonName + "\n";
        var valueMessage = "Button value is " + buttonValue + "\n";

        alert(idMessage + nameMessage + valueMessage);
      }
    </script>
  </head>
  <body>

    <input type="button" id="110" name="button张" value="点我点我"
    onclick="showButtonMessage(this.id,this.name,this.value)" />

    <input type="button" id="119" name="button李" value="xjbd"
      onclick="showButtonMessage(this.id,this.name,this.value)" />

    <input type="button" id="120" name="button王" value="dnmb"
        onclick="showButtonMessage(this.id,this.name,this.value)" />

  </body>
</html>

多参数函数

四,函数返回值

JS的函数返回值,不需要规定返回值类型,只需要一个return语句即可;

// 下面的函数,会将a+b的和返回
function getNum(a,b) {
  // 在return执行完毕后,方法就结束了,即使在return语句下面还有其他语句,也是不会执行的,但是不会像java那样报错.
  return a+b;
}

得到函数的结果(返回值):
　var num = getNum(3,4);　　//这样num就被赋值了7
也可以将函数的结果作为参数传递到函数中
var test = getNum(5,getNum(6,getNum(4,4)));　　//结果为:18

五,变量作用域

前面的代码注释中,已经提到过,在函数中声明的变量,只在该函数中有效.
那么该原则为:函数内部声明的变量只存在于函数内部.
这种限制称作 作用域

　1. 在函数内部声明的变量叫做”局部”变量.
　2. 函数之外声明的变量叫做全局变量.
　3. 全局变量与局部变量的名称可以相同,但仍然是不用的变量.
　4. 变量的使用范围称为变量的”作用域”,因此可以称一个变量具有”局部作用域”或”全局作用域”

注:函数名称必须以字母或下划线开头,可以包含字母,数字和下划线,不能包含空格,标点符号和其他特殊字符.

george_zyf

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门指南---（三）、函数

原创文章，转载请注明出处：http://blog.csdn.net/android_zyf/article/details/62889848 什么是函数?大多数情况下,程序在执行过程中,会反复完成相同或类似的内容,为了避免多次重复编写相同的代码段,JS将部分代码包装为能够重复使用的模块,称为”函数”; 函数是JavaScript的基本模块之一,基本会出现在每个脚本中. 一,基本语法涉及到
复制链接

扫一扫

专栏目录