JavaScript DOM编程艺术读书笔记(2－2)

来源：互联网发布：2017网络伤感流行歌曲编辑：程序博客网时间：2024/06/06 05:07

2.5 操作

算术操作符

加法是一种操作，减法，除法和乘法也是如此。这些算术操作(arithmetic operation)中的每一种都必须借助于相应的操作符(operator)才能完成。这些操作符你们其实已经见过了。加法操作符是加号(+)，减法操作符是减号(-)，除法操作符是斜杠(/)，乘法操作符是星号(*)。

下面是一个简单的加法操作：

1+4

还可以把多种操作组合在一起：

1+4*5

为避免产生歧义，可以用括号把不同的操作分隔开来：

1+(4*5)

(1+4)*5

变量可以包含操作(默然说话：即操作的最后运算结果可以直接赋值给变量)：

var total=(1+4)*5;

不仅如此，我们还可以对变量进行操作：

var temp_fahrenheit=95;

var temp_celsius=(temp_fahrenheit-32)/1.8;

JavaScript还提供了一些非常有用的操作符作为各种常用操作的快捷方式。例如，如果你想给一个数值变量加上1，可以使用如下所示的语句：

year=year+1;

也可以使用++操作符来达到同样的目的：

year++;

类似地，--操作符将对一个数值变量的值进行减1操作。

加号(+)是一个比较特殊的操作符：它既可以用于数值，也可以用于字符串。把两个字符串合二为一是一种很直观易懂的操作：

var message=”I am feeling”+”happy”;

像这样把多个字符串首尾相连的操作叫做拼接(concatenation)。这种拼接也可以通过变量来完成：

var mood=”happy”;

var message=”I am feeling ”+mood;

我们甚至可以把数值和字符串拼接在一起；因为JavaScript是一种弱类型语言，所以这种操作是允许的。此时数值将被自动转换为字符串：

var year=2005;

var message=”The year is ”+year;

请记住，如果把字符串和数值拼接在一起，其结果将是一个更长的字符串；但如果你用同样的操作符来“拼接”两个数值，其结果将是那两个数值的算术和。请对比下面两条alter语句的执行结果：

alert(”10”+20);

alert(10+20);

下面是对字符串”10”和数值20进行拼接的结果。

下面是对数值10和数值20进行加法运算的结果：

另一个非常有用的快捷操作符是+=，它可以一次完成“加法和赋值”(或“拼接和赋值”)操作：

var year=2005;

var message =”The year is ”;

message+=year;

执行完上面这些语句后，变量message的值将是”The year is 2005”。可以用如下所示的alter对话框来验证这一结果：

alert(message);

这次对字符串和数值进行拼接操作的结果如下所示。

2.6 条件语句

JavaScript脚本需要使用条件语句(conditional statement)来做出判断和决策。

在解释脚本时，浏览器将依次执行这个脚本中的各条语句，而我们可以在这个脚本中用条件语句来设置一个条件，只有满足了这一条件才能让更多的语句得到执行。最常见的条件语句是if语句，下面是if语句的基本语法：

if(条件){

语句;

}

条件必须放在if后面的圆括号中。条件的求值结果永远是一个布尔值，即只能是true或false。花括号中的语句——不管它们有多少条，只有在给定条件的求值结果为true的情况下才会得到执行。因此，在下面这个例子中，alert消息永远也不会出现：

if(1>2){

alert(”The world has gone mad!”);

}

if语句还可以是用else来扩展。包含在else子句中的语句会在给定条件的值为false时得到执行：

if(1>2){

alert(“The world has gone mad!”);

}else{

alert(“All is well with the world”);

}

因为给定条件”1>2”的值是false，所以我们将看到如下所示的结果。

1.2.1 比较操作符

JavaScript还提供了许多几乎只在条件语句里使用的操作符，包括大于(>)，小于(<)，大于或等于(>=)，小于或等于(<=)之类的比较操作符。

