资讯专栏INFORMATION COLUMN

《JavaScript Dom编程艺术》读书笔记(五)

levy9527 / 1275人阅读

摘要:可以创建一个函数并让它返回一个数值一个字符串一个数组或一个布尔值。操作符可以告诉我们它的操作数是一个字符串数值函数布尔值还是对象,例如在浏览器中加载这个例子时,会弹出一个对话框,报告的类型它是一个对象。

函数

如果需要多次使用同一段代码,可以把它们封装成一个函数。函数就是一组允许在你的代码里随时调用的语句。事实上,每个函数实际是一个短小的脚本。

先对函数做出定义再调用是一个良好的编程习惯。下面是一个简单的示例函数:

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

这个函数里的循环语句将依次弹出对话框来显示Beatles乐队成员的名字。如果想在自己的脚本里执行这一动作,可以随时使用如下的语句来调用这个函数:

shout();

每当需要反复做一件事,都可以利用函数来避免重复键入大量的相同内容。可以将不同的数据传递给它们,而它们将使用这些数据去完成预定的操作。传递给函数的数据称为参数(argument)。

定义一个函数的语法:

function name(arguments) {
    statements;
}

JavaScript提供了许多内建函数,在前面多次出现过的alert就是一例。这个函数需要我们提供一个参数,它将弹出一个对话框来显示这个参数的值。

在定义函数时,可以为它声明任意多个参数,只要用逗号把它们分隔开来就行。在函数额内部,你可以像使用普通变量那样使用它的任何一个参数。

下面是一个需要传递两个参数的函数。如果把两个数值传递给这个函数,这个函数将对它们进行乘法运算:

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

在定义了这个函数的脚本里,我们可以从任意位置去调用这个函数,如下所示:

multiply(10,2);

屏幕上会立刻弹出一个显示乘法运算结果(20)的alert对话框。函数不仅能够(以参数的形式)接收数据,还能够返回数据。

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

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

下面这个函数只有一个参数(一个华氏温度值),它将返回一个数值(同一温度的摄氏温度值):

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

还可以把函数当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量:

var temo_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);

把华氏温度值95转换为摄氏温度值。这个例子中,变量temp_celsius的值将是35,这个数值由convertToCelsius函数返回。

变量的作用域

比如下面这个例子:

function square(num) {
    total = num * num;
    return total;
}
var total = 50;
var number = square(20);
alert(total);

全局变量total的值变成了400。本意是让square()函数只把它计算出来的平方值返回给变量number,但因为未把这个函数内部的total变量明确地声明为局部变量,这个函数把名字同样是total的那个全局变量的值也改变了。

把这个函数写成如下所示的样子才是正确的:

function square(num) {
    var total = num * num;
    return total;
}

现在,全局变量total变得安全了,再怎么调用square()函数也不会影响到它、

请记住,函数在行为方面应该像一个自给自足的脚本,在定义一个函数式,一定要把它内部的变量全部明确地声明为局部变量。如果你总是在函数里使用var关键字来定义变量,就能避免任何形式的二定义隐患。

获取元素

有3种DOM方法可获取元素节点,分别是通过元素ID、通过标签名字和通过类名字来获取。

getElementById

DOM提供了一个名为getElementById的方法,这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。

它是document对象特有的函数。在脚本代码里,函数名的后面必须跟有一对圆括号,这对圆括号包含着函数的参数。getElementById方法只有一个参数:你想获得的那个元素的id属性的值,这个id值必须防止单引号或双引号里。


document.getElementById(id)
    

下面是一个例子:

    
document.getElementById("purchases")

这个调用将返回一个对象,这个对象对应着document对象里的一个独一无二的元素,那个元素的HTMLid属性值是purchases。你可以用typeof操作符来验证这一点。typeof操作符可以告诉我们它的操作数是一个字符串、数值、函数、布尔值还是对象,例如:




    
    Shopping list


    

What to buy

Don"t forget to buy this stuff.

  • A tin of beans
  • Cheese
  • Milk

在浏览器中加载这个例子时,会弹出一个alert对话框,报告document.getElementById("purchases")的类型————它是一个对象。

事实上,文档中的每一个元素都是一个对象。利用DOM提供的方法能够得到任何一个对象。

getElementsByTagName

getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,这个方法也是只有一个参数的函数,它的参数是标签的名字:

element.getElementsByTagName(tag)

它与getElementById方法有许多相似之处,但它返回的是一个数组。下面是一个例子:

document.getElementsByTagName("li")

这个调用将返回一个对象数组,每个对象分别对应着document对象中的一个列表项元素。与任何其他的数组一样,我们可以利用length属性查出这个数组里的元素个数。

在之前的例子中将

阅读需要支付1元查看
<