JavaScript

修德 博学 求实 创新

- 1 -

李华荣2023-5-6

第1章 基本概念

Javascript是一种脚本语言，比HTML要复杂。不过即便你先前不懂编程，也不用担心，因为Javascript

写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较好的Javascript代码，恰好你也用得上，就可以直接拷贝，然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码，所以让Javascript本身也变得非常受欢迎，从而被广泛应用。原来不懂编程的人，多参考Javascript示例代码，也能很快上手。

Javascript主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。前面提到的下拉菜单、验证表单有效性等大量互动性功能，都是在客户端完成的，不需要和Web Server发生任何数据交换， 因此，不会增加Web Server的负担。

JavaScript是一种描述性脚本语言，可以被嵌入到HTML文件中客户端执行。

Java和JavaScript没有任何关系，只是名字像而已。

Java是面向对象编程语言 强类型的语言 JavaScript是基于对象的脚本语言 弱类型的语言 解释型语言

JavaScript主要应用于网页界面的交互控制，是一门基于事件驱动的语言。 JavaScript是一个跨平台的脚本语言，只有和网页文件配合才能使用。

1.1 特点

1. 2. 3. 4. 5.

解释执行的脚本编程语言 基于对象的语言

由事件驱动，可以直接和用户进行交互

可以跨平台，仅依赖于浏览器，与操环境无关

JS可以实现丰富多彩的网页特效及客户端验证功能

修德 博学 求实 创新

- 2 -

李华荣2023-5-6

1.2 id和name的区别与联系

相同点：在文档访问时，id和name都可以作为组件的标识来使用。 不同点：id通常用在网页内部，作为组建的唯一标识 name通常用来作为传递信息的标签名

1.3 基本结构

JavaScript程序可以添加到HTML文档的或部分

❖ 应用

JavaScript直接嵌入到HTML文件中 JavaScript链接到HTML文件中

Javascript程序可以放在： • HTML网页的里 • HTML网页的里 • 外部.js文件里

1.4 注释 (Comments)

为了程序的可读性，以及便于日后代码修改和维护时，更快理解代码，你可以在 Javascript 程序里为代码写注释(comments)。

在 Javascript 语言里，用两个斜杠 // 来表示单行注释。见例句： aGoodIdea = \"Comment your code thoroughly.\"; // 这是单行注释。 多行注释则用 /* 表示开始， */ 表示结束。见例句： /*

这是多行注释 行一。 这是多行注释 行二。 */

修德 博学 求实 创新

- 3 -

李华荣2023-5-6

第2章 基本语法

2.1 Javascript变量(Javascript Variables) 2.1.1

什么是变量？

变量是用来临时存储数值的容器。在程序中，变量存储的数值是可以变化的。 变量表示计算机内存中的某个单元 变量声明：

var name;

JS是弱数据类型，变量类型通过给变量赋值时所赋值的类型确定，在程序执行过程中JS会根据需要实现自动转换

可以不用 var关键字声明变量，并赋值。这就是隐式声明。 noStringAtAll = \"\"; //隐式声明变量 noStringAtAll

2.1.2 变量的声明(Declaring Variables)

在使用一个变量之前，首先要声明这个变量。Javascript里，使用var来声明变量。 声明变量有以下几种方法： 1. 一次声明一个变量。例句如下：

var a;

2. 同时声明多个变量，变量之间用逗号相隔。例句如下：

var a, b, c;

3.声明一个变量时，同时赋予变量初始值。例句如下：

var a=2;

4. 同时声明多个变量，并且赋予这些变量初始值，变量之间用逗号相隔。例句如下：

var a=2, b=5;

2.1.3 变量的命名规则

变量名可以是任意长度。变量名必须符合下列规则： • 变量名的第一个字符必须是英文字母，或者是下划线符号(underscore)_ • 变量名的第一个字母不能是数字。其后的字符，可以是英文字母，数字，和下划线符号符号

•

(underscore)_

变量名不能是Javascript的保留字(参见Javascript保留字)。

注意：Javascript代码是区分大小写的(case-sensitive)。变量myname和MyName表示的是两个不

修德 博学 求实 创新

- 4 -

李华荣2023-5-6

同的变量。写错变量的大小写，是初学者最常见的错误之一。

2.2 数据类型

JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。

2.2.1 字符串（String）

String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.”

一连串字符组成的序列，包含字母、数字、符号，用于表示文本信息 字符串通过在首尾添加成对的双引号或单引号表示

字符串不包含字符称为空字符串，用一对引号表示（不含空格）

2.2.2 数字（Number）

数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。

整形数字(整数)

可以使用十进制、八进制（前导0）、十六进制（前导0x）表示

浮点型数字（实数）

由整数加小数部分组成，当数字很大或很小的时候，可以使用科学计数法，1.25e3表示1.25*103 NaN(Not a Number)

当运算产生的结果是没意义的操作时，使用NaN表示结果

修德 博学 求实 创新

- 5 -

李华荣2023-5-6

2.2.3

Boolean 类型

可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。

2.2.4

Undefined 数据类型

一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。 有时等同null，有时告诉JavaScript出了问题，如使用为定义的变量

注意在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0，而 undefined 的操作象特殊值NaN （不是一个数字）。对 null 值和 undefined 值作比较总是相等的。

2.2.5 Null 数据类型

null 值就是没有任何值，什么也不表示。 不表示任何值，可用来为变量提供初值

2.2.6 object类型

除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。

在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。

变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。

另外，变量名称的长度是任意的，但必须遵循以下规则：

1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。 2.后续的字符可以是字母、数字、下划线或美元符。 3.变量名称不能是保留字。

修德 博学 求实 创新

- 6 -

李华荣2023-5-6

2.3 强制转换

Number(x)：字符类型转化数值类型 String(x)：数值类型转化字符类型 ParseInt(x)：字符类型转化整数类型

ParseFloat(x)：字符类型转化浮点类型

“+”可以作为加法运算符，也可以作为连接符，字符类型数字相加，如不进行类型转换，则认为两个字符串连接；如果“*”可以完成自动类型转换。

表达式中操作项的数据类型相同时 JScript 解释器才能对其求值。如果表达式不经过强制转换就试图对两个不同的数据类型（如一个为数字，另一个为字符串）执行运算，将产生错误结果。但在 Jscript 中情况就不同了。

JScript 是一种自由类型的语言。它的变量没有预定类型（相对于强类型语言，如 C++）。相反，JScript 变量的类型相应于他们包含的值的类型。这种操作的好处是能将值作为另一类型处理。

在 Jscript 中，可以对不同类型的值执行运算，不必担心 JScript 解释器产生异常。相反，JScript 解释器自动将数据类型之一改变（强制转换）为另一种数据类型，然后执行运算。例如：

运算 数值与字符串相加 布尔值与字符串相加 数值与布尔值相加 结果 将数值强制转换为字符串。 将布尔值强制转换为字符串。 将布尔值强制转换为数值。

考虑下面的示例。

var x = 2000; //一个数字。 var y = \"Hello\"; //一个字符串。

x = x + y; //将数字强制转换为字符串。 document.write(x); //输出 2000Hello。

要想显式地将字符串转换为整数，使用 parseInt 方法。要想显式地将字符串转换为数字，使用 parseFloat 方法。请注意，比较大小时字符串自动转换为相等的数字，但加法（连接）运算时保留为字符串。

2.4 Javascript常用运算符(Operators)

表达式用来使各种运算符将多个操作数连接起来 运算符

算数运算符：+、-、*、/、%、++、-- 比较运算符：>、<、>=、<=、!=、== 逻辑运算符：&&、||、！ 修德 博学 求实 创新

- 7 -

李华荣2023-5-6

字符串运算符：+

赋值运算符：=、+=、-=、*=、/=、%= 条件运算符：？：