如果想比较两个值是否相等，可以使用“等于”比较操作符。这个操作符由两个等号构成(==)。别忘了，单个等号(=)是用于完成赋值操作的。如果你在条件语句的某个条件里使用了单个等号，那么只要相应的赋值操作取得成功，那个条件的求值结果就将是true。

JavaScript还提供了一个用来进行“不等于”比较的操作符，它由一个感叹号和一个等号构成(!=)。

1.2.2 逻辑操作符

JavaScript允许我们把条件语句里的操作组合在一起。组合它们的操作符就叫逻辑操作符。有逻辑与(&&)，逻辑或(||)和逻辑非(!)

逻辑操作符的操作对象是布尔值。每个逻辑操作数返回一个布尔值true或者是false。“逻辑与”操作只有在它的两个操作数都是true时才会是true。

“逻辑或”只要它的操作数中有一个是true，“逻辑或”就将是true。只有当它的两个操作数都是false时，“逻辑或”操作才会是false。

“逻辑非”操作符只能作用于单个逻辑操作数，其结果是把那个逻辑操作数所返回的布尔值取反：如果那个逻辑操作数所返回的布尔值是true，“逻辑非”操作符将把它取反为false。

2.7 循环语句

if语句或许是最重要，最有用的条件语句了。if语句的唯一不足是它无法用来完成重复性的操作。在if语句里，包含在花括号里的代码块只能执行一次。如果需要反复多次地执行同一个代码块，就必须使用循环语句。

循环语句可以让我们反复多次地执行同一段代码。循环语句分为几种不同的类型，但它们的工作原理几乎一样：只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去：一旦给定条件的求值结果不再是true，循环也就到此为止。

2.7.1 while

while循环与if语句非常相似，它们的语法几乎完全一样：

while(条件){

语句块;

}

while与if的唯一区别是：只要给定条件的求值结果是true，包含在花括号里的代码就将反复地执行下去。下面是一个while循环的例子：

var count=1;

while(count<11){

alert(count);

count++;

}

我们来仔细分析一下上面这段代码。首先，创建数值变量count并赋值为1；然后，以count<11——意思是“只要变量count的值小于11,就重复执行这个循环”，为条件创建一个while循环。在while循环的内部，用“++”操作符对变量count的值执行加1操作；而这一操作将重复执行10次。如果用Web浏览器来来观察这仙代码的执行情况，将会看到一个alert对话框闪现了10次。这条循环语句执行完毕后，变量count的值将是11。

注意这里的关键是在while循环的内部必须发生一些会影响循环控制条件的事情。在上例中，我们在while循环的内部对变量count的值进行加1操作，而这将导致循环控制条件在经过10次循环后的求值结果会变成false。如果我们不对变量count的值执行加1操作，这个while循环将永远执行下去。

2.7.2 do…while

类似于if语句的情况，while循环的花括号部分所包含的语句有可能不被执行。因为对循环控制条件的求值发生在每次循环开始之前，所以如果循环控制条件的首次求值结果是false，那些代码将一次也不会被执行。如下所示：

var count=1;

while(count<1){

alert(count);

count++;

}

上面的while循环以count<1为条件，很明显，这个条件的计算结果一开始就是false，所以循环不会被执行，而count的值也将保持为1。

在某些场合，我们需要那些被包含在循环语句内部的代码至少执行一次。这时，do循环将是我们最佳选择。下面是do循环的语法：

do{

语句块;

}while(条件);

这与上一节介绍的while循环非常相似，但有个显而易见的区别：对循环控制条件的求值发生在每次循环结束后。因此，即使循环控制条件的首次求值结果是false，包含在花括号里的语句也至少会被执行一次。

我们可以把前一小节里的while循环改写为如下所示的do…while循环：

var count=1;

do{

alert(count);

count++;

} while(count<11);

