1、第13章 在网页中加入神奇的效果,在学习了HTML和CSS之后，设计者可以制作出一些精美的网页。而未来的趋势，不仅仅只是要求页面的美观，或者说，无法互动的网页始终无法满足所有浏览用户的要求。为了让网页能有动态的变化，使得用户可以与网页进行交互，IE提供了Dynamic HTML技术，简称为DHTML。DHTML主要由3个部分组成，分别为HTML网页标记、Script语言与CSS。,13.1 什么是脚本语言,脚本语言是一种解释性语言，不需要编译，一般用来编写嵌入在网页中的程序，由浏览器来负责解释执行。参照第12章中的实例12-1，在HTML网页中，脚本程序代码是放在标签中的，浏览器正是通过该标签
2、来识别脚本程序的。,13.1.1 初识VBScript,VBScript是基于微软Microsoft公司的Visual Basic的。其广泛应用于网页和ASP程序制作，因为其与Visual Basic的紧密联系，所以对于拥有Visual Basic开发经验的程序员来说，很容易入门。,13.1.2 学习JavaScript的起步,JavaScript是Netscape公司借鉴Sun公司的Java的相关概念，将其自身的Livescript进行重新设计之后推出的。因此JavaScript的很多语法都与C+、Java的风格非常相似。学习过这些编程语言将有助于学习JavaScript。与C+、Java等
3、编程语言类似，在JavaScript中也包含类、对象、变量、函数等，而且使用的流程控制也基本相似。不同之处在于JavaScript的语法规则更松散，不像编程语言那么复杂。,13.2 JavaScript和Java的区别,在13.1节中提到，JavaScript与目前盛行的编程语言Java比较相似。然而对于学习者来说，需要明确JavaScript与Java是不一样的，有很多初学者不明白这两者的区别。事实上，它们并不像字面看上去的那样联系紧密，JavaScript并不是Java的子集，而是有很大的区别，不理解这点可能会掉入混为一谈的误区。 此外，二者在嵌入方式上也不一样，Java通过标签来标识，是
4、一种与HTML无关的格式。其代码以字节代码的形式保存在独立的文档中，必须通过HTML引用装载。而JavaScript是以文本的形式存在的，可以直接放在标签之间。,13.3 JavaScript的基本语法,前面介绍了什么是JavaScript，以及JavaScript的特点，并且通过一个简单的JavaScript示例实现了单击按钮弹出对话框的功能。对比之前讲过的HTML，设计者可以初步体验到JavaScript与用户互动的特效功能。然而这个示例只是冰山一角，还不足以完全展现JavaScript的魅力。,13.3.1 JavaScript中的标识符和保留关键字,也许有C、C+或者Java编程经验的
5、人对标识符这个概念已经不陌生了，而JavaScript中的标识符与其他编程语言中的概念基本一样，是指JavaScript中定义的符号，必须以字母、下划线（_）或美元符号（$）开始。其他字符可以是字母、数字、下划线或美元符号，例如变量名、函数名等。但是，标识符不能是JavaScript中的保留关键字且不能包含空格。,13.3.1 JavaScript中的标识符和保留关键字,例如，下面都是定义“电话号码”的合法标识符。telephoneNum telephone_Num _telephoneNum $telephoneNum tl,13.3.1 JavaScript中的标识符和保留关键字,下面的都
6、是非法标识符。this this是JavaScript中的保留关键字 2008_Olympic 标识符不能以数字开头 2008.08 标识符中不能含有点（.） One World 标识符中不能含有空格,13.3.1 JavaScript中的标识符和保留关键字,使用者在编写时为了避免使用保留关键字来定义标识符，可以参考下表中总结的JavaScript保留关键字。,13.3.2 JavaScript语法的特殊规则,JavaScript对大小写非常敏感，在程序中定义xman和Xman是不同的，这是两个变量。前面已经提过，在此处不厌其烦地再提是因为这是一个初学者犯错率很高的知识点。HTML是对大小写不
7、敏感的，xman和Xman是一样的。 一般情况下，JavaScript每条执行语句的后面都要以英文分号（;）来结束。但是当JavaScript的代码作为属性值时，最后一句后面的分号可以省略，例如： action=“javascript:checkDay()“ /省略了最后的分号。,13.3.2 JavaScript语法的特殊规则,注意英文标点符号和中文标点符号的区别，在JavaScript中用的都是英文标点符号，不只是初学者，就是身经百战的开发者，有时候也会因为马虎将“,”写成“，”，将“;”写成“；”。这也是在调试程序时应该重点查找的地方。,13.3.2 JavaScript语法的特殊规则,
8、注意：在JavaScript中，“/”表示注释一行代码，注释多行代码时使用“/*”开头，以“*/”结尾。另外，“/* */”中可以嵌套“/”，但不能嵌套“/* */”，因为第一个“/*”会与其后面第一次出现的“*/”配对，例如：/* /第一个注释符/*下面的代码会弹出一个警告框*/ /第二个注释符警告框中的内容是“好运2008！” */ alert(“好运2008“); ,13.4 JavaScirpt的数据类型,JavaScript数据类型包括基本数据类型和内置数据类型。基本数据类型一般包括5种：整型、实型、字符串型、布尔型和空值。基本数据类型定义的数据可以是常量也可以是变量。JavaScr
9、ipt的常量又称为字面常量，其值不能随便改变。变量是程序向系统申请的内存单元，用来存储各种类型的数据。,13.4.1 常量,与基本数据类型相对应，常量一般分为5种，分别是整型常量、实型常量、布尔型常量、字符型常量和空值。在编写JavaScript程序时，常量数据类型是应用广泛、常见的一种类型。常量通常类似于可以看得到，能想象出来的元素。,13.4.2 变量,变量并非是指一个变换不定的元素，变量相当于设置好一个位置，或者是一个符号，使用者可以将不同的元素定义为这个位置或者符号，这就是变量的含义。JavaScript中采用弱类型的变量形式，即声明一个变量时不必指明其为整型还是字符型。而是使用关键字
10、var声明即可，例如： var telephoneNum; 这条语句定义了一个变量，即申请了内存。但还没有值，可以在使用时为其赋值，如将一个数值赋给这个变量。 telephoneNum=62286688;,13.4.3 数据类型转换,在数据类型的使用过程中，经常会遇到返回值并不是要求的数据类型的情况，这就需要在不同数据类型之间进行转换。JavaScript中数据类型的转换方法有两种：一是将整个值从一种类型转换为另一种数据类型；二是从一个值提取另一种类型的值，并完成转换工作。,13.4.3 数据类型转换,1一种类型转换为另一种数据类型 这种情况有3种转换方法：分别是String()、Number
11、()和Boolean()方法。 String()方法：表示将任意一种数据类型转换为字符型。例如：String(2008); 其转换结果为：“2008“。 Number()方法：将任意一种数据类型转换为数值型。例如： Number(“2008“); 其转换结果为：2008。Boolean()方法：将任意一种数据类型转换为布尔型。例如： Boolean(“aaa“); 其转换结果为true。,13.4.3 数据类型转换,2从一个值提取另一种类型的值，并完成转换工作 这种情况也有3种转换方法：分别是pareInt()、parseFloat( )和eval( )。 parseInt()：表示提取字符串
12、中的整数。例如：parseInt(“2008Olympic“);其转换结果为：2008。 parseFloat()：表示提取字符串中的浮点数。例如： parseFloat(“2008.08Olympic“);其转换结果为：2008.08。 eval()：表示执行用字符串表示的一段JavaScript代码。例如：nextOlympic=eval(“2008+4“);其转换结果为：nextOlympic=2012。,13.4.4 运算符,JavaScript是用来处理对象运算的符号，是具有全范围的运算符。按照处理对象的数目分为单元运算符、二元运算符、三元运算符。更常见的分类方法是按照功能来分：赋值
13、运算符、算术运算符、比较运算符、逻辑运算符和位运算符。,1算术运算符,JavaScript中常用的算术运算符如下表所示。,2赋值运算符,赋值运算符是将其右边的一个值或者表达式的值赋给其左边的变量，常用的赋值运算符如下表所示。,3比较运算符,比较运算符用在逻辑语句中，比较两边的操作数，返回一个布尔值，结果为真时返回true，结果为假时返回false。常用的比较运算符如下表所示。,4逻辑运算符,逻辑运算符用于测定变量和值之间的逻辑，采用布尔值true或false作为操作数，其返回值也是逻辑值。常用的逻辑运算符如下表所示，假定x=8且y=5。,5位运算符,位运算符包括位逻辑运算符和位移动运算符。位逻
14、辑运算符有3种：&、|、。位移动运算符有3种：、。位运算符在编写JavaScript程序时不太常用，此处不做详细介绍，需要时可参考相关手册。,13.4.5 表达式,在学习完变量和运算符之后，表达式的概念就很容易理解了，其实在前面已经多次见到过简单的表达式。表达式是变量、常量及运算符的集合。一般分为算术表达式、字符串表达式、赋值表达式，以及关系表达式等。,13.4.5 表达式,如下表所示为按优先级从高到低列出的JavaScript运算符，具有相同优先级的运算符按从左至右的顺序求值。,13.4.5 表达式,来看一个表达式的例子，例如： y=2008*(55+6+23); 在该表达式中有5个运算符：
15、=、*、( )、+、+。按照上表的优先级规则从高到低应为：()、+、+、*、=。,13.5 流程控制,程序并不都是按部就班地执行，这就需要控制结构来大显神威。日常生活中经常会根据不同的情况做不同的决定。比如下雨就呆在家里看奥运直播，或者不下雨就跟朋友出去逛街，不同条件下触发不同的流程结果。再比如在工厂中，控制程序控制机器不停地执行组装汽车零件，这些情况的处理就离不开流程控制了。JavaScript常用的程序流程有3种结构：顺序结构、选择结构和循环结构。,13.5.1 顺序结构,顺序结构是最基本的控制结构，任何一个程序都离不开，是程序按照自上而下的顺序逐行执行。例如：var x=2008; al
16、ert(x); /弹出一个对话框显示变量x的值,13.5.2 选择结构,比较常用的选择结构有if结构、ifelse结构和switch结构。选择结构就是像“如果不是那么将”这样形式的结构。,1if结构,if结构的格式写法是： if(条件语句)语句 例如： var y=10; if(y9) alert(y); ,2ifelse结构,ifelse的格式是： if(条件语句) 语句1 else 语句2 ,2ifelse结构,例如： var y=2008; if(y=2008) alert(“奥运年“); else alert(“年年有余“); ,3switch结构,对于条件语句拥有多个值时，使用swi
17、tch语句就会显得得心应手。其语句的格式是： switch(表达式) case 取值1:语句1break;case 取值2:语句2break;default:语句n+1break; ,3switch结构,例如： switch(month) case February:alert(“28天“);break;case April:case June:case September:case November:alert(“30天“);break;default:alert(“31天“);break;,13.5.3 循环结构,循环结构一般有while结构、do while结构和for结构。它们都是表示
18、一个动作完成之后，然后继续重复让一个动作。 该结构的格式是： while(条件表达式) 语句 ,1while结构,例如： var i=0; while(i10) alert(“我在循环中“+i);i+; ,2dowhile结构,dowhile的格式是： do 语句 while(条件表达式); 例如： var i=0; do alert(“我在循环中“+i);i+; while(i10),3for结构,最常用的循环是for循环，在学习其用法之后，可与其他循环结构对比，根据个人习惯选择使用哪种。for循环语句的格式是： for(初始值;循环条件;更新值) 语句 ,3for结构,for(var i=
19、0;i10;i+) alert(“我在循环中“+i); 如果修改while结构中的代码。例如： var i=0; while(i10) alert(“我在循环中“+i);break;i+; ,3for结构,再将代码改为： var i=0; while(i10) /while循环 alert(“我在循环中“+i);continue; /跳出本次循环i+; ,13.6 了解函数,在编写程序时，经常有几处或者更多地方需要相同的功能。如果在每一处均写相同的代码，这将使得程序显得冗余。例如在写射击类游戏程序时，最常用的一段代码就是发射子弹，在这样一个程序中，需要发射子弹代码的地方多则有几十处甚至上百处。
20、 通常情况下，函数的语法格式写为： function 函数名(参数1,参数2,参数n) 语句return 表达式; ,13.6 了解函数,在编写JavaScript时并不是所有的函数都必须自己写，JavaScript的开发者在设计时已经提供了一些系统函数供JavaScript程序员来使用。常用的JavaScript系统函数如下表所示。,13.6 了解函数,13.7 案例：一个使用基本语法的JavaScript例子,在日常生活中，对于上班时间比较灵活的单位来说，如何能够及时、准确地令公司员工了解自己的上班时间是一个棘手的问题。公司的管理人员不会一个挨一个电话通知，难免总有员工会马虎弄错自己的上班时间。这样，可以求助于Web，在公司的主页中设计一个员工上班时间查询系统，那么公司的员工就可以通过网络很方便地查询自己的工作日期。,13.8 小结,通过本章的学习，读者对基本的程序语法有了简单的概念，也许目前未能很好地体会这些语法究竟能做什么，不过了解这些基础会对今后的学习有更好的帮助。,