typeof()：返回变量或数据的类型

2.4.1 算术运算符

示例 示例说明

运算符 运算符说明

如果x为整数2,y为整数5, x+y等于7

+

加法

x+y

如果x为字符串\"text1\为字符串\"fun\ x+y则等于\"text1fun\"

- * / % ++ --

减法 乘法 除法

x-y x*y x/y

两者相除求余数 x%y 如果x等于10, y等于3, x%y结果等于1 递增 递减

x++ 如果x等于10, x++等于11 y--

如果y等于10, y--等于9

2.4.2 逻辑运算符

示例 x==y

示例说明

如果x等于2, y等于2,则x==y

运算符 运算符说明 ==

等于

=== > >= < <= != !== && ! ||

全等于(值相等,数据类型也相等) x===y 大于 大于等于 小于 小于等于 不等于 不全等于 与(and) 非(not) 或(or)

x>y x>=y x如果x等于整数2,y为字符串\"2\则x===y不成立

x < 10 && y > 1 !(x==y) x==8 || y==8

修德 博学 求实 创新

- 8 -

李华荣2023-5-6

2.4.3 赋值运算符

运算符 运算符说明 示例 示例说明 ＝ 赋值 x=5 将整数5这个值赋给变量x

2.5 特殊字符

特殊字符

以转义字符反斜杠（\\）开头，用来在字符串中添加格式或防止某些字符引发错误

2.6 编写 Javascript 代码

象很多其它编程语言一样，Javascript 也是用文本格式编写，由语句 (statements)，语句块 (blocks) 和注释 (comments) 构成。语句块 (blocks) 是由一些相互有关联的语句构成的语句集合。在一句语句 (statement) 里，你可以使用变量，字符串和数字 (literals)，以及表达式 (expressions)。

2.6.1 语句 (Statements)

一个 Javascript 程序就是一个语句的集合。一句 Javascript 语句相当于一句完整的句子。Javascript 语句将表达式 (expressions)用某种方式组合起来，得以完成某项任务。

一句语句 (statement) 包含一个或多个表达式 (expressions)，关键词 (keywords) 和运算符 (operators)。一般来说，一句语句的所有内容写在同一行内。不过，一句语句也可以写成多行。此外，多句语句也可以通过用分号 (;) 分隔，写在同一行内。

建议：将每句语句以显示的方式结束，即在每个语句最后加分号 (;) 来表示该句语句的结束。 以下是几个语句的例子：

aBird = \"Robin\";

上面这句语句表示将 \"Robin\" 这个字符串赋值给变量 aBird。

var today = new Date();

上面这句语句表示将今天的日期值赋值给变量 today。

2.6.2 语句块 (Blocks)

通常来说，用 {} 括起来的一组 Javascript 语句称为语句块 (blocks)。语句块通常可以看做是一句单

修德 博学 求实 创新

- 9 -

李华荣2023-5-6

独的语句。也就是说，在很多地方，语句块可以作为一句单个的语句被其它 Javascript 代码调用。但是以 for 和 while 开头的循环语句例外。另外要注意的是，

注意：在语句块里面的每句语句以分号 (;) 表示结束，但是语句块本身不用分号。 语句块 (blocks) 通常用于函数和条件语句中。

下面的例句中，{} 中间的 5 句语句构成一个语句块 (block)，而最后三行语句，不在语句块内。

function convert(inches) { feet = inches / 12; miles = feet / 5280; nauticalMiles = feet / 6080; cm = inches * 2.54; meters = inches / 39.37; } km = meters / 1000; kradius = km; mradius = miles; 推荐使用多行的单行注释来替代多行注释，这样有助于将代码和注释区分开来。 2.6.3 表达式 (Expressions)

Javascript 表达式 (expressions) 相当于 javascript 语言中的一个短语，这个短语可以判断或者产生一个值，这个值可以是任何一种合法的 Javascript 类型 - 数字，字符串，对象等。最简单的表达式是字符。 表达式示例：

3.9 // 数字字符 \"Hello!\" // 字符串字符 false // 布尔字符 null // null 值字符 {x:1, y:2} // 对象字符 [1,2,3] // 数组字符 function(x){return x*x;} // 函数字符 以下是比较复杂的表达式示例： var anExpression = 3 * (4 / 5) + 6;

var aSecondExpression = Math.PI * radius * radius;

var aThirdExpression = aSecondExpression + \"%\" + anExpression;

var aFourthExpression = \"(\" + aSecondExpression + \") % (\" + anExpression + \")\";

2.6.4 赋值和等于 (Assignments and Equality)

Javascript 语言中使用等号 (=) 表示变量赋值。等号左边的值可以是： • 变量 • 数组元素 • 对象属性

修德 博学 求实 创新

- 10 -

李华荣2023-5-6

等号右边的值可以是任何类型的值，包括表达式。例句如下，表示将整数 8 赋值给 x 这个变量。 x = 8;

注意： 在 Javascript 里，要判断两个值是否相等，不用等号，而是用两个等号来表示 (==)。 例句如下，表示 x 等于 8。

x == 8

注意：请注意赋值(=)和等于(==)的区别。

2.7 Javascript条件语句(Javascript Conditional Statements)

在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript也不例外。

这一节我们主要介绍Javascript条件语句。 Javascript条件语句有以下几种： • 单项条件结构 (if条件语句) • 双向条件结构 (if...else条件语句) • 多项条件结构 (switch条件语句)

2.7.1 单项条件结构 (if条件语句)

If条件语句的语法如下：

if (expression) {

statement1 }

这句语法的含义是，如果符合expression条件，就执行statement1代码，反之，则不执行statement1代码。

下面的这个Javascript示例就用到了Javascript的if条件语句。首先用.length计算出字符串What's up?的长度，然后使用if语句进行判断，如果该字符串长度<100，就显示\"该字符串长度小于100。\"。

演示示例 2.7.2 双向条件结构 (if...else条件语句)

If...else条件语句的语法如下：

if (expression) { statement1 } else { statement2 } 这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。 下面的Javascript示例使用了if...else条件语句判断，如果vHour小于17，显示\"日安\"，反之则显示\"晚安\"。 演示示例 2.7.3

多项条件结构 (switch条件语句)

修德 博学 求实 创新

- 12 -

李华荣2023-5-6

Switch条件语句的语法如下： switch (表达式) { case 常量1 :

JavaScript语句1; break;

case 常量2 :

JavaScript语句2; break; ...

default :

JavaScript语句3; }

这句语法的含义是，如果expression等于label1，则执行statement1代码；如果expression等于label2，则执行statement2代码；以此类推。如果expression不符合任何label，则执行default内的statementdefault代码。 Switch条件语句中的 break，表示 switch 语句结束。如果没有使用一个 break 语句，则多个 label 块被执行。

下面的Javascript示例使用了switch条件语句，根据星期天数的不同，显示不同的话。

修德 博学 求实 创新

- 13 -

李华荣2023-5-6

2.8 Javascript 循环语句

在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript 也不例外。

这一节我们主要介绍 Javascript 循环语句。

Javascript 循环语句有以下几种： • 在循环的开头测试表达式 (while 循环语句) • 在循环的末尾测试表达式 (do...while 循环语句) • 对对象的每个属性都进行操作 (for...in 循环语句) • 由计数器控制的循环 (for 循环语句)

2.8.1 for 循环语句

for 循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。

每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。

如果循环条件一直不满足，则永不执行该循环。如果条件一直满足，则会导致无限循环。前一种，在某种情况下是需要的，但是后一种，基本不应发生，所以写循环条件时一定要注意。 for 循环语句示例代码：

2.8.2 for...in 循环语句

用来处理数组

循环处理对象的所有属性

修德 博学 求实 创新

- 14 -

李华荣2023-5-6