这段代码的执行结果与while循环的执行结果完全一样：alert消息将闪现10次；在循环结束后，变量count的值将是11。

再来看看下面这个变体：

var count=1;

do{

alert(count);

count++;

}while(count<1);

在这个do循环里，循环控制条件的求值结果同样永远不为true：变量count的初始值是1,所以它在这里永远不会小于1。可是，因为do循环的循环控制条件出现在花括号部分之后，所以包含在这个do循环内部的代码还是执行一次。也就是说，仍将看到1条alert消息。还有一个细节需要大家注意：这些语句执行完毕后，变量count的值将是2而不是1——虽然这并没有改变这个例子里“循环控制条件的求值结果是false”的事实。

2.7.3 for

如果仔细观察上一小节里的while或do…while循环的例子，我们就会发现它们都可以被写为如下所示的样子：

初始化；

while(条件){

语句块；

自增；

}

而for循环不过是把如上所示的循环结构进一步改写为如下所示的紧凑形式而已：

for(初始化条件；测试条件；自增){

语句块；

}

我们可以把上一小节里的do循环例子改写为如下所示的for循环：

for(var count=1;count<11;count++){

alert(count);

}

与循环有关的所有内容都包含在for语句的圆括号里。现在，当我们把一些代码放在花括号中间的时候，我们清楚地知道那些代码将被执行10次。

for循环最常见的用途之一是对某个数组里的全体元素进行遍历(默然说话：遍历？就是把一个集合里的元素全部按顺序数一遍！)处理。这往往需要用到数组的array.length属性，这个属性可以告诉我们在给定数组里的元素的个数：

var beatles=Array("John","Paul","George","Ringo");

for(var count=0;count<beatles.length;count++){

alert(beatles[count]);

}

运行这段代码(默然说话：运行？将它粘贴到example.js中，然后加载test.html到浏览器)，你们将看到4条alert消息，它们分别对应着Beatles乐队的四位成员。

2.8 函数

如果需要多次使用同一组语句，还可以把它们打包为一个函数。所谓函数(function)就是一组允许人们在代码里随时调用的语句。从效果上看，每个函数都相当于一个短小的脚本。

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

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

function shout(){

var beatles=Array(“John”,”Paul”,”George”,”Ringo”);

for(var count=0;count<beatles.length;count++){

alert(beatles[count]);

}

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

shout();

每当需要反复执行一段代码时，我们都可以利用函数来避免重复输入大量的相同的内容。不过，函数的真正威力体现在，我们可以把不同的数据传递给它们，而它们将使用实际传递给它们的数据去完成预定的操作。在把数据传递给函数时，我们把那些数据称为参数(argument)。

下面是用来定义一个函数的语法：

function name(参数){

语句块；

}

JavaScript提供了许多可以拿来就用的内建函数，在前面的内容里多次出现过的alert()就是一个内建函数：这个函数需要我们提供一个参数，它将弹出一个对话框来显示这个参数的值。

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

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

function multiply(num1,num2){

var total=num1*num2;

alert(total);

}

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

multiply(10,2);

把数值10和2传递给multiply()函数的结果如下所示。

我们完全可以创建一个函数并让它返回一个数值，一个字符串，一个数组或一个布尔值。这需要用到reutrn语句：

function multiply(num1,num2){

var total=num1*num2;

return total

}

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

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);

把华氏温度95转换为摄氏温度值的结果如下所示：

你们或许想知道我是如何命名变量和函数的。在命名变量时，我用下划线来分隔各个单词；在命名函数时，我从第二个单词开始把每个单词的第一个字母写成大写形式(也就是所谓的Camel记号)。这么做是为了让自己能够一眼看出哪些名字是变量，哪些名字是函数。与变量的情况一样，JavaScript语言也不允许函数的名字里包含空格。Camel记号可以在不违反这一规定的前提下，把变量和函数的名字以一种既简单又明确的方式区分开来。

变量的作用域

