《ch05-javascript剖析》由会员分享，可在线阅读，更多相关《ch05-javascript剖析（105页珍藏版）》请在金锄头文库上搜索。
1、JSP Web应用开发,JavaScript,万丈高楼平地起,JSP Web动态网站设计清华大学出版社,本章要点： JavaScript语言及其特点。 如何在JSP页面中嵌入JavaScript小程序。 JavaScript语言的数据类型和运算符。 JavaScript语言的函数。 JavaScript语言的事件。 JavaScript语言的对象及其应用。 文档对象模型DOM。 JavaScript语言程序的流程控制。 学会编写JavaScript语言程序。,5.1 JavaScript语言概述,很有很久以前，网页曾经是死气沉沉，没有任何动作和变化。慢慢的它动起来了，是谁在驱动它呢？ 脚本、G
2、IF、Flash。让我们学习如何使网页动起来吧！ Come On! 采用记事本或者其它文本编辑器输入下面例子的网页代码，然后将文件保存为ex5_01.html。保存完毕后用浏览器将其打开，其页面显示如图5-1所示。,5.1.1 一个简单的包含JavaScript语言的网页,【例5-1】 编写嵌有JavaScript语言程序段的简单网页。网页文件名为example5_01.html,网页代码如下：,5.1.2 JavaScript语言概述,1.JavaScript语言是什么 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的解释性脚本语言，采
3、用小程序段的方式进行编程。使用JavaScript语言编写的小程序段可以嵌入到HTML网页文件中，由客户端的浏览器（Internet Exploder等）解释执行,avaScript与HTML、Java 脚本语言（Java小程序）一起实现Web页面中多个对象的链接。javaSript最主要的应用是创建动态网页(即网页特效)，目前流行的AJAX也是依赖于JavaSript而存在的。它的出现弥补了HTML语言的缺陷，是Java与HTML折衷的选择，具有以下几个基本特点：,简单易学 安全性 动态性 跨平台性 资源占用少,2. JavaScript 和Java的区别 JavaScript和Java 非
4、常类似，但并不一样！ JavaScript是Netscape公司为了扩展Netscape Navigator（一种浏览器）的功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；Java 是SUN公司推出的一种面向对象的程序设计语言，特别适合于Internet应用程序开发，它的前身是Oak语言。,5.1.3 JSP中如何嵌入JavaScript小程序,在JSP页面中嵌入JavaScript小程序有两种方法，一种是将JavaScript语言代码直接嵌入，另一种是链接外部用JavaScript语言编写的小程序。,1.在JSP页面中直接嵌入Java
5、Script语言代码,语法形式: /使用javascript编写的小程序代码 如上述代码所示，在Web网页文档中，使用标记对封装JavaScript脚本代码，当浏览器读取到标记时，就知道遇到了使用JavaScript编写的小程序，会使用浏览器自带的解释器解释执行，直到遇到标记。,2链接外部用JavaScript语言编写的小程序,语法形式: /使用javascript编写的小程序代码 如上述代码所示，在JSP Web页面中链接外部用JavaScript语言编写的小程序就是将JavaScript语言编写的小程序单独保存为扩展名为js的独立的文件,5.2 JavaScript的数据类型、运算符,5.
6、2.1 保留字,保留字(reserved word)是指在程序设计语言中已经定义过的字，程序员不能再把这些字定义为变量名或过程名使用。每种程序设计语言都规定了自己的一套保留字。 保留字包括关键字和未使用的保留字两部分。,关键字是指在语言中具有特定含义，成为语法中一部分的那些字。某些计算机语言中，一些保留字可能并没有应用于当前的语法中，这就成了保留字与关键字的区别。一般出现这种情况可能是由于考虑扩展性。如abstract、double、goto等等就是Javascript语言的保留字。表5-2列出了Javascript语言的48个保留字。,5.2.2数据类型,Javascript语言共有7种数据
7、类型，如表5-3所示,5.2.3 变量,变量是指为了在程序中用来暂时存放数据而命名的存储单元，是暂时存放数据的容器，不同类型的变量占用的内存字节个数不一样。变量一般都有一个名字，叫变量名，变量名的命名必须符合下列规定：,1. 变量名必须以字母或者下划线开头，中间可以是字母、数字或者下划线，但是不能有“+”、“-”或者“=”等运算符号。 2. Javascript语言的保留字不能做变量名，Javascript语言的保留字见表5-2。JavaScript语言中，使用命令var来声明变量，语法形式如下：,（1）只作变量声明 var variableName; 其中var是JavaScript语言的保
8、留字，variableName是变量的名字。 （2）声明变量的同时对变量进行赋值，如 var rectangleLeng=18; /定义矩形边长为18 var studentName=” 王爱国” /声明了一个string型变量 var yesNo = true /声明了一个boolean型变量yesNo,由于Javascript语言采用弱类型，所以在声明变量时不需要指定变量的类型，变量的类型会根据赋给变量的值确定。虽然JavaScript的变量可以任意命名，但变量名最好便于记忆、且有意义，以便于程序的阅读和维护。,5.2.4 运算符,JavaScript语言提供了算术运算符、逻辑运算符、关系
9、运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等7种运算符。下面分别详细介绍。,1. 算术运算符 算术运算符是指在程序中进行加、减、乘、除等算术运算的符号。JavaScript中常用的算术运算符有7个，如表5-4所示。,2. 关系运算符 关系运算符用于程序中对操作数的比较运算，比较运算的返回结果是布尔值true或false，参与关系运算的操作数可以是数字也可以是字符串。JavaScript支持的常用关系运算符请参见表5-5。,3. 逻辑运算符 逻辑运算符返回一个要么“真”、要么“假”的布尔值，通常和比较运算符一起使用，常用于if、while和for语句中。JavaScript中常用
10、的逻辑运算符如表5-6所示。,4. 赋值运算符 “=”是最基本的赋值运算符，用于对变量的赋值，赋值运算符“=”和其他的运算符可以联合使用，构成组合赋值运算符。JavaScfipt支持的常用赋值运算符请参见表5-7。,5. 字符串运算符 字符串运算符是程序中对字符型数据进行运算的符号，有比较运算符、“+”和“+=”等。其中“+”运算符用于连接两个字符串，例如“ch“+“ina“ 的结果是“china“ ，而+=运算符则连接两个字符串，并将结果赋给第一个字符串，例如 var country=“ch“ country +=“ina“；则运算完成后country变量的值为“china“。,6. 位操作
11、运算符 位操作运算符用于在程序中对数值型数据进行向左或向右移位等操作，JavaScript中常用的位操作运算符请参见表5-8。,7. 条件运算符 条件运算符是JavaScript支持的一种特殊的3目运算符，和C+语言以及Java语言中的3目运算符类似，其语格式如下： 表达式？结果1:结果2。 如果“表达式”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。,5.3 JavaScript的函数,采用记事本或者其它文本编辑器输入下面网页程序代码，然后将文件保存为example5_02.html。保存完毕后用浏览器将其打开，鼠标左键点击网页中的“2+3=?”按钮，看看出现什么效果？,
12、【例5-2】 用JavaScript语言编写如下具有函数的简单网页程序。文件命名为example5_02.html,网页代码如下：,在JavaScript语言中，函数的使用分为定义和调用两部分。 1函数的定义 函数定义通常用function语句实现，语法格式如下： function functionName(parameterl，parameter2，) Statements return expression ,说明： （1）function是JavaScript语言的保留字，用于定义函数。 （2）functionName是函数名，它的命名必须符合JavaScript语言关于标识符的规定。
13、（3）parameterl，parameter2,用于定义函数的参数，放在中括号里表示是可选项，意味着函数可以没有参数，可以有一个或者多个参数，实际定义函数时并不出现中括号。具体函数有几个参数视实际需要而定。当函数具有多个参数时，参数间必须使用逗号进行分隔。一个函数最多可以有255个参数。 （4）statements是函数体，是实现函数功能的程序语句 （5）return expression 用于返回函数值，放在中括号里表示是可选项，在实际函数里中括号并不出现。expression为任意的表达式、变量或常量,2函数的调用 函数的调用比较简单，如果函数不带参数，则直接用函数名加上括号调用即可；如
14、果函数带参数，则在括号中加上需要传递的参数，当函数包含多个参数时，各参数间要用逗号分隔。如果函数有返回值，则需使用赋值语句将函数的返回值赋给一个变量。在JavaScript语言中，由于函数名区分大小写，所以在调用函数时，也需要注意函数名的大小写之分。,5.4 JavaScript的事件,1事件 事件是可以被JavaScript侦测到的行为，例如，在Web页面文档加载完毕时，会触发load(载入)事件；当用户单击页面上的按钮时，将触发按钮的click事件等。当某个事件发生时，响应这个事件而执行的处理程序称为事件处理程序，用户和Web页面之间的交互就是触发事件执行事件处理程序的结果。,2事件类型
15、事件是隶属于对象的，多数浏览器内部对象都拥有很多事件，JavaScript中常用的事件、事件触发时间及事件处理程序如表5-9所示。,3JavaScript程序中如何嵌入事件处理程序 JavaScript中嵌入事件处理程序的方法有两种，分别是在HTML标记中嵌入事件处理程序和在JavaScript程序语句中嵌入事件处理程序，下面以onclick事件为例分别予以介绍。,（1） 在HTML标记中嵌入事件处理程序 【例5-3】 编写一个简单网页，演示如何在HTML语言标记中嵌入事件处理程序。网页文件名为example5_03.html,网页代码如下：,（2） 在JavaScript程序语句中嵌入事件处
16、理程序 【例5-4】 编写一个简单网页，演示如何在JavaScript程序语句中嵌入事件处理程序。网页文件名为example5_04.html,网页代码如下：,5.5 JavaScript对象及其使用,JavaScript是基于对象的程序设计语言，提供了一些内部对象，下面通过具体的例子简要介绍一下最常用的Date、String和window对象的使用。 【例5-5】 编写一个简单JSP程序，演示如何使用JavaScript语言内置的Date、String和window对象实现文字在网页中的旋转。网页文件名为example5_05.html,网页代码如下：,1Date对象 Date对象是一个有关日期和时间的对象，它在使用前必须通过new运算符动态创建，例如：mydate=new Date();Date对象没有提供可供直接访问的属性，只具有设置和获取日期
