资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,第1章 JavaScript入门,单击此处编辑母版标题样式,第2章 JavaScript语言基础,单击此处编辑母版标题样式,第3章 JavaScript事件处理,单击此处编辑母版标题样式,第4章 文档对象模型(DOM),单击此处编辑母版标题样式,第5章 JavaScript核心对象,单击此处编辑母版标题样式,第6章 Window及相关顶级对象,单击此处编辑母版标题样式,第7章 表单操作,单击此处编辑母版标题样式,第8章 JavaScript综合应用实例,目 录,第1章 JavaScript入门,第2章 JavaScript语言基础,第3章 JavaScript事件处理,第4章 文档对象模型(DOM),第5章 JavaScript核心对象,第6章 Window及相关顶级对象,第7章 表单操作,第8章 JavaScript综合应用实例,谢谢使用！,策 划：吴澄,制 作：黄华,单 位：西安电子科技大学出版社,电 话：029-88204256 029-88201467(发行),传 真：029-88232746,主 页：,E-mail：xdupkj,xdupfxb001 (发行),第1章 JavaScript入门,1.1 概述,1.2 JavaScript是什么,1.3 JavaScript编程起步,1.4 JavaScript实现基础,1.5 编程准备,1.6 变量,1.7 弱类型,1.8 基本数据类型,1.1 概 述,JavaScript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言，是一种直译式脚本语言，也是一种动态类型、弱类型、内置支持类型，基于原型的语言。它不仅可用来开发交互式的Web页面，更重要的是它将HTML、XML和Java applet、Flash等功能强大的Web对象有机结合起来，使开发人员能快捷生成Internet上使用的应用程序。另外，由于Windows为其提供了最为完善的支持以及二次开发的接口来访问操作系统各组件并实施相应的管理功能，因此，JavaScript成为继.bat(批处理文件)以来又一Windows系统里使用最为广泛的脚本语言。,1.2 JavaScript是什么,1.2.1 JavaScript简史,在20世纪90年代，也就是早期的Web站点上，所有的网页内容都是静态的。所谓静态，是指除了点击超链接，无法通过任何方式同页面进行交互，比如让页面元素接受事件、修改字体等。人们迫切地需要一种方式来打破这个局限，在1996年，网景(Netscape)公司开始研发一种新的语言Mocha,并将其嵌入到自己的浏览器Netscape中。这种语言可以通过操纵DOM(Document Object Model，文档对象模型)来修改页面，并加入了对鼠标事件的支持。Mocha使用了C语言的语,法，但是设计思想主要是从函数式语言Scheme那里取得灵感的。当Netscape 2发布的时候，Mocha被改名为LiveScript,当时可能是想让LiveScript为Web页面注入更多的活力。后来，考虑到这个脚本语言的推广，网景采取了一种宣传策略，将LiveScript更名为JavaScript，目的是使人们将其与当时非常流行的面向对象语言Java产生联想。这种策略显然颇具成效，以至于到现在很多初学者还会为JavaScript和Java的关系感到困惑。,JavaScript取得成功之后，确实为页面注入了活力，微软也紧接着开发自己的浏览器脚本语言，一个是基于BASIC语言的VBScript，另一个是跟JavaScript非常类似的JScript，但是由于JavaScript已经深入人心，所以在随后的版本中，微软的IE几乎是将JavaScript作为一个标准来实现的。当然，两者仍然有不兼容的地方。1996年后期，网景向欧洲电脑厂商协会(ECMA)提交了JavaScript的设计，以申请标准化。ECMA去掉了其中的一些实现，并提出了ECMA Script-262标准，并确定JavaScript的正式名字。目前JavaScript的最新版本为1.9版。,1.2.2 JavaScript有何特点,JavaScript是一种基于对象和事件驱动并且具有相对安全性的客户端脚本语言，主要用于创建交互性较强的动态页面。它主要具有如下特点：基于对象：JavaScript是基于对象的脚本编程语言，能通过DOM(文档对象模型)及自身提供的对象及操作方法来实现所需的功能。事件驱动：JavaScript采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。,解释性语言：JavaScript是一种解释性脚本语言，无需专门编译器编译，而是在嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释，大量节省客户端与服务器端进行数据交互的时间。实时性：JavaScript事件处理是实时的，无须经服务器就可以直接对客户端的事件做出响应，并用处理结果实时更新目标页面。动态性：JavaScript提供简单高效的语言流程，能够灵活处理对象的各种方法和属性，同时及时响应文档页面事件，实现页面的交互性和动态性。,跨平台：JavaScript脚本的正确运行依赖于浏览器，而与具体的操作系统无关。只要客户端装有支持JavaScript脚本的浏览器，JavaScript脚本运行结果就能正确反映在客户端浏览器平台上。开发使用简单：JavaScript基本结构类似于C语言，采用小程序段的方式编程，通过简易的开发平台和便捷的开发流程，就可以嵌入到HTML文档中供浏览器解释执行。同时JavaScript的变量类型是弱类型，使用不严格。,相对安全性：JavaScript是客户端脚本，通过浏览器解释执行。它不允许访问本地的硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而能够有效地防止数据丢失。综上所述，JavaScript是一种有较强生命力和发展潜力的脚本描述语言，它可以直接嵌入到HTML文档中，供浏览器解释执行，直接响应客户端事件如验证数据表单合法性，并调用相应的处理方法，迅速返回处理结果并更新页面，实现Web交互性和动态性的要求，同时将大部分的工作交给客户端处理，将Web服务器的资源消耗降到最低。,1.2.3 JavaScript能做什么1.表单数据合法性验证,使用JavaScript脚本语言能有效验证客户端提交的表单上数据的合法性，若数据合法则执行下一步操作，否则返回错误提示信息，如图1-1所示。,图1-1,2.网页特效,使用JavaScript脚本语言，结合DOM和CSS能创建绚丽多彩的网页特效，如火焰状闪烁文字、文字环绕光标旋转、随鼠标滚动的广告图片等。随鼠标滚动的广告图片效果如图1-2所示。,图1-2,3.交互式操作,使用JavaScript脚本语言可以创建具有动态效果的交互式菜单，完全可以与Falsh制作的页面导航菜单相媲美。如图1-3所示，鼠标在文档内任何位置单击，在其周围出现如图1-3所示的导航菜单。,图1-3,1.3 JavaScript编程起步,JavaScript脚本语言已经成为Web应用程序开发的一门炙手可热的语言，成为客户端脚本的首选。网络上充斥着形态各异的能够实现不同功能的JavaScript脚本，但用户也许并不了解JavaScript脚本是如何被浏览器解释执行的，更不知如何开始编写自己的JavaScript脚本来实现自己想要的效果。现在我们将一步步带领大家踏入JavaScript脚本语言编程的大门。,1.3.1 Hello World程序,像学习C、Java等语言一样，先来看看使用JavaScript脚本语言编写的“Hello World!”程序：,将上述代码保存为.htm(或.html)文件并双击打开，系统将调用默认浏览器解释执行，结果如图1-4所示。,图1-4,JavaScript脚本语言编程一般分为如下步骤：(1)选择JavaScript语言编辑器编辑脚本代码；(2)嵌入该JavaScript脚本代码到HTML文档中；(3)选择支持JavaScript的浏览器浏览该HTML文档；(4)如果错误则检查并修正源代码，重新浏览，重复此过程直至代码正确为止；(5)处理不支持JavaScript脚本语言的情况。由于JavaScript脚本代码是嵌入到HTML文档中被浏览器解释执行的，所以开发JavaScript脚本代码并不需要特殊的编程环境，只需要普通的文本编辑器和支持JavaScript脚本语言的浏览器即可。那么如何选择JavaScript脚本编辑器呢？,1.3.2 选择JavaScript脚本编辑器,编写JavaScript脚本代码可以选择普通的文本编辑器，如Windows Notepad、UltraEdit等，只要所选编辑器能将所编辑的代码最终保存为HTML文档类型(.htm、.html等)即可。虽然Dreamweaver、Microsoft FrontPage等专业网页开发工具套件内部集成了JavaScript脚本语言的开发环境，但我们依然建议JavaScript脚本程序开发者在起步阶段使用最基本的文本编辑器，如NotePad、UltraEdit等进行开发，以便把注意力放在JavaScript脚本语言而不是开发环境上。同时，如果脚本代码出现错误，可用该编辑器打开源文件(.htm、.html或.js)修改后保存，重新使用浏览器浏览，重复此过程直到没有错误出现为止。,1.3.3 引入脚本代码到HTML文档中,将JavaScript脚本嵌入到HTML文档中有3种标准方法：(1)代码包含于和标记对中，然后嵌入到HTML文档中；(2)通过标记的src属性链接外部的JavaScript脚本文件；(3)通过JavaScript伪URL地址引入。下面分别介绍JavaScript脚本的几种标准引入方法。,1.通过与标记对引入,在JavaScript脚本代码中除了与标记对之间的内容外，都是最基本的HTML代码，可见和标记对将JavaScript脚本代码封装并嵌入到HTML文档中。浏览器载入嵌有JavaScript脚本的HTML文档时，能自动识别JavaScript脚本代码起始标记和结束标记，并将其间的代码按照解释JavaScript脚本代码的方法加以解释，然后将解释结果返回HTML文档并在浏览器窗口显示。来看看下面的代码：,下面重点介绍标记的几个属性：(1)language属性：用于指定封装代码的脚本语言及版本，有的浏览器还支持Perl、VBScript等，几乎所有脚本浏览器都支持JavaScript(非常老的版本除外)，同时language属性默认值也为JavaScript。(2)type属性：指定和标记对之间插入的脚本代码类型。(3)src属性：用于将外部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用。,2.通过标记的src属性引入,例如，改写程序代码并保存为test.html。,同时在文本编辑器中编辑如下代码并将其保存为1.js：将test.html和1.js文件放置于同一目录，双击运行test.html，结果如图1-4所示。可见通过外部引入JavaScript脚本文件的方式，能实现同样的功能。这种方法具有如下优点：(1)将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本，可以轻松实现多个页面共同完成同一功能的脚本文件，以通过更新一个脚本文件内容达到批量更新的目的；(2)浏览器可以实现对目标脚本文件的高速缓存，避免由于引用同样功能的脚本代码而导致的下载时间的增加。,3.通过JavaScript伪URL引入,在多数支持JavaScript脚本语言的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。伪URL地址的一般格式如下：一般以“javascript:”开始，后面紧跟要执行的操作。下面的代码将演示如何使用伪URL地址引入JavaScript代码：,鼠标点击文本框，弹出警示框如图1-5所示。,图1-5,1.3.4 嵌入脚本代码的位置,JavaScript脚本代码可放在HTML文档任何需要的位置。一般来说，可以在与标记对之间、与标记对之间按需要放置。,1.与标记对之间放置,放置在与标记对之间的JavaScript脚本代码一般用于提前载入以响应用户的动作，一般不影响HTML文档的浏览器显示内容。其基本文档结构如下：,2.与标记对之间放置,如果需要在页面载入时运行JavaScript脚本生成网页内容，应将脚本代码放置在与标记对之间，可根据需要编写多个独立的脚本代码段与HTML代码结合在一起。其基本文档结构如下：,1.4 JavaScript实现基础,1.4.1 ECMAScript,ECMAScript规定了能适应于各种宿主环境的脚本核心语法规则。关于ECMAScript语言，ECMA-262标准描述如下：“ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力，因此核心的脚本语言是与任何特定的宿主环境分开进行规定的”ECMAScript并不附属于任何浏览器，Web浏览器只是其能适应的宿主环境中的一种，在其发展史上还有很多宿主环境，如Microsoft的WSH、Micromedia的ActionScript、Nombas的ScriptBase和Yahool!的Widget引擎等都可以容纳ECMAScript实现。,ECMAScript仅仅是个描述，定义了脚本语言所有的对象、属性和方法，其主要描述的内容有：语法、数据类型、关键字、保留字、运算符、对象、语句。支持ECMA标准的浏览器都提供自己的ECMAScript脚本语言接口，并按照需要扩展其内容，如对象、属性和方法等。ECMAScript标准定义了JavaScript脚本中最为核心的内容，是JavaScript脚本的骨架，有了骨架，就可以在其上进行扩展，典型的扩展如DOM(文档对象模型)和BOM(浏览器对象模型)等。,1.4.2 DOM,DOM定义了JavaScript可以进行操作的文档各个功能部件的接口，提供访问文档各个功能部件(如Document、Form、Textarea等)的途径以及操作方法。在浏览器载入文档(HTML或XML)时，根据其支持的DOM规范级别将整个文档规划成由节点层级构成的节点树，文档中每个部分都是一个节点，然后依据节点树层级同时根据目标节点的某个属性搜索到目标节点后，调用节点的相关处理方法进行处理，完成定位到处理的整个过程。,1.4.3 BOM,BOM定义了JavaScript可以进行操作的浏览器各个功能部件的接口，提供访问文档各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。遗憾的是，BOM只是JavaScript脚本实现的一部分，没有任何相关的标准，每种浏览器都有自己的BOM实现，这一点可以说是BOM的软肋。,通常情况下浏览器特定的JavaScript扩展都被看作是BOM的一部分，主要包括：关闭、移动浏览器及调整浏览器窗口大小；弹出新的浏览器窗口；提供浏览器详细信息的定位对象；提供载入到浏览器窗口的文档详细信息的定位对象；提供用户屏幕分辨率详细信息的屏幕对象；提供对Cookie的支持；加入ActiveXObject类扩展BOM，通过JavaScript实例化ActiveX对象。,BOM有一些事实上的标准，如窗口对象、导航对象等，但每种浏览器都为这些对象定义或扩展了属性及方法。,1.5 编 程 准 备,1.5.1 JavaScript与Java,JavaScript和Java虽然名字都带有Java，但它们是两种不同的语言，可以说是两种互不相干的语言：前者是一种基于对象的脚本语言，可以嵌在网页代码里实现交互及控制功能，而后者是一种面向对象的编程语言，可用在桌面应用程序、Internet服务器、中间件、嵌入式设备以及其他环境中。其主要区别如下：,开发公司不同：JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言；Java是Sun公司推出的面向对象的程序设计语言，特别适合于Internet应用程序开发。语言类型不同：JavaScript是基于对象和事件驱动的脚本编程语言，本身提供了非常丰富的内部对象供设计人员使用；Java是面向对象的编程语言，即使是开发简单的程序，也必须设计对象。,执行方式不同：JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需要经过编译，而是将文本格式的字符代码发送给客户端，由浏览器解释执行；Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器。变量类型不同：JavaScript采用弱类型变量，即变量在使用前不需作特别声明，而是在浏览器解释运行该代码时才检查其数据类型；Java采用强类型变量，即所有变量在通过编译器编译之前必须作专门声明，否则将会报错。,联编方式不同：JavaScript采用动态联编，即其对象引用在浏览器解释运行时进行检查，若不经编译就无法实现对象引用的检查；Java采用静态联编，即Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查。经过以上几个方面的比较，应该能清楚地认识到JavaScript和Java是没有任何联系的两门语言。,1.5.2 脚本执行顺序,JavaScript脚本解释器将按照程序代码出现的顺序来解释程序语句，因此可以将函数定义和变量声明放在和之间，这样与函数体相关的操作就不会被立即执行。,1.5.3 大小写敏感,JavaScript脚本程序对大小写敏感，相同的字母，大小写不同，代表的意义也不同，如变量名name、Name和NAME代表三个不同的变量名。在JavaScript脚本程序中，变量名、函数名、运算符、关键字、对象属性等都是对大小写敏感的。因此，所有的关键字、内建函数以及对象属性等的大小写都是固定的，所以在编写JavaScript脚本程序时，一定要确保输入正确，否则不能达到编写程序的目的。,1.5.4 语言注释语句,在JavaScript脚本代码中，可加入一些提示性的语句，以便提示代码的用途及跟踪程序执行的流程，增加程序的可读性，同时有利于代码的后期维护。上述提示性语句称作语言注释语句。JavaScript脚本解释器并不执行语言注释语句。一般使用双反斜杠“/”作为每行注释语句的开头，例如：,1.6 变 量,1.6.1 变量标识符,与C+、Java等高级程序语言使用多个变量标识符不同，JavaScript脚本语言使用关键字var作为其唯一的变量标识符，其用法为在关键字var后面加上变量名。例如：,1.6.2 变量声明,在JavaScript脚本语言中，声明变量的过程相当简单，例如通过下面的代码声明名为age的变量：,1.6.3 变量作用域,要讨论变量的作用域，首先要清楚全局变量和局部变量的联系和区别。全局变量可以在脚本中的任何位置被调用，全局变量的作用域是当前文档中整个脚本区域。局部变量只能在此变量声明语句所属的函数内部使用，局部变量的作用域仅为该函数体。声明变量时，要根据编程的目的决定将变量声明为全局变量还是局部变量。一般而言，保存全局信息(如表格的原始大小、下拉框包含选项对应的字符串数组等)的变量需声明为全局变量，而保存临时信息(如待输出的格式字符串、数学运算中间变量等)的变量则声明为局部变量。,1.7 弱 类 型,JavaScript脚本语言像其他程序语言一样，其变量都有数据类型，具体数据类型将在下一节中介绍。高级程序语言如C+、Java等为强类型语言，在变量声明时必须显式地指定其数据类型；而JavaScript脚本语言是弱类型语言，在变量声明时不需显式地指定其数据类型，变量的数据类型将根据变量的具体内容推导出来，且根据变量内容的改变而自动更改。变量声明时不需显式指定其数据类型既是JavaScript脚本语言的优点也是缺点，优点是编写脚本代码时不需要指明数据类型，使变量声明过程简单明了，缺点是有可能因微妙的拼写不当而引起致命的错误。参考如下代码：,程序运行后，在页面弹出警告框如图1-6所示。,图1-6,由图中前三个表达式运算结果可知，JavaScript脚本语言在解释执行时自动将字符型数据转换为数值型数据，而最后一个结果由于“+”的特殊性导致运算结果不同，原因是将数值型数据转换成了字符型数据。运算符“+”有两个作用：(1)作为数学运算的加和运算符；(2)作为字符型数据的连接符。由于“+”作为后者使用时优先级较高，故实例中表达式“600”+5”的结果为字符串“6005”，而不是整数605。,1.8 基本数据类型,1.8.1 Number型,Number型数据即为数值型数据，包括整数型和浮点型。整数型数值可以使用十进制、八进制以及十六进制标识；浮点型数值为包含小数点的实数，且可用科学计数法来表示。一般来说，Number型数据为不在括号内的数字，例如：,1.8.2 String型,String型数据表示字符型数据。JavaScript不区分单个字符和字符串，任何字符或字符串都可以用双引号或单引号引起来。例如下列语句中定义的String型变量nameA和nameB包含相同的内容：,1.8.3 Boolean型,Boolean型数据表示的是布尔型数据，取值为ture或false，分别表示逻辑真和假，且任何时刻都只能使用两种状态中的一种，不能同时出现。例如下列语句分别定义Boolean变量bChooseA和bChooseB，并分别赋予初值true和false。,事实上，上述语句是分别定义了初始值为true的Boolean型变量happyA和初始值为字符串true的String型变量happyB。,1.8.5 Null型,Null型数据表示空值，作用是表明数据空缺的值，一般在设定已存在的变量(或对象的属性)为空时较为常用。区分Undefined型和Null型数据比较麻烦，一般将Undefined型和Null型等同对待。,1.8.6 Function型,Function型数据表示函数，可以通过new操作符和构造函数Function()来动态创建所需功能的函数，并为其添加函数体。例如：,第2章 JavaScript语言基础,2.1 概述,2.2 运算符,2.3 核心语句,2.4 函数,2.1 概 述,JavaScript脚本语言作为一门功能强大、使用范围较广的程序语言，其语言基础包括数据类型、变量、运算符、函数以及核心语句等内容。本章主要介绍JavaScript脚本语言的基础知识，带领读者领略JavaScript脚本语言的精妙之处，并为后续章节的深入学习打下坚实的基础。,2.2 运 算 符,编写JavaScript脚本代码过程中，对目标数据进行运算操作需用到运算符。JavaScript脚本语言支持的运算符包括：赋值运算符、基本数学运算符、自加和自减、比较运算符、逻辑运算符、?：运算符以及typedof运算符等，下面将分别予以介绍。,2.2.1 赋值运算符,常用的JavaScript脚本语言的赋值运算符包含“=”、“+=”、“-=”、“*=”、“/=”、“%=”，汇总如表2-1所示。,表2-1,2.2.2 基本数学运算符,JavaScript脚本语言中基本的数学运算包括加、减、乘、除以及取余等，其对应的数学运算符分别为“+”、“”、“*”、“/”和“%”等，如表2-2所示。,表2-2,2.2.3 自加和自减,自加运算符“+”和自减运算符“”分别将操作数加1或减1。值得注意的是，自加和自减运算符放置在操作数的前面和后面含义不同。运算符写在变量名前面，则返回值为自加或自减前的值；而写在后面，则返回值为自加或自减后的值。参考如下测试代码：,程序运行后，效果如图2-1所示。,图2-1,由程序运行结果可以看出：(1)若自加(或自减)运算符放置在操作数之后，执行该自加(或自减)操作时，先将操作数的值赋值给运算符前面的变量，然后操作数自加(或自减)；(2)若自加(或自减)运算符放置在操作数之前，执行该自加(或自减)操作时，操作数先进行自加(或自减)，然后将操作数的值赋值给运算符前面的变量。,2.2.4 比较运算符,JavaScript脚本语言中用于比较两个数据的运算符称为比较运算符，包括“=”、“!=”、“”、“=”等，其具体作用见表2-3。,表2-3,程序运行后，在原始页面中单击“运算符测试”按钮，将弹出提示框提示用户输入相关信息，如图2-2所示。,图2-2,在上述提示框中输入相关信息(如年龄35)后，单击“确定”按钮，弹出警告框如图2-3所示。可以看出，脚本代码采集用户输入的数值，然后通过比较运算符进行判定，再做出相对应的操作，实现了程序流程的有效控制。,图2-3,2.2.5 逻辑运算符,JavaScript脚本语言的逻辑运算符包括“&”、“|”和“!”等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。逻辑运算符的功能如表2-4所示。,表2-4,2.2.6?：运算符,在JavaScript脚本语言中，“?：”运算符用于创建条件分支。在动作较为简单的情况下，较之ifelse语句更加简便，其语法结构如下：,程序运行后，页面中弹出提示框提示用户输入年龄，并根据输入值决定后续操作。例如在提示框中输入整数17，然后单击“确定”按钮，则弹出警告框如图2-4所示。,图2-4,若在提示框中输入整数24，然后单击“确定”按钮，则弹出警告框如图2-5所示。,图2-5,2.2.7 typeof运算符,typeof运算符用于表明操作数的数据类型，返回数值类型为一个字符串。在JavaScript脚本语言中，其使用格式如下：考察如下实例：,程序运行后，出现如图2-6所示页面。,图2-6,可以看出，使用关键字var定义变量时，若不指定其初始值，则变量的数据类型默认为undefined。同时，若在程序执行过程中，变量被赋予其他隐性包含特定数据类型的数值时，其数据类型也随之发生更改。,2.3 核 心 语 句,2.3.1 基本处理流程,基本处理流程就是对数据结构的处理流程。在JavaScript里，基本的处理流程包含三种结构，即顺序结构、选择结构和循环结构。顺序结构即按照语句出现的先后顺序依次执行，是JavaScript脚本程序中最基本的结构，如图2-7所示。,图2-7,选择结构按照给定的逻辑条件来决定执行顺序，可以分为单向选择、双向选择和多向选择。但无论是单向选择还是多向选择，程序在执行过程中都只能执行其中一条分支。单向选择和双向选择结构分别如图2-8(a)、(b)所示。,(a)(b),图2-8,循环结构根据代码的逻辑条件来判断是否重复执行某一段程序。若逻辑条件为true，则重复执行，即进入循环，否则结束循环。循环结构可分为条件循环和计数循环，分别如图2-9(a)、(b)所示。,(a)(b),图2-9,一般而言，在JavaScript脚本语言中，程序总体是按照顺序结构执行的，而在顺序结构中可以包含选择结构和循环结构。,2.3.2 if条件假设语句,if条件假设语句是比较简单的一种选择结构语句，若给定的逻辑条件表达式为真，则执行一组给定的语句。其基本结构如下：,当逻辑条件表达式conditions运算结果为真时，执行statement1语句(或语句块)，否则执行statement2语句(或语句块)。if(或ifelse)结构可以嵌套使用来表示所示条件的一种层次结构关系。值得注意的是，嵌套时应重点考虑各逻辑条件表达式所表示的范围。,2.3.3 switch流程控制语句,在if条件假设语句中，逻辑条件只能有一个，如果有多个条件，可以使用嵌套的if语句来解决，但此种方法会增加程序的复杂度，降低程序的可读性。若使用switch流程控制语句就可完美地解决此问题，其基本结构如下：,图2-10,2.3.4 for循环语句,for循环语句是循环结构语句，按照指定的循环次数，循环执行循环体内语句(或语句块)，其基本结构如下：,test condition,为控制循环结束与否的条件表达式，程序每执行完一次循环体内语句(或语句块)，均要计算该表达式是否为真，若结果为真，则继续执行下一次循环体内语句(或语句块)，若结果为假，则跳出循环体。,alter condition,指循环变量更新的方式，程序每执行完一次循环体内语句(或语句块)，均需要更新循环变量。上述循环控制参数之间使用分号“;”间隔开来。考察如下的测试函数：,图2-11,2.3.5 while和dowhile循环语句,while语句与if语句相似，均能够有条件地控制语句(或语句块)的执行，其语言结构如下：,2.3.6 使用break和continue进行循坏控制,在循环语句中，某些情况下需要跳出循环或者跳过循环体内剩余语句，而直接执行下一次循环，此时需要通过break和continue语句来实现。break语句的作用是立即跳出循环，continue语句的作用是停止正在进行的循环，而直接进入下一次循环。考察如下测试代码：,图2-12,从图2-12的结果可以看出：当n=3时，跳出当前循环而直接进行下一个循环，故iArray3不进行显示；当n=6时，直接跳出while循环，不再执行余下的循环，故iArray5之后的数组元素不再进行显示。在编写JavaScript脚本代码过程中，应根据实际需要来选择使用哪一种循环语句，并确保在使用了循环控制语句continue和break后，循环不出现任何差错。,2.4 函 数,2.4.1 函数的基本组成,函数由函数定义和函数调用两部分组成。为养成良好的编程习惯，应首先定义函数，然后再进行调用。函数的定义应使用关键字function，其语法规则如下：,函数的各部分含义如下：,funcName,为函数名，函数名可由开发者自行定义，与变量的命名规则基本相同。,parameters,为函数的参数，在调用目标函数时，需将实际数据传递给参数列表以完成函数特定的功能。参数列表中可定义一个或多个参数，各参数之间加“,”分隔开来。当然，参数列表也可为空。,statements,是函数体，规定了函数的功能，本质上相当于一个脚本程序。,return,指定函数的返回值，是可选参数。,自定义函数一般放置在HTML文档的和标记对之间。除了自定义函数外，JavaScript脚本语言提供大量的内建函数，无需开发者定义即可直接调用，例如Window对象的alert()方法即为JavaScript脚本语言支持的内建函数。函数定义过程结束后，可在文档中任意位置调用该函数。引用目标函数时，只需在函数名后加上小括号即可。若目标函数需引入参数，则需在小括号内添加传递参数。如果函数有返回值，可将最终结果赋值给一个自定义的变量并用关键字return返回。考察如下测试代码：,程序运行后，在原始页面单击“点击这里”按钮，弹出警告框如图2-13所示。如果函数中引用的外部函数较多或函数的功能很复杂，势必导致函数代码过长而降低脚本代码可读性，违反了开发者使用函数实现特定功能的初衷。因此，在编写函数时，应尽量保持函数功能的单一性，使脚本代码结构清晰、简单易懂。,图2-13,2.4.2 全局函数,JavaScript脚本语言提供了很多全局(内建)函数，在脚本编程过程中可直接调用。在此介绍四种简单的全局函数：parseInt()、parseFloat()、escape()和unescape()。parseInt()函数的作用是将字符串转换为整数；parseFloat()函数的作用是将字符串转换为浮点数；escape()函数的作用是将一些特殊字符转换成ASCII码；unescape()函数的作用是将ASCII码转换成字符。考察如下测试代码：,图2-14,由程序运行结果可知上述全局函数的具体作用，当然JavaScript脚本语言还支持很多其他的全局函数，在编程中适当使用它们可大大提高编程效率。,2.4.3 函数应用注意事项,这里介绍一下在使用函数过程中应特别注意的几个问题，以帮助大家更好、更准确地使用函数，并养成良好的编程习惯。具体为以下几点：定义函数的位置：如果函数代码较为复杂，函数之间相互调用较多，应将所有函数的定义部分放在HTML文档的和标记对之间，既可保证所有的函数在调用之前均已定义，又可使开发者后期的维护工作更为简便。函数的命名：函数的命名原则与变量的命名原则相同，但尽量不要将函数和变量取同一个名字。如因实际情况需要将函数和变量定义为相近的名字，也应给函数加上可以清楚辨认的字符(如前缀func等)以示区别。,函数返回值：在函数定义代码结束时，即使函数不需要返回任何值；也应使用return语句返回。变量的作用域：应区分函数中使用的变量是全局变量还是局部变量，避免调用过程中出现难以检查的错误。函数注释：在编写脚本代码时，应在适当的地方给代码的特定行添加注释语句，例如将函数的参数数量、数据类型、返回值、功能等注释清楚，既方便开发者对程序的后期维护，也方便其他人阅读和使用该函数，便于模块化编程。,函数参数传递：由于JavaScript是弱类型语言，使用变量时并不检查其数据类型，导致一个潜在的威胁，即开发者调用函数时，传递给函数的参数数量或数据类型不满足要求而导致错误的出现。因此在函数调用时，应仔细检查传递给目标函数的参数变量的数量和数据类型。,第3章 JavaScript事件处理,3.1 概述,3.2 什么是事件,3.3 HTML文档事件,3.4 JavaScript如何处理事件,3.5 事件处理器设置的灵活性,3.6 IE中的Event对象,3.1 概 述,用户可以通过多种方式与浏览器中的页面进行交互，而事件正是作为这种交互的桥梁出现的。Web应用程序开发人员通过JavaScript脚本内置的和自定义的事件处理器来响应用户的动作，从而开发出更具交互性和动态性的页面。本章主要介绍JavaScript中事件处理的概念和方法，列出了JavaScript预定义的事件处理器，并且介绍了如何编写用户自定义的事件处理函数，以及如何将它们与页面中用户的动作相关联而得到预期的交互性能。,3.2 什么是事件,广义上讲，JavaScript中的事件是指用户载入目标页面直到该页面被关闭期间，浏览器的动作及该页面对用户操作的响应。事件的复杂程度大不相同，简单的如鼠标的移动、当前页面的关闭、键盘的输入等，复杂的如拖曳页面图片或单击浮动菜单等。事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作；而响应某个事件进行的处理过程称为事件处理。下面就是简单的事件触发和处理过程，如图3-1所示。,图3-1,JavaScript中的事件并不限于用户的页面动作如MouseMove、Click等，还包括浏览器的状态改变，如在绝大多数浏览器获得支持的Load、Resize事件等。Load事件在浏览器载入文档时触发，如果某事件(如启动定时器、提前加载图片等)要在文档载入时触发，一般都在标记里面加入类似于“onload=MyFunction()”的语句；Resize事件则在用户改变了浏览器窗口的大小时触发，当用户改变窗口大小时，需改变文档页面的内容布局，使其以恰当、友好的方式显示给用户。,浏览器响应用户的动作，如鼠标单击按钮、链接等，并可以通过默认的系统事件与该动作相关联，但用户也可以通过编写自己的脚本，来改变该动作的默认事件处理器。举个简单的例子，模拟用户单击页面链接，该事件产生的默认操作是浏览器载入链接的href属性对应的URL地址所代表的页面，但利用JavaScript脚本语言能够很容易地编写另外的事件处理器来响应该单击鼠标的动作。考察如下代码：,现代事件模型中引入Event对象，它包含其他对象使用的常量和方法。当事件发生后，产生临时的Event对象实例，并附加当前事件的信息如鼠标定位、事件类型等，然后传递给相关的事件处理器进行处理。
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