变量既可以是全局的，也可以是局部的。谈论全局变量和局部变量之间的区别时，我们其实是在讨论变量的作用域(scope)。

全局变量(global variable)可以在脚本中的任何位置被引用。一旦你在某个脚本里声明了一个全局变量，你就可以从这个脚本中的任何位置——包括各有关函数的内部——引用它。全局变量的作用域是整个脚本。

局部变量(local variable)只存在于对它做出声明的那个函数的内部，在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。

因此，我们在函数里既可以使用全局变量，也可以使用这个函数的局部变量。这一细节很有用，但它有时也会导致一些问题。如果在一个函数的内部不小心使用了某个全局变量的名字，即使本意是想使用一个局部变量，JavaScript也会认为是在引用那个全局变量。

还好，我们可以用var关键字明确地为在函数中使用的变量设定一个作用域。

如果在某个函数中使用了var，那个变量就将被视为一个局部变量，它将只存在于这个函数的上下文中；反之，如果没有使用var，那个变量就将被视为一个全局变量，如果你的脚本里已经存在一个与之同名的变量，这个函数将覆盖那个现有变量的值。

我们来看下面这个例子：

function square(num){

total=num*num;

return total;

}

var total=50;

var number=square(20);

alert(total);

这些代码将不可避免地导致全局变量total的值发生变化。

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

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

function square(num){

var total=num*num;

return total;

}

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

请记住，函数在行为方面应该像一个自我包容的脚本，而这意味着在定义一个函数时，我们必须把它内部的变量全都声明为局部变量。如果从没忘记在函数里使用var关键字，就可以避免任何形式的二义性隐患。

2.9 对象

对象(object)是一种非常重要的数据类型。对象是自我包含的数据集合，包含在对象里的数据可以通过两种形式——即属性(property)和方法(method)访问：

q 属性是隶属于某个特定对象的变量；

q 方法是只有某个特定对象才能调用的函数。

对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体。

在JavaScript脚本里，属性和方法都需要使用如下所示的“点”语法来访问：

Object.property

Object.method()

你们已经见过如何用mood和age等变量来存放诸如“心情”和“年龄”之类的值。如果它们是某个对象的属性——这里不妨假设那个对象的名字是Person，我们就必须使用如下所示的记号来使用它们：

Person.mood

Person.age

假如Person对象还关联着一些诸如walk()和sleep()之类的函数，这些函数就是这个对象的方法，而我们必须使用如下所示的记号来访问它们：

Person.walk()

Person.sleep()

我们可以把Person看作是所有这些属性和方法的统称。

为了使用Person对象来描述一个特定的人，我们需要创建一个Person对象的实例(instance)。实例是对象的具体表现；对象是统称，实例是个体。例如，你和我都是人，都可以用Person对象来描述；但你和我是两个不同的个体，很可能有着不同的属性值(例如，你和我的年龄可能不一样)。因此，你和我对应着两个不同的Person对象——它们虽然都是Person对象，但它们是两个不同的实例。

在JavaScript语言里，为给定对象创建一个新实例需要使用new关键字，如下所示：

var jeremy=new Person;

上面这条语句将创建出Person对象的一个新实例jeremy。有了这个新实例，我们就可以像下面这样利用Person对象的属性来检索关于Jeremy的信息了：

jeremy.age

jeremy.mood

对象，属性，方法和实例等概念都比较抽象，为了让大家对这些概念有一个直观的认识，我在这里把虚构的Person对象作为例子。Person对象在JavaScript语言里并不存在。我们可以利用JavaScript语言来创建自己的对象——术语称之为用户定义对象(user-defined object)。用户定义对象的创建工作是一个相当高级的话题，我们眼下还无需对它做进一步讨论。

2.9.1 内建对象

你们其实已经见过一些JavaScript内建对象了。数组就是一种JavaScript内建对象。当我们使用new关键字去初始化一个数组时，其实是在创建一个Array对象的新实例：