结构

for(循环变量 in 对象) {

语句； }

Javascript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。

for...in 循环语句示例代码：

2.8.3 while 和 do...while 循环语句

while 循环和 for 循环类似。其不同之处在于， while 循环没有内置的计数器或更新表达式。如果你希 修德 博学 求实 创新

- 15 - 李华荣2023-5-6

望控制语句或语句块的循环执行，不只是通过 “运行该代码 n 次”这样简单的规则，而是需要更复杂的规则，则应该用 while 循环。

注意：由于 while 循环没有显式的内置计数器变量，因此比其它类型的循环更容易产生无限循环。此外，由于不易发现循环条件是在何时何地被更新的，很容易编写一个实际上从不更新条件的 while 循环。因此在编写 while 循环时应特别小心。 while 循环语句示例代码：

演示 do...while 循环语句示例

修德 博学 求实 创新

- 16 -

李华荣2023-5-6

2.8.4 break 和 continue 语句

在 Javascript 中，当某些条件得到满足时，用 break 语句来中断一个循环的运行。（请注意，也用 break 语句退出一个 switch 块。参见 Javascript 条件语句）。如果是一个 for 或者 for...in 循环，在更新计数器变量时使用 continue 语句越过余下的代码块而直接跳到循环的下一次重复中。 break 示例代码：

演示 break 示例 continue 示例代码：

修德 博学 求实 创新

- 17 -

李华荣2023-5-6

演示 continue 示例 2.9 Javascript保留字(Javascript Reserved Words) 2.9.1

Javascript保留字(Javascript Reserved Words)

Javascript保留字(Reserved Words)是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字。Javascript保留字是不能作为变量名和函数名使用的。使用Javascript保留字作为变量名或函数名，会使Javascript在载入过程中出现编译错误。 Javascript保留字列表：

break case catch continue debugger default

delete do else false finally for

function if in

return switch this

typeof var void while with

instanceof throw new null

true try

2.9.2 Javascript未来保留字(Javascript Future Reserved Words)

Javascript还有一些未来保留字，这些字虽然现在没有用到Javascript语言中，但是将来有可能用到。 Javascript未来保留字列表： abstract double goto native static

修德 博学 求实 创新

- 18 -

李华荣2023-5-6

boolean byte char class const

enum export extends final float

implements import int interface long

package private protected public short

super synchronized throws transient volatile

2.10 Javascript函数

函数是一组语句，完成一系列功能。

函数由关键字Function定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。通过指定函数名（实参）来调用一个函数。函数名对大小写是敏感的。 创建

function 函数名( 参数1,参数2，… ) { 语句; }

注意：

1. Function本事也是一个对象

2. Function可以用来定义一个构造函数，通过new创建对象 3. Function 定义的函数有时候可以没有函数名

事件调用

事件处理程序又叫事件句柄，事件以on开头，以事件名结束，如onClick、onLoad等 事件处理程序是一段代码，用于处理事件并完成某些操作，格式： on事件名＝“函数名()” ;

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。例：

