1
第 6章 网页中使用 JavaScript
学习目标
? JavaScript中的概念，如对象、事件等
? JavaScript类型和变量
? 熟悉各种语句
? 掌握内置对象和函数
? 掌握各种事件
2
第 6章 网页中使用 JavaScript
教学内容
6.1 JavaScript中的数据类型与变量
6.2 JavaScript的语言结构
6.3 JavaScript中的对象
6.4 JavaScript中的事件
6.5 JavaScript实例
本章小结
返回总目录
3
6.1 JavaScript中的数据类型与变量 — 数据类型
返回目录
JavaScript 主要的数据类型有：数值类型 （ number ）, 字符串型
（ String）, 对象类型 (object),布尔类型 (Boolean),空类型 (null)。
1,数值类型
在 JavaScript 中数值类型可代表整数和浮点数 。 整数可以为正数, 0 或
者负数 。 浮点数通常是科学记数法, 如 1.6E10（ E大小写均可 ） 代表
1.6× 1010。
2,字符串类型
字符串类型是用引号括起来的一组字符 。 如：, happy birthday to you,
3,对象类型
因为 JavaScript是一种基于对象的语言, 所以在 JavaScript中还有对象类
型, 比如以后将会讲到的 windows对象等 。
4,布尔类型
布尔类型用于逻辑运算, 一个布尔类型的变量可能的取值有 true 和 false。
5,空数据类型
空数据类型就是 null，也就是没有任何值，什么也不表示 。
4
6.1 JavaScript中的数据类型与变量 — 变量
在 JavaScript 中, 变量用来存放脚本中的值, 在需要用这个值的地方
可以用变量来代表 。 JavaScript语言不像其他语言那样对数据类型要求
严格, 所以不必声明每一个变量的类型 。 虽然变量声明不是必须的, 但
在使用变量之前先进行声明是个好习惯 。 变量声明使用 var 语句进行 。
如,var student= false; // 变量 student 的数据类型为 Boolean 类型 。
另外, 在定义变量名时必须遵循以下规则：
1,第一个字符必须以字母 （ 大小写均可 ）, 或下划线, 或美元符 $开
始 。 例如 _md和 md都是合法的变量名称 。 而 2md和 @md都是非法的 。
2,变量名中不能包含空格 。 例如 text name就是不合法的变量名 。
3,变量名称不能是保留字 。 例如 var是 JavaScript中定义变量的保留字,
在给变量起名字的时候就不能使用 var。
4,变量名区分大小写 。 JavaScript 是一种区分大小写的语言, 将一个
变量命名为 name 和将其命名为 Name是不一样的 。
另外, 对象名必须大写, 方法名和属性名大小写均可 。 JavaScript支持
//注释符 。
返回目录
5
6.2 JavaScript的语言结构 — if条件语句
if… else 语句是 JavaScript中最基本的控制语句，通过它可以改变语句的
执行顺序。
if条件语句的基本格式是：
if（ 表述式 ）
{语句段１； }
else
{语句段２； }
功能：如果条件满足, 即表达式为 true,则执行语句段１, 否则执行语句段
２ 。 如果语句段 1和语句段 2中只有一条语句, 两边的花括号可以省去, 如
果有多条语句, 则必须使用花括号将其括起来 。 If条件语句中的 else部分可
以省去, 如果省去, 当条件满足时执行语句段 1,如果不满足, 就什么也不
做 。 if必须小写 。
返回目录
6
6.2 JavaScript的语言结构 — if条件语句
if语句是可以嵌套的。格式为：
if（ 表达式 1）
{语句段１； }
else（ 表达式 2）
{语句段２； }
else if（ 表达式 3）
{语句段３； }
……
else
{语句段 n； }
在这种情况下, 若表达式 1
为真, 则执行语句段 1,否则,
若表达式 2为真, 则执行语句
段 2。 若表达式 2为假, 则看
表达式 3是否为真, 若为真,
则执行语句段 3。 依次下去,
直到遇到条件为真, 转去执
行相应的语句段 。 若前面的
条件都假, 则执行最后的 else
语句 。
返回目录
7
6.2 JavaScript的语言结构 — switch条件语句
Switch语句格式如下：
switch (表达式 )
{
case 常量表达式 1:
语句段 1；
case 常量表达式 2:
语句段 2；
case 常量表达式 3:
语句段 3；
……
default:
语句段 n； }
switch语句是多分支选择语句,
虽然这个功能可用嵌套的 if语句来
实现, 但如果分支较多则嵌套的 if
语句层数就多, 增加了程序的长
度并降低了可读性 。 此时用 Switch
语句是较好的选择 。 说明,switch
后面的表达式, 可以是字符型表
达式或整型表达式 。 当表达式的
值与常量表达式 m的值相等时就执
行语句段 m。 若没有与它匹配的常
量表达式, 则执行 default后面的语
句段 。
返回目录
8
6.2 JavaScript的语言结构 — switch条件语句
switch (表达式 )
{
case 常量表达式 1:
语句段 1； break；
case常量表达式 2:
语句段 2； break；
case常量表达式 3:
语句段 3； break；
……
default:
语句段 n； }
要 注 意 的 一 点 是, 在
switch语句中如果找到常量
表达式 m的值和表达式的值
相等, 程序就会从语句段 m
一直执行下去, 而不再判断
与后面常量表达式的值是否
匹配 。 所以要想让程序只执
行相应的语句段, 应该在相
应语句段后加上 break语句 。
格式为：
返回目录
9
6.2 JavaScript的语言结构 — For循环语句
如果一个语句段需要反复使用多次, 用循环语句编写代码 。 For
语句基本格式是：
for（ 初始化部分；条件部分；增量部分 ）
{ 语句段 }
说明：语句的初始化部分是可选的, 若在该语句外初始化变量,
则该部分可省去 。 执行 for语句时, 首先判断条件是否成立, 若
成立则执行语句段, 接着执行增量部分, 否则跳出循环语句 。 增
量部分用来定义循环控制变量在每次循环时按什么方式变化 。
返回目录
10
6.2 JavaScript的语言结构 — while和 do… while循环语句
For与 while语句都是循环语句, 使用 For语句在处理有关数字时更
易看懂, 也较紧凑, 而 while循环对复杂的语句效果更特别 。
1,while循环语句基本格式是,while（ 循环条件 ） {语句段； }
当循环条件为真时, 重复执行语句段, 否则退出循环 。
2,do… while循环语句的基本格式是,do {语句段； } while (循环
条件 )
do… while循环语句不管循环条件是否成立, 都会先执行一次循环,
然后判断条件是否成立 。 若成立, 继续执行语句段, 否则跳出循环 。
也就是说 do… while循环语句中的语句段至少执行一次 。
使用 break语句可使得循环从 For,while或 switch语句中跳出 。 使
用 Continue语句是结束当前的循环, 进入下一次循环 。
返回目录
11
6.2 JavaScript的语言结构 — 函数定义语句
函数是能够完成某种功能的语句集合 。 通常在一个复杂的程序设计时, 总是
根据所要完成的功能, 将程序划分为一些相对独立的部分, 每部分编写一个函
数 。 JavaScript函数定义语句的格式是：
Function 函数名 （ 参数表 ） {函数体 （ 函数执行部分 ） ; Return 表达式 ; }
说明,return语句指明函数返回值, 如无返回值, 可以不使用 return语句 。
从语句格式中可以看出, 函数定义由三部分组成：
1,函数名 。 在对函数进行命名时, 应该使函数的名称有一定含义, 能够表达
函数功能 。 函数名区分大小写 。 对函数的调用通过函数名进行 。
2,参数列表 。 参数列表是可选部分, 使用参数列表可以向函数传递参数, 这
些参数在函数中使用, 其 值 可 以 是 常 量, 变量, 表达式 。 可通过
arguments,Length来检查参数的个数 。 例如, 要看函数 square的参数个数, 并把
个数赋给变量 n,可以这样写,n=square,arguments,Length。
3,大括号 { }部分 。 函数的功能通过执行大括号中代码块来实现 。
返回目录
12
6.2 JavaScript的语言结构 — with语句 和 注释语句
with语句的基本格式是：
with(对象名称 ) { 语句段 }
要引用对象的方法和属性时必须使用 对象,方法 或者是 对象,属性, 比
较麻烦, with语句可解决这个问题 。 直接使用 with语句声明对象的属性
和方法, 当声明内容较多时特别方便 。 要引用 string对象的 charAt(n)方
法, 完整的引用代码为 string.charAt(n)。 在 with语句内使用 string对象的
charAt(n)方法代码为,with(string){charAt(n);}
在 JavaScript中为了描述程序的作用可以使用注释语句 。 注释语句只是
用来给人看的, 而不是用来执行的 。 在 JavaScript中有两种形式的注释：
1,在一行中跟在, //”后面的是注释语句 。
2,如果注释语句有好几行, 可以使用符号 /*和 */来标注注释 。
返回目录
13
6.3 JavaScript中的对象 — 基本概念
在日常生活中我们会接触到各种各样的对象, 例如, 一个苹果是一个
对象, 一个房间是一个对象, 一辆汽车也是一个对象 。 苹果有大有小,
有红有绿, 房间有高有矮, 这些就是对象的属性 。 一辆汽车能够完成加
速, 减速, 转弯等功能, 从对象的角度看这就是对象的方法 。
在编程中,, 对象, 是一个特殊类型的数据, 前面讲过 JavaScript的数
据类型, 其中有一类就是对象类型 。, 方法, 是加在对象上的一些操作,
是一个对象自己所属的函数 。 网页中的按钮, 复选框等都是对象, 而按
钮的颜色, 长度, 宽度就是它的属性, 释放按钮的焦点可以用方法
blur()。 在 JavaScript中访问对象的属性或方法可用句点,,”来实现 。 例如,
用 Apple对象代表一个苹果, 在 Apple对象中有 Color属性代表苹果的颜
色, 可以通过 Apple.Color访问对象的 Color属性 。
返回目录
14
6.3 JavaScript中的对象 — 创建新的对象
JavaScript中除了使用一些定义好的对象, 比如按钮, 复选框等, 还可以创建自
己的对象 。 在 JavaScript中创建一个新的对象需要三个步骤：
第 1歩：定义对象的构造函数用来说明这个对象的各种属性 。
第 2歩：通过 new函数创建对象的实例 。
第 3歩：定义对象的方法, 并把这些方法和对象联系起来 。
1,定义对象的构造函数
在 JavaScript中定义对象的构造函数基本格式是：
Function 构造函数名 （ 对象名 ） （ 参数 1,参数 2,参数 3,…… ）
{
This.属性 1=参数 1
This.属性 2=参数 2
...}
返回目录
15
6.3 JavaScript中的对象 — 创建新的对象
在构造函数中通过 this操作符 （ this指对象本身 ） 引用当前对象, 函数中有多个
参数, 当调用这个构造函数时就创建了一个对象, 并把参数值赋给这个对象的
属性 。 在定义了对象的构造函数之后, 可以用 new操作符创建对象的实例 。
2,定义对象的方法
,方法, 是加在对象上的操作, 是一个对象自己所属的函数 。 定义方法和定义
普通的函数并没有什么区别, 只是在定义完方法之后, 还需要将方法与对象联
系起来 。 将方法与对象联系起来：对象,方法的名字 =函数的名字
例如, 在程序中定义了一个普通函数 showstudent,现在要把它定义为上面创
建的对象 student的方法, 可表示为,student.showstudent=showstudent,一旦定义
完对象的方法, 原来的函数就不再是普通的函数, 要这样使用它：对象,方法名
字 （ 参数表 ）
也可以在定义对象的构造函数时定义方法 。
返回目录
16
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
通常把程序设计的一些常用部件 （ 相关元素组织包装起来称为, 部件, ） 设计
成内置对象和函数 。 这些内置对象同我们自己定义的对象一样, 也拥有自己的
属性和方法 。 内置对象提供编程中最常用的功能, 例如字符串处理, 时间处理
等 。 内置函数简单一点说就是把一些常用的函数编写好封装在语言的内部, 用
户使用时直接调用就可以了 。 主要的内置函数是一些数据类型转换函数 。 下面
介绍 JavaScript的几个常用内置对象 。
1,字符串对象 （ String）
String对象是用来处理字符串的 。 因为 String对象与 JavaScript语言本身结合非常
紧密, 所以在创建对象实例时可以不使用 new操作符 。
例如创建对象实例 string1,下面两种写法效果是一样的：
var string1="happy birthday to you,";
var string1=new string("happy birthday to you");
字符串的长度可以用 String对象中 length属性给出 。 例如 string1.length可求出字符
串 string1的长度 。
返回目录
17
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
对字符串的处理是用方法来实现的 。 常用方法有：
1） toLowerCase()和 toUpperCase()方法
toLowerCase()方法将字符串中的字母全部转换成小写, toUpperCase()方法将字符串中的
字母全部转换成大写 。
2） charAt(n)方法
charAt(n)方法从字符串对象中返回指定位置 n处的字符 。 注意：这里的位置从 0开始计
算 。
3） indexOf(子字符串 )方法
indexOf(子字符串 )返回子字符串在字符串对象中的位置 。 若在字符串对象中有多个这
样的子字串, 只返回第一个字符串所在位置 。 如果不存在这样的子字串, 则返回 -1。
4） lastIndexOf(子字符串 )方法
astIndexOf(子字符串 )方法也是返回子字符串在字符串对象中的位置, 只不过该方法是
从字符串对象的右边开始查找, 若找不到同样返回 -1。
返回目录
18
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
5） Substring(m,n)方法
Substring(m,n)方法返回从位置 m到位置 n之间的字符串 。 注意：返回的字符串中不包括位置 n
处的字符 。
6） 字符串格式化的方法
big()方法：该方法使字符串以大字号显示 。
small()方法：该方法使字符串以小字号显示 。
blink()方法：该方法使字符串闪烁 。
bold()方法：该方法使字符串以黑体显示 。
italics()方法：该方法使字符串以斜体显示 。
fixed()方法：该方法使字符串显示成等宽字 。
strike()方法：该方法给字符串加上删除线 。
sub() 和 sup()方法：分别使字符串以下标和上标的形式显示 。
fontcolor(颜色 )方法：该方法用于指定字符串显示的颜色 。
fontsize(字号 )方法：该方法用于指定字符串的大小 。
7） 用于链接的方法
在 HTML中我们学过
链接标记，在 JavaScript中
是用 link(url)方法和 anchor
方法实现的。 link(url)方法
等效于 HTML中 <A>标记
的 href属性。 anchor方法等
效于 HTML中 <A>标记的
NAME属性。
返回目录
19
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
2,数组对象 （ Array）
注意：数组下标从 0开始 。
定义数组可以采用以下三种方法：
（ 1） 定义一个未知大小的数组,var s=new Array();
（ 2） 建立数组时定义数组的长度, 例如, 定义一个含有 3个元素的 woman数组,
格式为,var woman=new Array(3);
（ 3） 建立数组的同时, 给数组中的元素赋值 。 例如, 定义一个 woman数组,
其中的值分别为 Jony,Mary,Angle。 建立数组的格式为：
var woman=new Array("Jony"," Mary "," Angle ");
访问 woman数组的第二个元素,woman[1]= " Mary ";
数组也是对象, 有属性和方法 。 判断数组的大小 （ 长度 ） 可以用属性 length。
例如要判断上面定义的数组 woman的长度, 可以用格式,woman.length,返回
值为 3。
返回目录
20
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
下面介绍 Array对象的几种常用方法：
（ 1） sort()方法
sort()方法将数组元素排序 。 默认按照 ASCII码升序 。 woman.sort(); 格式能对上
面定义的 woman数组排序, 排序后数组元素依次是," Angle ","Jony"," Mary
"。
（ 2） join(参数 )方法
join(参数 )方法将数组中的所有元素值以一个字符串的形式表达出来, 显示数
组中所有的元素值可以用该方法 。 Join()方法有一个参数, 用该参数指出每个元
素之间使用的分隔符号, 若省略, 则元素之间没有分隔 。
（ 3） reverse()方法
reverse()方法将数组中的元素颠倒顺序, 将数组中最后一个元素换到第一个元
素的位置, 倒数第二个元素换到第二个元素的位置 ……,例如定义一个 woman数
组, 然后让数组中的元素循序颠倒：
返回目录
21
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 4） pop()方法
用这个方法可以删除数组中的最后一个元素, 并且返回这个元素 。
（ 5） contat(数组名 )
用这个方法可以把两个数组的内容合并起来 。
（ 6） slice(下标 1,[下标 2]) 方法
用这个方法可以获得数组中的一部分元素, 这部分元素是从下标 1开始, 到下
标 2结束 （ 不包含下标 2） 。 下标 2是可选的, 如果没有指出下标 2,则表示截取
从下标 1开始直到数组末尾的元素 。 如果这个参数是负数, 例如是 -3,表示一直
截取到数组的倒数第三个元素 。
（ 7） push(元素 ) 方法
用这个方法可以在数组的最后加入一个元素 。 例如：
var woman=new Array("Jony"," Mary "," Angle ");
woman.push("Jone"); 这样可以在数组 woman的后面加上 "Jone"元素 。
返回目录
22
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
3,日期对象 （ Date）
与日期有关的所有内容在该对象中都可以找到 。 日期对象没有属性, 但是日
期对象有很多方法, 通过这些方法可以获得时间或设置时间 。
创建一个日期对象的实例有三种方式：
（ 1） MyDate=New Date(),用这种方式创建的对象实例自动存储了当前日期和
时间 。
（ 2） MyDate= New Date(毫秒数 ),该方法中的, 毫秒数, 表示从 1970年 1月 1
日 0点 0时开始到一个指定日期的毫秒数 。 用这种形式创建的日期对象, 日期会
自动存储在新创建的对象实例中 。 JavaScript语言内部存储了自从 1970年 1月 1日
开始到指定日期的毫秒数 。
（ 3） MyDate= New Date(year,month,date[,hours[,minutes[,seconds]]]),用这种
方法创建对象实例时可以指定日期对象的时间 。 日期对象中所有小时, 秒数,
日期, 月份等的数字都是从 0开始的, 年份从 1900年开始 。
返回目录
23
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
日期对象的方法：
（ 1） 获得日期对象各个部分的方法
getYear() 获得日期对象的年份
getMonth() 获得日期对象的月份
getDate() 获得日期对象的日号数
getDay() 返回星期几
getHours() 获得日期对象的小时数
getMintes() 获得日期对象的分钟数
getSeconds() 获得日期对象的秒数
getTime() 获得日期对象的时间 （ 以
毫秒数计算 ） 。
（ 2） 设置日期对象的各个部分的方法：
setYear() 设置日期对象的年份
setMonth() 设置日期对象的月份数
setDate() 设置日期对象的 日号数
setHours() 设置日期对象的小时数
setMintes() 设置日期对象的分钟数
setSeconds() 设置日期对象的秒数
setTime() 设置日期对象的毫秒数,
在以后的计算中就可以将这个日期对
象的各个部分取出分别处理 。
返回目录
24
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 3） 处理时区问题的方法
getTimeZoneOffset() 给出当地时区与 GMT(格林威治标准时间, 也叫 UTC)的
偏差 。
toGMString() 转换成以格林威治标准时间表达的字符串 。
toLocal String() 转换成以当地时间方式表达的时间字符串 。
（ 4） 处理日期格式之间转换的方法
Date对象有两种特殊的方法可用于日期格式之间的转换 。 这不是某个单独的
Date对象的方法, 它可以作用于 Date对象本身, 是 Date对象定义的静态方法,
静态方法同每个具体的实例是没有关系的 。 这两种方法是：
Date.Parse(字符串 ) 这个方法把一个字符串表达的时间或日期转换成时间
或日期的内部表示（距 1970年 1月 1日的毫秒数）。 例如：
Date1=new date(); Date1,setTime (Date.parse("May 1,2004");
使 Date1这个对象实例存放了日期 2004年 5月 1日 。
Date.UTC(日期 ) 这个方法返回从 1970年 1月 1日到给定日期的毫秒数 。
返回目录
25
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
4,数学对象 （ Math）
Math对象可用来处理各种数学运算, Math对象不能创建自己的对象实例 。 可
以直接使用 Math来调用常用的数学函数, 格式为,Math.数学函数名 （ 参数 ）
注意：所有 Math对象方法中的参数均是浮点型 。 在三角函数里, 输入的是弧
度值 。
数学函数名前加上 Math.可能使用起来不太习惯, 我们可以使用前面介绍的
with语句指定 Math对象, 在 Math对象的作用范围内直接使用数学函数就可以了 。
格式如下,with(Math){各种数学函数 }
Math对象的常用函数：
（ 1） 三角函数
Sin(弧度值 )：对弧度值进行正弦计算, 返回该弧度值的正弦值 。
Cos(弧度值 )：对弧度值进行余弦计算, 返回该弧度值的余弦值 。
Tan(弧度值 )：对弧度值进行正切计算, 返回该弧度值的正切值 。
返回目录
26
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
Asin(数值 )：反正弦函数, 求数值的反正弦函数值 。
Acos(数值 )：反余弦函数, 求数值的反余弦函数值 。
Atan(数值 )：反正切函数, 求数值的反正切函数 。
（ 2） 取整函数
ceil(a)：向上取整函数, 返回一个不小于 a的最小整数 。 例如 ceil(3.3)的返回值
为 4。
Floor(a)：向下取整函数, 返回一个不大于 a的最大整数 。 例如 Floor(3.3)的返回
3。
Round(a)：对 a四舍五入取整 。 如,Round(3.5)返回值为 4。 Round(3.4)返回值
为 3。
（ 3） 指数, 对数函数
Exp(a)：返回 e的 a次幂的值 。
Log(a)：返回 a的自然对数值 。
返回目录
27
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 4） 乘幂函数
Pow(a,b)：计算 a的 b次幂的值, 即 ab。
Sqrt(a)：对 a进行求平方根的计算 。
（ 5） 其他函数
abs(a)：对 a取绝对值, 例如,Math.abs(-2),结果为 2。
Random()：随机函数, 该函数能够产生 0-1之间的一个随机数 。
Max(a,b)：取最大值的函数, 取 a和 b中最大的一个 。
Min(a,b)：取最小值的函数, 取 a和 b中最小的一个 。
Math对象还包含属性, 属性都是一些公认的常数值 。 Math对象的属性：
属性 E,自然对数的底, 即 2.71828。 属性 LN2,2的自然对数值, 即 0.69315。
属性 LN10,10的自然对数值, 即 2.30259。 属性 PI：圆周率, 即 3.1415926…… 。
属性 SQRT1_2,0.5的平方根 。 属性 SQRT2,2的平方根 。
返回目录
28
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
5,事件对象 （ Event）
事件对象描述一个 JavaScript中的事件 。 在每个事件发生时, JavaScript解释器
会自动填充一个事件对象实例, 并作为一个参数传送给事件处理函数 。 例如
mousedown事件, 在该事件发生时会产生鼠标在哪个位置, 鼠标的哪个按钮被
按下, 是否同时有修饰键 （ Control,Alt,Shift） 等信息 。 这些信息由 JavaScript解
释器自动填好后作为一个参数传递给相应事件处理函数, 事件处理函数根据这
些信息执行相应动作 。
6,JavaScript的几个内置函数
JavaScript的内置函数不属于任何对象, 所以在 JavaScript语句的任何地方都可
以使用这些函数 。 JavaScript的内置函数有：
（ 1） eval（ 字符串 ）
该函数的参数是一个字符串, 此函数将这个字符串作为 JavaScript语句或表达
式进行分析, 要么执行它, 要么返回结果 。 如果传递给这个函数的字符串中包
含命令, 这些命令也可以被执行 。
返回目录
29
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 2） escape(字符串 ),接受一个字符串, 这个字符串可以有空格, 分号等字符, escape()
把这个字符串转换成 Cookie的内部表示方式 。 Cookie是 Web服务器保存在用户硬盘上的一
段文本 。 Cookie允许一个 Web站点在用户的电脑上保存信息并且随后再取回它 。
（ 3） unescape() 接受一个 Cookie,把这个 Cookie的内部表示方式转化成普通的字符串形
式 。
（ 4） parseInt(),函数从一个字符串首提取一个整数并返回 。 如果在提取过程中遇到除
了数字, 符号, 小数点, 指数符号以外的其他字符, 该函数就停止提取, 并返回已提取
的结果 。 如果第一个字符就是不可提取的, 那么该函数返回, NaN”值, 表示字符串中不
存在数字 。
（ 5） parseFloat(),函数从一个字符串首提取一个浮点值并返回 。 如果在提取过程中遇到
除了数字, 符号, 小数点, 指数符号以外的其他字符, 该函数就停止提取, 并返回已提
取的结果 。 如果第一个字符就不可提取, 那么该函数返回, NaN”值, 表示字符串中不存
在数字 。
（ 6） isNaN(),isNaN函数可以测试上面两个函数返回的结果是否为 NaN,如果是, 则返
回 true。
（ 7） isFinite(n):该函数用来测试参数 n是否是一个无穷值 。 如果是, 则返回 false。
返回目录
30
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
由于 JavaScript在网页中使用, 网页通过浏览器浏览, 在浏览器中打开一个
页面时浏览器会自动创建一些对象, 这些对象存放了 HTML页面的属性和其他
相关信息, 这些对象在浏览器上运行, 所以我们把它们称为浏览器对象 。 浏
览器对象主要有 navigator,Window,document,location和 history对象 。 对象
之间有从属关系, Window对象是其他部分的祖先, 其子对象包括 location对象,
document对象和 history对象 。 在程序中子对象被认为是父对象的属性 。 例如,
要引用 document对象, 应该用格式,Window.document。 下面分别介绍这些对
象 。
1,Window对象
Window对象反映的是一个完整的浏览器窗口 。 只要浏览器窗口打开, 即使
浏览器中没有加载任何页面, JavaScript也会建立这个对象 。 Window对象提供
了处理浏览器窗口的方法和属性 。 该对象对应于 HTML文档中的 <Body>和
<FrameSet>两种标识 。
返回目录
31
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
（ 1） Window对象的常用属性：
Closed属性：判断一个窗口是否关闭 。
frames属性：记录当前窗口中所有帧的信息, 是一个 frame对象的数组 。
parent属性：指明当前窗口或帧的父窗口 。
defaultstatus属性：默认状态, 它的值显示在窗口的状态栏中 。
status属性：状态栏中当前显示的信息 。
top属性：定义的是一系列浏览器上层的浏览器窗口 。
window属性：指的是当前窗口 。
self属性：引用当前文档对应的窗口 。
history属性：提供当前窗口的历史纪录, 可在网页导航中发挥作用 。
Location属性：提供当前窗口的 URL信息 。
Locationbar属性：代表浏览器的地址栏 。
返回目录
32
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
（ 2） Window对象的常用方法：
open()方法：用于创建一个新窗口或在指定的命令窗口内打开页面 。 打开窗口的基本
格式,Window,open("URL","窗口名字 ","窗口属性 ")。
close()方法：用于关闭一个浏览器窗口 。
alert(字符串 )方法：用于弹出一个警告框, 在警告框内显示字符串文本 。
confirm(字符串 )方法：用于弹出一个确定框, 在确定框内显示字符串文本 。 通常在用
户决定某些行动是否采取时使用 。
prompt(字符串, 缺省值 )方法：用于弹出一个提示框, 提示框中显示字符串, 并且在
提示框中有一个文本框要求用户输入信息 。 如果用户修改输入文本框内的文本后单击
,确定, 按钮, 则返回用户输入的字符串 。 如果用户单击, 取消, 按钮, 则返回 null值 。
back()方法：用于指示浏览器载入历史纪录的上一个 URL地址, 相当于浏览器工具栏
中的后退按钮 。
forward()方法：用于指示浏览器载入历史纪录的下一个 URL地址, 相当于浏览器工具
栏中的前进按钮 。
home()方法：用于指示浏览器载入预先设定的主页页面, 相当于浏览器工具栏中的返
回主页按钮 。
返回目录
33
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
2,document对象
存储着当前页的一些信息, 代表的是当前整个页面, 页面的前景色, 背景色,
链接颜色, 表单, 图像等都作为 document对象的属性存在 。
（ 1） document对象的属性
title属性：指出文档的标题, 相当于 HTML文档中 <title></title>之间的内容 。
lastModified属性：指出文档最后修改的日期 。
bgcolor属性：指出文档的背景色, 相当于 HTML中 <body>的 bgcolor属性 。
fgcolor属性：指出文档的前景色, 相当于 HTML中 <body>的 text属性 。
alinkColor属性：指出鼠标单击时的链接颜色 。
vlinkColor属性：指出已访问过的链接颜色 。
links属性：数组, 存放文档中所有链接对象, 每个数组元素是一个链接对象 。
返回目录
34
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
Images属性：数组, 存放文档中所有的图形对象, 每个数组元素是一个图
形对象 。
URL属性：指出文档对应的 URL地址 。
（ 2） document对象的主要方法
write(字符串 )：将字符串写到一个新文档 。 可以是字符串常量或者是字符串
变量 。
writeln(字符串 )：将字符串写到一个新文档, 并在字符串末尾加上换行符 。
clear()：清除文档当前内容 。
Open()和 close()：打开一个新文档和关闭当前文档 。 最好先用 Open()方法打
开一个文档, 然后再用 write()或者 writeln()方法写入, 写入完成后, 再用 close()
方法关闭 。
返回目录
35
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
3,location对象
提供当前页面的 URL信息。它有一组属性，用于存储 URL的各个组成部分。
它的方法可以重装当前页面或装入新页面。
例如,http://www.zjl.com:80/book/1.html#section1
协议名称为 http，主机名称为 www.zjl.com，端口号为 80，页面地址为
book/1.html，在页面中有一个页面内跳转锚标，名称为 section1。
（ 1） location对象的属性
Hash属性：如果页面中有页面内跳转的锚标，则 Hash属性返回 HREF中 #号
后面的字符串。如上例中用 location.hash可以获得锚标为 #section1。
Host属性：提供 URL页面所在的 Web服务器主机名称和端口号。如上例中用
location.host可以获得 www.zjl.com,80。
Hostname属性：提供 URL的主机名称部分 。 如上例中的 www.zjl.com。
返回目录
36
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
Href属性：提供整个 URL。 如上例中的 http://www.zjl.com:80/book/1.html#section1。
Pathname属性：提供文档在主机上的路径及文件名 。 如上例中的 book/1.html。
Port属性：返回 URL的中的端口号部分 。 如上例中的 80。
Protocol属性：指定协议名称 。
Search属性：提供完整 URL中,？, 号后面的查询字符串 。 在浏览网页时常会发现搜
索站点的页面 URL中问号,？, 后还有一些信息, 这些信息往往是提交到服务器上进行
搜索的信息 。
（ 2） location对象的方法
reload()方法：刷新当前页面, 相当于工具栏上的刷新按钮 。 例如定义一个刷新页面的
按钮, 格式为,<INPUT TYPE="button" VALUE="刷新 " OnClick="location.reload()">
replace(URL地址 )方法：用指定的 URL地址代替当前页面 。
Assign(URL地址 ) 方法：将当前页面导航到指定的 URL地址上去 。
返回目录
37
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
4,history对象
history对象存储着最近访问过的 URL地址 。 它有一个 length属性, 用于记录该对象存储
的 URL地址的个数 。 history对象的方法：
（ 1） back()方法：装入历史清单中上一个 URL的文档, 相当于浏览器的后退按钮 。
（ 2） forward()方法：装入历史清单中下一个 URL的文档, 对应浏览器的前进按钮 。
（ 3） go(n)方法：装入历史清单中指定位置的文档，如果指定的是一个整数，表示向前
进，如果是一个负数，表示向后退。 go(-1)的功能和 back()方法的功能是一样的。
5,navigator对象
保存浏览器厂家, 版本和功能的信息 。 navigator的常用属性如下：
appCodeName属性：提供当前浏览器的代码名 。
appName属性：提供当前浏览器的名称 。
appVersion属性：提供当前浏览器的版本号 。
userAgent属性：反映浏览器完整的用户代理标识 。
navigator还有一个 javaEnabled()方法, 用于指出在浏览器中是否可以使用 Java语言, 该
方法的返回值是一个布尔值 。
返回目录
38
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
6,document的子对象
document的子对象包括 link对象, anchor对象和 form对象 。
link对象：包含链接信息, 可以用 links数组访问 link对象, 数组中的每个元
素都是当前页中的一个 link对象 。
例如, 把当前页面中第一个链接对象的 URL地址赋给变量 link1,格式为：
link1=document.links[0].href;
anchor对象：代表当前文档中的一个链接点, 用数组 links来访问 。
form对象：代表文档中的表单 。 用数组 forms来访问 。
返回目录
39
6.4 JavaScript中的事件
JavaScript是基于对象 (object-based)的语言, 而基于对象的基本特征就是采用事件驱
动 (event-driven)。 事件定义了用户与 Web页面交互时产生的各种动作 。 通常我们把鼠
标或热键的动作称之为事件 （ Event）, 例如, 单击一个按钮就产生一个事件 。
在 JavaScript中, 对象事件的处理通常由函数来完成, 所以事件处理程序的基本格式
与函数全部一样 。 格式如下：
Function 事件处理名 （ 参数表 ） {
事件处理语句集；
…… }
归纳起来, 必须使用的事件有三大类：
1,引起页面之间跳转的事件, 主要是超链接事件 。
2,事件浏览器自己引起的事件 。
3,事件在表单内部与界面对象交互引起的事件 。
句柄是一个 32 位的正整数, 用来存储特定的事件处理函数, 识别窗体或其他对象,
如字体或位图 。 Windows 给每个窗口一个唯一的句柄, 通过句柄操纵该窗口 。 一个句
柄的名字是在对应的事件名字之前加上 on,如处理 Load事件的句柄通常是 onLoad。
返回目录
40
6.4 JavaScript中的事件 — 浏览器事件
常用的浏览器事件有 Load,Unload和 Submit。
1,Load事件
当浏览器装载网页时会触发 Load事件 。 这个事件处理函数在其他所有 JavaScript程序
和网页之前被执行, 用来完成网页中所有数据的初始化, 弹出提示窗口或密码确认窗
口 。 通常在 <BODY>标记中使用这个事件的句柄 。
2,Unload事件
Unload事件与 Load事件正好相反, 当卸载一个页面时会发生 Unload事件, 即在浏览
器载入一个新的网页之前或当用户退出文档时触发 unload 事件 。 onUnload 用在
BODY 或 FRAMESET 标签上 。 如 <BODY onUnload="代码或对一个 JavaScript 函数的
调用 ">。
3,Submit事件
当用户完成信息输入提交表单时发生该事件 。 通常在 <FORM>标签中使用 onSubmit
句柄 。 当用户提交表单时, JavaScript调用 Submit事件的处理函数, 对表单数据进行验
证, 如果所有数据验证都能通过, 时间处理函数就返回 true,将表单提交到服务器 。
如果返回 false,则不进行提交, 并给出提示信息, 让用户重新输入数据 。
返回目录
41
6.4 JavaScript中的事件 — 键盘事件
常用的键盘事件有 KeyDown,KeyPress和 KeyUp事件 。
1,KeyDown事件
当用户按下一个键时会发生该事件 。 KeyDown事件总是发生在 KeyPress事件之前, 如
果 KeyDown事件的处理函数返回 false, 则 KeyPress事件不会发生 。 当 KeyDown事件发
生时, JavaScript会自动调用 onKeyDown句柄 。 KeyDown事件适用的对象有 document、
Image（ 图像 ）, Link（ 超级链接 ）, Textarea（ 文本区域 ） 。
2,KeyPress事件
当用户按下一个键时触发该事件, 当 KeyDown事件的处理函数返回的值为 true时
KeyPress事件接着发生 。 当用户按着一个键不松开时, KeyPress事件会不断发生 。 当
KeyPress事件发生时, JavaScript会自动调用 onKeyPress句柄 。 KeyPress事件适用的对
象有 document,Image,Link,Textarea。
3,KeyUp事件
当用户释放键盘上的一个键时触发 KeyUp 事件 。 当 KeyUp事件发生时, JavaScript会
自动调用 onKeyUp句柄 。 KeyUp事件适用的对象有 document,Image,Link,Textarea。
返回目录
42
6.4 JavaScript中的事件 — 鼠标事件
常用的鼠标事件有 MouseDown,MouseUp,MouseOver,MouseMove、
MouseOut,Click,Blur,Change,Move,Select和 Focus事件 。 在鼠标事件
发生时, 鼠标事件的信息被作为一个参数传送给鼠标事件处理函数 。
1,MouseDown事件
当用户按下鼠标按钮时触发 MouseDown 事件 。 若 MouseDown 事件处理函
数返回 false 的话, 缺省操作 (拖放, 选择文本或激活超级链接 )将被取消 。
MouseDown事件发生时 JavaScript会自动调用 on MouseDown句柄 。 该事件适
用对象 Button,document,Link。
2,MouseUp事件
当用户释放鼠标按钮时会触发该事件 。 如果 MouseUp事件处理函数返回 false
的话, 缺省操作 (拖放, 选择文本或激活超级链接 )将被取消 。 当 MouseUp的
处理函数在一个被捕获的链接上返回 false,链接将不会被触发, 捕获是由于
在链接上发生了 MouseDown事件 。 当 MouseUp事件发生时 JavaScript会自动
调用 onMouseUp句柄 。 该事件适用对象为 Button,document,Link。
返回目录
43
6.4 JavaScript中的事件 — 鼠标事件
3,MouseOver事件
当鼠标经过某个对象或区域时触发该事件 。 MouseOver事件发生时
JavaScript会自动调用 onMouseOver句柄 。 该事件适用对象有 Layer、
Link和区域 。
上网时经常发现当鼠标经过一个超链接时, 状态栏中会显示超链接
的目标 。 要想不让浏览器在状态栏中显示超链接的目标, 必须在该
事件处理函数的最后使用 return true语句, 即让处理函数返回 true值 。
例如, 想让鼠标经过超链接时在状态栏中显示, 你好, 要看超链接
吗？,, 用如下格式：
<A HREF=http://ww.baidu.com/ onMouseOver="window.status='你好,
要看超链接吗？ 'return true">
请点击进入百度搜索
</A>
返回目录
44
6.4 JavaScript中的事件 — 鼠标事件
4,MouseMove事件
用户移动鼠标指针时触发该事件 。 因为鼠标移动发生太频繁了, 所
以缺省情况下 onMouseMove 不是任何对象的事件, 只有当对象要求
捕获事件时, 这个时间才会在移动鼠标是发生 。 当 MouseMove事件
发生时, JavaScript会自动调用 onMouseMove句柄 。
5,MouseOut事件
当每次鼠标指针离开区域或链接时触发 MouseOut 事件 。 例如鼠标
指针从客户端图像地图的一个区域移到了另外一个区域, 则第一个
区域会收到 onMouseOut 事件, 而第二个区域会收到 onMouseOver
事件 。 当 MouseOut事件发生时, JavaScript会自动调用 onMouseOver
句柄 。 该事件适用对象有 Layer,Link和区域 。
返回目录
45
6.4 JavaScript中的事件 — 鼠标事件
6,Click事件
当用户单击按钮时触发该事件, 同时 onClick指定的事件处理程序或代码将
被执行 。 该事件适用于 button（ 按钮对象 ）, checkbox（ 复选框 ）, radio
（ 单选钮 ）, reset buttons（ 重置按钮 ）, submit buttons（ 提交按钮 ） 等对象 。
有关 Click事件我们在前面的例子中已多次使用 。
7,Blur事件
当表单中的元素或 window,frame失去焦点时会发生该事件 （ 既使其值没有
改变 ） 。 同时 onBlur指定的事件处理程序或代码将被执行 。 该事件适用于
Button,Checkbox,FileUpload,Layer,Password,Radio,Reset,Select、
Submit,Text,Textarea和 Window。
8,Change事件
当一个选择框, 文本框或者文本输入区域失去焦点并且其中的值发生改变
时会发生该事件, 同时 onChange指定的事件处理程序或代码将被执行 。 该事
件适用于 Text,Textarea和 Select。
返回目录
46
6.4 JavaScript中的事件 — 鼠标事件
9,Move事件
当用户或者脚本程序移动窗口或框架时触发 move事件, 同时
onMove指定的事件处理程序或代码将被执行 。 该事件适用于对象
window以及帧 。
10,Select事件
当 Text或 Textarea对象中的文字被选定之后引发该事件 。 同时
onSelect指定的事件处理程序或代码将被执行 。 该事件适用于对象
Text,Textarea。
11,Focus事件
当一个选择框, 文本输入框或者文本输入区域得到焦点时触发该
事件 。 同时 onFocus指定的事件处理程序或代码将被执行 。 该事件适
用于对象 Text,Textarea或选择框 。 常在这个事件处理函数中加入一
些提示信息, 当指向这个对象并单击时就可以得到一些提示 。
onFocus句柄与 onBlur句柄的功能正好相反 。
返回目录
47
6.5 JavaScript实例
例, 运动字幕的设计
<html>
<head>
<title>运动字幕 </title>
<body >
<Script Language ="JavaScript">
document.write("<marquee scrollamount=\"1\" scrolldelay=\"50\" direction=\"up\"
id=t onmouseover=t.stop()onmouseout=t.start()>");
document.write("<a href=\"www.baidu.com\">"+"百度页面 "+"</a><br>");
document.write("<a href=\"www.sina.com.cn\">"+"新浪网 "+"</a><br>");
document.write("</marquee>");
</Script>
</head>
</body></html>
返回目录
48
6.5 JavaScript实例
例,自动装载和自动卸载页面
<html>
<head>
<Script Language="JavaScript">
function loadf()
{alert("进入页面 ！ ");}
function unloadf()
{alert("您要退出此页面, 进入新的页面 ！ ");}
</Script>
</head>
<body OnLoad="loadf ()" OnUnload="unloadf()">
<a href="www.baidu.com">百度页面 </a>
</body>
</html>
返回目录
49
6.5 JavaScript实例
例,使用表单对象数组和表单名字引用表单
<html>
<body>
两个文本框中的内容是一致的, 其中一个的内容改变, 另一个的内容也会改变 ！
<form>
<input type=text NAME="con1" onChange="document.my.con.value=this.value;" >
</form>
<form NAME="my">
<input type=text NAME="con"
onChange="document.forms[0].con1.value=this.value;">
</form>
</body>
</html>
返回目录
50
6.5 JavaScript实例
例 6-21 倒计时程序
<html>
<head>
<title>倒计时程序 </title>
<Script Language ="JavaScript">
var date=new Date();
var year=date.getYear();
var month=date.getMonth();
var day=date.getDate();
document.write("现在的日期是,",year,"-",month+1,"-",day,"<br>");
if(month+1==10) var days=31+28+30-day;
if(month+1==11) var days=28+30-day;
if(month+1==12) var days=28-day; 程序未完转下页
返回目录
51
6.5 JavaScript实例
if(month+1<10) {
document.write("现在已经是 2月份了 ！ ")}
document.write("距离考试还有,"+days+"天 ")
</Script>
</head>
</html>
返回目录
52
本 章 小 结
? JavaScript中的数据类型与变量
– JavaScript主要的数据类型有：数值类型 （ number）, 字符串型
（ String）, 对象类型 (object),布尔类型 (Boolean),空类型 (null)。
– 变量声明使用 var 语句进行 。
? JavaScript的语言结构
– if… else 语句是 JavaScript中最基本的控制语句, 通过它可以改变语
句的执行顺序 。
– switch语句是多分支选择语句 。
– 如 果一个语句段需要反复使用多次, 用 For,while和 do… while循
环语句编写代码 。
– 函数是能够完成某种功能的语句集合 。 使用 with语句声明对象的属
性和方法 。
– 在 JavaScript中为了描述程序的作用可以使用注释语句 。
返回目录
53
本 章 小 结
? JavaScript中的对象
–, 方法, 是加在对象上的一些操作, 是一个对象自己所属的
函数 。
– JavaScript的几个常用内置对象字符串, 数组, 日期, 数
学 和 事件对象 。
– JavaScript的内置函数不属于任何对象, 所以在 JavaScript语
句的任何地方都可以使用这些函数 。 JavaScript的内置函数
有,eval（ 字符串 ）, escape(字符串 ), unescape(),
parseInt(), parseFloat(), isNaN() 和 isFinite(n) 。
– 浏览器对象主要有 navigator,Window,document,location
和 history对象 。
返回目录
54
本 章 小 结
? JavaScript中的事件
– JavaScript中的事件有浏览器事件, 键盘事件 和
鼠标事件 。
– 常用的浏览器事件有 Load,Unload和 Submit。
– 常用的键盘事件有 KeyDown,KeyPress和 KeyUp事
件 。
– 常用的鼠标事件有 MouseDown, MouseUp,
MouseOver, MouseMove, MouseOut, Click,
Blur,Change,Move,Select和 Focus事件 。
返回目录
第 6章 网页中使用 JavaScript
学习目标
? JavaScript中的概念，如对象、事件等
? JavaScript类型和变量
? 熟悉各种语句
? 掌握内置对象和函数
? 掌握各种事件
2
第 6章 网页中使用 JavaScript
教学内容
6.1 JavaScript中的数据类型与变量
6.2 JavaScript的语言结构
6.3 JavaScript中的对象
6.4 JavaScript中的事件
6.5 JavaScript实例
本章小结
返回总目录
3
6.1 JavaScript中的数据类型与变量 — 数据类型
返回目录
JavaScript 主要的数据类型有：数值类型 （ number ）, 字符串型
（ String）, 对象类型 (object),布尔类型 (Boolean),空类型 (null)。
1,数值类型
在 JavaScript 中数值类型可代表整数和浮点数 。 整数可以为正数, 0 或
者负数 。 浮点数通常是科学记数法, 如 1.6E10（ E大小写均可 ） 代表
1.6× 1010。
2,字符串类型
字符串类型是用引号括起来的一组字符 。 如：, happy birthday to you,
3,对象类型
因为 JavaScript是一种基于对象的语言, 所以在 JavaScript中还有对象类
型, 比如以后将会讲到的 windows对象等 。
4,布尔类型
布尔类型用于逻辑运算, 一个布尔类型的变量可能的取值有 true 和 false。
5,空数据类型
空数据类型就是 null，也就是没有任何值，什么也不表示 。
4
6.1 JavaScript中的数据类型与变量 — 变量
在 JavaScript 中, 变量用来存放脚本中的值, 在需要用这个值的地方
可以用变量来代表 。 JavaScript语言不像其他语言那样对数据类型要求
严格, 所以不必声明每一个变量的类型 。 虽然变量声明不是必须的, 但
在使用变量之前先进行声明是个好习惯 。 变量声明使用 var 语句进行 。
如,var student= false; // 变量 student 的数据类型为 Boolean 类型 。
另外, 在定义变量名时必须遵循以下规则：
1,第一个字符必须以字母 （ 大小写均可 ）, 或下划线, 或美元符 $开
始 。 例如 _md和 md都是合法的变量名称 。 而 2md和 @md都是非法的 。
2,变量名中不能包含空格 。 例如 text name就是不合法的变量名 。
3,变量名称不能是保留字 。 例如 var是 JavaScript中定义变量的保留字,
在给变量起名字的时候就不能使用 var。
4,变量名区分大小写 。 JavaScript 是一种区分大小写的语言, 将一个
变量命名为 name 和将其命名为 Name是不一样的 。
另外, 对象名必须大写, 方法名和属性名大小写均可 。 JavaScript支持
//注释符 。
返回目录
5
6.2 JavaScript的语言结构 — if条件语句
if… else 语句是 JavaScript中最基本的控制语句，通过它可以改变语句的
执行顺序。
if条件语句的基本格式是：
if（ 表述式 ）
{语句段１； }
else
{语句段２； }
功能：如果条件满足, 即表达式为 true,则执行语句段１, 否则执行语句段
２ 。 如果语句段 1和语句段 2中只有一条语句, 两边的花括号可以省去, 如
果有多条语句, 则必须使用花括号将其括起来 。 If条件语句中的 else部分可
以省去, 如果省去, 当条件满足时执行语句段 1,如果不满足, 就什么也不
做 。 if必须小写 。
返回目录
6
6.2 JavaScript的语言结构 — if条件语句
if语句是可以嵌套的。格式为：
if（ 表达式 1）
{语句段１； }
else（ 表达式 2）
{语句段２； }
else if（ 表达式 3）
{语句段３； }
……
else
{语句段 n； }
在这种情况下, 若表达式 1
为真, 则执行语句段 1,否则,
若表达式 2为真, 则执行语句
段 2。 若表达式 2为假, 则看
表达式 3是否为真, 若为真,
则执行语句段 3。 依次下去,
直到遇到条件为真, 转去执
行相应的语句段 。 若前面的
条件都假, 则执行最后的 else
语句 。
返回目录
7
6.2 JavaScript的语言结构 — switch条件语句
Switch语句格式如下：
switch (表达式 )
{
case 常量表达式 1:
语句段 1；
case 常量表达式 2:
语句段 2；
case 常量表达式 3:
语句段 3；
……
default:
语句段 n； }
switch语句是多分支选择语句,
虽然这个功能可用嵌套的 if语句来
实现, 但如果分支较多则嵌套的 if
语句层数就多, 增加了程序的长
度并降低了可读性 。 此时用 Switch
语句是较好的选择 。 说明,switch
后面的表达式, 可以是字符型表
达式或整型表达式 。 当表达式的
值与常量表达式 m的值相等时就执
行语句段 m。 若没有与它匹配的常
量表达式, 则执行 default后面的语
句段 。
返回目录
8
6.2 JavaScript的语言结构 — switch条件语句
switch (表达式 )
{
case 常量表达式 1:
语句段 1； break；
case常量表达式 2:
语句段 2； break；
case常量表达式 3:
语句段 3； break；
……
default:
语句段 n； }
要 注 意 的 一 点 是, 在
switch语句中如果找到常量
表达式 m的值和表达式的值
相等, 程序就会从语句段 m
一直执行下去, 而不再判断
与后面常量表达式的值是否
匹配 。 所以要想让程序只执
行相应的语句段, 应该在相
应语句段后加上 break语句 。
格式为：
返回目录
9
6.2 JavaScript的语言结构 — For循环语句
如果一个语句段需要反复使用多次, 用循环语句编写代码 。 For
语句基本格式是：
for（ 初始化部分；条件部分；增量部分 ）
{ 语句段 }
说明：语句的初始化部分是可选的, 若在该语句外初始化变量,
则该部分可省去 。 执行 for语句时, 首先判断条件是否成立, 若
成立则执行语句段, 接着执行增量部分, 否则跳出循环语句 。 增
量部分用来定义循环控制变量在每次循环时按什么方式变化 。
返回目录
10
6.2 JavaScript的语言结构 — while和 do… while循环语句
For与 while语句都是循环语句, 使用 For语句在处理有关数字时更
易看懂, 也较紧凑, 而 while循环对复杂的语句效果更特别 。
1,while循环语句基本格式是,while（ 循环条件 ） {语句段； }
当循环条件为真时, 重复执行语句段, 否则退出循环 。
2,do… while循环语句的基本格式是,do {语句段； } while (循环
条件 )
do… while循环语句不管循环条件是否成立, 都会先执行一次循环,
然后判断条件是否成立 。 若成立, 继续执行语句段, 否则跳出循环 。
也就是说 do… while循环语句中的语句段至少执行一次 。
使用 break语句可使得循环从 For,while或 switch语句中跳出 。 使
用 Continue语句是结束当前的循环, 进入下一次循环 。
返回目录
11
6.2 JavaScript的语言结构 — 函数定义语句
函数是能够完成某种功能的语句集合 。 通常在一个复杂的程序设计时, 总是
根据所要完成的功能, 将程序划分为一些相对独立的部分, 每部分编写一个函
数 。 JavaScript函数定义语句的格式是：
Function 函数名 （ 参数表 ） {函数体 （ 函数执行部分 ） ; Return 表达式 ; }
说明,return语句指明函数返回值, 如无返回值, 可以不使用 return语句 。
从语句格式中可以看出, 函数定义由三部分组成：
1,函数名 。 在对函数进行命名时, 应该使函数的名称有一定含义, 能够表达
函数功能 。 函数名区分大小写 。 对函数的调用通过函数名进行 。
2,参数列表 。 参数列表是可选部分, 使用参数列表可以向函数传递参数, 这
些参数在函数中使用, 其 值 可 以 是 常 量, 变量, 表达式 。 可通过
arguments,Length来检查参数的个数 。 例如, 要看函数 square的参数个数, 并把
个数赋给变量 n,可以这样写,n=square,arguments,Length。
3,大括号 { }部分 。 函数的功能通过执行大括号中代码块来实现 。
返回目录
12
6.2 JavaScript的语言结构 — with语句 和 注释语句
with语句的基本格式是：
with(对象名称 ) { 语句段 }
要引用对象的方法和属性时必须使用 对象,方法 或者是 对象,属性, 比
较麻烦, with语句可解决这个问题 。 直接使用 with语句声明对象的属性
和方法, 当声明内容较多时特别方便 。 要引用 string对象的 charAt(n)方
法, 完整的引用代码为 string.charAt(n)。 在 with语句内使用 string对象的
charAt(n)方法代码为,with(string){charAt(n);}
在 JavaScript中为了描述程序的作用可以使用注释语句 。 注释语句只是
用来给人看的, 而不是用来执行的 。 在 JavaScript中有两种形式的注释：
1,在一行中跟在, //”后面的是注释语句 。
2,如果注释语句有好几行, 可以使用符号 /*和 */来标注注释 。
返回目录
13
6.3 JavaScript中的对象 — 基本概念
在日常生活中我们会接触到各种各样的对象, 例如, 一个苹果是一个
对象, 一个房间是一个对象, 一辆汽车也是一个对象 。 苹果有大有小,
有红有绿, 房间有高有矮, 这些就是对象的属性 。 一辆汽车能够完成加
速, 减速, 转弯等功能, 从对象的角度看这就是对象的方法 。
在编程中,, 对象, 是一个特殊类型的数据, 前面讲过 JavaScript的数
据类型, 其中有一类就是对象类型 。, 方法, 是加在对象上的一些操作,
是一个对象自己所属的函数 。 网页中的按钮, 复选框等都是对象, 而按
钮的颜色, 长度, 宽度就是它的属性, 释放按钮的焦点可以用方法
blur()。 在 JavaScript中访问对象的属性或方法可用句点,,”来实现 。 例如,
用 Apple对象代表一个苹果, 在 Apple对象中有 Color属性代表苹果的颜
色, 可以通过 Apple.Color访问对象的 Color属性 。
返回目录
14
6.3 JavaScript中的对象 — 创建新的对象
JavaScript中除了使用一些定义好的对象, 比如按钮, 复选框等, 还可以创建自
己的对象 。 在 JavaScript中创建一个新的对象需要三个步骤：
第 1歩：定义对象的构造函数用来说明这个对象的各种属性 。
第 2歩：通过 new函数创建对象的实例 。
第 3歩：定义对象的方法, 并把这些方法和对象联系起来 。
1,定义对象的构造函数
在 JavaScript中定义对象的构造函数基本格式是：
Function 构造函数名 （ 对象名 ） （ 参数 1,参数 2,参数 3,…… ）
{
This.属性 1=参数 1
This.属性 2=参数 2
...}
返回目录
15
6.3 JavaScript中的对象 — 创建新的对象
在构造函数中通过 this操作符 （ this指对象本身 ） 引用当前对象, 函数中有多个
参数, 当调用这个构造函数时就创建了一个对象, 并把参数值赋给这个对象的
属性 。 在定义了对象的构造函数之后, 可以用 new操作符创建对象的实例 。
2,定义对象的方法
,方法, 是加在对象上的操作, 是一个对象自己所属的函数 。 定义方法和定义
普通的函数并没有什么区别, 只是在定义完方法之后, 还需要将方法与对象联
系起来 。 将方法与对象联系起来：对象,方法的名字 =函数的名字
例如, 在程序中定义了一个普通函数 showstudent,现在要把它定义为上面创
建的对象 student的方法, 可表示为,student.showstudent=showstudent,一旦定义
完对象的方法, 原来的函数就不再是普通的函数, 要这样使用它：对象,方法名
字 （ 参数表 ）
也可以在定义对象的构造函数时定义方法 。
返回目录
16
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
通常把程序设计的一些常用部件 （ 相关元素组织包装起来称为, 部件, ） 设计
成内置对象和函数 。 这些内置对象同我们自己定义的对象一样, 也拥有自己的
属性和方法 。 内置对象提供编程中最常用的功能, 例如字符串处理, 时间处理
等 。 内置函数简单一点说就是把一些常用的函数编写好封装在语言的内部, 用
户使用时直接调用就可以了 。 主要的内置函数是一些数据类型转换函数 。 下面
介绍 JavaScript的几个常用内置对象 。
1,字符串对象 （ String）
String对象是用来处理字符串的 。 因为 String对象与 JavaScript语言本身结合非常
紧密, 所以在创建对象实例时可以不使用 new操作符 。
例如创建对象实例 string1,下面两种写法效果是一样的：
var string1="happy birthday to you,";
var string1=new string("happy birthday to you");
字符串的长度可以用 String对象中 length属性给出 。 例如 string1.length可求出字符
串 string1的长度 。
返回目录
17
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
对字符串的处理是用方法来实现的 。 常用方法有：
1） toLowerCase()和 toUpperCase()方法
toLowerCase()方法将字符串中的字母全部转换成小写, toUpperCase()方法将字符串中的
字母全部转换成大写 。
2） charAt(n)方法
charAt(n)方法从字符串对象中返回指定位置 n处的字符 。 注意：这里的位置从 0开始计
算 。
3） indexOf(子字符串 )方法
indexOf(子字符串 )返回子字符串在字符串对象中的位置 。 若在字符串对象中有多个这
样的子字串, 只返回第一个字符串所在位置 。 如果不存在这样的子字串, 则返回 -1。
4） lastIndexOf(子字符串 )方法
astIndexOf(子字符串 )方法也是返回子字符串在字符串对象中的位置, 只不过该方法是
从字符串对象的右边开始查找, 若找不到同样返回 -1。
返回目录
18
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
5） Substring(m,n)方法
Substring(m,n)方法返回从位置 m到位置 n之间的字符串 。 注意：返回的字符串中不包括位置 n
处的字符 。
6） 字符串格式化的方法
big()方法：该方法使字符串以大字号显示 。
small()方法：该方法使字符串以小字号显示 。
blink()方法：该方法使字符串闪烁 。
bold()方法：该方法使字符串以黑体显示 。
italics()方法：该方法使字符串以斜体显示 。
fixed()方法：该方法使字符串显示成等宽字 。
strike()方法：该方法给字符串加上删除线 。
sub() 和 sup()方法：分别使字符串以下标和上标的形式显示 。
fontcolor(颜色 )方法：该方法用于指定字符串显示的颜色 。
fontsize(字号 )方法：该方法用于指定字符串的大小 。
7） 用于链接的方法
在 HTML中我们学过
链接标记，在 JavaScript中
是用 link(url)方法和 anchor
方法实现的。 link(url)方法
等效于 HTML中 <A>标记
的 href属性。 anchor方法等
效于 HTML中 <A>标记的
NAME属性。
返回目录
19
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
2,数组对象 （ Array）
注意：数组下标从 0开始 。
定义数组可以采用以下三种方法：
（ 1） 定义一个未知大小的数组,var s=new Array();
（ 2） 建立数组时定义数组的长度, 例如, 定义一个含有 3个元素的 woman数组,
格式为,var woman=new Array(3);
（ 3） 建立数组的同时, 给数组中的元素赋值 。 例如, 定义一个 woman数组,
其中的值分别为 Jony,Mary,Angle。 建立数组的格式为：
var woman=new Array("Jony"," Mary "," Angle ");
访问 woman数组的第二个元素,woman[1]= " Mary ";
数组也是对象, 有属性和方法 。 判断数组的大小 （ 长度 ） 可以用属性 length。
例如要判断上面定义的数组 woman的长度, 可以用格式,woman.length,返回
值为 3。
返回目录
20
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
下面介绍 Array对象的几种常用方法：
（ 1） sort()方法
sort()方法将数组元素排序 。 默认按照 ASCII码升序 。 woman.sort(); 格式能对上
面定义的 woman数组排序, 排序后数组元素依次是," Angle ","Jony"," Mary
"。
（ 2） join(参数 )方法
join(参数 )方法将数组中的所有元素值以一个字符串的形式表达出来, 显示数
组中所有的元素值可以用该方法 。 Join()方法有一个参数, 用该参数指出每个元
素之间使用的分隔符号, 若省略, 则元素之间没有分隔 。
（ 3） reverse()方法
reverse()方法将数组中的元素颠倒顺序, 将数组中最后一个元素换到第一个元
素的位置, 倒数第二个元素换到第二个元素的位置 ……,例如定义一个 woman数
组, 然后让数组中的元素循序颠倒：
返回目录
21
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 4） pop()方法
用这个方法可以删除数组中的最后一个元素, 并且返回这个元素 。
（ 5） contat(数组名 )
用这个方法可以把两个数组的内容合并起来 。
（ 6） slice(下标 1,[下标 2]) 方法
用这个方法可以获得数组中的一部分元素, 这部分元素是从下标 1开始, 到下
标 2结束 （ 不包含下标 2） 。 下标 2是可选的, 如果没有指出下标 2,则表示截取
从下标 1开始直到数组末尾的元素 。 如果这个参数是负数, 例如是 -3,表示一直
截取到数组的倒数第三个元素 。
（ 7） push(元素 ) 方法
用这个方法可以在数组的最后加入一个元素 。 例如：
var woman=new Array("Jony"," Mary "," Angle ");
woman.push("Jone"); 这样可以在数组 woman的后面加上 "Jone"元素 。
返回目录
22
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
3,日期对象 （ Date）
与日期有关的所有内容在该对象中都可以找到 。 日期对象没有属性, 但是日
期对象有很多方法, 通过这些方法可以获得时间或设置时间 。
创建一个日期对象的实例有三种方式：
（ 1） MyDate=New Date(),用这种方式创建的对象实例自动存储了当前日期和
时间 。
（ 2） MyDate= New Date(毫秒数 ),该方法中的, 毫秒数, 表示从 1970年 1月 1
日 0点 0时开始到一个指定日期的毫秒数 。 用这种形式创建的日期对象, 日期会
自动存储在新创建的对象实例中 。 JavaScript语言内部存储了自从 1970年 1月 1日
开始到指定日期的毫秒数 。
（ 3） MyDate= New Date(year,month,date[,hours[,minutes[,seconds]]]),用这种
方法创建对象实例时可以指定日期对象的时间 。 日期对象中所有小时, 秒数,
日期, 月份等的数字都是从 0开始的, 年份从 1900年开始 。
返回目录
23
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
日期对象的方法：
（ 1） 获得日期对象各个部分的方法
getYear() 获得日期对象的年份
getMonth() 获得日期对象的月份
getDate() 获得日期对象的日号数
getDay() 返回星期几
getHours() 获得日期对象的小时数
getMintes() 获得日期对象的分钟数
getSeconds() 获得日期对象的秒数
getTime() 获得日期对象的时间 （ 以
毫秒数计算 ） 。
（ 2） 设置日期对象的各个部分的方法：
setYear() 设置日期对象的年份
setMonth() 设置日期对象的月份数
setDate() 设置日期对象的 日号数
setHours() 设置日期对象的小时数
setMintes() 设置日期对象的分钟数
setSeconds() 设置日期对象的秒数
setTime() 设置日期对象的毫秒数,
在以后的计算中就可以将这个日期对
象的各个部分取出分别处理 。
返回目录
24
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 3） 处理时区问题的方法
getTimeZoneOffset() 给出当地时区与 GMT(格林威治标准时间, 也叫 UTC)的
偏差 。
toGMString() 转换成以格林威治标准时间表达的字符串 。
toLocal String() 转换成以当地时间方式表达的时间字符串 。
（ 4） 处理日期格式之间转换的方法
Date对象有两种特殊的方法可用于日期格式之间的转换 。 这不是某个单独的
Date对象的方法, 它可以作用于 Date对象本身, 是 Date对象定义的静态方法,
静态方法同每个具体的实例是没有关系的 。 这两种方法是：
Date.Parse(字符串 ) 这个方法把一个字符串表达的时间或日期转换成时间
或日期的内部表示（距 1970年 1月 1日的毫秒数）。 例如：
Date1=new date(); Date1,setTime (Date.parse("May 1,2004");
使 Date1这个对象实例存放了日期 2004年 5月 1日 。
Date.UTC(日期 ) 这个方法返回从 1970年 1月 1日到给定日期的毫秒数 。
返回目录
25
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
4,数学对象 （ Math）
Math对象可用来处理各种数学运算, Math对象不能创建自己的对象实例 。 可
以直接使用 Math来调用常用的数学函数, 格式为,Math.数学函数名 （ 参数 ）
注意：所有 Math对象方法中的参数均是浮点型 。 在三角函数里, 输入的是弧
度值 。
数学函数名前加上 Math.可能使用起来不太习惯, 我们可以使用前面介绍的
with语句指定 Math对象, 在 Math对象的作用范围内直接使用数学函数就可以了 。
格式如下,with(Math){各种数学函数 }
Math对象的常用函数：
（ 1） 三角函数
Sin(弧度值 )：对弧度值进行正弦计算, 返回该弧度值的正弦值 。
Cos(弧度值 )：对弧度值进行余弦计算, 返回该弧度值的余弦值 。
Tan(弧度值 )：对弧度值进行正切计算, 返回该弧度值的正切值 。
返回目录
26
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
Asin(数值 )：反正弦函数, 求数值的反正弦函数值 。
Acos(数值 )：反余弦函数, 求数值的反余弦函数值 。
Atan(数值 )：反正切函数, 求数值的反正切函数 。
（ 2） 取整函数
ceil(a)：向上取整函数, 返回一个不小于 a的最小整数 。 例如 ceil(3.3)的返回值
为 4。
Floor(a)：向下取整函数, 返回一个不大于 a的最大整数 。 例如 Floor(3.3)的返回
3。
Round(a)：对 a四舍五入取整 。 如,Round(3.5)返回值为 4。 Round(3.4)返回值
为 3。
（ 3） 指数, 对数函数
Exp(a)：返回 e的 a次幂的值 。
Log(a)：返回 a的自然对数值 。
返回目录
27
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 4） 乘幂函数
Pow(a,b)：计算 a的 b次幂的值, 即 ab。
Sqrt(a)：对 a进行求平方根的计算 。
（ 5） 其他函数
abs(a)：对 a取绝对值, 例如,Math.abs(-2),结果为 2。
Random()：随机函数, 该函数能够产生 0-1之间的一个随机数 。
Max(a,b)：取最大值的函数, 取 a和 b中最大的一个 。
Min(a,b)：取最小值的函数, 取 a和 b中最小的一个 。
Math对象还包含属性, 属性都是一些公认的常数值 。 Math对象的属性：
属性 E,自然对数的底, 即 2.71828。 属性 LN2,2的自然对数值, 即 0.69315。
属性 LN10,10的自然对数值, 即 2.30259。 属性 PI：圆周率, 即 3.1415926…… 。
属性 SQRT1_2,0.5的平方根 。 属性 SQRT2,2的平方根 。
返回目录
28
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
5,事件对象 （ Event）
事件对象描述一个 JavaScript中的事件 。 在每个事件发生时, JavaScript解释器
会自动填充一个事件对象实例, 并作为一个参数传送给事件处理函数 。 例如
mousedown事件, 在该事件发生时会产生鼠标在哪个位置, 鼠标的哪个按钮被
按下, 是否同时有修饰键 （ Control,Alt,Shift） 等信息 。 这些信息由 JavaScript解
释器自动填好后作为一个参数传递给相应事件处理函数, 事件处理函数根据这
些信息执行相应动作 。
6,JavaScript的几个内置函数
JavaScript的内置函数不属于任何对象, 所以在 JavaScript语句的任何地方都可
以使用这些函数 。 JavaScript的内置函数有：
（ 1） eval（ 字符串 ）
该函数的参数是一个字符串, 此函数将这个字符串作为 JavaScript语句或表达
式进行分析, 要么执行它, 要么返回结果 。 如果传递给这个函数的字符串中包
含命令, 这些命令也可以被执行 。
返回目录
29
6.3 JavaScript中的对象 — JavaScript的内置对象和函数
（ 2） escape(字符串 ),接受一个字符串, 这个字符串可以有空格, 分号等字符, escape()
把这个字符串转换成 Cookie的内部表示方式 。 Cookie是 Web服务器保存在用户硬盘上的一
段文本 。 Cookie允许一个 Web站点在用户的电脑上保存信息并且随后再取回它 。
（ 3） unescape() 接受一个 Cookie,把这个 Cookie的内部表示方式转化成普通的字符串形
式 。
（ 4） parseInt(),函数从一个字符串首提取一个整数并返回 。 如果在提取过程中遇到除
了数字, 符号, 小数点, 指数符号以外的其他字符, 该函数就停止提取, 并返回已提取
的结果 。 如果第一个字符就是不可提取的, 那么该函数返回, NaN”值, 表示字符串中不
存在数字 。
（ 5） parseFloat(),函数从一个字符串首提取一个浮点值并返回 。 如果在提取过程中遇到
除了数字, 符号, 小数点, 指数符号以外的其他字符, 该函数就停止提取, 并返回已提
取的结果 。 如果第一个字符就不可提取, 那么该函数返回, NaN”值, 表示字符串中不存
在数字 。
（ 6） isNaN(),isNaN函数可以测试上面两个函数返回的结果是否为 NaN,如果是, 则返
回 true。
（ 7） isFinite(n):该函数用来测试参数 n是否是一个无穷值 。 如果是, 则返回 false。
返回目录
30
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
由于 JavaScript在网页中使用, 网页通过浏览器浏览, 在浏览器中打开一个
页面时浏览器会自动创建一些对象, 这些对象存放了 HTML页面的属性和其他
相关信息, 这些对象在浏览器上运行, 所以我们把它们称为浏览器对象 。 浏
览器对象主要有 navigator,Window,document,location和 history对象 。 对象
之间有从属关系, Window对象是其他部分的祖先, 其子对象包括 location对象,
document对象和 history对象 。 在程序中子对象被认为是父对象的属性 。 例如,
要引用 document对象, 应该用格式,Window.document。 下面分别介绍这些对
象 。
1,Window对象
Window对象反映的是一个完整的浏览器窗口 。 只要浏览器窗口打开, 即使
浏览器中没有加载任何页面, JavaScript也会建立这个对象 。 Window对象提供
了处理浏览器窗口的方法和属性 。 该对象对应于 HTML文档中的 <Body>和
<FrameSet>两种标识 。
返回目录
31
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
（ 1） Window对象的常用属性：
Closed属性：判断一个窗口是否关闭 。
frames属性：记录当前窗口中所有帧的信息, 是一个 frame对象的数组 。
parent属性：指明当前窗口或帧的父窗口 。
defaultstatus属性：默认状态, 它的值显示在窗口的状态栏中 。
status属性：状态栏中当前显示的信息 。
top属性：定义的是一系列浏览器上层的浏览器窗口 。
window属性：指的是当前窗口 。
self属性：引用当前文档对应的窗口 。
history属性：提供当前窗口的历史纪录, 可在网页导航中发挥作用 。
Location属性：提供当前窗口的 URL信息 。
Locationbar属性：代表浏览器的地址栏 。
返回目录
32
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
（ 2） Window对象的常用方法：
open()方法：用于创建一个新窗口或在指定的命令窗口内打开页面 。 打开窗口的基本
格式,Window,open("URL","窗口名字 ","窗口属性 ")。
close()方法：用于关闭一个浏览器窗口 。
alert(字符串 )方法：用于弹出一个警告框, 在警告框内显示字符串文本 。
confirm(字符串 )方法：用于弹出一个确定框, 在确定框内显示字符串文本 。 通常在用
户决定某些行动是否采取时使用 。
prompt(字符串, 缺省值 )方法：用于弹出一个提示框, 提示框中显示字符串, 并且在
提示框中有一个文本框要求用户输入信息 。 如果用户修改输入文本框内的文本后单击
,确定, 按钮, 则返回用户输入的字符串 。 如果用户单击, 取消, 按钮, 则返回 null值 。
back()方法：用于指示浏览器载入历史纪录的上一个 URL地址, 相当于浏览器工具栏
中的后退按钮 。
forward()方法：用于指示浏览器载入历史纪录的下一个 URL地址, 相当于浏览器工具
栏中的前进按钮 。
home()方法：用于指示浏览器载入预先设定的主页页面, 相当于浏览器工具栏中的返
回主页按钮 。
返回目录
33
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
2,document对象
存储着当前页的一些信息, 代表的是当前整个页面, 页面的前景色, 背景色,
链接颜色, 表单, 图像等都作为 document对象的属性存在 。
（ 1） document对象的属性
title属性：指出文档的标题, 相当于 HTML文档中 <title></title>之间的内容 。
lastModified属性：指出文档最后修改的日期 。
bgcolor属性：指出文档的背景色, 相当于 HTML中 <body>的 bgcolor属性 。
fgcolor属性：指出文档的前景色, 相当于 HTML中 <body>的 text属性 。
alinkColor属性：指出鼠标单击时的链接颜色 。
vlinkColor属性：指出已访问过的链接颜色 。
links属性：数组, 存放文档中所有链接对象, 每个数组元素是一个链接对象 。
返回目录
34
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
Images属性：数组, 存放文档中所有的图形对象, 每个数组元素是一个图
形对象 。
URL属性：指出文档对应的 URL地址 。
（ 2） document对象的主要方法
write(字符串 )：将字符串写到一个新文档 。 可以是字符串常量或者是字符串
变量 。
writeln(字符串 )：将字符串写到一个新文档, 并在字符串末尾加上换行符 。
clear()：清除文档当前内容 。
Open()和 close()：打开一个新文档和关闭当前文档 。 最好先用 Open()方法打
开一个文档, 然后再用 write()或者 writeln()方法写入, 写入完成后, 再用 close()
方法关闭 。
返回目录
35
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
3,location对象
提供当前页面的 URL信息。它有一组属性，用于存储 URL的各个组成部分。
它的方法可以重装当前页面或装入新页面。
例如,http://www.zjl.com:80/book/1.html#section1
协议名称为 http，主机名称为 www.zjl.com，端口号为 80，页面地址为
book/1.html，在页面中有一个页面内跳转锚标，名称为 section1。
（ 1） location对象的属性
Hash属性：如果页面中有页面内跳转的锚标，则 Hash属性返回 HREF中 #号
后面的字符串。如上例中用 location.hash可以获得锚标为 #section1。
Host属性：提供 URL页面所在的 Web服务器主机名称和端口号。如上例中用
location.host可以获得 www.zjl.com,80。
Hostname属性：提供 URL的主机名称部分 。 如上例中的 www.zjl.com。
返回目录
36
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
Href属性：提供整个 URL。 如上例中的 http://www.zjl.com:80/book/1.html#section1。
Pathname属性：提供文档在主机上的路径及文件名 。 如上例中的 book/1.html。
Port属性：返回 URL的中的端口号部分 。 如上例中的 80。
Protocol属性：指定协议名称 。
Search属性：提供完整 URL中,？, 号后面的查询字符串 。 在浏览网页时常会发现搜
索站点的页面 URL中问号,？, 后还有一些信息, 这些信息往往是提交到服务器上进行
搜索的信息 。
（ 2） location对象的方法
reload()方法：刷新当前页面, 相当于工具栏上的刷新按钮 。 例如定义一个刷新页面的
按钮, 格式为,<INPUT TYPE="button" VALUE="刷新 " OnClick="location.reload()">
replace(URL地址 )方法：用指定的 URL地址代替当前页面 。
Assign(URL地址 ) 方法：将当前页面导航到指定的 URL地址上去 。
返回目录
37
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
4,history对象
history对象存储着最近访问过的 URL地址 。 它有一个 length属性, 用于记录该对象存储
的 URL地址的个数 。 history对象的方法：
（ 1） back()方法：装入历史清单中上一个 URL的文档, 相当于浏览器的后退按钮 。
（ 2） forward()方法：装入历史清单中下一个 URL的文档, 对应浏览器的前进按钮 。
（ 3） go(n)方法：装入历史清单中指定位置的文档，如果指定的是一个整数，表示向前
进，如果是一个负数，表示向后退。 go(-1)的功能和 back()方法的功能是一样的。
5,navigator对象
保存浏览器厂家, 版本和功能的信息 。 navigator的常用属性如下：
appCodeName属性：提供当前浏览器的代码名 。
appName属性：提供当前浏览器的名称 。
appVersion属性：提供当前浏览器的版本号 。
userAgent属性：反映浏览器完整的用户代理标识 。
navigator还有一个 javaEnabled()方法, 用于指出在浏览器中是否可以使用 Java语言, 该
方法的返回值是一个布尔值 。
返回目录
38
6.3 JavaScript中的对象 — JavaScript中的浏览器对象
6,document的子对象
document的子对象包括 link对象, anchor对象和 form对象 。
link对象：包含链接信息, 可以用 links数组访问 link对象, 数组中的每个元
素都是当前页中的一个 link对象 。
例如, 把当前页面中第一个链接对象的 URL地址赋给变量 link1,格式为：
link1=document.links[0].href;
anchor对象：代表当前文档中的一个链接点, 用数组 links来访问 。
form对象：代表文档中的表单 。 用数组 forms来访问 。
返回目录
39
6.4 JavaScript中的事件
JavaScript是基于对象 (object-based)的语言, 而基于对象的基本特征就是采用事件驱
动 (event-driven)。 事件定义了用户与 Web页面交互时产生的各种动作 。 通常我们把鼠
标或热键的动作称之为事件 （ Event）, 例如, 单击一个按钮就产生一个事件 。
在 JavaScript中, 对象事件的处理通常由函数来完成, 所以事件处理程序的基本格式
与函数全部一样 。 格式如下：
Function 事件处理名 （ 参数表 ） {
事件处理语句集；
…… }
归纳起来, 必须使用的事件有三大类：
1,引起页面之间跳转的事件, 主要是超链接事件 。
2,事件浏览器自己引起的事件 。
3,事件在表单内部与界面对象交互引起的事件 。
句柄是一个 32 位的正整数, 用来存储特定的事件处理函数, 识别窗体或其他对象,
如字体或位图 。 Windows 给每个窗口一个唯一的句柄, 通过句柄操纵该窗口 。 一个句
柄的名字是在对应的事件名字之前加上 on,如处理 Load事件的句柄通常是 onLoad。
返回目录
40
6.4 JavaScript中的事件 — 浏览器事件
常用的浏览器事件有 Load,Unload和 Submit。
1,Load事件
当浏览器装载网页时会触发 Load事件 。 这个事件处理函数在其他所有 JavaScript程序
和网页之前被执行, 用来完成网页中所有数据的初始化, 弹出提示窗口或密码确认窗
口 。 通常在 <BODY>标记中使用这个事件的句柄 。
2,Unload事件
Unload事件与 Load事件正好相反, 当卸载一个页面时会发生 Unload事件, 即在浏览
器载入一个新的网页之前或当用户退出文档时触发 unload 事件 。 onUnload 用在
BODY 或 FRAMESET 标签上 。 如 <BODY onUnload="代码或对一个 JavaScript 函数的
调用 ">。
3,Submit事件
当用户完成信息输入提交表单时发生该事件 。 通常在 <FORM>标签中使用 onSubmit
句柄 。 当用户提交表单时, JavaScript调用 Submit事件的处理函数, 对表单数据进行验
证, 如果所有数据验证都能通过, 时间处理函数就返回 true,将表单提交到服务器 。
如果返回 false,则不进行提交, 并给出提示信息, 让用户重新输入数据 。
返回目录
41
6.4 JavaScript中的事件 — 键盘事件
常用的键盘事件有 KeyDown,KeyPress和 KeyUp事件 。
1,KeyDown事件
当用户按下一个键时会发生该事件 。 KeyDown事件总是发生在 KeyPress事件之前, 如
果 KeyDown事件的处理函数返回 false, 则 KeyPress事件不会发生 。 当 KeyDown事件发
生时, JavaScript会自动调用 onKeyDown句柄 。 KeyDown事件适用的对象有 document、
Image（ 图像 ）, Link（ 超级链接 ）, Textarea（ 文本区域 ） 。
2,KeyPress事件
当用户按下一个键时触发该事件, 当 KeyDown事件的处理函数返回的值为 true时
KeyPress事件接着发生 。 当用户按着一个键不松开时, KeyPress事件会不断发生 。 当
KeyPress事件发生时, JavaScript会自动调用 onKeyPress句柄 。 KeyPress事件适用的对
象有 document,Image,Link,Textarea。
3,KeyUp事件
当用户释放键盘上的一个键时触发 KeyUp 事件 。 当 KeyUp事件发生时, JavaScript会
自动调用 onKeyUp句柄 。 KeyUp事件适用的对象有 document,Image,Link,Textarea。
返回目录
42
6.4 JavaScript中的事件 — 鼠标事件
常用的鼠标事件有 MouseDown,MouseUp,MouseOver,MouseMove、
MouseOut,Click,Blur,Change,Move,Select和 Focus事件 。 在鼠标事件
发生时, 鼠标事件的信息被作为一个参数传送给鼠标事件处理函数 。
1,MouseDown事件
当用户按下鼠标按钮时触发 MouseDown 事件 。 若 MouseDown 事件处理函
数返回 false 的话, 缺省操作 (拖放, 选择文本或激活超级链接 )将被取消 。
MouseDown事件发生时 JavaScript会自动调用 on MouseDown句柄 。 该事件适
用对象 Button,document,Link。
2,MouseUp事件
当用户释放鼠标按钮时会触发该事件 。 如果 MouseUp事件处理函数返回 false
的话, 缺省操作 (拖放, 选择文本或激活超级链接 )将被取消 。 当 MouseUp的
处理函数在一个被捕获的链接上返回 false,链接将不会被触发, 捕获是由于
在链接上发生了 MouseDown事件 。 当 MouseUp事件发生时 JavaScript会自动
调用 onMouseUp句柄 。 该事件适用对象为 Button,document,Link。
返回目录
43
6.4 JavaScript中的事件 — 鼠标事件
3,MouseOver事件
当鼠标经过某个对象或区域时触发该事件 。 MouseOver事件发生时
JavaScript会自动调用 onMouseOver句柄 。 该事件适用对象有 Layer、
Link和区域 。
上网时经常发现当鼠标经过一个超链接时, 状态栏中会显示超链接
的目标 。 要想不让浏览器在状态栏中显示超链接的目标, 必须在该
事件处理函数的最后使用 return true语句, 即让处理函数返回 true值 。
例如, 想让鼠标经过超链接时在状态栏中显示, 你好, 要看超链接
吗？,, 用如下格式：
<A HREF=http://ww.baidu.com/ onMouseOver="window.status='你好,
要看超链接吗？ 'return true">
请点击进入百度搜索
</A>
返回目录
44
6.4 JavaScript中的事件 — 鼠标事件
4,MouseMove事件
用户移动鼠标指针时触发该事件 。 因为鼠标移动发生太频繁了, 所
以缺省情况下 onMouseMove 不是任何对象的事件, 只有当对象要求
捕获事件时, 这个时间才会在移动鼠标是发生 。 当 MouseMove事件
发生时, JavaScript会自动调用 onMouseMove句柄 。
5,MouseOut事件
当每次鼠标指针离开区域或链接时触发 MouseOut 事件 。 例如鼠标
指针从客户端图像地图的一个区域移到了另外一个区域, 则第一个
区域会收到 onMouseOut 事件, 而第二个区域会收到 onMouseOver
事件 。 当 MouseOut事件发生时, JavaScript会自动调用 onMouseOver
句柄 。 该事件适用对象有 Layer,Link和区域 。
返回目录
45
6.4 JavaScript中的事件 — 鼠标事件
6,Click事件
当用户单击按钮时触发该事件, 同时 onClick指定的事件处理程序或代码将
被执行 。 该事件适用于 button（ 按钮对象 ）, checkbox（ 复选框 ）, radio
（ 单选钮 ）, reset buttons（ 重置按钮 ）, submit buttons（ 提交按钮 ） 等对象 。
有关 Click事件我们在前面的例子中已多次使用 。
7,Blur事件
当表单中的元素或 window,frame失去焦点时会发生该事件 （ 既使其值没有
改变 ） 。 同时 onBlur指定的事件处理程序或代码将被执行 。 该事件适用于
Button,Checkbox,FileUpload,Layer,Password,Radio,Reset,Select、
Submit,Text,Textarea和 Window。
8,Change事件
当一个选择框, 文本框或者文本输入区域失去焦点并且其中的值发生改变
时会发生该事件, 同时 onChange指定的事件处理程序或代码将被执行 。 该事
件适用于 Text,Textarea和 Select。
返回目录
46
6.4 JavaScript中的事件 — 鼠标事件
9,Move事件
当用户或者脚本程序移动窗口或框架时触发 move事件, 同时
onMove指定的事件处理程序或代码将被执行 。 该事件适用于对象
window以及帧 。
10,Select事件
当 Text或 Textarea对象中的文字被选定之后引发该事件 。 同时
onSelect指定的事件处理程序或代码将被执行 。 该事件适用于对象
Text,Textarea。
11,Focus事件
当一个选择框, 文本输入框或者文本输入区域得到焦点时触发该
事件 。 同时 onFocus指定的事件处理程序或代码将被执行 。 该事件适
用于对象 Text,Textarea或选择框 。 常在这个事件处理函数中加入一
些提示信息, 当指向这个对象并单击时就可以得到一些提示 。
onFocus句柄与 onBlur句柄的功能正好相反 。
返回目录
47
6.5 JavaScript实例
例, 运动字幕的设计
<html>
<head>
<title>运动字幕 </title>
<body >
<Script Language ="JavaScript">
document.write("<marquee scrollamount=\"1\" scrolldelay=\"50\" direction=\"up\"
id=t onmouseover=t.stop()onmouseout=t.start()>");
document.write("<a href=\"www.baidu.com\">"+"百度页面 "+"</a><br>");
document.write("<a href=\"www.sina.com.cn\">"+"新浪网 "+"</a><br>");
document.write("</marquee>");
</Script>
</head>
</body></html>
返回目录
48
6.5 JavaScript实例
例,自动装载和自动卸载页面
<html>
<head>
<Script Language="JavaScript">
function loadf()
{alert("进入页面 ！ ");}
function unloadf()
{alert("您要退出此页面, 进入新的页面 ！ ");}
</Script>
</head>
<body OnLoad="loadf ()" OnUnload="unloadf()">
<a href="www.baidu.com">百度页面 </a>
</body>
</html>
返回目录
49
6.5 JavaScript实例
例,使用表单对象数组和表单名字引用表单
<html>
<body>
两个文本框中的内容是一致的, 其中一个的内容改变, 另一个的内容也会改变 ！
<form>
<input type=text NAME="con1" onChange="document.my.con.value=this.value;" >
</form>
<form NAME="my">
<input type=text NAME="con"
onChange="document.forms[0].con1.value=this.value;">
</form>
</body>
</html>
返回目录
50
6.5 JavaScript实例
例 6-21 倒计时程序
<html>
<head>
<title>倒计时程序 </title>
<Script Language ="JavaScript">
var date=new Date();
var year=date.getYear();
var month=date.getMonth();
var day=date.getDate();
document.write("现在的日期是,",year,"-",month+1,"-",day,"<br>");
if(month+1==10) var days=31+28+30-day;
if(month+1==11) var days=28+30-day;
if(month+1==12) var days=28-day; 程序未完转下页
返回目录
51
6.5 JavaScript实例
if(month+1<10) {
document.write("现在已经是 2月份了 ！ ")}
document.write("距离考试还有,"+days+"天 ")
</Script>
</head>
</html>
返回目录
52
本 章 小 结
? JavaScript中的数据类型与变量
– JavaScript主要的数据类型有：数值类型 （ number）, 字符串型
（ String）, 对象类型 (object),布尔类型 (Boolean),空类型 (null)。
– 变量声明使用 var 语句进行 。
? JavaScript的语言结构
– if… else 语句是 JavaScript中最基本的控制语句, 通过它可以改变语
句的执行顺序 。
– switch语句是多分支选择语句 。
– 如 果一个语句段需要反复使用多次, 用 For,while和 do… while循
环语句编写代码 。
– 函数是能够完成某种功能的语句集合 。 使用 with语句声明对象的属
性和方法 。
– 在 JavaScript中为了描述程序的作用可以使用注释语句 。
返回目录
53
本 章 小 结
? JavaScript中的对象
–, 方法, 是加在对象上的一些操作, 是一个对象自己所属的
函数 。
– JavaScript的几个常用内置对象字符串, 数组, 日期, 数
学 和 事件对象 。
– JavaScript的内置函数不属于任何对象, 所以在 JavaScript语
句的任何地方都可以使用这些函数 。 JavaScript的内置函数
有,eval（ 字符串 ）, escape(字符串 ), unescape(),
parseInt(), parseFloat(), isNaN() 和 isFinite(n) 。
– 浏览器对象主要有 navigator,Window,document,location
和 history对象 。
返回目录
54
本 章 小 结
? JavaScript中的事件
– JavaScript中的事件有浏览器事件, 键盘事件 和
鼠标事件 。
– 常用的浏览器事件有 Load,Unload和 Submit。
– 常用的键盘事件有 KeyDown,KeyPress和 KeyUp事
件 。
– 常用的鼠标事件有 MouseDown, MouseUp,
MouseOver, MouseMove, MouseOut, Click,
Blur,Change,Move,Select和 Focus事件 。
返回目录
