第8章 JavaScript脚本语言

1、网页设计与制作教程（HTML+CSS+JavaScript）,机械工业出版社同名教材配套电子教案,8.1JavaScript简介8.2在网页中插入JavaScript的方法及定义8.3JavaScript的基本数据类型和表达式8.4JavaScript的程序结构8.5基于对象的JavaScript语言8.6DOM对象及编程8.7JavaScript的对象事件处理程序,第8章JavaScript脚本语言,JavaScript语言的前身叫作LiveScript，自从Sun公司推出著名的Java语言后，Netscape公司引进了Sun公司有关Java的程序概念，将LiveScript重新进行设计，并

2、改名为JavaScript。目前流行的多数浏览器都支持JavaScript，如Netscape公司的Navigator3.0以上版本，Microsoft公司的InternetExplorer3.0以上版本。JavaScript是一种行为脚本语言，用JavaScript可以创建出运行在多平台和浏览器上的交互行为和效果。,8.1JavaScript简介,8.2.1在HTML文档中嵌入脚本程序JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为：JavaScript语言代码;JavaScript语言代码;【演练8-1】在HTML文档中嵌入JavaScript的脚本，

3、本例文件8-1.html在浏览器中显示的效果如图8-1和图8-2所示。,8.2在网页中插入JavaScript的方法及定义,8.2.2链接脚本文件可以把脚本保存在一个扩展名为.js的文本文件中，供需要该脚本的多个HTML文件引用。要引用外部脚本文件，使用script标记的src属性指定外部脚本文件的URL。其格式为：,8.2在网页中插入JavaScript的方法及定义,8.2.3在标记内添加脚本可以在HTML表单的输入标记符内添加脚本，以响应输入的事件。【演练8-2】在标记中添加JavaScript的脚本，本例文件8-2.html在浏览器中显示的效果如图8-3和图8-4所示。,8.2在网页中插

4、入JavaScript的方法及定义,8.3.1基本数据类型JavaScript有4种基本的数据类型。number（数值）类型：可为整数和浮点数。在程序中并没有把整数和实数分开，这两种数据可在程序中自由转换。整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，表示10的幂），或者同时包含这两项。string（字符）类型：字符是用单引号“”或双引号“”来说明的。boolean（布尔）类型：布尔型的值为true或false。object（对象）类型：对象也是JavaScript中的重要组成部分，用于说明对象。,8.3JavaScript的基本数据类型和表达式,8.3.

5、2常量常量通常又称为字面常量，它是不能改变的数据。1基本常量（1）字符型常量（2）数值型常量（3）布尔型常量2特殊常量（1）空值（2）控制字符,8.3JavaScript的基本数据类型和表达式,8.3.3变量1变量的命名2变量的类型变量的类型是在赋值时根据数据的类型来确定的，包括字符型、数值型和布尔型。3变量的声明变量的声明和赋值语句var的语法为：var变量名称1=初始值1,变量名称2=初始值2;4变量的作用域变量的作用域是变量的重要概念。在JavaScript中同样有全局变量和局部变量，全局变量是定义在所有函数体之外，其作用范围是全部函数；而局部变量是定义在函数体之内，只对该函数可见，而对

6、其他函数不可见。,8.3JavaScript的基本数据类型和表达式,8.3.4运算符和表达式在定义完变量后，可以对变量进行赋值、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量和运算符的集合，因此表达式可以分为算术表述式、字符串表达式、布尔表达式。运算符是完成操作的一系列符号，在JavaScript中有算术运算符、字符串运算符、比较运算符、布尔运算符等。运算符又分为双目运算符和单目运算符。单目运算符，只需一个操作数，其运算符可在前或后。双目运算符格式如下：操作数1运算符操作数2,8.3JavaScript的基本数据类型和表达式,1赋值语句把右边表达式赋值给左边的变量。其格式为

