第13章在网页中加入神奇的

第13章在网页中加入神奇的效果•在学习了HTML和CSS之后，设计者可以制作出一些精美的网页。而未来的趋势，不仅仅只是要求页面的美观，或者说，无法互动的网页始终无法满足所有浏览用户的要求。为了让网页能有动态的变化，使得用户可以与网页进行交互，IE提供了DynamicHTML技术，简称为DHTML。DHTML主要由3个部分组成，分别为HTML网页标记、Script语言与CSS。13.1什么是脚本语言•脚本语言是一种解释性语言，不需要编译，一般用来编写嵌入在网页中的程序，由浏览器来负责解释执行。参照第12章中的实例12-1，在HTML网页中，脚本程序代码是放在script标签中的，浏览器正是通过该标签来识别脚本程序的。13.1.1初识VBSCRIPT•VBScript是基于微软Microsoft公司的VisualBasic的。其广泛应用于网页和ASP程序制作，因为其与VisualBasic的紧密联系，所以对于拥有VisualBasic开发经验的程序员来说，很容易入门。13.1.2学习JAVASCRIPT的起步•JavaScript是Netscape公司借鉴Sun公司的Java的相关概念，将其自身的Livescript进行重新设计之后推出的。因此JavaScript的很多语法都与C++、Java的风格非常相似。学习过这些编程语言将有助于学习JavaScript。与C++、Java等编程语言类似，在JavaScript中也包含类、对象、变量、函数等，而且使用的流程控制也基本相似。不同之处在于JavaScript的语法规则更松散，不像编程语言那么复杂。13.2JAVASCRIPT和JAVA的区别•在13.1节中提到，JavaScript与目前盛行的编程语言Java比较相似。然而对于学习者来说，需要明确JavaScript与Java是不一样的，有很多初学者不明白这两者的区别。事实上，它们并不像字面看上去的那样联系紧密，JavaScript并不是Java的子集，而是有很大的区别，不理解这点可能会掉入混为一谈的误区。•此外，二者在嵌入方式上也不一样，Java通过applet标签来标识，是一种与HTML无关的格式。其代码以字节代码的形式保存在独立的文档中，必须通过HTML引用装载。而JavaScript是以文本的形式存在的，可以直接放在script标签之间。13.3JAVASCRIPT的基本语法•前面介绍了什么是JavaScript，以及JavaScript的特点，并且通过一个简单的JavaScript示例实现了单击按钮弹出对话框的功能。对比之前讲过的HTML，设计者可以初步体验到JavaScript与用户互动的特效功能。然而这个示例只是冰山一角，还不足以完全展现JavaScript的魅力。13.3.1JAVASCRIPT中的标识符和保留关键字•也许有C、C++或者Java编程经验的人对标识符这个概念已经不陌生了，而JavaScript中的标识符与其他编程语言中的概念基本一样，是指JavaScript中定义的符号，必须以字母、下划线（_）或美元符号（$）开始。其他字符可以是字母、数字、下划线或美元符号，例如变量名、函数名等。但是，标识符不能是JavaScript中的保留关键字且不能包含空格。13.3.1JAVASCRIPT中的标识符和保留关键字•例如，下面都是定义“电话号码”的合法标识符。•telephoneNum•telephone_Num•_telephoneNum•$telephoneNum•tl13.3.1JAVASCRIPT中的标识符和保留关键字•下面的都是非法标识符。•thisthis是JavaScript中的保留关键字•2008_Olympic标识符不能以数字开头•2008.08标识符中不能含有点（.）•OneWorld标识符中不能含有空格13.3.1JAVASCRIPT中的标识符和保留关键字•使用者在编写时为了避免使用保留关键字来定义标识符，可以参考下表中总结的JavaScript保留关键字。abstractbooleanBreakbytecaseCatchcharclassconstcontinuedefaultDodoubleelseextendsfalsefinallyFloatforfunctionGotoininstanceofIntifimplementsimportinterfacelongNativenewnullpackageprivateprotectedPublicreturnshortStaticsuperswitchsynchronizedthisthrowthrowstransienttrueTryvarvoidWhilewith13.3.2JAVASCRIPT语法的特殊规则•JavaScript对大小写非常敏感，在程序中定义xman和Xman是不同的，这是两个变量。前面已经提过，在此处不厌其烦地再提是因为这是一个初学者犯错率很高的知识点。HTML是对大小写不敏感的，xman和Xman是一样的。•一般情况下，JavaScript每条执行语句的后面都要以英文分号（;）来结束。但是当JavaScript的代码作为属性值时，最后一句后面的分号可以省略，例如：•action=javascript:checkDay()//省略了最后的分号。13.3.2JAVASCRIPT语法的特殊规则•注意英文标点符号和中文标点符号的区别，在JavaScript中用的都是英文标点符号，不只是初学者，就是身经百战的开发者，有时候也会因为马虎将“,”写成“，”，将“;”写成“；”。这也是在调试程序时应该重点查找的地方。13.3.2JAVASCRIPT语法的特殊规则•注意：在JavaScript中，“//”表示注释一行代码，注释多行代码时使用“/*”开头，以“*/”结尾。另外，“/**/”中可以嵌套“//”，但不能嵌套“/**/”，因为第一个“/*”会与其后面第一次出现的“*/”配对，例如：•scriptlanguage=javascript•/*//第一个注释符•/*下面的代码会弹出一个警告框*///第二个注释符•警告框中的内容是“好运2008！”•*/•alert(好运2008);•/script13.4JAVASCIRPT的数据类型•JavaScript数据类型包括基本数据类型和内置数据类型。基本数据类型一般包括5种：整型、实型、字符串型、布尔型和空值。基本数据类型定义的数据可以是常量也可以是变量。JavaScript的常量又称为字面常量，其值不能随便改变。变量是程序向系统申请的内存单元，用来存储各种类型的数据。13.4.1常量•与基本数据类型相对应，常量一般分为5种，分别是整型常量、实型常量、布尔型常量、字符型常量和空值。在编写JavaScript程序时，常量数据类型是应用广泛、常见的一种类型。常量通常类似于可以看得到，能想象出来的元素。13.4.2变量•变量并非是指一个变换不定的元素，变量相当于设置好一个位置，或者是一个符号，使用者可以将不同的元素定义为这个位置或者符号，这就是变量的含义。JavaScript中采用弱类型的变量形式，即声明一个变量时不必指明其为整型还是字符型。而是使用关键字var声明即可，例如：•vartelephoneNum;•这条语句定义了一个变量，即申请了内存。但还没有值，可以在使用时为其赋值，如将一个数值赋给这个变量。•telephoneNum=62286688;13.4.3数据类型转换•在数据类型的使用过程中，经常会遇到返回值并不是要求的数据类型的情况，这就需要在不同数据类型之间进行转换。JavaScript中数据类型的转换方法有两种：一是将整个值从一种类型转换为另一种数据类型；二是从一个值提取另一种类型的值，并完成转换工作。13.4.3数据类型转换•1．一种类型转换为另一种数据类型•这种情况有3种转换方法：分别是String()、Number()和Boolean()方法。•String()方法：表示将任意一种数据类型转换为字符型。例如：String(2008);其转换结果为：2008。•Number()方法：将任意一种数据类型转换为数值型。例如：•Number(2008);其转换结果为：2008。Boolean()方法：将任意一种数据类型转换为布尔型。例如：•Boolean(aaa);其转换结果为true。13.4.3数据类型转换•2．从一个值提取另一种类型的值，并完成转换工作•这种情况也有3种转换方法：分别是pareInt()、parseFloat()和eval()。•parseInt()：表示提取字符串中的整数。例如：parseInt(2008Olympic);其转换结果为：2008。•parseFloat()：表示提取字符串中的浮点数。例如：•parseFloat(2008.08Olympic);其转换结果为：2008.08。•eval()：表示执行用字符串表示的一段JavaScript代码。例如：nextOlympic=eval(2008+4);其转换结果为：nextOlympic=2012。13.4.4运算符•JavaScript是用来处理对象运算的符号，是具有全范围的运算符。按照处理对象的数目分为单元运算符、二元运算符、三元运算符。更常见的分类方法是按照功能来分：赋值运算符、算术运算符、比较运算符、逻辑运算符和位运算符。1．算术运算符•JavaScript中常用的算术运算符如下表所示。运算符运算符说明示例+加法运算或者正值运算符y+2008，+2-减法运算符或赋值运算符100-8，-9*乘法运算符3*5/除法运算符12/4%求模运算符5%3++将变量值加1后再将结果赋给这个变量++1，1++--将变量减1后再将结果赋给这个变量--1，1--2．赋值运算符•赋值运算符是将其右边的一个值或者表达式的值赋给其左边的变量，常用的赋值运算符如下表所示。运算符运算符说明示例=赋值运算符i=5+=加法赋值运算符号i+=5-=减法赋值运算符i-=5*=乘法赋值运算符i*=5/=除法赋值运算符i/=5%求模赋值运算符i%=53．比较运算符•比较运算符用在逻辑语句中，比较两边的操作数，返回一个布尔值，结果为真时返回true，结果为假时返回false。常用的比较运算符如下表所示。运算符运算符说明示例当左边操作数大于右边操作数时返回true，否则返回false43返回true，56返回false当左边操作数小于右边操作数时返回true，否则返回false45返回true，51返回false=当左边操作数大于等于右边操作数时返回true，否则false4=4返回true，4=5返回false=当左边操作数小于等于右边操作数时返回true，否则false4=4返回true，4=1返回false==当左边操作数等于右边操作数时返回true，否则返回false5==5返回true，5==6返回false!=当左边操作数不等于右边操作数时返回true，否则false5!=8返回true，5!=5返回false4．逻辑运算符•逻辑运算符用于测定变量和值之间的逻辑，采用布尔值true或false作为操作数，其返回值也是逻辑值。常用的逻辑运算符如下表所示，假定x=8且y=5。运算符运算符说明示例&&当左右两边操作数均为true时返回true，否则返回false(x10)&&(y4)返回true||当左右两边操作数至少有一个为true时返回true，否则返回false(x=10)&&(y2)返回true!当操作数为true时返回false，否则返回true!(x10)返回false5．位运算符•位运算符包括位逻辑运算符和位移动运算符。位逻辑运算符有3种：&、|、^。位移动运算符有3种：、、。位运算符在编写JavaScript程序时不太常用，此处不做详细介绍，需要时可参考相关手册。13.4.5表达式•在学习完变量和运算符之后，表达式的概念就很