Function function_Name(exp1,exp2,exp3,exp4) Number =function _Name . arguments .length; if (Number>1）

document.wrile(exp2); if (Number>2)

document.write(exp3); if(Number>3)

document.write(exp4);

修德 博学 求实 创新

- 19 -

李华荣2023-5-6

2.10.1 全局函数

顶层函数（全局函数）

FF: Firefox, IE: Internet Explorer

函数 描述 decodeURI()

解码某个编码的 URI。 decodeURIComponent() 解码一个编码的 URI 组件。 encodeURI()

把字符串编码为 URI。 encodeURIComponent() 把字符串编码为 URI 组件。 escape()

对字符串进行编码。

修德 博学 求实 创新 - 20 - FF IE 5.5 5.5 5.5 5.5 3

李华荣2023-5-61 1 1 1 1

eval() getClass() isFinite() isNaN() Number() parseFloat() parseInt() String() unescape()

计算 JavaScript 字符串，并把它作为脚本代码来执行。

返回一个 JavaObject 的 JavaClass。 检查某个值是否为有穷大的数。 检查某个值是否是数字。 把对象的值转换为数字。

解析一个字符串并返回一个浮点数。 解析一个字符串并返回一个整数。 把对象的值转换为字符串。

对由 escape() 编码的字符串进行解码。

1 1 1 1 1 1 1 1

3 4 3 3 3 3

顶层属性（全局属性）

FF: Firefox, IE: Internet Explorer 方法 描述 Infinity 代表正的无穷大的数值。 java 代表 java.* 包层级的一个 JavaPackage。 NaN 指示某个值是不是数字值。 Packages 根 JavaPackage 对象。 undefined 指示未定义的值。

FF 1 1 1

IE 4 4 5.5

全局对象描述

全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。

在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。

全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。

在 JavaScript 代码嵌入一个特殊环境中时，全局对象通常具有环境特定的属性。实际上，ECMAScript 标准没有规定全局对象的类型，JavaScript 的实现或嵌入的 JavaScript 都可以把任意类型的对象作为全局对象，只要该对象定义了这里列出的基本属性和函数。例如，在允许通过 LiveConnect 或相关的技术来脚本化 Java 的 JavaScript 实现中，全局对象被赋予了这里列出的 java 和 Package 属性以及 getClass() 方法。而在客户端 JavaScript 中，全局对象就是 Window 对象，表示允许 JavaScript 代码的 Web 浏览器窗口。

例子

在 JavaScript 核心语言中，全局对象的预定义属性都是不可枚举的，所有可以用 for/in 循环列出所有隐式或显式声明的全局变量，如下所示： var variables = \"\"; for (var name in this) {

variables += name + \"
\"; }

document.write(variables);

修德 博学 求实 创新

- 21 -

李华荣2023-5-6

2.10.1.1 Eval(执行表达式)

定义和用法

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

语法

eval(string) 参数 描述 strin

必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

g

返回值

通过计算 string 得到的值（如果有的话）。

说明

该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。 如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。

抛出

如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。 如果非法调用 eval()，则抛出 EvalError 异常。

如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。

提示和注释

提示：虽然 eval() 的功能非常强大，但在实际使用中用到它的情况并不多。

实例

例子 1

在本例中，我们将在几个字符串上运用 eval()，并看看返回的结果： 输出： 200 4 27

例子 2

看一下在其他情况中，eval() 返回的结果： eval(\"2+3\") // 返回 5

var myeval = eval; // 可能会抛出 EvalError 异常 myeval(\"2+3\"); // 可能会抛出 EvalError 异常

可以使用下面这段代码来检测 eval() 的参数是否合法： try {

alert(\"Result:\" + eval(prompt(\"Enter an expression:\ }

catch(exception) { alert(exception); }

2.10.1.2 IsNaN

定义和用法

isNaN() 函数用于检查其参数是否是非数字值。

语法

isNaN(x)

参数 描述 x 必需。要检测的值。

返回值

如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。

修德 博学 求实 创新

- 24 -

李华荣2023-5-6

说明

isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。 如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。

提示和注释

提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。

实例

在本例中，我们将使用 isFinite() 在检测无穷数：

修德 博学 求实 创新

- 25 -

李华荣2023-5-6

第3章 JavaScript内置对象

3.1 概述

对象是现实世界中客观存在的事物（飞机） JavaScrip对象由属性和方法两个基本要素构成

属性：对象内部包含的一些自己的情况（飞机的机翼，飞机的轮子） 方法：对象可以做的事情（飞机起飞，飞机降落）

通过访问或设置对象的属性，并调用对象的方法，可以使对象有各种各样的形态，完成各种各样的方法。

3.2 使用对象

调用对象的属性和方法，使用“.”符号 对象.属性 对象.方法

例如：

document.write(); window.alert();

JavaScript是基于对象的编程语言 分类

内置对象： JavaScript预先定义的对象，用户可以直接 同基本类型相关 String Number Boolean

允许创建用户自定义和组合类型的对象 Object Array 简化操作对象 Math Date Function RegExp Global 浏览器对象 自定义对象

3.3 Javascript内置对象Math

Math对象是JavaScript提供的数学运算对象 Math常用属性和方法

修德 博学 求实 创新

- 26 -

李华荣2023-5-6

产生的伪随机数介于 0 和 1 之间（含 0，不含 1），也就是，返回值可能为0，但总是小于1。在第一次加载 JScript 时随机数发生器自动产生 。

该Javascript示例解释：用Math.max(number1,number2,number3,...numberN)可以在n个数值中返回一个最大值。

该Javascript示例解释：用Math.min(number1,number2,number3,...numberN)可以在n个数值中返回一个最小值。

一个随机出图片的Javascript示例(用到Math.random()和Math.round方法)

修德 博学 求实 创新

- 27 -

李华荣2023-5-6

该Javascript示例解释：首先使用Math.random()得到一个大于等于0，小于1的随机数；然后将随机数乘以10，得到一个大于等于0，小于10的数值；然后用Math.round四舍五入得到一个最接近的整数，这个整数在大于等于0，小于等于10的范围；然后将这个随机整数和HTML代码结合起来，就可以随机产生不同的图片。

3.4 Javascript内置对象Number

Number 对象

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

var myNum=new Number(value); var myNum=Number(value);

参数

参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。

返回值

当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。

修德 博学 求实 创新

- 28 -

李华荣2023-5-6

Number 对象属性

FF: Firefox, IE: Internet Explorer

属性 描述

constructor 返回对创建此对象的 Number 函数的引用。 MAX_VALUE 可表示的最大的数。 MIN_VALUE 可表示的最小的数。 NaN 非数字值。

NEGATIVE_INFINITY 负无穷大，溢出时返回该值。 POSITIVE_INFINITY 正无穷大，溢出时返回该值。 prototype 使您有能力向对象添加属性和方法。

FF

1.0 1.0 1.0 1.0 1.0 1.0 1.0

IE 4.0 4.0 4.0 4.0 4.0 4.0 4.0

Number 对象方法

FF: Firefox, IE: Internet Explorer

方法 描述 toString 把数字转换为字符串，使用指定的基数。

toLocaleString 把数字转换为字符串，使用本地数字格式顺序。 toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。 toExponential 把对象的值转换为指数计数法。 toPrecision 把数字格式化为指定的长度。 valueOf 返回一个 Number 对象的基本数字值。

FF

1.0 1.0 1.0 1.0 1.0 1.0

IE 4.0 4.0 5.5 5.5 5.5 4.0

Number 对象描述

在 JavaScript 中，数字是一种基本的数据类型。JavaScript 还支持 Number 对象，该对象是原始数值的包装对象。在必要时，JavaScript 会自动地在原始数据和对象之间转换。在 JavaScript 1.1 中，可以用构造函数 Number() 明确地创建一个 Number 对象，尽管这样做并没有什么必要。

构造函数 Number() 可以不与运算符 new 一起使用，而直接作为转化函数来使用。以这种方式调用 Number() 时，它会把自己的参数转化成一个数字，然后返回转换后的原始数值（或 NaN）。

构造函数通常还用作 5 个有用的数字常量的占位符，这 5 个有用的数字常量分别是可表示的最大数、可表示的最小数、正无穷大、负无穷大和特殊的 NaN 值。注意，这些值是构造函数 Number() 自身的属性，而不是单独的某个 Number 对象的属性。 比如这样使用属性 MAX_VALUE 是正确的： var big = Number.MAX_VALUE 但是这样是错误的： var n= new Number(2); var big = n.MAX_VALUE

作为比较，我们看一下 toString() 和 Number 对象的其他方法，它们是每个 Number 对象的方法，而不是 Number() 构造函数的方法。前面提到过，在必要时，JavaScript 会自动地把原始数值转化成 Number 对象，调用 Number 方法的既可以是 Number 对象，也可以是原始数字值。 var n = 123;

var binary_value = n.toString(2); 修德 博学 求实 创新

- 29 - 李华荣2023-5-6

3.5 Javascript内置对象String

两种创建字符串对象方法

1. 直接将字符串赋给变量

var newstr = \"这是我的字符串\" 2. 使用new运算符创建

var newstr = new String(\"这是我的字符串“)

创建 String 对象的语法：

new String(s); String(s);

参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

3.6 Javascript内置对象Date

为用户提供获取和设置日期和时间的属性和方法

Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数 当前日期和时间

var today = new Date( ) Date没有提供直接访问的属性

Date方法的参数与值

修德 博学 求实 创新

- 30 -

李华荣2023-5-6

如何显示当天日期(yyyy-mm-dd)的Javascript示例(用到Date对象的getFullYear,getMonth和getDate方法)

Javascript示例代码解释：这个示例用到了Javascript内置对象Date的getFullYear,getMonth和getDate方法。首先申明一个变量d，var d = new Date()，表示将当天的日期值赋给变量d。然后使用getFullYear得到年份的值，用getMonth得到月份值(注：getMonth返回值范围为0到11，所以要得到实际的月份，还要加1)，用getDate得到当天日期所在月份的日期值。

这个示例还用到了\"test?语句1:语句2\"，意思是如果符合test条件，那么执行语句1，否则使用语句2。计算月和日都用到了这个语法，如果月和日小于10，在月和日的值之前应该加0。

修德 博学 求实 创新

- 31 -

李华荣2023-5-6

2010-12-26

Javascript示例代码解释：这个示例用到了Javascript内置对象Date的

getFullYear,getMonth和getDate方法。首先申明一个变量d，var d = new Date()，表示将当天的日期值赋给变量d。然后使用getFullYear得到年份的值，用getMonth得到月份值(注：getMonth返回值范围为0到11，所以要得到实际的月份，还要加1)，用getDate得到当天日期所在月份的日期值。

这个示例还用到了\"test?语句1:语句2\"，意思是如果符合test条件，那么执行语句1，否则使用语句2。计算月和日都用到了这个语法，如果月和日小于10，在月和日的值之前应该加0。

如何显示当天时间(hh:nn:ss)的Javascript示例(用到Date对象的getHours,getMinutes和getSeconds方法)

Javascript示例代码解释：这个示例用到了Javascript内置对象Date的getFullYear,getMonth和getDate方法。首先申明一个变量d，var d = new Date()，表示将当天的日期值赋给变量d。然后使用getHours得到小时的值，用Minutes得到分钟值，用getSeconds得到秒的值。

这个示例还用到了\"test?语句1:语句2\"，意思是如果符合test条件，就执行语句1，否则执行语句2。计算小时，分钟和秒都用到了这个语法，如果小时，分钟和秒小于10，在其值之前应该加0。

14:30:19

Javascript示例代码解释：这个示例用到了Javascript内置对象Date的

getFullYear,getMonth和getDate方法。首先申明一个变量d，var d = new Date()，表示将当天的日期值赋给变量d。然后使用getHours得到小时的值，用Minutes得到分钟值，用getSeconds得到秒的值。

这个示例还用到了\"test?语句1:语句2\"，意思是如果符合test条件，就执行语句1，否则

修德 博学 求实 创新

- 32 -

李华荣2023-5-6

执行语句2。计算小时，分钟和秒都用到了这个语法，如果小时，分钟和秒小于10，在其值之前应该加0。

3.7 Javascript内置对象Array

数组

对象运算符 new

JavaScript内置对象中，除Math对象外的其他对象都用new来创建对象变量，之后可以使用对象的属性和方法。

变量名=new 对象名(); Delete

删除对象的变量或者从数组中删除数组单元，甚至删除整个数组，一般很少使用。

3.7.1 创建数组

var arr1=new Array();

var arr2=new Array(3);//3表示数组长度 var arr3=new Array(1,2,3,4,5);

var arr4=[1,2,3,4,5];

常用属性

length ：返回数组中元素的个数

prototype: 用来为对象添加新的属性或方法

常用方法

3.7.2 join 方法

返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。 arrayObj.join(separator) 参数

arrayObj

必选项。Array 对象。 separator 必选项。是一个 String 对象，作为最终的 String 对象中对数组元素之间的分隔符。如果省略了这个参数，那么数组元素之间就用一个逗号来分隔。 说明

如果数组中有元素没有定义或者为 null，将其作为空字符串处理。

对输入的字符串按照字符的升序排序：

查询录入中所有字符的个数（不限循环次数）:

一个创建数组(Array)，向数组赋值，并显示数组各项内容的Javascript示例

var arrayStr=str.split(\"\");//字符串转换为数组 var s=arrayStr.sort();//排序

document.all[\"text1\"].value= s.join(\"\");//数组转换为字符串

修德 博学 求实 创新

- 34 -

李华荣2023-5-6

该Javascript示例解释：首先用var aName = new Array(4)，声明变量aName为一个数组(array)，数组的大小为4；然后给数组的每项赋值，比如aName[0] = \"张靓颖\"，表示数组第一项值为\"张靓颖\"(注： 数组下标是以0开始计，而不是以1开始计)；最后用一个循环语句显示数组的每一项的值。

张靓颖 周笔畅 何洁 李宇春

该Javascript示例解释：首先用var aName = new Array(4)，声明变量aName为一个数组(array)，数组的大小为4；然后给数组的每项赋值，比如aName[0] = \"张靓颖\"，表示数组第一项值为\"张靓颖\"(注： 数组下标是以0开始计，而不是以1开始计)；最后用一个循环语句显示数组的每一项的值。

一个数组(Array)的length属性示例(如果是连续数组，可以用其来求数组的元素个数)

修德 博学 求实 创新

- 35 -

李华荣2023-5-6

该Javascript示例解释：Javascript数组的length属性的返回值，是数组中所定义的最高位元素的下标加1后得出的值。

这个示例中，首先声明变量a为一个数组，然后向a的第一个元素赋值，即a[0] = \"站长网 站长学院\"；然后向a的第二个元素赋值，即a[1] = \"www.admin5.com/html\"；最后显示变量a的length属性值为2，即变量a的元素最高下标为1，1+1就得到length的值。
如果是连续数组，可以用length属性来求数组的元素个数

注：因为一个数组中的元素并不一定是连续的，所以 length 属性也并不一定就等于数组中的元素个数。假设将a[1] = \"www.admin5.com/html\"写成a[8] = \"www.admin5.com/html\"，数组变量a的length属性就会是9。

2

该Javascript示例解释：Javascript数组的length属性的返回值，是数组中所定义的最高位元素的下标加1后得出的值。

这个示例中，首先声明变量a为一个数组，然后向a的第一个元素赋值，即a[0] = \"站长网 站长学院\"；然后向a的第二个元素赋值，即a[1] = \"www.admin5.com/html\"；最后显示变量a的length属性值为2，即变量a的元素最高下标为1，1+1就得到length的值。 如果是连续数组，可以用length属性来求数组的元素个数

注：因为一个数组中的元素并不一定是连续的，所以 length 属性也并不一定就等于数组中的元素个数。假设将a[1] = \"www.admin5.com/html\"写成a[8] = \"www.admin5.com/html\"，数组变量a的length属性就会是9。

用reverse方法将Javascript数组(Array)对象内容反转的示例

该Javascript解释：这个示例用到了Javascript数组(Array)的reverse方法，该方法能将数组的内容反转。

该示例中，首先声明了两个变量a和aa；然后定义a为数组，并赋值给a；然后用reverse方法将数组a的内容反转，并赋值给变量aa；最后用document.write显示数组aa的值。

修德 博学 求实 创新

- 36 -

李华荣2023-5-6

10,8,6,4,2

该Javascript解释：这个示例用到了Javascript数组(Array)的reverse方法，该方法能将数组的内容反转。

该示例中，首先声明了两个变量a和aa；然后定义a为数组，并赋值给a；然后用reverse方法将数组a的内容反转，并赋值给变量aa；最后用document.write显示数组aa的值。

用concat方法将两个或更多数组组合在一起的Javascript示例

该Javascript示例解释：使用数组(Array)对象的concat方法，能将两个或更多数组组合起来。该示例中，首先声明变量a和b为数组，并赋值，声明c为一个字符串并赋值；然后用concat方法，其中d = a.concat(b)，表示将a和b两个数组组合起来，并赋值给d，同样用concat方法，将a,b,c组合起来，并赋值给e；最后用document.write将d, e分别显示出来。

注：concat(item1, item2, ..., itemN)要加的项目(item1 … itemN)会按照从左到右的顺序添加到数组。如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。

1,2,3,站长网 站长学院,admin5.com/html

1,2,3,站长网 站长学院,admin5.com/html,fine

该Javascript示例解释：使用数组(Array)对象的concat方法，能将两个或更多数组组合起来。该示例中，首先声明变量a和b为数组，并赋值，声明c为一个字符串并赋值；然后用concat方法，其中d = a.concat(b)，表示将a和b两个数组组合起来，并赋值给d，同样用concat方法，将a,b,c组合起来，并赋值给e；最后用document.write将d, e分别显示出来。

注：concat(item1, item2, ..., itemN)要加的项目(item1 … itemN)会按照从左到右的顺

修德 博学 求实 创新

- 37 -

李华荣2023-5-6

序添加到数组。如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。

用join方法返回一个将数组所有元素用指定符号连在一起的字符串

该Javascript示例解释：首先声明变量a为数组，并赋值给a；然后用join方法定义连接符号为\"-\"，然后赋值给b，并用document.write将b显示出来。

数组(Array)对象的join方法，会返回一个字符串，这个字符串包含了所给数组的所有元素，这些元素通过join方法作指定的连接符号连在一起。

0-1-2-3-4

该Javascript示例解释：首先声明变量a为数组，并赋值给a；然后用join方法定义连接符号为\"-\"，然后赋值给b，并用document.write将b显示出来。

数组(Array)对象的join方法，会返回一个字符串，这个字符串包含了所给数组的所有元素，这些元素通过join方法作指定的连接符号连在一起。

用pop()方法移除数组中的最后一个元素并返回该元素的Javascript示例

该Javascript示例解释：数组(Array)对象的pop()方法，用来移除数组中的最后一个元素并返回该元素。

修德 博学 求实 创新

- 38 -

李华荣2023-5-6

这个示例中，b = a.pop()，表示移除数组a中最后一个元素，即4，并返回4。执行pop()方法之后，再显示数组a，你就会看到数组a比原来少了一个元素4。

4

0,1,2,3

该Javascript示例解释：数组(Array)对象的pop()方法，用来移除数组中的最后一个元素并返回该元素。

这个示例中，b = a.pop()，表示移除数组a中最后一个元素，即4，并返回4。执行pop()方法之后，再显示数组a，你就会看到数组a比原来少了一个元素4。

用shift()方法移除数组中的第一个元素并返回该元素的Javascript示例

该Javascript示例解释：数组(Array)对象的shift()方法，用来移除数组中的第一个元素并返回该元素。

这个示例中，b = a.shift()，表示移除数组a中第一个元素，即0，并返回0。执行shift()方法之后，再显示数组a，你就会看到数组a比原来少了一个元素0。

0

1,2,3,4

该Javascript示例解释：数组(Array)对象的shift()方法，用来移除数组中的第一个元素并返回该元素。 这个示例中，b = a.shift()，表示移除数组a中第一个元素，即0，并返回0。执行shift()方法之后，再显示数组a，你就会看到数组a比原来少了一个元素0。

用slice方法返回数组一部分的Javascript示例

修德 博学 求实 创新

- 39 -

李华荣2023-5-6

该Javascript示例解释：这个示例用到了数组(Array)对象的Slice(start,[end])方法，该方法返回一个新数组，包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)；如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度，比如a.slice(-3,4)，相当于a.slice(2,4)。如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度，比如a.slice(0,-1)。如果省略 end ，那么 slice 方法将一直复制到源数组结尾，比如a.slice(1)。如果 end 出现在 start 之前，不复制任何元素到新数组中，比如a.slice(4,3)。

a,b,c c,d a,b,c,d b,c,d,e

该Javascript示例解释：这个示例用到了数组(Array)对象的Slice(start,[end])方法，该方法返回一个新数组，包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)；如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度，比如a.slice(-3,4)，相当于a.slice(2,4)。如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度，比如a.slice(0,-1)。如果省略 end ，那么 slice 方法将一直复制到源数组结尾，比如a.slice(1)。如果 end 出现在 start 之前，不复制任何元素到新数组中，比如a.slice(4,3)。

3.8 其他对象

Global提供了常用的内置属性和方法，但这些属性方法只能直接调用，不能使用对象.方法的形式调用

修德 博学 求实 创新

- 40 -

李华荣2023-5-6

Function对象可以将函数作为对象来访问，并可以在程序执行过程中动态的生成函数并调用函数 创建

函数名=new Function(“参数1”，“参数2”…“参数n”，“函数体”)

Number对象可以将数字作为对象直接访问 Boolean对象可以将逻辑值作为对象直接访问 Event是与事件处理过程有关的特殊对象 Object可以用来派生其他对象

修德 博学 求实 创新

- 41 -

李华荣2023-5-6

表示用来进行模式匹配的正则表达式

修德 博学 求实 创新 - 42 - 李华荣2023-5-6RegExp

3.9 Document对象

JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。

document对象是包含HTML文档中的HTML标记和构成文档内容的文本的对象

客户端浏览器中每个载入的HTML文档都有一个document对象，在多框架文档中，框架集的每个成员都包含一个document对象，按照对象包含的层次进行访问

document等其他浏览器对象的属性和方法的引用与JavaScript内置对象相同 对象.属性 对象.方法

修德 博学 求实 创新

- 43 -

李华荣2023-5-6

3.10 Window对象

window对象是窗口对象，处于文档对象模型的层次的最顶层。

window对象是Web浏览器所有内容的容器。打开浏览器，浏览器就会在内存中创建一个window对象 该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。在使用应注意以下几点：

该对象对应于HTML文档中的和两种标识； onload和onunload都是窗口对象属性；

在JavaScript脚本中可直接引用窗口对象。如： window.alert(\"窗口对象输入方法\") 可直接使用以下格式： alert(\"窗口对象输入方法\")

引用window对象的属性和方法时，可以省略标识符window： alert(‘hello’);

location对象代表当前执行的文档的URL

修德 博学 求实 创新

- 44 -

李华荣2023-5-6

3.10.1 输入(prompt)

具有输入信息的对话框

prompt()方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下prompt（“提示信息”，默认值）。

其中，“提示信息”，默认值，都是可选值。

如果用户点击了取消按钮，则返回null。

此方法首先在浏览器窗口中弹出一个对话框, 让用户自行输入信息。一旦输入完成后，就返回用户所输入信息的值。例: test=prompt（“请输入数据:”，”this is a JavaScript”） 实际上prompt()是窗口对象的一个方法。因为缺省情况下所用的对象就是window对象, 所以windows对象可以省略不写。

其中window.prompt()就是一个窗口对象的方法，其基本作用是，当装入Web页面时在屏幕上显示一个具有“确定”和“取消”的对话框，让你输出数据。document.writle是一个文档对象的方法，它的基本功能，是实现Web页面的输出显示。见图1所示。

修德 博学 求实 创新

- 45 -

李华荣2023-5-6

图1

3.10.2 输出显示

每种语言，都必须提供信息数据的输出显示。JavaScript也是一样，它提供有几个用于信息输出显示的方法。比较常用的有window.alert()、document.write和及document.writln()方法。

3.10.2.1 document.write()方法和document.writeln()方法

document是JavaScript中的一个对象在它中封装许多有用的方法，其中write()和writeln()就是用于将文本信息直接输出到浏览器窗口中的方法。 document.write()； document.writeln()； 说明：

write()和writeln()方法都是用于向浏览器窗口输出文本字串； 二者的唯一区别就是writeln()方法自动在文本之后加入回车符。

3.10.2.2 window.alert()输出

alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。

在JavaScript为了方便信息输出，JavaScript提供了具有独立的对话框信息输出─alert()方法。 alert()方法是window对象的一个方法，因此在使用时，不需要写window窗口对象名，而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或用于开发阶段输出调试信息，一旦用户按“确定”钮后，方可继续执行其他脚本程序。

换行用：“\\n”

alert(\"半径为\"+v+\"的圆的\\n面积为：\"+compute(v) );

修德 博学 求实 创新

- 46 -

李华荣2023-5-6

例:

从上面程序可以看出：

可通过write()和prompt()方法实现交互。

在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。其中

和
就是HTML标识符。

3.10.3 窗口对象的事件驱动

窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。

3.10.4 窗口对象的方法

窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。 创建一个新窗口open()

修德 博学 求实 创新

- 47 -

李华荣2023-5-6

使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。

具有OK按钮的对话框

alert()方法能创建一个具有OK按钮的对话框。 具有OK和Cancel按钮的对话框

confirm()方法为编程人员提供一个具有两个按钮的对话框。

3.10.5 窗口对象中的属性

窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用，其主要属性有以下几个： （１）frames 确文档中帧的数目

frames（帧）作为实现一个窗口的分隔操作，起到非常有用的作用，在使用注意以下几点： frames属性是通过HTML标识的顺序来引用的，它包含了一个窗口中的全部帧数。 帧本身已是一类窗口，继承了窗口对象所有的全部属性和方法。 （２）Parent 指明当前窗口或帧的父窗口。

（３）defaultstatus:默认状态，它的值显示在窗口的状态栏中。 （４）status:包含文档窗口中帧中的当前信息。

（５）top:包括的是用以实现所有的下级窗口的窗口。 （６）window.指的是当前窗口 （７）self:引用当前窗口。

5、输出流及文档对象

在JavaScript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。 （１）创建新文档open()方法

使用document.open()创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。例用Window. Open()与Open()是一样的。

打开一个窗口的基本格式：

Window .open(\"URL\窗口名字\窗口属性\"]

window属性参数是由一个字符串列表项它由逗号分隔，它指明了有关新创建窗口的属性。见表7-1所示。 表7-1 参 数 toolbar location directions status menubar

设定值 yes/no yes/no yes/no yes/no yes/no 含 义 建立或不建立标准工具条 建立或不建立位置输入字段 建立或不建立标准目录按钮 建立或不建立状态条 建立或不建立菜单条 修德 博学 求实 创新

- 48 -

李华荣2023-5-6

scrollbar revisable width Height yes/no yes/no yes/no yes/no 建立或不建立滚动条 能否改变窗口大小 确定窗口的宽度 确定窗口的高度。

在使用Open()方法时，需要注意以下点。

通常浏览器窗中，总有一个文档是打开的。因而不需要为输出建立一个新文档。 在完成对Web文档的写操作后，要使用或调用close()方法来实现对输出流的关闭。 在使用open()来打开一个新流时，可为文档指定一个有效的文档类型，有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。

（２）write()、writeln()输出显示。

该方法主要用来实现在Web页面上显示输出信息。在实际使用中，需注意以下几点： writeln()与write()唯一不同之处在于在未尾加了一个换符。

为了正常显示其输出信息，必须指明

标记，使之告诉编辑器。 输出的文档类型，可以由浏览器中的有效的合法文本类型所确定。 （３）关闭文档流close()

在实现多个文档对象中，必须使用close()来关闭一个对象后，才能打开另一个文档对象。 （４）清除文档内容clear()

使用该方法可清除已经打开文档的内容。

3.10.6 确认消息框

使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。

var truthBeTold = window.confirm(\"单击“确定”继续。单击“取消”停止。\"); if (truthBeTold) {

window.alert(\"欢迎访问我们的 Web页！\"); } else window.alert(\"再见啦！\");

3.10.7 弹出窗口(window.open())

语法：window.open(pageurl,name,parameters);

window对象的open()方法用于创建一个新的窗口实例，新创建的窗口的外观由参数：parameters指定。新窗口中打开的文档由参数

alwaysRaised yes/no 指定窗口浮在所有窗口之上。

dependent yes/no 指定打开的窗口为父窗口的一个了窗口。并随父窗口的关闭而关闭 height pixel value 设定新窗口的像素高度。 修德 博学 求实 创新

- 49 - 李华荣2023-5-6

hotkeys yes/no 在没有菜单栏的新窗口设置安全退出热键。 location yes/ no 指明位置栏在新窗口中是否可见。 menubar yes /no 指明菜单栏在新窗口中是否可见。 resizable yes /no 指明新窗口是否可以调整。

scrollbars yes /no 指明滚动栏在新窗口中是否可见。 toolbar yes /no 指明工具栏在新窗口中是否可见。 Width pixel value 设定窗口的像素宽度。

fullscreen yes / no 打开的窗体是否进行全屏显示

window.open (\"page.html\\"newwindow\\"height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no\")

3.10.7.1 全屏打开页面

window.open(\"www.sina.com.cn\width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no\");

3.10.7.2 关闭父窗体

window.parent.close()

3.10.7.3 关闭本弹出窗体,并刷新父页面

window.opener.location.reload();window.close();

3.11 Location对象

Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。如href,replace()

3.12 History对象

history对象用来引用浏览器保存的最近访问过的URL列表

修德 博学 求实 创新

- 50 -

李华荣2023-5-6

back ( )方法相当于后退按钮 forward ( ) 方法相当于前进按钮

go (1)代表前进1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法；

3.13 Navigation对象 3.14 Screen对象

3.15 link对象和anchor对象

在JavaScript的文档中实现文档中的跳转使用link对象

…… JavaScript中访问

document.links[0].name

标识跳转的目的地的标记使用anchor对象 ……

计算锚点个数 document.anchors.length

3.16 Form对象

它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问

在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体

修德 博学 求实 创新

- 51 -

李华荣2023-5-6

1. 访问表单两种方式

1. 通过表单名：document.表单名

2. 通过forms数组，forms存储产生的表单对象的数组，数组下标是由0到n document.forms[下标];

2. 访问表单元素两种方式

1．通过表单元素的名称：document.表单名.元素名 2．通过elements数组 document.表单名.elements[下标] document.forms[下标]. elements[下标];

3.16.1 文本型

文本对象

单行文本text对象 多行文本textarea对象 密码口令password对象 文本域file对象 属性、方法、事件

修德 博学 求实 创新

- 52 -

李华荣2023-5-6

3.16.1.1 刷新后不变的文本框

3.16.2 按钮型

3.16.3 表单对象中的元素对象……单选复选对象

单选复选对象 单选按钮radio 复选框checkbox

修德 博学 求实 创新

- 53 -

李华荣2023-5-6

3.16.3.1 checkbox扁平

3.16.3.2 Checkbox实现全选

//第一种方法

function selectall1() {

var a = document.getElementsByTagName(\"input\"); if(a[0].checked==true){ for (var i=0; iif (a[i].type == \"checkbox\") a[i].checked = false; } else {

for (var i=0; iif (a[i].type == \"checkbox\") a[i].checked = true; } }

//第二种方法

function selectall2() {

var tform = document.forms['form1']; for (var i=0;ivar e = tform.elements[i]; if (e.type == \"checkbox\") e.checked = !e.checked; } }

//第四种方法

function selectall4(id){ //用id区分 var tform=document.forms['form1']; 修德 博学 求实 创新

- 54 -

李华荣2023-5-6

for(var i=0;iif(e.type==\"checkbox\" && e.name==id) e.checked=!e.checked; } }

//第五种方法

function selectall(theform,thename){ //theform指定的form,thename是checkbox的name属性 var tform=document.forms[theform];

document.getElementById(\"thewen\").value='反选'; for(var i=0;iif(e.type=='checkbox' && e.name==thename)e.checked=!e.checked; } }

3.16.4 表单对象中的元素对象……列表对象

JavaScript 最常见的用法之一就是验证表单 表单有效性验证

在用户在表单中输入的内容提交到服务器之前，在客户端利用表单元素产生的事件，运用脚本(JavaScript)，校验用户输入的数据的有效性 表单有效性验证的优点 在客户端验证，速度快 减轻服务器端压力

function validate( ) {

var f=document.reg_form; if(f.uname.value==\"\") { alert(\"请输入姓名\");

修德 博学 求实 创新

- 55 -

李华荣2023-5-6

return false; }

if (f.gender[0].checked==false && f.gender[1].checked==false) { alert(\"请指定性别\"); return false; }

if ((f.password.value.length < 6) || (f.password.value == \"\")) { alert(\"请输入至少 6 个字符的密码！\"); return false; }

if (f.email.value.indexOf(\"@\")==-1)

{ alert(\"请输入有效的电子邮件地址\"); return false; }

if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value)) { alert(\"请输入有效的年龄！\"); return false; }}

会员名：

性别：男

女 密码： 电子邮件地址： 年龄：

3.17 级联菜单

利用省份下拉框的选项改变事件onChange

根据用户选择的省份，动态添加城市下拉框的值

option 集合可返回包含 元素中所有 的一个数组。 注释：数组中的每个元素对应一个 标签 - 由 0 起始。

语法

selectObject.options[]

options[selectedIndex].value表示下拉列表的值

说明

options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：

• 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。

• 如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。

• 如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。

修德 博学 求实 创新

- 56 -

李华荣2023-5-6

• 可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。

HTML DOM Select 对象

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。

在 HTML 表单中，

标签每出现一次，一个 Select 对象就会被创建。

您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。 IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.

Select 对象集合

集合 描述

options[] 返回包含下拉列表中的所有选项的一个数组。

IE F O W3C 4 1 9 Yes

Select 对象属性

属性 disabled form id length multiple name

selectedIndex size tabIndex type

描述

设置或返回是否应禁用下拉列表。 返回对包含下拉列表的表单的引用。 设置或返回下拉列表的 id。 返回下拉列表中的选项数目。 设置或返回是否选择多个项目。 设置或返回下拉列表的名称。

设置或返回下拉列表中被选项目的索引号。 设置或返回下拉列表中的可见行数。

设置或返回下拉列表的 tab 键控制次序。 返回下拉列表的表单类型。

IE 5 4 4 4 4 4 4 4 5 4

F 1 1 1 1 1 1 1 1 1 1

O 9 9 9 9 9 9 9 9 9 9

W3C Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

标准属性

属性 className dir lang title

描述

设置或返回元素的 class 属性。 设置或返回文本的方向。 设置或返回元素的语言代码。 设置或返回元素的 title 属性。

IE 5 5 5 5

F 1 1 1 1

O 9 9 9 9

W3C Yes Yes Yes Yes

Select 对象方法

方法 add() blur()

描述

向下拉列表添加一个选项。 从下拉列表移开焦点。 IE F O W3C 4 1 9 Yes 4 1 9 Yes 修德 博学 求实 创新

- 57 -

李华荣2023-5-6

focus() 在下拉列表上设置焦点。 remove() 从下拉列表中删除一个选项。 4 4 1 9 1 9 Yes Yes

Select 对象事件句柄

事件句柄 描述 IE F O W3C onchange 当改变选择时调用的事件句柄。 4 1 9 Yes

--请选择省份-- 甘肃省 四川省 山东省

--请选择城市--

-----------------------------------------------------------------------------------------------------------------------------------------

......

--请选择开户帐号的省份-- 四川省 山东省 湖北省 ......

--请选择开户帐号的城市-- ......

function changeCity( ) {

var cityList = new Array( );

cityList[0]=['成都', '绵阳', '德阳', '自贡', … '泸州']; cityList[1]=['济南', '青岛', ‘… '日照']; cityList[2] = ['武汉', '宜昌', … '潜江'];

var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1;

document.myform.selCity.options.length=0;

for (var j in cityList[pIndex]) {

newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); document.myform.selCity.options.add(newOption1); }

修德 博学 求实 创新

- 59 -

李华荣2023-5-6

3.18 屏幕禁止

禁止右键

document.oncontextmenu = function() { return false;}

禁止保存

禁止选取

禁止粘贴

3.19 自带的打印预览

WebBrowser.ExecWB(1,1) 打开

Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1) 打印页面设置 Web.ExecWB(10,1) 查看页面属性

Web.ExecWB(15,1) 好像是撤销，有待确认 Web.ExecWB(17,1) 全选 Web.ExecWB(22,1) 刷新

Web.ExecWB(45,1) 关闭窗体无提示

打印

height=0

修德 博学 求实 创新

- 60 -

李华荣2023-5-6

3.20 无模式的提示框

function modelessAlert(Msg) {

window.showModelessDialog(\"javascript:alert(\\\"\"+escape(Msg)+\"\\\");window.close();\help:no;dialogHeight:height:30px;dialogHeight:40px;\"); }

3.21 下载文件

function DownURL(strRemoteURL,strLocalURL) {

var xmlHTTP=new ActiveXObject(\"Microsoft.XMLHTTP\"); xmlHTTP.open(\"Get\ xmlHTTP.send();

var adodbStream=new ActiveXObject(\"ADODB.Stream\"); adodbStream.Type=1;//1=adTypeBinary adodbStream.Open();

adodbStream.write(xmlHTTP.responseBody); adodbStream.SaveToFile(strLocalURL,2); adodbStream.Close(); adodbStream=null; xmlHTTP=null; }

3.22 检查网页是否存在

function CheckURL(URL)

修德 博学 求实 创新

- 61 -

李华荣2023-5-6

{

var xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\"); xmlhttp.Open(\"GET\ try {

xmlhttp.Send();

var result = xmlhttp.status; }

catch(e) {return(false); } if(result==200) {

return true; }

xmlhttp = null; return false; }

博学 求实 创新 - 62 - 李华荣2023-5-6修德

第4章 JavaScript事件处理

4.1 事件概述

事件可以由用户生成，也可以由系统生成

每个事件都有与之相关联的Event对象， Event是JavaScript内置对象 Event 对象提供下列信息： 事件类型

事件发生时光标的位置

Event 对象可以用作事件处理程序的一部分

4.1.1 事件的生命周期

事件的生命周期通常包含下列阶段： 与发生的事件相关联的用户操作或条件 立即更新 Event 对象以反映事件的状态 触发事件

调用相关联的事件处理程序 事件处理程序执行其操作并返回

4.2 事件

在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。例如，当您把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 标签中的一个特殊的 \"mouse over\"事件处理器 - 被称为 onmouseover 来完成这项工作：

4.2.1 窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。 属性 值 描述

修德 博学 求实 创新

- 63 -

李华荣2023-5-6

onload 脚本 onunload 脚本 当文档被载入时执行脚本 当文档被卸下时执行脚本

4.2.2

表单元素事件 (Form Element Events)

仅在表单元素中有效。 属性 值 描述

onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur 脚本 当元素失去焦点时执行脚本 onfocus 脚本 当元素获得焦点时执行脚本

4.2.3 图像事件 (Image Events)

该属性可用于 img 元素： 属性 值 描述

onabort 脚本 当图像加载中断时执行脚本

4.2.4 键盘事件 (Keyboard Events)

在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。 属性 值 描述 onkeydown 脚本 当键盘被按下时执行脚本

onkeypress 脚本 当键盘被按下后又松开时执行脚本 onkeyup 脚本 当键盘被松开时执行脚本

4.2.4.1 按键捕捉

Ctrl+Enter按键:if (event.ctrlKey && event.keyCode == 13) Alt加快捷键: Alt+A

if (event.keyCode < 48 || event.keyCode >57) event.returnValue = false;

此方法控制TextBox只收数字：0~9 , 也自可以定义其它可输入字符,如改成: 65~123,只允许输入: a~z和

修德 博学 求实 创新

- 64 -

李华荣2023-5-6

A~Z 等

4.2.4.2 屏蔽鼠标右键

oncontextmenu=\"window.event.returnvalue=false\"

4.2.4.3 屏蔽键盘所有键

function document.onkeydown(){ event.keyCode = 0;

event.returnvalue = false; }

4.2.5 鼠标事件 (Mouse Events)

在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 值 描述 onclick 脚本 当鼠标被单击时执行脚本 ondblclick 脚本 当鼠标被双击时执行脚本 onmousedown 脚本 当鼠标按钮被按下时执行脚本 onmousemove 脚本 当鼠标指针移动时执行脚本 onmouseout 脚本 当鼠标指针移出某元素时执行脚本

onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本 onmouseup 脚本 当鼠标按钮被松开时执行脚本

4.2.6 处理事件

为响应事件而执行的JavaScript代码段称为事件处理程序 事件处理程序分为：

HTML 标记事件处理程序

以属性的形式出现的事件处理程序

object.eventhandler = function;

修德 博学 求实 创新

- 65 -

李华荣2023-5-6

第5章 HTML DOM概述

DOM是Document Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的

一套属性、方法和事件

应用最广泛，大部分web开发的编程语言如Java、PHP、Python、Ruby和JavaScript等都提供了DOM的实现。

5.1 节点

DOM是一棵枝繁叶茂的“节点树”

所谓节点(node)，表示某个网络中的一个连接点，换句话说，网络是节点和连线的集合在，W3C DOM 中，每个容器、独立的元素或文本块都被看成一个节点，节点是DOM的基本构建块。 DOM中定义了HTML文档中的六种相关节点类型

Welcome to DOM World!

浏览器中文档对象模型的层次结构

修德 博学 求实 创新

- 66 -

李华荣2023-5-6

修德 博学 求实 创新

- 67 -

李华荣2023-5-6

第6章

设计模式创建javascript对象

1. 使用原型和构造函数方式创建对象，属性之间互不干扰，对象之间共享同一对象，是创建对象的一

种好方法。

2.动态原型方式创建对象,构造函数中加flag标记，对象拥有不同属性值，共享同一方法。

3.基于已有对象，扩充属性方法

4. 工厂方式创建对象

5.构造函数创建对象 function Person(){ this.username=”zhaowei”; this.password=”password”; this.sayHello=function(){

alert(this.username+”:”+this.password); } }

var person=new Person();

修德 博学 求实 创新 - 69 - 李华荣2023-5-6

person.sayHello();

6.原型方式(单存使用不能赋初值)

第7章 Javascript 中的继承

1、 对象冒充

2.call方法方式

修德 博学 求实 创新 - 71 - 李华荣2023-5-6

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文