7、：变量名=表达式;2注释语句单行注释语句的格式为：/注释内容多行注释语句的格式为：/*注释内容注释内容*/3输出字符串（1）用document对象的write()方法输出字符串document.write(字符串1,字符串2,);（2）用window对象的alert()方法输出字符串alert(字符串);,8.4JavaScript的程序结构,4输入字符串（1）用window对象的prompt()方法输入字符串prompt(提示字符串,默认值字符串);（2）用文本框输入字符串使用onBlur事件处理程序，可以得到在文本框中输入的字符串。onBlur事件的具体解释可参考本章后面的内容。【演练8-

8、3】在文本框中输入文本，在对话框中输出其内容，本例文件8-3.html在浏览器中显示的效果如图8-5所示。,8.4JavaScript的程序结构,8.4.2程序控制流程1条件语句JavaScript提供了if、ifelse和switch3种条件语句，条件语句也可以嵌套。（1）if语句if语句是最基本的条件语句，它的格式与C+一样，其格式为：if(条件)语句段1;语句段2;【演练8-4】if语句的用法。本例弹出一个confirm确认框，如果用户单击“确定”按钮，则网页中显示“OK!”；如果单击“取消”按钮，则网页中显示“Cancel!”。本例文件8-4.html在浏览器中显示的效果如图8-6和图

9、8-7所示。,8.4JavaScript的程序结构,（2）ifelse语句ifelse语句的格式为：if(条件)语句段1;else语句段2;（3）switch语句switch(变量)case特定数值1:语句段1;break;case特定数值2:语句段2;break;default:语句段3;,8.4JavaScript的程序结构,8.4.2程序控制流程2循环语句JavaScript中提供了多种循环语句，有for、while和dowhile语句。（1）for循环语句for循环语句的格式为：for(初始化;条件;增量)语句段;（2）while循环语句while循环语句的格式为：while(条件)语

10、句段;,8.4JavaScript的程序结构,8.4.2程序控制流程2循环语句（3）dowhile语句dowhile语句是while的变体，其格式为：do语句段;while(条件)（4）标号语句（5）break语句（6）continue语句,8.4JavaScript的程序结构,8.4.3函数1函数的定义JavaScript也遵循先定义函数，后调用函数的规则。函数的定义通常放在HTML文档头中，也可以放在其他位置，但最好放在文档头，这样就可以确保先定义后使用。定义函数的格式为：function函数名(参数1,参数2,)语句段;return表达式;/return语句指明被返回的值,8.4Java

11、Script的程序结构,8.4.3函数2函数的调用（1）无返回值的调用（2）有返回值的调用变量名=函数名(传递给函数的参数1,传递给函数的参数2,);（3）在超链接标记中调用函数当单击超链接时，可以触发调用函数。有两种方法：方法一：使用标记的onClick属性调用函数，其格式为：热点文本方法二：使用标记的href属性，其格式为：热点文本（4）在装载网页时调用函数,8.4JavaScript的程序结构,1对象（1）对象的概念JavaScript中的对象是由属性（properties）和方法（methods）两个基本的元素构成的。用来描述对象特性的一组数据，也就是若干个变量，称为属性；用来操作对象

12、特性的若干个动作，也就是若干函数，称为方法。（2）对象的使用要使用一个对象，有下面3种方法：引用JavaScnPt内置对象。由浏览器环境中提供。创建新对象。一个对象在被引用之前必须已经存在。（3）对象的操作语句在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。,8.5基于对象的JavaScript语言,1对象2对象的属性对象属性的引用有3种方式。（1）点（）运算符把点放在对象实例名和它对应的属性之间，以此指向一个惟一的属性。属性的使用格式为：对象名.属性名=属性值;（2）对象的数组下标通过“对象下标”的格式也可以实现对象的访问。在用对象的下标访问对象属性时，下标是从0开始，

13、而不是从1开始的。（3）通过字符串的形式实现通过“对象字符串”的格式实现对象的访问：personsex=female;,8.5基于对象的JavaScript语言,3对象的事件事件就是对象上所发生的事情。事件是预先定义好的、能够被对象识别的动作，如单击（Click）事件、双击（DblClick）事件、装载（Load）事件、鼠标移动（MouseMove）事件等，不同的对象能够识别不同的事件。通过事件，可以调用对象的方法，以产生不同的执行动作。有关JavaScript的事件，后面将详细介绍。4对象的方法一般来说，方法就是要执行的动作。JavaScript的方法是函数。如Window对象的关闭（Clo

