Molerose

Javascript DOM 编程艺术 (笔记No.5 - 函数)
学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法...
扫描右侧二维码阅读全文
09
2018/09

Javascript DOM 编程艺术 (笔记No.5 - 函数)

学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法,你就会发现自己又掌握了,一样功能强大的Web开发工具。归根结底,代码都是思想和概念的体现。


函数(function)

如果需要多次使用同一段代码,可以把阀门封装成一个函数。

函数(function)就是一组允许在你的代码里随时调用的语句。

每个函数实际上是一个短小的脚本。

作为一种良好的编程习惯,应该先对函数做出定义再调用她们。

下面是一个简单的示例函数:

function shot() {
    var beatles = Array("John","Paul","George","Ringo");
    for (var count = 0; count < beatles.length; count++) {
        alert(beatles[count]);
    }
}

上述函数调用方式

<script>
    shot();
</script>

函数的真正威力体现在,你可以把不同的数据传递给它们,而它们将使用这些数据去完成预定的操作。

我们把传递给函数的数据成为参数(argument)

函数语法

function name (argument) {
    statements;
}

参数

alert 属于javascript内建函数 1 中的一种。

这个函数需要我们提供一个参数,它将弹出对话框来显示这个参数的值。

定义函数时,可以为它声明任意多个参数,只要用逗号把它们隔开就行。

在函数内部,你可以像使用普通变量那样使用它的任何一个参数。

多参数代码示例

function multiply(num1,num2) {
    var total = num1 * num2;
    alert(total);
}

上述函数调用方式

<script>
    multiply(10,30);
    // 最终浏览器弹出内容为300
</script>

return 语句

如果这个函数能把结果返回给调用这个函数的语句往往会更有用。

这很容易做到:函数不仅能够(以参数形式)接收数据,还能够返回数据。

我们可以创建一个函数让它返回一个数据、一个字符串、一个数组或布尔值,这需要用到return语句

function multipy(num1,num2) {
    var total = num1 * num2;
    return total;
}

return 语句实例

下面这个函数只有一个参数(一个华氏温度值),它将返回一个数值(统一温度的设置温度值)

function convertToCelsius(temp) {
    var result = temp - 32;
    result = result / 1.8;
    return result;
}

函数的真正价值体现在,我们还可以把它们当作一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量

// 接上代码
var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius)
// alert 所弹出的值为 35 

如上例子,变量 temp_celsius 的值为 35,整数值由 convertToCelsius 函数返回。

如何命名变量和函数

  1. 在命名变量时,我们用下划线来风格各个单词
  2. 在命名函数时,我们从第二个单词开始把每个单词的第一个字母写成大写形式(也就是所谓的驼峰命名法)
  3. Javascript 语言不允许函数的名字里包含空格。

  1. Javascript内置函数是浏览器内核自带的,不用任何函数库引入就可以直接使用的函数。
Last modification:September 9th, 2018 at 10:03 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 混迹‘s Blog

    滴!访客卡!请上车的乘客系好安全带,现在是:Sun Nov 10 2019 20:02:20 GMT+0800 (中国标准时间)

  2. 腾讯云专题网

    朋友 交换链接吗

Leave a Comment