var beatles=new Array();

当需要了解某个数组有多少个元素时，我们利用Array对象的length属性来获得这一信息：

beatles.length;

Array对象只是诸多JavaScript对象中的一种。其他例子包括Math对象和Date对象，它们他别提供了许多非常有用的方法供人们与数值和日期值打交道。例如，Math对象的round方法可以把十进制值舍入为一个与之最接近的整数(四舍五入取整)：

var num=7.56;

var num=Math.round(num);

alert(num);

Date对象可以用来存储和检索与一个特定的日期和时间有关的信息。在创建Date对象的新实例时，JavaScript解释器将自动地使用当前日期和时间对它进行初始化：

var current_date=new Date();

Date对象提供了getDay()，getHours()，getMonth()等一系列方法，以供人们用来检索与特定日期有关的各种信息。例如，getDay()方法可以告诉我们给定日期是星期几：

var today=current_date.getDay();

在编写JavaScript脚本时，内建对象可以帮助我们快速，简单地完成许多任务。

2.9.2 宿主对象

由Web浏览器提供的预定义对象被称为宿主对象(host object)。

宿主对象包括Form，Image和Element。我们可以通过这些对象获得关于某给定网页上的表单，图像和各种表单元素的信息。

虽然宿主对象很有用，但本书没有收录任何这方面的例子。因为还有一种对象可以用来获得关于某给定网页上的任何一个元素的信息，它就是document对象。在本书的后续内容里，我们将向大家介绍许多隶属于document对象的属性和方法。

2.10 小结

在这一章中，我们介绍了JavaScript语言的基本语法。在本书的后续章节中，我们还会用到这里介绍的许多概念和术语：语句，变量，数组和函数等。这些概念有的现在还不太容易理解，但我相信你们在看过它们在脚本里的实际应用后一定会加深对它们的领悟。在后面的学习里，如果需要重温这些基本概念的含义，你们随时可以返回到这一章来。

本章只对“对象”做了一个概念性的介绍。如果你们对它的理解还不够深入，别着急。我们将在下一章对document对象做进一步的探讨。我们将先向大家介绍一些与这个对象相关联的属性和方法。这些属性和方法都是由W3C的标准化DOM提供的。

在下一章中，我们将向大家介绍基于DOM的基本编程思路并向大家演示如何使用它的一些功能非常强大的方法。

您好：
    当您在阅读和使用我所提供的各种内容的时候，我非常感谢，您的阅读已是对我最大的支持。
    我更希望您能给予我更多的支持。
    1.希望您帮助我宣传我的博客，让更多的人知道它，从中获益(别忘记了提醒他们帮我点点广告，嘿嘿)。
    2.希望您能多提出宝贵意见，包括我所提供的内容中的错误，建设性的意见，更希望获得哪些方面的帮助，您的经验之谈等等。
    3.更希望能得到您经济上的支持。

    我博客上面的内容均属于个人的经验，所有的内容均为开源内容，允许您用于任何非商业用途，并不以付费为前提，如果您觉得在阅读和使用我所提供的各种内容的过程中，您得到了帮助，并能在经济上给予我支持，我将感激不尽。

您可以通过点击我网站上的广告表示对我的支持。

    您可以通过银行转帐付款给我：
    招商银行一卡通：
    卡号：6225888712586894
    姓名：牟勇

    您也可以通过汇款的方式：
    通讯地址：云南省昆明市女子(28)中学人民中路如意巷1号
    收信人：陈谦转牟勇收
    邮编：650021

    无论您给予我怎么样的支持，我都衷心的再次感谢。
    欢迎光临我的博客，欢迎宣传我的博客
    http://hi.csdn.net/mouyong
    http://blog.csdn.net/mouyong
    http://blog.sina.com.cn/mouyong
    EMail:mouyong@yeah.net
    QQ:11167603
    MSN:mouyong1973@hotmail.com