第8章 JavaScript脚本语言

网页设计与制作教程（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重新进行设计，并改名为JavaScript。目前流行的多数浏览器都支持JavaScript，如Netscape公司的Navigator3.0以上版本，Microsoft公司的InternetExplorer3.0以上版本。JavaScript是一种行为脚本语言，用JavaScript可以创建出运行在多平台和浏览器上的交互行为和效果。8.1JavaScript简介8.2.1在HTML文档中嵌入脚本程序JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为：scriptlanguage=JavaScriptJavaScript语言代码;JavaScript语言代码;…/Script【演练8-1】在HTML文档中嵌入JavaScript的脚本，本例文件8-1.html在浏览器中显示的效果如图8-1和图8-2所示。8.2在网页中插入JavaScript的方法及定义8.2.2链接脚本文件可以把脚本保存在一个扩展名为.js的文本文件中，供需要该脚本的多个HTML文件引用。要引用外部脚本文件，使用script标记的src属性指定外部脚本文件的URL。其格式为：head…scripttype=text/javascriptsrc=脚本文件名.js/script…/head8.2在网页中插入JavaScript的方法及定义8.2.3在标记内添加脚本可以在HTML表单的输入标记符内添加脚本，以响应输入的事件。【演练8-2】在标记中添加JavaScript的脚本，本例文件8-2.html在浏览器中显示的效果如图8-3和图8-4所示。8.2在网页中插入JavaScript的方法及定义8.3.1基本数据类型JavaScript有4种基本的数据类型。number（数值）类型：可为整数和浮点数。在程序中并没有把整数和实数分开，这两种数据可在程序中自由转换。整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，表示10的幂），或者同时包含这两项。string（字符）类型：字符是用单引号“'”或双引号“”来说明的。boolean（布尔）类型：布尔型的值为true或false。object（对象）类型：对象也是JavaScript中的重要组成部分，用于说明对象。8.3JavaScript的基本数据类型和表达式8.3.2常量常量通常又称为字面常量，它是不能改变的数据。1．基本常量（1）字符型常量（2）数值型常量（3）布尔型常量2．特殊常量（1）空值（2）控制字符8.3JavaScript的基本数据类型和表达式8.3.3变量1．变量的命名2．变量的类型变量的类型是在赋值时根据数据的类型来确定的，包括字符型、数值型和布尔型。3．变量的声明变量的声明和赋值语句var的语法为：var变量名称1[=初始值1],变量名称2[=初始值2]…;4．变量的作用域变量的作用域是变量的重要概念。在JavaScript中同样有全局变量和局部变量，全局变量是定义在所有函数体之外，其作用范围是全部函数；而局部变量是定义在函数体之内，只对该函数可见，而对其他函数不可见。8.3JavaScript的基本数据类型和表达式8.3.4运算符和表达式在定义完变量后，可以对变量进行赋值、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量和运算符的集合，因此表达式可以分为算术表述式、字符串表达式、布尔表达式。运算符是完成操作的一系列符号，在JavaScript中有算术运算符、字符串运算符、比较运算符、布尔运算符等。运算符又分为双目运算符和单目运算符。单目运算符，只需一个操作数，其运算符可在前或后。双目运算符格式如下：操作数1运算符操作数28.3JavaScript的基本数据类型和表达式1．赋值语句把右边表达式赋值给左边的变量。其格式为：变量名=表达式;2．注释语句单行注释语句的格式为：//注释内容多行注释语句的格式为：/*注释内容注释内容*/3．输出字符串（1）用document对象的write()方法输出字符串document.write(字符串1,字符串2,…);（2）用window对象的alert()方法输出字符串alert(字符串);8.4JavaScript的程序结构4．输入字符串（1）用window对象的prompt()方法输入字符串prompt(提示字符串,默认值字符串);（2）用文本框输入字符串使用onBlur事件处理程序，可以得到在文本框中输入的字符串。onBlur事件的具体解释可参考本章后面的内容。【演练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和图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(条件){语句段;}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.4JavaScript的程序结构8.4.3函数2．函数的调用（1）无返回值的调用（2）有返回值的调用变量名=函数名(传递给函数的参数1,传递给函数的参数2,…);（3）在超链接标记中调用函数当单击超链接时，可以触发调用函数。有两种方法：方法一：使用a标记的onClick属性调用函数，其格式为：ahref=#onClick=函数名(参数表)热点文本/a方法二：使用a标记的href属性，其格式为：ahref=javascript:函数名(参数表)热点文本/a（4）在装载网页时调用函数8.4JavaScript的程序结构1．对象（1）对象的概念JavaScript中的对象是由属性（properties）和方法（methods）两个基本的元素构成的。用来描述对象特性的一组数据，也就是若干个变量，称为属性；用来操作对象特性的若干个动作，也就是若干函数，称为方法。（2）对象的使用要使用一个对象，有下面3种方法：引用JavaScnPt内置对象。由浏览器环境中提供。创建新对象。一个对象在被引用之前必须已经存在。（3）对象的操作语句在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。8.5基于对象的JavaScript语言1．对象2．对象的属性对象属性的引用有3种方式。（1）点（．）运算符把点放在对象实例名和它对应的属性之间，以此指向一个惟一的属性。属性的使用格式为：对象名.属性名=属性值;（2）对象的数组下标通过“对象[下标]”的格式也可以实现对象的访问。在用对象的下标访问对象属性时，下标是从0开始，而不是从1开始的。（3）通过字符串的形式实现通过“对象[字符串]”的格式实现对象的访问：person[sex]=female;8.5基于对象的JavaScript语言3．对象的事件事件就是对象上所发生的事情。事件是预先定义好的、能够被对象识别的动作，如单击（Click）事件、双击（DblClick）事件、装载（Load）事件、鼠标移动（MouseMove）事件等，不同的对象能够识别不同的事件。通过事件，可以调用对象的方法，以产生不同的执行动作。有关JavaScript的事件，后面将详细介绍。4．对象的方法一般来说，方法就是要执行的动作。JavaScript的方法是函数。如Window对象的关闭（Close）方法、打开（Open）方法等。每个方法可完成某个功能，但其实现步骤和细节用户既看不到、也不能修改，用户能做的工作就是按照约定直接调用它们。8.5基于对象的JavaScript语言DOM对象的一个特点是，它的各种对象有明确的从属关系。也就是说，一个对象可能是从属于另一个对象的，而它又可能包含了其他的对象。如图8-16所示，显示了DOM对象的从属关系。8.6DOM对象及编程8.6.1窗口对象窗口（window）对象处于整个从属关系的最高级，它提供了处理窗口的方法和属性。每一个window对象代表一个浏览器窗口。1．属性2．方法window对象的主要方法有：（1）close()（2）open（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)：向页面内写文本或标签（不换行）。writeln(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，它反映浏览器访问历史记录的数量。2．方法主要方