14、se）方法、打开（Open）方法等。每个方法可完成某个功能，但其实现步骤和细节用户既看不到、也不能修改，用户能做的工作就是按照约定直接调用它们。,8.5基于对象的JavaScript语言,DOM对象的一个特点是，它的各种对象有明确的从属关系。也就是说，一个对象可能是从属于另一个对象的，而它又可能包含了其他的对象。如图8-16所示，显示了DOM对象的从属关系。,8.6DOM对象及编程,8.6.1窗口对象窗口（window）对象处于整个从属关系的最高级，它提供了处理窗口的方法和属性。每一个window对象代表一个浏览器窗口。1属性2方法window对象的主要方法有：（1）close()（2）ope

15、n（URL，windowName,parameterList）（3）alert(text)（4）confirm(text)弹出确认框，参数为确认信息。（5）prompt(text,defaultText)（6）setTimeout(functionName(),scheduletime),8.6DOM对象及编程,8.6.2文档对象文档（document）对象包含当前网页的各种特征，如标题、背景、使用的语言等。1属性主要属性有：title：文档标题。lastmodified：文档最后修改时间。URL：文档对应的页面地址。2方法主要方法有：write(text)：向页面内写文本或标签（不换行）。w

16、riteln(text)：向页面内写文本或标签，在最后一个字符后换行。open()：打开一个新文档。close()：关闭当前文档。,8.6DOM对象及编程,8.6.3位置对象1属性主要属性有：protocol：通信协议。host：页面所在Web服务器的主机名称。port：服务器通信的端口号。2方法主要方法有：assign(URL)：将页面导航到另一个地址上去。reload：将页面全部刷新。replace(URL)：使用制定的URL所对应的页面代替当前页面。,8.6DOM对象及编程,8.6.4历史对象历史（history）对象含有以前访问过的URL地址。1属性主要属性是length，它反映浏览器

17、访问历史记录的数量。2方法主要方法有：back()：加载前一个浏览过的URL。forward()：加载后一个浏览过的URL。go(int)：载入相对于整数个位置之前或之后的链接。例如，history.go(6)表示进入历史清单中后面的第6个URL，history.go(-3)表示进入历史清单之前的第3页。,8.6DOM对象及编程,8.7.1对象的事件利用JavaScript实现交互功能的Web网页基本拥有以下3部分的内容：在head部分定义一些JavaScript函数，其中的一些可能是事件处理函数，另外一些可能是为了配合这些事件处理函数而编写的普通函数。HTML本身的各种格式控制标记。拥有句柄

18、属性的HTML标记，主要涉及一些界面元素。这些元素可把HTML与JavaScript代码相连。,8.7JavaScript的对象事件处理程序,8.7.2常用的事件及处理1浏览器事件浏览器事例主要由Load、unLoad、DragDrop以及Submit等事件组成。（1）Load事件Load事件发生在浏览器完成一个窗口或一组帧的装载之后。（2）Unload事件Unload事件发生在用户在浏览器的地址栏中输入一个新的URL，或者使用浏览器工具栏中的导航按钮，从而使浏览器试图载入新的网页。（3）Submit事件Submit事件在完成信息的输入，准备将信息提交给服务器处理时发生。,8.7JavaScript的对象事件处理程序,8.7.2常用的事件及处理3键盘事件下面介绍几个主要的键盘事件。（1）KeyDown事件在键盘上按下一个键时，发生KeyDown事件。在这个事件发生后，由JavaScript自动调用onKeyDown句柄。（2）KeyPress事件在键盘上按下一个键时，发生KeyDown事件。在这个事件发生后，由JavaScript自动调用onKeyPress句柄。（3）KeyUp事件在键盘上按下一个键，再释放这个键的时候发生KeyUp事件。（4）Change事件在一个选择框、文