郝兴伟
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第 5章 客户端开发
目 录
5.1 客户端编程与脚本程序语言
5.2 JavaScript脚本语言概况
5.3 JavaScript基础
5.4 事件驱动及事件处理
5.5对象及其操作
5.6 常用内部对象及函数
5.7 浏览器内部对象
5.8 Web交互
5.9 综合举例
5.1 客户端编程与脚本程序语言
1.客户端程序：在浏览器中解释执行，往往是通过脚本语言
编写。
2.脚本语言,脚本语言是介于 HTML和 Java,Visual Basic以及
C++等编程语言之间的特殊的语言。不需要编译
脚本语言的分类：客户端，服务端
目前使用较多的客户端脚本程序语言是 JavaScript和
VBScript,
3.在网页中引用脚本程序,
<script language="JavaScript" runat=server >,如果是
客户端脚本程序，不需要设置 runat属性。
5.1.1脚本引擎
什么是脚本引擎呢？简单的讲，脚本引擎就是指脚本的运行
环境，负责脚本程序的解释，来具体处理用相应脚本语言书
写的脚本命令。
例如 ASP脚本语言必须运行在 IIS（ Internet Information Server）
上； Tomcat是 Jsp和 Serverlet的容器等，也就是运行 jsp网页必
须安装和配置 Tomcat。 没有脚本引擎，脚本就不能运行。
5.1.2设置主脚本语言
主脚本语言是用来处理在定界符 <% 和 %> 内部的命令的语
言。
主脚本语言可以逐页设置，也可以设置所有页的主脚本语言。
例如,ASP默认的主脚本语言是 VBScript。
要设置单个页的主脚本语言，可将 <%@ language %> 指令添
加到网页文件的开头。该指令的语法是,<%@
language=ScriptingLanguage %>,如果对某页进行了设置，
那么该页将忽略在应用程序中对所有页的全局设置。
如果希望将某一种脚本语言设为 Web服务器上所有页的主脚本
语言，需要使用注册表编辑器 regedit.exe程序，修改相应的
注册参数。
5.2 JavaScript脚本语言概况
JavaScript是目前使用最为广泛的脚本语言，它是由 Netscape
公司开发并随 Navigator浏览器一起发布的，是一种介于 Java
与 HTML之间、基于对象的事件驱动的编程语言。 Sun公司推
出 Java之后,Netscape引进了 Sun的有关概念，将其更名为
,JavaScript”
JavaScript与 Java的比较 -1
使用背景不同
Java是基于 C++,面向对象的程序设计语言（ Object Oriented
Language）； JavaScript是一种脚本语言，是一种基于对象的，
面向非程序设计人员的编程语言。和 Java不同,JavaScript没
有提供抽象、继承、多态等有关面向对象程序设计语言的许
多功能。
JavaScript与 Java的比较 -2
运行环境不同
JavaScript源代码无须编译，嵌入 HTML文档中的 JavaScript源
代码实际上是作为 HTML文档 Web页的一部分存在的。浏览器
浏览包含 JavaScript源代码的 HTML文档页时，由浏览器自带
的脚本引擎对该 HTML文档进行分析、识别、解释并执行用
JavaScript编写的源代码。而 Java则不同,Java 源代码必须进
行编译、连接后才能运行。
JavaScript程序举例 -1
<html>
<title>JavaScript in HTML</title>
<head>
</head>
<body>
<h1>JavaScript in HTML</h1>
<script language="Javascript">
document.write ("Hello!" );
</script>
</body>
</html>
JavaScript程序举例 -2
<html>
<title＞ function in JavaScript </title>
<head>
<script language="Javascript">
function fact(n)
{
var res=1;
if (n==0) res = 1;
else res = n*fact(n-1);
return res;
}
</script>
</head>
<body>
<p>fact(5) =
<script
language="JavaScript"
>
//注释：输出 n的阶乘
document.write(fact(5));
</script>
</body>
</html>
JavaScript程序举例 -2显示结果
5.3 JavaScript基础
程序设计语言
5.3.1 JavaScript基本符号
5.3.2 数据和数据类型
5.3.3 常量和变量
5.3.4 表达式和运算符
5.3.5基本 语句
5.3.6函数
5.3.1 JavaScript基本符号
1．基本字符
JavaScript语言的基本字符有字母（ a,b,…, z,A、
B,…, Z） 数字（ 0,1,…, 9）和特殊符号（ +,-,*,/、
<,=,>等）
2．关键字
由字母构成的具有固定含义的单词，如 var代表变量说明,if
表示条件语句等
3．标识符
表示常量、变量和函数等名称的符号。
4．注释
在 JavaScript中，注释以, //” 字符引导，注释可以单独
一行，也可以在语句行的后面。
JavaScript是识别大小写的，如果书写有误，将显示
"JavaScript脚本错误 "的警告。
5.3.2 数据和数据类型
JavaScript脚本程序语言是一种解释性的程序语言，所写的
脚本程序不需要编译和链接，它采用边读边执行的方式运
行。在数据类型方面,JavaScript提供了四种基本的数据类
型用来处理数字和文本。
JavaScript提供的数据类型有：数值（整数和实数），字
符串型（用双引号 "或单引号 '括起来的字符），布尔型
（ True或 False）。
JavaScript采用弱类型的形式，因而一个数据的变量或常
量不必首先作声明，而是在使用或赋值时确定其数据类型
的。当然也可以先给变量赋一个初值，来声明该数据的类
型。
另外，一个变量的类型在使用时可以改变，例如,
var x = "hello";
5.3.3 常量和变量
1.常量和常量定义
常量是指在程序执行过程中，其值不发生变化的量。常量
有字面常量和符号常量两种。
2．变量和变量说明
所谓“变量”是指在程序执行过程中，其值发生变化的量。
每一个变量都有一个变量名，变量名是一个用户自定义标
识符。变量有两个重要的属性，一个是数据类型，一个为
操作运算。
在 JavaScript中，变量命名的一般形式是,
var <变量名表 >;
其中,var是 JavaScript的保留字，表明接下来是变量说明，
变量名表是用户自定义标识符，变量之间用逗号分开。
变量的作用域
变量的作用域由声明变量的位置决定，决定哪些脚本命令
可访问该变量。在函数外部声明的变量称为全局变量，其
值能被所在 HTML文件中的任何脚本命令访问和修改。在函
数内部声明的变量称为局部变量。只有当过程被执行时，
变量被分配临时空间，函数结束后，变量所占据的空间被
释放。局部变量只能被过程内部的语句访问，只对其该函
数是可见的，而在函数外部则是不可见的。
5.3.4 表达式和运算符
表达式是指将常量、变量、函数、运算符和括号连接而成
的式子。根据运算结果的不同，表达式可分为算术表达式
（结果为数值）、字符表达式（结果为字符）和逻辑表达
式（结果为 true或 false）。
算术运算符
JavaScript中的算术运算符有单目运算符和双目运算符。双
目运算符包括,+（加）, -（减）,*（乘）,/（除）,
%（取模）, |（按位或）,&（按位与）,<<（左移）,
>>（右移）,>>>（右移，零填充）。单目运算符有,-
（取反）,~（取补）,++（递加 1）,--（递减 1）。
关系运算符
关系运算又称比较运算，运算符包括,<（小于）,<=（小
于等于）,>（大于）,>=（大于等于）,=（等于）、！ =
（不等于）。
运算结果为布尔值，如果条件成立，则结果为 true,否则为
false。
逻辑运算符
逻辑运算符有,&（逻辑与）,|（逻辑或）,!（取反）,^
（逻辑异或）,
字符串连接运算符
连接运算用于字符串操作，运算符有 +（用于强制连接）。
:三目操作符
三目操作符？：格式为,
操作数？表达式１：表达式２
逻辑功能为：若操作数的结果为真，则表述式的结果为表
达式１，否则为表达式２。
5.3.5基本语句
任何一种过程式语言编写的程序，都可以分为三种程序结
构，即顺序结构、分支结构和重复结构。与此对应的是三
种流程控制语句。
1．顺序结构
2．分支结构
3．重复结构
1．顺序结构
在过程式的语言中，程序总是从上而下顺序执行的。遇到
函数调用，转去执行相应的子程序，执行结束后返回。
对于有若干语句构成逻辑上的复合语句，用 {和 }括起来，
语句之间用分号分开。
分支结构 -1
在 JavaScript中，实现分支结构的语句有三种，它们是条件
判断语句 if… 语句和 if…else… 语句以及开关语句 switch语句。
if语句的一般形式是,
if (<布尔表达式 > )
<语句 >;
分支结构 -2
if..,else 语句先计算布尔表达式的值，根据计算结果指定要
运行的语句。一般形式是,
if (<布尔表达式 > )
<语句 1>；
else
<语句 2>;
分支结构 -3
switch语句提供的功能与 if..,else 语句类似，但是可以使代
码更加简练易读。一般形式为,
switch (<数值或字符串表达式 >)
{
case 表达式 1
语句 1;
[break;]
case 表达式 2
语句 2;
[break;]
……
case 表达式 n
语句 n;
[break;]
}
重复结构 -1
当部分语句需要反复执行时，需要重复语句。重复语句总是由
循环体和循环终止条件两部分组成，在 JavaScript 中可使用下
列两种形式的重复语句。
(1)while循环语句
while 循环语句是先判断循环终
止条件，然后再执行循环体，
因此循环体可能一次也不被执
行。 while 循环语句的一般形式
是,
while (<布尔表达式 >)
语句；
重复结构 -2
（ 2） for循环语句
一般形式为,
for (表达式 1；表达式 2；表达式 3)
语句 ;
执行过程如下,
（ 1）计算表达式 1。
（ 2） 计算表达式 2,如果为真,
则执行循环体, 然后转步骤
（ 3） 。 否则, 结束循环 。
（ 3） 计算表达式 3
（ 4） 无条件转步骤 （ 2）
（ 5）循环结束，执行 for语句
下面的语句。
注意,关键字大小写,for 不能
For
5.3.6函数
函数是实现结构化编程的主要手段。
在 HTML文档中，函数过程的定义应该在 <script>…</script>
标记内部,<script> 和 </script> 标记对可以出现在 HTML文档
的头部和文档体中。
函数是以 function开头定义的，有函数头部和函数体构成，一
般形式为,
function <函数名 > (<形式参数表 >)
{
语句 （ 函数体 ） ;
}
5.4 事件驱动及事件处理
什么是事件和事件驱动?
鼠标或热键操作我们称之为事件（ Event）,事件将激活相应
的程序或函数，这些程序或函数称为事件处理程序（ Event
Handler）。 就是采用事件驱动（ event-driven）。
JavaScript中鼠标或热键的动作引发的主要事件很多。可以通
过 Dreamweaver的行为面板来看不同的浏览器能够处理的事件。
Dreamweaver中对象的事件
记住每一个事件是困难的，可以通过 Dreamweaver的行为面板
来看不同的浏览器能够处理的事件。执行“窗口”、“行为”
命令
（ 1）首先添加行为（动作）
（ 2）从事件列表中，选择激活行为的事件
（ 1） onClick事件
当用户单击鼠标按钮时，产生 onClick事件。同时 onClick指定
的事件处理程序或代码将被调用执行。例：可通过下列按钮
激活 change()函数,
<form>
<input type="button" value=" " onClick="change()">
</form>
在 onClick后，可以使用自己编写的函数作为事件处理程序，
也可以使用 JavaScript中内部的函数。还可以直接使用
JavaScript的代码等。例,
<input type="button" value=" " onclick=alert("发生 onClick事件 ");
（ 2） onChange事件
当利用 text或 texturea元素进行输入，内容改变时发出该事件，
同时当在 select表格项中一个选项状态改变后也会引发该事件。
例,
<form>
<input type="text" name="MyAddress" value="RoadNo,City"
onChange="check(this.value)">
</form>
（３） onSelect事件
onSelect为选中事件，当 Text或 Textarea对象中的文字被加亮后，
引发该事件。
（４） onFocus获得焦点事件
单击 text或 textarea以及 select对象时，产生该事件，此时该对
象成为当前焦点对象。
（５） onBlur失去焦点事件
当 text对象或 textarea对象以及 select对象不再拥有焦点时，引
发该文件。
（６） onLoad载入文件事件
当文档载入时，产生该事件。 onLoad的作用之一就是在首次
载入一个文档时检测 cookie的值，并用一个变量为其赋值，使
它可以被源代码使用。
（７） onUnload卸载文件事件
当 Web页面退出时引发 onUnload事件，并可更新 Cookie的状态。
（ 8）鼠标事件和键盘事件
除了上述的一系列针对控件的事件外, 还有许多鼠标和键盘
事件, 常用的有,
·onMouseMove 鼠标移动
·onDblClick 鼠标双击
·onMouseDown 鼠标被按下
·onMouseUp 鼠标被释放
·onKeyDown 键被按下, 按 键 的 ASCII 码 值 保 存 在
window.event.keyCode中 。
·onKeyPress 键被按下然后被释放
·onKeyUp 键被释放
·onResize 窗口被调整大小
5.5对象及其操作
-- 结构化的程序设计思想
在 20世纪 90年代以前，自顶向下逐步求精的结构化程序设
计是软件开发的主要方法，直到现在，这种结构化的程序
设计思想仍然被广泛的采用。通过过程和函数（又称子程
序），把一个复杂的问题划分成几个相对独立的、简单的
子问题
-- 面向对象技术
将自然界中的物理对象和软件对象相对应，建立了类和对
象的概念。
5.5.1对象的基本概念
对象 （ object） 是用类来声明的数据结构，如果将类比作数据
类型，对象就是相应数据类型的变量。 JavaScript并不是一个
完整的面向对象的程序设计语言，它不提供关于对象的抽象、
封装及派生等功能。但它可以使用浏览器的内置对象，也可
以允许用户自定义对象，从而分享面向对象程序设计带来的
好处。
JavaScript定义“类”和定义“函数”的语法是一样的，而且
这样的函数成为该类的构造函数。用户用函数定义来定义类，
然后用 new语句创建该类的一个实例。
类定义的一般形式
function className（ <属性表 >）
{
this.prop1=prop1； // 属性
this.prop2=prop2
..,
this.meth=FunctionName1; // 方法, 需要定义对应的函数
this.meth=FunctionName2;
..,
}
类定义举例
[例 5-3] 定义一个矩形类，包含三个成员变量，分别是矩形的
高、宽和面积，另外包含一个计算面积的成员函数。
<html>
<head>
<script
language="javascript">
function squArea()
{
this.result = this.width *
this.height;
}
function MyClass(x,y)
{
this.width = x;
this.height= y;
this.result= 0;
this.area = squArea;
}
</script>
</head>
类定义举例续
<body>
<script
language="javascript">
myObj = new
MyClass(5,6);
myObj.area();
document.write(myObj.res
ult);
</script>
</body>
</html>
5.5.2对象的操作
在 JavaScript中提供了几个用于操作对象的语句和关键字及运
算符。
（ 1） for...in语句
格式如下,for（ 对象属性名 in 已知对象名）
顺序输出对象各个属性的值，如果是方法，则输出对应的函
数代码
function showData(object)
{
for(var prop in object)
document.write(object[prop]);
}
使用该函数时，在循环体中，可以不知道对象属性的个数，
for可以自动的将属性取出来，直到最后为此。
（ 2） with语句
使用该语句，在该语句体内，任何对变量的引用被认为是这
个对象的属性，从而节省程序代码。一般形式为,
with object{
..,
}
（ 3） this关键字
this是对当前对象的引用，在 JavaScript中，对象的引用是多层
次的，往往一个对象的引用又需要对另一个对象的引用，而
另一个对象有可能又要引用另一个对象，这样有可能造成混
乱，为此 JavaScript提供了一个用于将对象指定当前对象的指
针 this。
（ 4） new运算符
使用 new运算符可以创建一个新的对象。创建对象的一般形式
是,
myobj=new calssName(参数表 );
其中,myobj为创建的新对象名称,calssName是类的名称。
如创建一个日期对象，代码为,
myDate=new Date();
myBirthday=new Date("January 18,1973 6:15:00");
这样就创建了两个新的日期对象 myDate和 myBirthday。
5.6 常用内部对象及函数
什么是内部对象和内置函数？
JavaScript提供了一些常用的内部对象和函数，用户不需要用
脚本来实现这些功能，称它们为内部对象和内置函数。
开发工具,
一个程序不是只有简单的语句构成的，往往用到大量的标准
函数，同时，还会使用到内置对象。要使用一个工具进行软
件开发，必须要熟悉该工具所提供的标准函数、内置对象等。
5.6.1 string对象
在 JavaScript中，每个字符串都是对象，使用这个对象时，不
需要象一般自定义对象一样用 new关键字进行声明。
字符串对象的生成十分简单，而且是隐式的，不使用 new关键
字，例如,
var myStr="Hello";
这样,myStr就是字符串对象了。在一个变量被声明为字符串
变量之后，它仍旧可以被赋予数值，这时这个变量就不再是
字符串了，而成为一个数值型的变量。例如,
var varStr="name and address";
varStr= 1；
上述赋值语句使 varStr成为一个数值型的变量，它不再拥有
字符串的属性和方法。
1,字符串对象的属性
字符串对象的属性只有一个，这就是 length（ 长度）属性，返
回字符串的长度。需要说明的是，如果字符串为英文，那么
长度属性的值是字母个数加上特殊符号个数，加上空格数；
但是如果字符串是中文，每个中文单字占两个英文字符的长
度。
2查找字符和子串 -1
（ 1） charAt()
这个方法返回 string对象特定位置的字符值，一般形式是,
StrName.charAt(Position);
StrName是字符串变量名或字符串常量。 Position用来指定希望
取得的字符在字符串中的位置，它是大于等于 0，小于字符串
长度属性 (length)正整数。例如,
var myStr="This is a string";
var FiveChar=StrVar.charAt(4);
上述语句将取出字符串中的第 5个字符，并将它存储于
FiveChar变量中。
查找字符和子串 -2
（ 2） indexOf()
这个方法返回指定的字符 （ 或字符串 ） 在字符串中的位置,
一般形式为,
StrName.indexOf(subStr); 或者
StrName.indexOf(subStr,StartPosition);
subStr是一个待查找的字符或者字符串, 可以是常量, 也可以
是变量 。 在省略 StartPosition的情况下, 此函数将从字符串的
第一个字符开始查找；当 StartPosition参数存在的情况下, 这
个函数将从字符串中的第 StartPosition+1个字符开始查找
当所希望查找的字符串找不到时, 将返回 -1 。 当字符串中有
两个以上的待查找字符串, 则返回被搜寻字符串中位置在最
前面的待查字符串的位置值 。
查找字符和子串 -3
（ 3） lastIndexOf()
这个方法的使用与 indexOf()方法是十分相似的,indexOf()
是按照从左到右的顺序查找待查找字符串，而 lastIndexOf()
是按照从右到左的顺序查找待查找的字符串。
4 改变字符串大小写
StrName.toLowerCase();
StrName.toUpperCase();
这两个成员方法分别将字符串中所有的字符变为小写字符和
大写字符，将变化后的结果返回。但是，原字符串内并没有
发生变化。
5 形成 html文本格式
网页中常常需要这样做，对一个字符串变量进行操作，使它
变为一定的 html的特定格式。例如一个字符串变量如下面这
样定义,
var aStr = "This is the Discount Table"
需要的格式是,
<a href="home.html">This is the Discount Table</a>
形成 html文本格式 -1
（ 1） anchor() 方法
这个方法用来形成并返回一个字符串，此字符串用以在网页
中构造一个锚点。
所谓, 锚点, 当网页文档的内容比较多，一般在这些网页中，
可以通过点击一些超链接直接跳至此网页文档的一此特定位
置，这些特定位置就是锚点。
StrName.anchor(anchorName);
其中 anchorName是与 html中 <a>标识中的 name（ 名字）属性相
关的字符串。
形成 html文本格式
例如，我们这样使用,
var aStr=" This is the Discount Table ";
var anchorText = aStr.anchor("Discount");
document.write(anchorText);
这样, 则 anchorText的取值是,
<a name="Discount"> This is the Discount Table </a>
于是，用 document.write()将这个字符串写入到网页中就有了
一个名字是 "Discount"的锚点，而这个锚点显示的文字是
,This is the Discount Table”。
形成 html文本格式 -2
（ 2） fontcolor()
形成并返回一个指定颜色的字符串，它的语法格式是,
StrName.fontcolor(FontColor);
其中 FontColor是一个颜色的名字, 或者是一个用 16进制表
示的颜色 。 例如,
var AStr="Font Color Exmaple";
var FontColorText=AStr.fontcolor("green");
document.write(FontColorText);
那么显示的文字应是绿色的 。 相当于 FontColorText具有下面
的值,
<font color=green>Font Color Example</font>
形成 html文本格式 -3
（ 3） fontsize()
形成并返回一个特定大小的字符串，一般形式是,
StrName.fontsize(FontSize);
其中 FontSize 参 数 是 数 值 型 的 变 量 或 者 常 数 。 现在
JavaScript识别的字体有 7种, FontSize参数由 1至 7,字体由
小到大 。 当 FontSize参数大于 7时, 将被当作 7处理；当其小
于 1时, 将被当作 1处理；这个参数也可以是负数 。 当参数是
-1时有一点特殊, 它相当于 FontSize=2。
例如,"FontSize Example".fontsize(4);
相当于,<font size=4>"FontSize Example"</font>
形成 html文本格式 -4
（ 4） link()
用来形成并返回一个字符串, 此字符串用以在网页中构造一
个超链接 。 它的语法格式是,
StrName.link(Href);
其中 Href是超链接的 URL。 例如, 下面的语句,
var AStr="A Href Example";
var HrefText=AStr.link("home.html");
将使 HrefText变量具有下面的值,
<a href="home.html">A Href Example</a>
5.6.2 Math对象
JavaScript中的 Math对象封装了常用的数学常数和一些常用
的数学运算，这些运算包括：三角函数、对数函数、指数
函数和一些舍入函数等。
1,Math对象的属性
Math对象中的属性与其它对象的属性有一些区别。这些属
性是常用的数学常数，它们是定值，因此它们是只读的，
不允许对这些对象属性进行写操作。
Math对象的属性 — 举 例
<html>
<head>
</head>
<body>
<script language="javascript">
document.write(“e=”+Math.E);
</script>
</body>
</html>
2 Math对象的成员方法 -三角函数
三角函数包括三角和反三角两类函数,Math对象的三角函数
见表 5-2。
Math对象的成员方法 -对数、指数函数
这一类函数包括几个常用的对数和指数操作，另外，还包括
常用的幂函数操作，见表 5-3。
Math对象的成员方法 -舍入函数
舍入函数的作用是将一些不合乎需要的数值转化为需要的数
值，例如将浮点数转化为相应的整数，见表 5-4。
Math对象的成员方法 -其它
max(Value1,Value2),用以比较两数值，得到 Value1和 Value2中
较大的值。
min(Value1,Value2)用以得到 Value1和 Value2中较小的值。
random()产生随机数的成员方法,
例如,
document.write(Math.random());将显示不同的随机数。
5.6.3 Date对象
Date（ 日期）对象封装了有关时间和日期的一些变量和函数，
利用这些变量，可以掌握当前日期和时间。 Date对象中没有
一个属性是可以直接地设定或者取得的，这必须通过成员方
法来实现。
Date对象的一般格式是,
Date(year,month,day,hours,minutes,seconds)
1.创建日期对象
创建日期对象和数组对象有些相似，都需要使用 new关键字，
但它的构造函数比较复杂，它有多个参数格式，我们可以根
据需要选择一种格式来生成一个新的日期对象，下面分别给
出这几种格式的语法和范例,
格式 1,var DateName = new Date();
没有规定任何的属性值，它是当前时间的一个副本，即它储
存了当前时间。这个构造函数是获得当前时间的唯一方法。
格式 2,var DateName= new Date(“月 日，年 小时：分：
秒, );
例如,
var meetDate = new Date("November 24,2003 11:50:00");
创建日期对象 (续 1)
格式 3,var Date1 = new Date(年,月,日 );
这种格式中也有几点要说明,
（ 1） 参数是数值, 不是字符串, 年取后两位 。
（ 2） 当, 月, 超过 12或, 日, 超过当月天数时, 将自动进位
换算到下一年和月 。
（ 3）, 月, 参数取值是从 0到 11,即实际月份比参数大一 。
（ 4）小时、分、秒将被认为是 0。
格式 4,var DateName = new Date(年,月,日,小时,分,秒 );
这种格式与前一种很相近，例如,var Date1=new
Date(96,2,23,20,55,00);
2,get方法组
我们不能直接读取 Date对象的属性，但是可以利用一系列 get方
法来取得需要的信息。
（ 1） getYear(),返回整数表示的日期对象的年份值。如果这
个年份是 1900年之后的某年，返回的将是后两位，例如 1999将
返回 99；如果 100～ 1900之间年份将返回完全值，例如 1769将
返回 1769。
例如,
myDate = new Date(2003,11,24);
document.write("year="+myDa
te.getYear());
get方法组（续）
（ 2） getMonth(),返回整数表示的月份值。取值为 0～ 11,0
代表 1月,1代表 2月等。
（ 3） getDate(),返回整数表示的对象日期是在当月的第几天
（ 3） getDay(),返回整数表示的对象的日期是星期几。它的
数值在 0～ 6
（ 4） getHours(),返回整数表示的对象时间的小时值，它的
数值是 0～ 23。
（ 5） getMinites(),返回整数表示的对象时间的分钟值，它
的数值是 0～ 59。
（ 6） getSeconds(),返回整数表示的对象时间的秒值，它数
值是 0～ 59。
等等
3,set 方法组
利用 Set方法，可以设定 Date对象的属性，这和 get方法组使用
类似，并且几乎是一一对应的。
（ 1） setYear(Year),设定对象的年份值为 Year,四位整数。
（ 2） setMonth(Month),设定对象的月份值,Month取值 0～ 11
（ 3） setDate(Day),设定对象在这一月的日期号数为 Day,应
取值在 0～ 31范围内。
（ 4） setHours(Hour),设定对象的小时值为 Hour,应取值在
0～ 23范围内。
（ 5） setMinutes(Minute),设定对象的分钟值为 Minute,应取
值在 0～ 59范围内。
（ 6） setSeconds(Second),设定对象的秒值为 Second,应取值
在 0～ 59范围内。
[例 5-4] 利用 Date对象显示时钟
问题：要求显示如图所示的时钟
分析,
（ 1）首先，使用 Frontpage,完成
页面的初步设计，包括一个表单，
两个文本框，分别显示时间和日期
（ 2）编写脚本程序，完成时间的
显示
（ 3）设置 <body>标记的 onload事
件属性，启动时间显示的脚本程序
利用 Date对象显示时钟源代码 -1
<html>
<head>
<script language="javascript">
var timeStr,dateStr;
function clock()
{
now= new Date();
//时间
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10)? ":0", ":") + minutes;
timeStr+= ((seconds < 10)? ":0", ":") + seconds;
document.clock.time.value = timeStr;
利用 Date对象显示时钟源代码 -2
// 日期
date= now.getDate();
month= now.getMonth()+1;
month= ((month < 10)? "0", "")+ month;
year= now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10)? "/0", "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock()",1000);
}
</script>
利用 Date对象显示时钟源代码 -3
<body onload="clock()">
<form name="clock">
时间,<input type="text" name="time" size="10" value=""><br>
日期,<input type="text" name="date" size="10" value="">
</form>
</body>
</html>
5.6.4使用 Array数组对象
与其它的高级语言不同,JavaScript没有提供明显的数组类型。
数组是一种内置对象 Array。 数组对象是一个一组元素对象的
集合，元素可以是不同类型的。数组的每一个成员对象都有
一个, 下标,,用来表示它在数组中的位置（下标从 0开
始）。
1.一维数组 -1
数组的定义的一般形式是,
var <数组名 > = new Array();
这样就定义了一个空数组，数组种元素的个数不确定，接下
来可以为添加数组元素。
一般形式是,
<数组名 >[<下标 >] = <表达式 >；
例如,
var colorArray= new Array(); // 定义一个空数组
colorArray[0]= "red";
colorArray[1]= "green";
colorArray[2]= "blue";
colorArray[3]= 255;
一维数组 -2
用户还可以在定义数组的时候直接初始化元素数据，一般形式
是,
var <数组名 > = new Array(<元素 1>,<元素 2>,<元素 3>,...);
例如,
var myArray = new Array(1,4.5,'Hi');
定义了一个数组 myArray,里边的元素分别是,myArray[0] = =
1; myArray[1] = = 4.5; myArray[2] = = 'Hi'。
注意,
如果元素列表中只有一个元素，而这个元素又是一个正整数的
话，这将定义一个包含正整数个空元素的数组。
例如,var myArray = new array(10),定义一个长度为 10的数组，
而不是一个数组，包含一个正整数元素 10。
2,多维数组
所谓多维数组，就是数组的元素本身也是一个数组。因此，要
使用多维数组，可用下面的形式来定义,
var myArray = new Array(new Array(),new Array(),new
Array(),...);
例如。要定义一个 3× 4的二维数组，定义如下,
var myArray = new Array(new Array(4),new Array(4),new
Array(4));
然后，可以用 myArray[i][j]的形式访问“二维数组”中的元素。
注意,
在 Javascript中，数组中的元素可以是不同类型的，因此可以定
义 oneArray=new Array(new Array(3),new Array(4));,它不是一个
3× 4的二维数组，实际上 oneArray有两个元素，第一个元素是
一个长度为 3的数组，第二个元素是一个长度为 4的数组。
3,Array对象的属性
? length属性，记录数组的长度，即数组里元素的个数。它等于
数组里最后一个元素的下标加 1。因此，想添加一个元素，可写
做,myArray[myArray.length] =,..。 对于二维数组，例如上面的
myArray,document.write(myArray.length)将返回 3，而不是返回
3× 4=12。也就是说 myArray有三个元素，都是长度为 4的数组
4,Array对象的方法
? join(<分隔符 >)，把数组中的各个元素串起来，用 <分隔符 >作
为元素之间的分割符，然后返回这个字符串。该方法不影响数
组中的内容。
?reverse(),使数组中的元素顺序反过来。如果对数组 [1,2,3]使
用这个方法，它将使数组变成,[3,2,1]。
?slice(<s>[,<e>]), 返回一个从第 s个元素到第 e个元素的一个子
数组，如果不给出 e,则返回的字数组从第 s个元素到数组的最
后一个元素。
? sort([<方法函数 >]),使数组中的元素按照一定的顺序排列。
如果不指定 <方法函数 >，则按字母顺序排列。如果指定 <方法
函数 >，则按 <方法函数 >所指定的排序方法排序。
5.6.5 其它内置对象
我们已经学习了四个 JavaScript中的内置对象，即字符串对象、
数学对象、日期对象和数组对象。在 JavaScript的较新版本中，
还有一些其它的内置对象，如：函数对象、数值对象、和布尔
对象等。它们的使用比较简单，属性和方法比较少，请参考其
他书籍。
5.6.6 预定义函数
除了内置对象外，还有一些功能是经常需要使用的，这些功能
被制作成函数的形式。它们不属于任何的对象，因此不用再通
过引用对象方法的方式来使用它们。
（ 1） eval()函数
语法形式是,
var Value = eval(字符串 );
参数中的字符串是一个合法的表达式转化成的字符串形式，此
函数将这个表达式求值，然后返回。
例如，可以这样使用这个函数,
var tempValue=10;
var str="30+5*tempValue";
var myValue=eval(str);
这样 myValue变量中的值是 80。
[例 5-5]一个简单的表达式示例
<html>
<body>
<form name="CalForm">
输入,<input type="text" name="Input" size="20"
value="输入一个表达式 ">
<input type="button" value="=" width=8
onClick="document.CalForm.Result.value=eval(document.Ca
lForm.Input.value)">
结果,<input type="text" name="Result" size="8"
value="">
</form>
</body>
</html>
（ 2） parseFloat()函数
将一个合法字符串转换为一个浮点数并被返回。例如,
var floatStr="1.6e30";
var floatValue=parseFloat(floatStr);
parseFloat()函数将从参数字符串的第一个字符开始处理，如
果遇到一个合法的表达方式不可能出现的字符时，就把这个字
符前的所有字符作为字符串来转换，其后的字符将被忽略。
（ 3） parseInt()函数
它的语法结构是,
var value=parseInt(字符串,[数制基数 ]);
在这个函数中,,数制基数, 参数是可选的。当选择这个参数
时，那么将按照选择的数制格式来试图转换这个字符串，其他
用法与 parseFloat()函数完全相同。
（ 4） isNaN()函数
当 parseFloat()函数和 parseInt()函数都无法将字符串进行转
换时，可以用 isNaN()函数来测试结果是否为 NaN。 当 Value是
NaN时，则 inNaN(value)的值将是 true,否则是 false。
谢 谢 大 家
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第 5章 客户端开发
目 录
5.1 客户端编程与脚本程序语言
5.2 JavaScript脚本语言概况
5.3 JavaScript基础
5.4 事件驱动及事件处理
5.5对象及其操作
5.6 常用内部对象及函数
5.7 浏览器内部对象
5.8 Web交互
5.9 综合举例
5.1 客户端编程与脚本程序语言
1.客户端程序：在浏览器中解释执行，往往是通过脚本语言
编写。
2.脚本语言,脚本语言是介于 HTML和 Java,Visual Basic以及
C++等编程语言之间的特殊的语言。不需要编译
脚本语言的分类：客户端，服务端
目前使用较多的客户端脚本程序语言是 JavaScript和
VBScript,
3.在网页中引用脚本程序,
<script language="JavaScript" runat=server >,如果是
客户端脚本程序，不需要设置 runat属性。
5.1.1脚本引擎
什么是脚本引擎呢？简单的讲，脚本引擎就是指脚本的运行
环境，负责脚本程序的解释，来具体处理用相应脚本语言书
写的脚本命令。
例如 ASP脚本语言必须运行在 IIS（ Internet Information Server）
上； Tomcat是 Jsp和 Serverlet的容器等，也就是运行 jsp网页必
须安装和配置 Tomcat。 没有脚本引擎，脚本就不能运行。
5.1.2设置主脚本语言
主脚本语言是用来处理在定界符 <% 和 %> 内部的命令的语
言。
主脚本语言可以逐页设置，也可以设置所有页的主脚本语言。
例如,ASP默认的主脚本语言是 VBScript。
要设置单个页的主脚本语言，可将 <%@ language %> 指令添
加到网页文件的开头。该指令的语法是,<%@
language=ScriptingLanguage %>,如果对某页进行了设置，
那么该页将忽略在应用程序中对所有页的全局设置。
如果希望将某一种脚本语言设为 Web服务器上所有页的主脚本
语言，需要使用注册表编辑器 regedit.exe程序，修改相应的
注册参数。
5.2 JavaScript脚本语言概况
JavaScript是目前使用最为广泛的脚本语言，它是由 Netscape
公司开发并随 Navigator浏览器一起发布的，是一种介于 Java
与 HTML之间、基于对象的事件驱动的编程语言。 Sun公司推
出 Java之后,Netscape引进了 Sun的有关概念，将其更名为
,JavaScript”
JavaScript与 Java的比较 -1
使用背景不同
Java是基于 C++,面向对象的程序设计语言（ Object Oriented
Language）； JavaScript是一种脚本语言，是一种基于对象的，
面向非程序设计人员的编程语言。和 Java不同,JavaScript没
有提供抽象、继承、多态等有关面向对象程序设计语言的许
多功能。
JavaScript与 Java的比较 -2
运行环境不同
JavaScript源代码无须编译，嵌入 HTML文档中的 JavaScript源
代码实际上是作为 HTML文档 Web页的一部分存在的。浏览器
浏览包含 JavaScript源代码的 HTML文档页时，由浏览器自带
的脚本引擎对该 HTML文档进行分析、识别、解释并执行用
JavaScript编写的源代码。而 Java则不同,Java 源代码必须进
行编译、连接后才能运行。
JavaScript程序举例 -1
<html>
<title>JavaScript in HTML</title>
<head>
</head>
<body>
<h1>JavaScript in HTML</h1>
<script language="Javascript">
document.write ("Hello!" );
</script>
</body>
</html>
JavaScript程序举例 -2
<html>
<title＞ function in JavaScript </title>
<head>
<script language="Javascript">
function fact(n)
{
var res=1;
if (n==0) res = 1;
else res = n*fact(n-1);
return res;
}
</script>
</head>
<body>
<p>fact(5) =
<script
language="JavaScript"
>
//注释：输出 n的阶乘
document.write(fact(5));
</script>
</body>
</html>
JavaScript程序举例 -2显示结果
5.3 JavaScript基础
程序设计语言
5.3.1 JavaScript基本符号
5.3.2 数据和数据类型
5.3.3 常量和变量
5.3.4 表达式和运算符
5.3.5基本 语句
5.3.6函数
5.3.1 JavaScript基本符号
1．基本字符
JavaScript语言的基本字符有字母（ a,b,…, z,A、
B,…, Z） 数字（ 0,1,…, 9）和特殊符号（ +,-,*,/、
<,=,>等）
2．关键字
由字母构成的具有固定含义的单词，如 var代表变量说明,if
表示条件语句等
3．标识符
表示常量、变量和函数等名称的符号。
4．注释
在 JavaScript中，注释以, //” 字符引导，注释可以单独
一行，也可以在语句行的后面。
JavaScript是识别大小写的，如果书写有误，将显示
"JavaScript脚本错误 "的警告。
5.3.2 数据和数据类型
JavaScript脚本程序语言是一种解释性的程序语言，所写的
脚本程序不需要编译和链接，它采用边读边执行的方式运
行。在数据类型方面,JavaScript提供了四种基本的数据类
型用来处理数字和文本。
JavaScript提供的数据类型有：数值（整数和实数），字
符串型（用双引号 "或单引号 '括起来的字符），布尔型
（ True或 False）。
JavaScript采用弱类型的形式，因而一个数据的变量或常
量不必首先作声明，而是在使用或赋值时确定其数据类型
的。当然也可以先给变量赋一个初值，来声明该数据的类
型。
另外，一个变量的类型在使用时可以改变，例如,
var x = "hello";
5.3.3 常量和变量
1.常量和常量定义
常量是指在程序执行过程中，其值不发生变化的量。常量
有字面常量和符号常量两种。
2．变量和变量说明
所谓“变量”是指在程序执行过程中，其值发生变化的量。
每一个变量都有一个变量名，变量名是一个用户自定义标
识符。变量有两个重要的属性，一个是数据类型，一个为
操作运算。
在 JavaScript中，变量命名的一般形式是,
var <变量名表 >;
其中,var是 JavaScript的保留字，表明接下来是变量说明，
变量名表是用户自定义标识符，变量之间用逗号分开。
变量的作用域
变量的作用域由声明变量的位置决定，决定哪些脚本命令
可访问该变量。在函数外部声明的变量称为全局变量，其
值能被所在 HTML文件中的任何脚本命令访问和修改。在函
数内部声明的变量称为局部变量。只有当过程被执行时，
变量被分配临时空间，函数结束后，变量所占据的空间被
释放。局部变量只能被过程内部的语句访问，只对其该函
数是可见的，而在函数外部则是不可见的。
5.3.4 表达式和运算符
表达式是指将常量、变量、函数、运算符和括号连接而成
的式子。根据运算结果的不同，表达式可分为算术表达式
（结果为数值）、字符表达式（结果为字符）和逻辑表达
式（结果为 true或 false）。
算术运算符
JavaScript中的算术运算符有单目运算符和双目运算符。双
目运算符包括,+（加）, -（减）,*（乘）,/（除）,
%（取模）, |（按位或）,&（按位与）,<<（左移）,
>>（右移）,>>>（右移，零填充）。单目运算符有,-
（取反）,~（取补）,++（递加 1）,--（递减 1）。
关系运算符
关系运算又称比较运算，运算符包括,<（小于）,<=（小
于等于）,>（大于）,>=（大于等于）,=（等于）、！ =
（不等于）。
运算结果为布尔值，如果条件成立，则结果为 true,否则为
false。
逻辑运算符
逻辑运算符有,&（逻辑与）,|（逻辑或）,!（取反）,^
（逻辑异或）,
字符串连接运算符
连接运算用于字符串操作，运算符有 +（用于强制连接）。
:三目操作符
三目操作符？：格式为,
操作数？表达式１：表达式２
逻辑功能为：若操作数的结果为真，则表述式的结果为表
达式１，否则为表达式２。
5.3.5基本语句
任何一种过程式语言编写的程序，都可以分为三种程序结
构，即顺序结构、分支结构和重复结构。与此对应的是三
种流程控制语句。
1．顺序结构
2．分支结构
3．重复结构
1．顺序结构
在过程式的语言中，程序总是从上而下顺序执行的。遇到
函数调用，转去执行相应的子程序，执行结束后返回。
对于有若干语句构成逻辑上的复合语句，用 {和 }括起来，
语句之间用分号分开。
分支结构 -1
在 JavaScript中，实现分支结构的语句有三种，它们是条件
判断语句 if… 语句和 if…else… 语句以及开关语句 switch语句。
if语句的一般形式是,
if (<布尔表达式 > )
<语句 >;
分支结构 -2
if..,else 语句先计算布尔表达式的值，根据计算结果指定要
运行的语句。一般形式是,
if (<布尔表达式 > )
<语句 1>；
else
<语句 2>;
分支结构 -3
switch语句提供的功能与 if..,else 语句类似，但是可以使代
码更加简练易读。一般形式为,
switch (<数值或字符串表达式 >)
{
case 表达式 1
语句 1;
[break;]
case 表达式 2
语句 2;
[break;]
……
case 表达式 n
语句 n;
[break;]
}
重复结构 -1
当部分语句需要反复执行时，需要重复语句。重复语句总是由
循环体和循环终止条件两部分组成，在 JavaScript 中可使用下
列两种形式的重复语句。
(1)while循环语句
while 循环语句是先判断循环终
止条件，然后再执行循环体，
因此循环体可能一次也不被执
行。 while 循环语句的一般形式
是,
while (<布尔表达式 >)
语句；
重复结构 -2
（ 2） for循环语句
一般形式为,
for (表达式 1；表达式 2；表达式 3)
语句 ;
执行过程如下,
（ 1）计算表达式 1。
（ 2） 计算表达式 2,如果为真,
则执行循环体, 然后转步骤
（ 3） 。 否则, 结束循环 。
（ 3） 计算表达式 3
（ 4） 无条件转步骤 （ 2）
（ 5）循环结束，执行 for语句
下面的语句。
注意,关键字大小写,for 不能
For
5.3.6函数
函数是实现结构化编程的主要手段。
在 HTML文档中，函数过程的定义应该在 <script>…</script>
标记内部,<script> 和 </script> 标记对可以出现在 HTML文档
的头部和文档体中。
函数是以 function开头定义的，有函数头部和函数体构成，一
般形式为,
function <函数名 > (<形式参数表 >)
{
语句 （ 函数体 ） ;
}
5.4 事件驱动及事件处理
什么是事件和事件驱动?
鼠标或热键操作我们称之为事件（ Event）,事件将激活相应
的程序或函数，这些程序或函数称为事件处理程序（ Event
Handler）。 就是采用事件驱动（ event-driven）。
JavaScript中鼠标或热键的动作引发的主要事件很多。可以通
过 Dreamweaver的行为面板来看不同的浏览器能够处理的事件。
Dreamweaver中对象的事件
记住每一个事件是困难的，可以通过 Dreamweaver的行为面板
来看不同的浏览器能够处理的事件。执行“窗口”、“行为”
命令
（ 1）首先添加行为（动作）
（ 2）从事件列表中，选择激活行为的事件
（ 1） onClick事件
当用户单击鼠标按钮时，产生 onClick事件。同时 onClick指定
的事件处理程序或代码将被调用执行。例：可通过下列按钮
激活 change()函数,
<form>
<input type="button" value=" " onClick="change()">
</form>
在 onClick后，可以使用自己编写的函数作为事件处理程序，
也可以使用 JavaScript中内部的函数。还可以直接使用
JavaScript的代码等。例,
<input type="button" value=" " onclick=alert("发生 onClick事件 ");
（ 2） onChange事件
当利用 text或 texturea元素进行输入，内容改变时发出该事件，
同时当在 select表格项中一个选项状态改变后也会引发该事件。
例,
<form>
<input type="text" name="MyAddress" value="RoadNo,City"
onChange="check(this.value)">
</form>
（３） onSelect事件
onSelect为选中事件，当 Text或 Textarea对象中的文字被加亮后，
引发该事件。
（４） onFocus获得焦点事件
单击 text或 textarea以及 select对象时，产生该事件，此时该对
象成为当前焦点对象。
（５） onBlur失去焦点事件
当 text对象或 textarea对象以及 select对象不再拥有焦点时，引
发该文件。
（６） onLoad载入文件事件
当文档载入时，产生该事件。 onLoad的作用之一就是在首次
载入一个文档时检测 cookie的值，并用一个变量为其赋值，使
它可以被源代码使用。
（７） onUnload卸载文件事件
当 Web页面退出时引发 onUnload事件，并可更新 Cookie的状态。
（ 8）鼠标事件和键盘事件
除了上述的一系列针对控件的事件外, 还有许多鼠标和键盘
事件, 常用的有,
·onMouseMove 鼠标移动
·onDblClick 鼠标双击
·onMouseDown 鼠标被按下
·onMouseUp 鼠标被释放
·onKeyDown 键被按下, 按 键 的 ASCII 码 值 保 存 在
window.event.keyCode中 。
·onKeyPress 键被按下然后被释放
·onKeyUp 键被释放
·onResize 窗口被调整大小
5.5对象及其操作
-- 结构化的程序设计思想
在 20世纪 90年代以前，自顶向下逐步求精的结构化程序设
计是软件开发的主要方法，直到现在，这种结构化的程序
设计思想仍然被广泛的采用。通过过程和函数（又称子程
序），把一个复杂的问题划分成几个相对独立的、简单的
子问题
-- 面向对象技术
将自然界中的物理对象和软件对象相对应，建立了类和对
象的概念。
5.5.1对象的基本概念
对象 （ object） 是用类来声明的数据结构，如果将类比作数据
类型，对象就是相应数据类型的变量。 JavaScript并不是一个
完整的面向对象的程序设计语言，它不提供关于对象的抽象、
封装及派生等功能。但它可以使用浏览器的内置对象，也可
以允许用户自定义对象，从而分享面向对象程序设计带来的
好处。
JavaScript定义“类”和定义“函数”的语法是一样的，而且
这样的函数成为该类的构造函数。用户用函数定义来定义类，
然后用 new语句创建该类的一个实例。
类定义的一般形式
function className（ <属性表 >）
{
this.prop1=prop1； // 属性
this.prop2=prop2
..,
this.meth=FunctionName1; // 方法, 需要定义对应的函数
this.meth=FunctionName2;
..,
}
类定义举例
[例 5-3] 定义一个矩形类，包含三个成员变量，分别是矩形的
高、宽和面积，另外包含一个计算面积的成员函数。
<html>
<head>
<script
language="javascript">
function squArea()
{
this.result = this.width *
this.height;
}
function MyClass(x,y)
{
this.width = x;
this.height= y;
this.result= 0;
this.area = squArea;
}
</script>
</head>
类定义举例续
<body>
<script
language="javascript">
myObj = new
MyClass(5,6);
myObj.area();
document.write(myObj.res
ult);
</script>
</body>
</html>
5.5.2对象的操作
在 JavaScript中提供了几个用于操作对象的语句和关键字及运
算符。
（ 1） for...in语句
格式如下,for（ 对象属性名 in 已知对象名）
顺序输出对象各个属性的值，如果是方法，则输出对应的函
数代码
function showData(object)
{
for(var prop in object)
document.write(object[prop]);
}
使用该函数时，在循环体中，可以不知道对象属性的个数，
for可以自动的将属性取出来，直到最后为此。
（ 2） with语句
使用该语句，在该语句体内，任何对变量的引用被认为是这
个对象的属性，从而节省程序代码。一般形式为,
with object{
..,
}
（ 3） this关键字
this是对当前对象的引用，在 JavaScript中，对象的引用是多层
次的，往往一个对象的引用又需要对另一个对象的引用，而
另一个对象有可能又要引用另一个对象，这样有可能造成混
乱，为此 JavaScript提供了一个用于将对象指定当前对象的指
针 this。
（ 4） new运算符
使用 new运算符可以创建一个新的对象。创建对象的一般形式
是,
myobj=new calssName(参数表 );
其中,myobj为创建的新对象名称,calssName是类的名称。
如创建一个日期对象，代码为,
myDate=new Date();
myBirthday=new Date("January 18,1973 6:15:00");
这样就创建了两个新的日期对象 myDate和 myBirthday。
5.6 常用内部对象及函数
什么是内部对象和内置函数？
JavaScript提供了一些常用的内部对象和函数，用户不需要用
脚本来实现这些功能，称它们为内部对象和内置函数。
开发工具,
一个程序不是只有简单的语句构成的，往往用到大量的标准
函数，同时，还会使用到内置对象。要使用一个工具进行软
件开发，必须要熟悉该工具所提供的标准函数、内置对象等。
5.6.1 string对象
在 JavaScript中，每个字符串都是对象，使用这个对象时，不
需要象一般自定义对象一样用 new关键字进行声明。
字符串对象的生成十分简单，而且是隐式的，不使用 new关键
字，例如,
var myStr="Hello";
这样,myStr就是字符串对象了。在一个变量被声明为字符串
变量之后，它仍旧可以被赋予数值，这时这个变量就不再是
字符串了，而成为一个数值型的变量。例如,
var varStr="name and address";
varStr= 1；
上述赋值语句使 varStr成为一个数值型的变量，它不再拥有
字符串的属性和方法。
1,字符串对象的属性
字符串对象的属性只有一个，这就是 length（ 长度）属性，返
回字符串的长度。需要说明的是，如果字符串为英文，那么
长度属性的值是字母个数加上特殊符号个数，加上空格数；
但是如果字符串是中文，每个中文单字占两个英文字符的长
度。
2查找字符和子串 -1
（ 1） charAt()
这个方法返回 string对象特定位置的字符值，一般形式是,
StrName.charAt(Position);
StrName是字符串变量名或字符串常量。 Position用来指定希望
取得的字符在字符串中的位置，它是大于等于 0，小于字符串
长度属性 (length)正整数。例如,
var myStr="This is a string";
var FiveChar=StrVar.charAt(4);
上述语句将取出字符串中的第 5个字符，并将它存储于
FiveChar变量中。
查找字符和子串 -2
（ 2） indexOf()
这个方法返回指定的字符 （ 或字符串 ） 在字符串中的位置,
一般形式为,
StrName.indexOf(subStr); 或者
StrName.indexOf(subStr,StartPosition);
subStr是一个待查找的字符或者字符串, 可以是常量, 也可以
是变量 。 在省略 StartPosition的情况下, 此函数将从字符串的
第一个字符开始查找；当 StartPosition参数存在的情况下, 这
个函数将从字符串中的第 StartPosition+1个字符开始查找
当所希望查找的字符串找不到时, 将返回 -1 。 当字符串中有
两个以上的待查找字符串, 则返回被搜寻字符串中位置在最
前面的待查字符串的位置值 。
查找字符和子串 -3
（ 3） lastIndexOf()
这个方法的使用与 indexOf()方法是十分相似的,indexOf()
是按照从左到右的顺序查找待查找字符串，而 lastIndexOf()
是按照从右到左的顺序查找待查找的字符串。
4 改变字符串大小写
StrName.toLowerCase();
StrName.toUpperCase();
这两个成员方法分别将字符串中所有的字符变为小写字符和
大写字符，将变化后的结果返回。但是，原字符串内并没有
发生变化。
5 形成 html文本格式
网页中常常需要这样做，对一个字符串变量进行操作，使它
变为一定的 html的特定格式。例如一个字符串变量如下面这
样定义,
var aStr = "This is the Discount Table"
需要的格式是,
<a href="home.html">This is the Discount Table</a>
形成 html文本格式 -1
（ 1） anchor() 方法
这个方法用来形成并返回一个字符串，此字符串用以在网页
中构造一个锚点。
所谓, 锚点, 当网页文档的内容比较多，一般在这些网页中，
可以通过点击一些超链接直接跳至此网页文档的一此特定位
置，这些特定位置就是锚点。
StrName.anchor(anchorName);
其中 anchorName是与 html中 <a>标识中的 name（ 名字）属性相
关的字符串。
形成 html文本格式
例如，我们这样使用,
var aStr=" This is the Discount Table ";
var anchorText = aStr.anchor("Discount");
document.write(anchorText);
这样, 则 anchorText的取值是,
<a name="Discount"> This is the Discount Table </a>
于是，用 document.write()将这个字符串写入到网页中就有了
一个名字是 "Discount"的锚点，而这个锚点显示的文字是
,This is the Discount Table”。
形成 html文本格式 -2
（ 2） fontcolor()
形成并返回一个指定颜色的字符串，它的语法格式是,
StrName.fontcolor(FontColor);
其中 FontColor是一个颜色的名字, 或者是一个用 16进制表
示的颜色 。 例如,
var AStr="Font Color Exmaple";
var FontColorText=AStr.fontcolor("green");
document.write(FontColorText);
那么显示的文字应是绿色的 。 相当于 FontColorText具有下面
的值,
<font color=green>Font Color Example</font>
形成 html文本格式 -3
（ 3） fontsize()
形成并返回一个特定大小的字符串，一般形式是,
StrName.fontsize(FontSize);
其中 FontSize 参 数 是 数 值 型 的 变 量 或 者 常 数 。 现在
JavaScript识别的字体有 7种, FontSize参数由 1至 7,字体由
小到大 。 当 FontSize参数大于 7时, 将被当作 7处理；当其小
于 1时, 将被当作 1处理；这个参数也可以是负数 。 当参数是
-1时有一点特殊, 它相当于 FontSize=2。
例如,"FontSize Example".fontsize(4);
相当于,<font size=4>"FontSize Example"</font>
形成 html文本格式 -4
（ 4） link()
用来形成并返回一个字符串, 此字符串用以在网页中构造一
个超链接 。 它的语法格式是,
StrName.link(Href);
其中 Href是超链接的 URL。 例如, 下面的语句,
var AStr="A Href Example";
var HrefText=AStr.link("home.html");
将使 HrefText变量具有下面的值,
<a href="home.html">A Href Example</a>
5.6.2 Math对象
JavaScript中的 Math对象封装了常用的数学常数和一些常用
的数学运算，这些运算包括：三角函数、对数函数、指数
函数和一些舍入函数等。
1,Math对象的属性
Math对象中的属性与其它对象的属性有一些区别。这些属
性是常用的数学常数，它们是定值，因此它们是只读的，
不允许对这些对象属性进行写操作。
Math对象的属性 — 举 例
<html>
<head>
</head>
<body>
<script language="javascript">
document.write(“e=”+Math.E);
</script>
</body>
</html>
2 Math对象的成员方法 -三角函数
三角函数包括三角和反三角两类函数,Math对象的三角函数
见表 5-2。
Math对象的成员方法 -对数、指数函数
这一类函数包括几个常用的对数和指数操作，另外，还包括
常用的幂函数操作，见表 5-3。
Math对象的成员方法 -舍入函数
舍入函数的作用是将一些不合乎需要的数值转化为需要的数
值，例如将浮点数转化为相应的整数，见表 5-4。
Math对象的成员方法 -其它
max(Value1,Value2),用以比较两数值，得到 Value1和 Value2中
较大的值。
min(Value1,Value2)用以得到 Value1和 Value2中较小的值。
random()产生随机数的成员方法,
例如,
document.write(Math.random());将显示不同的随机数。
5.6.3 Date对象
Date（ 日期）对象封装了有关时间和日期的一些变量和函数，
利用这些变量，可以掌握当前日期和时间。 Date对象中没有
一个属性是可以直接地设定或者取得的，这必须通过成员方
法来实现。
Date对象的一般格式是,
Date(year,month,day,hours,minutes,seconds)
1.创建日期对象
创建日期对象和数组对象有些相似，都需要使用 new关键字，
但它的构造函数比较复杂，它有多个参数格式，我们可以根
据需要选择一种格式来生成一个新的日期对象，下面分别给
出这几种格式的语法和范例,
格式 1,var DateName = new Date();
没有规定任何的属性值，它是当前时间的一个副本，即它储
存了当前时间。这个构造函数是获得当前时间的唯一方法。
格式 2,var DateName= new Date(“月 日，年 小时：分：
秒, );
例如,
var meetDate = new Date("November 24,2003 11:50:00");
创建日期对象 (续 1)
格式 3,var Date1 = new Date(年,月,日 );
这种格式中也有几点要说明,
（ 1） 参数是数值, 不是字符串, 年取后两位 。
（ 2） 当, 月, 超过 12或, 日, 超过当月天数时, 将自动进位
换算到下一年和月 。
（ 3）, 月, 参数取值是从 0到 11,即实际月份比参数大一 。
（ 4）小时、分、秒将被认为是 0。
格式 4,var DateName = new Date(年,月,日,小时,分,秒 );
这种格式与前一种很相近，例如,var Date1=new
Date(96,2,23,20,55,00);
2,get方法组
我们不能直接读取 Date对象的属性，但是可以利用一系列 get方
法来取得需要的信息。
（ 1） getYear(),返回整数表示的日期对象的年份值。如果这
个年份是 1900年之后的某年，返回的将是后两位，例如 1999将
返回 99；如果 100～ 1900之间年份将返回完全值，例如 1769将
返回 1769。
例如,
myDate = new Date(2003,11,24);
document.write("year="+myDa
te.getYear());
get方法组（续）
（ 2） getMonth(),返回整数表示的月份值。取值为 0～ 11,0
代表 1月,1代表 2月等。
（ 3） getDate(),返回整数表示的对象日期是在当月的第几天
（ 3） getDay(),返回整数表示的对象的日期是星期几。它的
数值在 0～ 6
（ 4） getHours(),返回整数表示的对象时间的小时值，它的
数值是 0～ 23。
（ 5） getMinites(),返回整数表示的对象时间的分钟值，它
的数值是 0～ 59。
（ 6） getSeconds(),返回整数表示的对象时间的秒值，它数
值是 0～ 59。
等等
3,set 方法组
利用 Set方法，可以设定 Date对象的属性，这和 get方法组使用
类似，并且几乎是一一对应的。
（ 1） setYear(Year),设定对象的年份值为 Year,四位整数。
（ 2） setMonth(Month),设定对象的月份值,Month取值 0～ 11
（ 3） setDate(Day),设定对象在这一月的日期号数为 Day,应
取值在 0～ 31范围内。
（ 4） setHours(Hour),设定对象的小时值为 Hour,应取值在
0～ 23范围内。
（ 5） setMinutes(Minute),设定对象的分钟值为 Minute,应取
值在 0～ 59范围内。
（ 6） setSeconds(Second),设定对象的秒值为 Second,应取值
在 0～ 59范围内。
[例 5-4] 利用 Date对象显示时钟
问题：要求显示如图所示的时钟
分析,
（ 1）首先，使用 Frontpage,完成
页面的初步设计，包括一个表单，
两个文本框，分别显示时间和日期
（ 2）编写脚本程序，完成时间的
显示
（ 3）设置 <body>标记的 onload事
件属性，启动时间显示的脚本程序
利用 Date对象显示时钟源代码 -1
<html>
<head>
<script language="javascript">
var timeStr,dateStr;
function clock()
{
now= new Date();
//时间
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10)? ":0", ":") + minutes;
timeStr+= ((seconds < 10)? ":0", ":") + seconds;
document.clock.time.value = timeStr;
利用 Date对象显示时钟源代码 -2
// 日期
date= now.getDate();
month= now.getMonth()+1;
month= ((month < 10)? "0", "")+ month;
year= now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10)? "/0", "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock()",1000);
}
</script>
利用 Date对象显示时钟源代码 -3
<body onload="clock()">
<form name="clock">
时间,<input type="text" name="time" size="10" value=""><br>
日期,<input type="text" name="date" size="10" value="">
</form>
</body>
</html>
5.6.4使用 Array数组对象
与其它的高级语言不同,JavaScript没有提供明显的数组类型。
数组是一种内置对象 Array。 数组对象是一个一组元素对象的
集合，元素可以是不同类型的。数组的每一个成员对象都有
一个, 下标,,用来表示它在数组中的位置（下标从 0开
始）。
1.一维数组 -1
数组的定义的一般形式是,
var <数组名 > = new Array();
这样就定义了一个空数组，数组种元素的个数不确定，接下
来可以为添加数组元素。
一般形式是,
<数组名 >[<下标 >] = <表达式 >；
例如,
var colorArray= new Array(); // 定义一个空数组
colorArray[0]= "red";
colorArray[1]= "green";
colorArray[2]= "blue";
colorArray[3]= 255;
一维数组 -2
用户还可以在定义数组的时候直接初始化元素数据，一般形式
是,
var <数组名 > = new Array(<元素 1>,<元素 2>,<元素 3>,...);
例如,
var myArray = new Array(1,4.5,'Hi');
定义了一个数组 myArray,里边的元素分别是,myArray[0] = =
1; myArray[1] = = 4.5; myArray[2] = = 'Hi'。
注意,
如果元素列表中只有一个元素，而这个元素又是一个正整数的
话，这将定义一个包含正整数个空元素的数组。
例如,var myArray = new array(10),定义一个长度为 10的数组，
而不是一个数组，包含一个正整数元素 10。
2,多维数组
所谓多维数组，就是数组的元素本身也是一个数组。因此，要
使用多维数组，可用下面的形式来定义,
var myArray = new Array(new Array(),new Array(),new
Array(),...);
例如。要定义一个 3× 4的二维数组，定义如下,
var myArray = new Array(new Array(4),new Array(4),new
Array(4));
然后，可以用 myArray[i][j]的形式访问“二维数组”中的元素。
注意,
在 Javascript中，数组中的元素可以是不同类型的，因此可以定
义 oneArray=new Array(new Array(3),new Array(4));,它不是一个
3× 4的二维数组，实际上 oneArray有两个元素，第一个元素是
一个长度为 3的数组，第二个元素是一个长度为 4的数组。
3,Array对象的属性
? length属性，记录数组的长度，即数组里元素的个数。它等于
数组里最后一个元素的下标加 1。因此，想添加一个元素，可写
做,myArray[myArray.length] =,..。 对于二维数组，例如上面的
myArray,document.write(myArray.length)将返回 3，而不是返回
3× 4=12。也就是说 myArray有三个元素，都是长度为 4的数组
4,Array对象的方法
? join(<分隔符 >)，把数组中的各个元素串起来，用 <分隔符 >作
为元素之间的分割符，然后返回这个字符串。该方法不影响数
组中的内容。
?reverse(),使数组中的元素顺序反过来。如果对数组 [1,2,3]使
用这个方法，它将使数组变成,[3,2,1]。
?slice(<s>[,<e>]), 返回一个从第 s个元素到第 e个元素的一个子
数组，如果不给出 e,则返回的字数组从第 s个元素到数组的最
后一个元素。
? sort([<方法函数 >]),使数组中的元素按照一定的顺序排列。
如果不指定 <方法函数 >，则按字母顺序排列。如果指定 <方法
函数 >，则按 <方法函数 >所指定的排序方法排序。
5.6.5 其它内置对象
我们已经学习了四个 JavaScript中的内置对象，即字符串对象、
数学对象、日期对象和数组对象。在 JavaScript的较新版本中，
还有一些其它的内置对象，如：函数对象、数值对象、和布尔
对象等。它们的使用比较简单，属性和方法比较少，请参考其
他书籍。
5.6.6 预定义函数
除了内置对象外，还有一些功能是经常需要使用的，这些功能
被制作成函数的形式。它们不属于任何的对象，因此不用再通
过引用对象方法的方式来使用它们。
（ 1） eval()函数
语法形式是,
var Value = eval(字符串 );
参数中的字符串是一个合法的表达式转化成的字符串形式，此
函数将这个表达式求值，然后返回。
例如，可以这样使用这个函数,
var tempValue=10;
var str="30+5*tempValue";
var myValue=eval(str);
这样 myValue变量中的值是 80。
[例 5-5]一个简单的表达式示例
<html>
<body>
<form name="CalForm">
输入,<input type="text" name="Input" size="20"
value="输入一个表达式 ">
<input type="button" value="=" width=8
onClick="document.CalForm.Result.value=eval(document.Ca
lForm.Input.value)">
结果,<input type="text" name="Result" size="8"
value="">
</form>
</body>
</html>
（ 2） parseFloat()函数
将一个合法字符串转换为一个浮点数并被返回。例如,
var floatStr="1.6e30";
var floatValue=parseFloat(floatStr);
parseFloat()函数将从参数字符串的第一个字符开始处理，如
果遇到一个合法的表达方式不可能出现的字符时，就把这个字
符前的所有字符作为字符串来转换，其后的字符将被忽略。
（ 3） parseInt()函数
它的语法结构是,
var value=parseInt(字符串,[数制基数 ]);
在这个函数中,,数制基数, 参数是可选的。当选择这个参数
时，那么将按照选择的数制格式来试图转换这个字符串，其他
用法与 parseFloat()函数完全相同。
（ 4） isNaN()函数
当 parseFloat()函数和 parseInt()函数都无法将字符串进行转
换时，可以用 isNaN()函数来测试结果是否为 NaN。 当 Value是
NaN时，则 inNaN(value)的值将是 true,否则是 false。
谢 谢 大 家
