第十章JavaScript的应用

最新推荐文章于 2025-08-15 22:56:20 发布

东隅412

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量1.4k

点赞数 25

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/2302_81317864/article/details/143871357

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种基于对象(0bject)和事件驱动(Event Driven)并具有安全性能的脚本语言，能够与 HTML(超文本标记语言)、Java语言一起在 Web页面中与 Web 客户交互它无须经过先将数据传给服务器端(Server)、再传回来的过程，而直接可以由客户端(Cient)的应用程序处理，从而可以开发客户端的应用程序等。JavaScript 是通过嵌入或调人在标准的 HTML语言中实现的，弥补了 HTML语言的缺陷，是Java与 HTML 折中的选择通常具有以下特点。

10.1.1.1 简单性

JavaScript是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样,JavaScript 同样是一种解释性语言，提供了一个简易的开发过程。

10.1.1.2 动态性

Javaseript是动态的，可以直接响应用户或客户的输入，无须经过 Web 服务程序，通过事动来响应用户的请求。

10.1.1.3 跨平台性

JavaScrip 依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持Janase的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript 是一种安全性语言，不允许访问本地的硬盘，并不能将数据存人到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript 是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

JavaScript 程序不能独立运行，必须依赖HTML文件，通常将 JavaSerpt 代码放置在script 标记内，由浏览器 JavaScript 脚本引擎来解释执行。语法:
<script type =" text/javascript" >
//(JavaScript 代码)
</script>
说明:
script 标记是成对标记，以<script>开始，以</script>结束。type 属性说明脚本的类型属性值“text/javascript”意思是使用 Javascript 编写的程序是文本文件。seript 标记既可以放在 HIML 的头部，也可以放在 HTML的主体部分，只是装载的时间不同。

10.1.3 JavaScript放置的位置

JavaScript 代码一般放置在页面的 head 或 body 部分。当页面载入时，会自动执行位于body 部分的 JavaScript;而位于 head 部分的 JavaScript 只有被显式调用时才会被执行。

10.1.3.1 head标记中的脚本

script 标记放在头部 head 标记中，通 JavaScript 代码必须定义成函数形式，并在主体body 标记内调用或通过事件触发。放在 head 标记内的脚本在页面装载时同时载人，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。语法:
function functionname(参数1,参数2,……,参数n)
函数体语句;
说明:avaScript 自定义函数必须以 function 关键字开始，然后给自定义函数命名，函数命名时定遵守标识符命名规范。函数名称后面一定要有一对括号“()”，括号内可以有参数也可以无参数，多个参数之间用逗号“,”分隔。函数体语句必须放在大括号“{}”内。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>head中定义的JS函数</title>
		<script type="text/javascript">
			function message(){
				alert("调用JS函数！sum(100,200)="+sum(100,200))
			}
			function sum(x,y){
				return x+y;
			}
		</script>
	</head>
	<body>
		<h4>head标记内定义两个JS函数</h4>
		<p>无返回值函数:message();</p>
		<p>有返回值函数:sun(x,y)</p>
		<form>
			<input name="btncal" type="button" onclick="message();" value="计算并显示两个数的和"/>
		</form>
	</body>
</html>

以上示例中在 head 部分插入 script 标记，在 script 标记内定义 JavaSeript 函数 message()、sum(x，y)。alert()函数是弹出告警消息框，并调用sum(100，200)函数，计算出结果并输出相关信息;body 中定义了一个普通按钮 btcal，当单击该按钮时触发按钮的onclick 事件，调用在head 部分定义的 message 函数，弹出告警框。

10.1.3.2 body标记中的脚本

script 标记放在主体 body 标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在 script 标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>body中的JavaScript脚本</title>
		<script type="text/javascript">
			function message(){
				alert("调用JS函数！sum(100,200)="+sum(100,200))
			}
			function sum(x,y){
				return x+y;
			}
		</script>
	</head>
	<body>
		<p id="clk">Clicke Here</p>
		<script type="text/javascript">
			var demo=document.getElementById("clk");
			demo.onclick=msg;
			function msg(){
				alert("我是body中的JavaScript脚本")
			}
		</script>
	</body>
</html>

以上示例中，为p元素添加了一个id 属性，是为了使 JavaScript 脚本方便获取该元素,通过 document. getElementByld("clk”)方法就可根据 id访问这个元素，该方法返回的结果是一个 DOM 对象:demo。然后，通过“DOM 对象,事件名=函数名”就能设置该对象在事件发生时将执行的函数;当用户点击“Click Here”文本时，就会弹出如图 10-3 所示的告警框，

10.1.3.3 外部js文件中的脚本

除了将 JavaScript 代码写在 head 和 body 部分以外，也可将 JavaScript 函数单独写成个js文件，在 HTML 文档中引用该js 文件。

调用外部js文件的JavaScript函数

function message(){
	alert("调用外部js文件的JavaScript函数");
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>调用外部js文件的JavaScript函数</title>
		<script type="text/javascript" src="js/demo.js">
			document.write("这条语句没有执行，被忽视掉了！")
		</script>
	</head>
	<body>
		<form>
			<input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript函数"/>
		</form>
	</body>
</html>

以上示例中将 JavaScript 数写在一个文件 demo.js 中，代码中定义了一个函 message,注意在“js”文件中不需要使用<script></seript>标记来包围代码。当点击“示例程序 10.4中的按钮时，发onclick事件，执行demo.js中定义的message()函数实现在页面上弹出告警框的功能

10.1.3.4 事件处理代码中的脚本

JavaSeript代码除了上述三种放置位置外，还可直接写在事件处理代码中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>直接在事件处理代码中加入JavaScript代码</title>
	</head>
	<body>
		<form>
			<input type="button" onclick="alert('happy')" value="直接调用JavaScript代码"/>
		</form>
	</body>
</html>

以上示例中直接在普通按钮的 onclick 事件中插入了 JavaScript 代码，注意 JavaScript 代码需要用双引号(””)括起来，单击该按钮时弹出告警框。
用浏览器打开 JavaScript程序时，安全级别设置较高的浏览器会阻止程序的运行，应选择“允许阻止的内容”选项，才能运行。

10.2 JavaScript语法

10.2.1 语法基础

任何语言的语法学习都是枯燥、单调的，JavaScrpt语法也一样，但学好语法是更好地使用JavaScript 编写程序的前提。
在运用JavaScript语言编写程序时应注意以下几点:

10.2.1.1 区分大小写

在 JavaScript 语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

10.2.1.2 变量不区分类型

JavaScript 中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明而由解释器在运行时检查其数据类型，例如:
x=1234；

y="1234"
根据 Javasoipt变量的中明方式，可知前者说明x为数值型变量，而后者说明y为字符串型变量。

10.2.1.3 每行代码结尾可以省略分号

在 Javaseript里面每条语句结尾的分号“;”不是必要的，如果多个语句写在一行上那么语句之间的分号“;”才是必需的，最后一条语句的分号“;”可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。

10.2.1.4 注释与C、C++、Java等语言相同

注释就是对代码的解释和说明，目的是为了让别人和自己容易读程序。JavaScript的注释形式与C、C++、Java等语言相同，格式如下:
//单行注释
/*
多行注释
*/

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript 关于标识符的规定如下:
(1)必须使用英文字母或者下划线开头。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符
(3)不能使用 JavaScript 关键字与 JavaScript 保留字。
(4)不能使用 JavaScript 语言内部的单词，比如Infinity，NaN，undefined 等(5)大小写敏感，如 name 和 Name 是不同的两个标识符。
合法的标识符:Hello、_12th、sum、Dog23等。
不合法的标识符:if、3com、case、switch 等。

10.2.2.2 变量声明

在 JavaScript 语言环境中，变量是用于存储信息的容器、，关键字 var 可应用于 JavaScript中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScript 语言的任何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用var来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。变量声明格式如下:

var count; //单个声明
var count,amount ,level; //用单个 var 关键字声明的多个变量
var count=0,amount= 100 ; //一条语句中的变量声明和初始化

10.2.2.3 变量类型

JavaScript 有6种数据类型，主要的类型有 Number 数值型、Sting 字符型、0bject 对象以及 Boolean 布尔型，其他两种类型为 Null 和 Undefined,
1)Number 数值型。JavaScript 支持整数和浮点数。整数可以为正数、0或负数;浮点数包含小数点，例如 3.53、-534.87 等都是浮点数。浮点数还可以采用科学计数法进行表示,如3.5E15 表示 3.5x101。
(2)Siing字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来，例如:”你好!”" this is string”” 学习语言”。
在使用字符串的过程中，有时会遇到一种情况:在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉例如:
"热烈欢迎参加JavaScript 技术'研讨的专家"; //正确的用法
"学习不是一件"容易"的事件; //错误的用法

(3)Boolean布尔型。Boolean 值有 true 和 false，这是两个特殊值，可以将他们转换为其他类型的数据，例如可将值为 true 的布尔型数据转换为整数1，而将值为false 的布尔型数据侣不能用 tre 表示1或false 表示 0。

(4)Undefined 数据类型。Javaseript 会对未赋值变量赋值为 undefined。(5)Nu 数据类型。这是一个对象，但是为空。因为是对象，所以 typeo m 返回*0bject”，注意 null 是 Javascript 保留关键字。
(6)0bject 类型。除了上面提到的各种常用类型外，对象类型也是 Javascript 中的重要组成部分。

10.2.3 运算符与表达式

avaScript 运算符主要有:算术运算符、关系运算符、逻辑运算符、赋值运算符、条件算符、逗号运算符等。根据操作数的个数，可以将运算符分为一元运算符、二元运算符和三元运算符。
由操作数(变量、常量、函数调用等)和运算符结合在一起构成的式子称为“表达式,最简单的表达式可以是常量名称。

10.2.3.1 算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的好,称为算术表达式。

10.2.3.2 关系运算符和表达式

关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式。

10.2.3.3 逻辑运算符和表达式

逻辑运算符用来执行逻辑运算，其操作数都应该是布尔型数值和表达式或者是可以转为布尔型的数值和表达式，其运算结果返回ue或false。用逻辑运算符和操作数连接起来符合规则的式子，称为逻辑表达式。

10.2.3.4 赋值运算符和表达式

赋值运算符是 JavaScript 中使用频率最高的运算符之一。赋值运算符要求其左操作数是一个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元素或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数连接起来符合规则的式子，称为赋值表达式。

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成,
语法:
变量=表达式1?表达式2:表达式3
说明:
该条件表达式表示，如果表达式1的结果为真(true)，则将表达式2的值赋给变量则将表达式3的值赋给变量。例如，变量number 1、number2比较大小，将较大的数赋值给变量 max，代码如下:
var max=(numberl>number2)? numberl : number2 ；

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。
例如:var rs=(3+5,10*6);/*先计算第一个表达式 3+5 的值为8,再计算第二个表达式 10*6的值为 60,最后将第二个表达式的值 60 赋给变量rs */

10.2.4 程序设计

JavaScrpt 脚本语言的基本构成是由控制语句、函数、对象等来实现编程的，其中控制语句主要有条件分支语句和循环语句。

10.2.4.1 条件分支语句

if…else语句完成了程序流程块中分支功能:如果其中的条件成立，则程序执行紧接着条件的语句或语句块;否则;程序执行else中的语句或语句块。其语法如下:
if(条件)

{

/*条件为真执行的语句 */

}

else

{

/*条件为假执行的语句 */

}
if…else 语句还有一些变形语句。例如，只有“部分省略 else 分支的语句;if…… else i…else…多分支语句等。
switch 分支语句可以根据一个变量或表达式的不同取值采取不同的处理方法，其语法如下:

switch(表达式)

{

case casel:执行语句1;break;

case case2:执行语句 2;break;
case case3:执行语句 3;break;
default:默认执行语句;

}

如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行 defauht 中的语句关键字 break 会使代码跳出 switch 语句，如果没有关键字 break，代码就会继续进入下一个case 分支。

10.2.4.2 循环语句

JavaScript 中的循环用来控制同一段代码执行的次数。for 语句是最基本的循环语句，语法如下:
for(变量=开始值;变量<=结束值;变量=变量+步进值)
/*循环体语句 */
只要循环的条件成立，循环体就被反复的执行。
for…in 语句与C#中 foreach()语句很像，它循环的范围是一个对象所有的属性或是-个数组的所有元素。for…in语句的语法如下:

for(变量in 对象或数组)

{
/*循环体语句 */

}

只要循环的条件成立，循环体就被反复的执行for…in语句与C#中foreach()语句很像，它循环的范围是一个对象所有的属性或是个数组的所有元素。for…in语句的语法如下:

for(变量in对象或数组)

{
/*循环体语句 */

}
while语句所控制的循环，不断地测试条件，如果条件成立，则一直循环，直到条件不再成立。其语法如下:
while(条件)

{

/*循环体语句 */

}

do… while 语句表示先执行循环体语句一次，再判断条件是否成立，如果条件还成立则再执行循环体语句，直到条件不再成立。其语法如下:
do

{
/*循环体语句 */

}
while(条件);
break 语句结束当前的各种循环，并执行循环的下一条语句。例如:

var i=0;

for(i=0;i<=5;i++){

if(i==3){
/*终止for循环 */
break ;

}
document, write( " The number is" + i +" <br/>" );

}

输出结果为:
The number is 0
The number is 1
The number is 2
语
continue语句结束当前的循环，并开始下一轮循环。例如:

var i=0;
for(i=0;i<=5;i++){
/跳过i=3的这次循环*
if(i= = 3 )continue ;
document. write( " The number is" + i +" <br/>);}
输出结果为
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5

10.2.5 函数

由事件驱动或当它被调用时执行的可重复使用的代码块称为函数，将脚本编写为函数、这样就可以实现按需调用相应的代码函数。函数在页面起始位置定义，即网页的<head>部分或定义在外部JS文件里面，然后进行

10.2.5.1 定义函数

function函数名(varl，var2，var3)

{
/*函数代码*/

}
van、var2、var3 等指的是传人函数的变量或值，为函数的参数;大括号定义了甬数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用retur 语句。例如:
function sum( a, b)

{
x= a + b;
return X;

}
JavaScript 中的函数无须对函数的返回值进行申明，直接使用retum，返回值的类型可以是本节提到的6种类型中的任意一种。

10.2.5.3 函数调用

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的函数，可以这样写:sum(5，8)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>函数调用</title>
		<script type="text/javascript">
			function sayHello(){
				alert("Hello World");
			}
		</script>
	</head>
	<body>
		<button onclick="sayHello()">单击这里</button>
	</body>
</html>

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

JavaScript 编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把 JavaScript 能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
在 JavaScript 里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript 对象，以及如何使用它们。本节后续开始将具体地依次讲解 JavaScript 的内建对象。
在 JavaScript 里面创建一个新的空对象，例如:
var o= new object():
JavaScript 的对象可分为本地对象或内置对象、Browser 对象和 HTML DOM 对象

(1)本地对象。

本地对象就是 ECMA-262 标准内定义的类

全局对象是预定义的对象，作为JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他预定义的对象、函数和属性。全局对象不是任何对象的属性所以它没有名称。
全局对象只是一个对象，而不是类，它既没有构造函数，也无法实例化一个新的全局对象。

(2)Browser 对象。Browser Objecls 也可被称作 BOM，是用来与浏览器窗体网页产生互动的对象。（浏览器信息）

(3)HTML DOM 对象。HTML DOM 定义了用于 HTML,的一系列标准对象，以及访同和处理 HTML,文档的标准方法。其中，最重要的一个对象就是 document 对象，documemt 代表整个 HTML文档，用来访问页面中的所有元素。

10.3.1.2 属性

属性是对象的特性值的表述，例如:
<script type=" texV/javascript" >
var str = Hello World!;
document. writeln( str. length );
</script>
以上示例定义了一个字符串变量，其实字符串也是一个对象，length作为str 对象的属性用来取得字符串的长度。
JavaScript 内建对象的属性可以参阅相关的技术文档，当然在 Visual Studio 平台中由于有智能感应功能，就可以很方便地访问对象的属性。
访问用户自定义对象属性的方式和访问 JavaScript 内建对象的属性方式是一样的，例如:var person= new object( );person,birthday ='1982-09-09';
属性是通过对一个已有对象的新属性进行赋值的方式来创建的，前面提到声明变量时通常用关键字 var，但是创建对象属性和赋值时不使用 var。

10.3.1.3 方法

方法指对象可以执行的行为(或可以完成的功能)，与属性相同，Javasenp 内建对象本身就自带了很多功能强大的方法，可以直接调用来完成某些特定的功能、例如:var str =Hello World!
document. writeln( str. toUpperCase( ));
运行结果为:
HELLO WORLD!
以上示例使用了字符串对象的 toUpperCase()方法，其功能是将 st 字符串全部转变为大写字母。

10.3.2 常用对象

10.3.2.1 window对象

window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中,window 对象是全局对象，所有的表达式都在当前的环境中计算。
(1)窗口操作。window 对象是 JavaScript 中最大的对象，主要用于操作浏览器窗口。通常要引用它的属性和方法时不用 window.xx形式，而直接使用方法名称即可。通过 window 对象移动或调整浏览器窗口的大小，有4种方法:moveBy(x，y):从当前位置水平移动窗体x个像素，垂直移动窗体，个像素。x为负数，将向左移动窗体;y为负数，将向下移动窗体。
moveTo(x，y):移动窗体左上角到相对于屏幕左上角的(x，y)点。当使用负数作为参数时，窗体会移出屏幕的可视区域。
resizeBy (w，h):相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。resizeTo (w，h):把窗体宽度调整为w个像素，高度调整为h个像素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>函数调用</title>
		<script type="text/javascript">
			function moveWin(){
				myWindow.moveTo(50,50);
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			myWindow = window.open(",",width=200,height=100)
			myWindow.document.write("This is 'my Window'");
		</script>
		<input type="button" value="Move my Window" onclick="moveWin()"/>
	</body>
</html>

(2)打开窗口。用 open()打开新窗口。
bod
/htn
语法:
window. open( url ,name , features ,replace );
说明:
url:要载入窗体的 URL。
name:新建窗体的名称。features:代表窗体特性的字符串，字符串中每个特性使用逗号分隔。replace:一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用
指定。
(3)关闭窗口。用 close()关闭窗口。
语法:
window. close( );

例如，关闭一个新建的窗口，
d3425000t6复童
var NewWin= window.open(....);
NewWin. close( );
(4)系统对话框。window 对象有三种常用的对话框:
aler():显示提示信息，不能对脚本产生任何改变。常见于提醒用户信息不完整、有误等情况。
confrm():弹出消息对话框(对话框中包含一个 0K 按钮与一个 Cancel 按钮),一般用于确认信息，返回 tue 或fale，所以主要用于i…else…判断。常见于用户对信息更改前的确认。
prompt():一个带输人框的对话框，可以返回用户填人的字符串，常见于某些留言板或论坛输人内容那里的插入 UBB 格式图片。
alen()方法前面示例讲解过，这里再举例说明 confrm()方法和 prompt()方法的使用。

说明:prompt()方法需要定义两个参数，而第2个参数是可选的，是指文本框输入的认文本。与 confrm()方法不同的是，promp()方法只返回1个值,当洲览者单部定”按钮时，返回文本框中输人的文本，如图 10-13 所示;单击“取消”按钮时,返回值为 null。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head> 
	<body>
		<script>
			var userChoice=window.confirm("请选择“确定”或“取消”");
			if( userChoice==true){
				document.write("ok!");
			}
			if(userChoice==false){
				document.write("Cancel!");
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head> 
	<body>
		<script>
			document.write("您的爱好是---"+prompt('请问你的爱好？','请输入'));
		</script>
	</body>
</html>

(5)history 历史对象。window 对象中的 history 历史对象包含了用户已浏览的 URL 的信息,是指浏览器的浏览历史。鉴于安全性的需要，该对象有很多限制。histony 历史对象有lngth 这个属性来列出历史的项数。JavaScript 所能管到的历史被限制在用测览器的“前进后退”键链接到的范围。
history 历史对象有以下方法:
back():后退，与按下“后退”键是等效的。
forward ():前进，与按下“前进”键是等效的。
g0():用法为 history.go(x);在历史的范围内指向指定的 URL 访问地址。如果x<0,则后退x个地址;如果x>0，则前进x个地址;如果x=0，则刷新现在打开的网页。
2.document 对象

10.3.2.2 document对象

document 本身是一个对象，但又是 JavaScript中 window 对象和 frames 对象的一个属性其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。
用法为 document 或<窗口对象>.document，其中 document 表示当前窗口的文档，<窗口对象>. document 表示指定窗口的文档。
(1)document 对象属性。表 10-7 为 document 对象比较常用的属性，其他更多的属性请查阅 JavaScript 的相关技术文档。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>属性</title>
	</head>
	<body>
		<img src="img/9-bg.jpg" BORDER="0" alt=""/><br />
		<script type="text/javascript">
			document.write("文件地址"+document.location+"<br/>")
			document.write("文件标题"+document.title+"<br/>")
			document.write("图片路径"+document.images[0].src+"<br/>")
		</script>
	</body>
</html>

10.3.2.3 location对象

location对象用于获取或设置窗体的URL，并且可以用于解析URL，是JavaScript中最重要的对象之一，location的中文意思是“位置"。'。location既是window对象的属性又是document对象的属性，即“window.location== document.location;
(1)location对象属性。location对象包含8个属性，最重要的一个是 href属性，代表当前窗体的URL，其余7个都是当前窗体的URL的一部分。

ocation对象的8个属性都是可读写的，但通常只对href与hash属性进行写操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function currLocation(){alert(window.location)}
			function newLocation(){window.location="方法.html"}
		</script>
	</head>
	<body>
		<input type="button" onclick="currLocation()" value="显示当前的URL"/>
		<input type="button" onclick="newLocation()" value="改变URL"/>
	</body>
</html>

点击显示当前的URL，运行结果如下：

点击改变URL，运行结果如下：

10.3.2.4 navigator对象

navigator 对象的中文意思为“导航器”，通常用于检测浏览器与操作系统的版本,也是window 对象的属性。
由于 navigator 没有统一的标准，因此各个浏览器都有自己不同的 navigator 版本navigator 的属性和方法也会有一定的不同。这里介绍普遍支持且常用的部分属性和方法。(1)navigator 对象属性。navigator 中最重要的是 userAgent 属性，它用来返回包含浏览器版本等信息的字符串;其次 cookieEnabled 也很重要，使用它可以判断用户浏览器是否开
启 cookie。

(2)navigator对象方法。

10.3.2.5 screen对象

screen 对象用于获取用户的屏幕信息，是window对象的属性每个 window 对象的 screen 属性都引用一个 screen 对象。可以通过 sereen 对象获取一些用户屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示的大小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些screen 对象属性的具体描述见表 10-13。属性时，一定要注意浏览器之间的兼容性。

10.4 JavaScript事件

JavaScript 中的事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某阿以触发 JavaScript 函数的事件。例如，在用户单击页面中某按钮时产生一个onCliek事#。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键:也可是某个Web页面加载完成、用户改变了窗口的大小或是滚动了窗口等。事件处理是对象化编程的一个重要环节，JavaScript会为特定文档元素的特定类型事件册一个事件处理程序，该处理程序可以是个函数，也可以是一段代码。事件处理的过程可这样表示:发生事件一启动事件处理程序→事件处理程序做出反应。其中，要使事件处理能够启动，必须先告诉对象发生了什么事情，要启动什么处理程序。事件的处理程序可是任意 JavaScript 语句，但是一般用特定的自定义函数来处理。指定事件处理程序有三种方法:

10.4.1 事件及事件处理

(1)直接在HTML标记中指定。这种方法用得最多。一般形式:<标记…事件=”事件处理程序”[事件=”事件处理程序”…]>

例如:
<html>
<head>
<meta charset=" utf-8" />
<title></title>
</head>
<body οnlοad="alert(欢迎访问页面!')"></body>
</html>

以上示例<body>标记中，在文档加载完毕时弹出一个告警框，显示“欢迎访问页面”(2)编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好用的。
一般形式:
<script language="JavaScript" for="对象" event="事件">

(事件处理程序代码)
<script>

(2)编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好用的。
一般形式:
<script language="JavaScript"for="对象"event="事件">
(事件处理程序代码)
<script>
例如:
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language = " JavaScript" for=" window" event= " onload" >alert(欢迎访问页面!)
</script>
</head>
<body>
</body>

</html>

(3)在JavaScript 中说明
一般形式:
<事件主角-对象>.<事件>=<事件处理程序>;该方法需要注意的是,“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”
<html>
<head>
<script type =" text/javascript" >
window.onerror =ignoreError;
function ignoreError(){
return true ;

}

</script>
</head>
<body>
</body>
</html>

这个例子将ignoreError()函数定义为window对象的onerror 事件的处理程序。它的功能是忽略该 window 对象下任何错误。

10.4.2 常用事件

JavaScript中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。对于事件的类型，随着 HTML5 的出现和发展，又新增了 HTML5 事件、设备事件、触摸事件、手势事件等各种事件，感兴趣的读者可查阅相关资料，本书中不再-一列举,

10.4.3 事件应用举例

事件的应用常见于下面几种场景:鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输人框、确认表单、键盘按键等。下面通过几个示例来学习事件的具体应用。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>onload事件</title>
	</head>
	<body onload="checkCookies()">
		<script type="text/javascript">
			function checkCookies(){
				if(navigator.cookieEnabled==true)
				alert("已启用Cookie");
				else
				alert("未启用Cookie");
			}
		</script>
		<p>提示框会告诉你，浏览器是否已启用</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>onchange事件</title>
		<script type="text/javascript">
			function myFunction(){
				var x=document.getElementById("fname");
				x.value=x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/>
		<p>当你离开输入字段时，会触发将输入文本转换为大写的函数</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>onchange事件</title>
		<script type="text/javascript">
			function mouseOver( obj){
			obj. style. color=" blue" ;
			obj.innerHTML="把鼠标移开"
			}
			function mouseOut( obj){
			obj. style. color="red" ;
			obj.innerHTML="把鼠标移到上面"
			}
			function mouseDown( obj){
			obj. style. backgroundColor= " blue";
			obj.innerHTML="请释放鼠标按钮";
			}
			function mouseUp( obj){
			obj.style.backgroundColor =" red" ;
			obj.innerHTML="请按下鼠标按钮";
			}
		</script>
	</head>
	<body>
		<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="background-color: green; width: 120px; height: 20px; padding: 20px; color: #ffffff;">
			把鼠标移到上面
		</div>
		<br />
		<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color: green; width: 120px; height: 20px; padding: 20px; color: #ffffff;">
			请按下鼠标按钮
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function keyDown(){
				alert("你按下了按键");
				if(event.ctrlKey){
					alert("你按下了Ctrl键");
				}
			}
			function keyPress(){
				alert("你按下了键，并且释放了按键");
			}
		</script>
	</head>
	<body onkeydown="keyDown()" onkeypress="keyPress()">
		
	</body>
</html>

10.5 综合案例——轮播广告

在网站的首页经常看到轮流播放的图片广告，既美化了页面又节省了版面，本例要求制作一个图片轮播页面。图片轮播原理:将一系列图片平铺，利用CSS布局只显示其中一张图片，其余隐通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片轮播效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;
			}
			body{
				padding: 20px;
			}
			#container{
				position: relative;
				width: 600px;
				height: 400px;
				border:1px solid #333;
				overflow:hidden;
				margin-left: auto;
				margin-right: auto;
			}
			#list{
				position: absolute;
				z-index: 1;
				width: 4200px;
				height: 400px;
			}
			#list img{
				float: left;
				width: 600px;
				height: 400px;
			}
			#buttons{
				position: absolute;
				left: 250px;
				bottom: 20px;
				z-index: 2;
				height: 10px;
				width: 100px;
			}
			#buttons span{
				float: left;
				margin-right: 5px;
				width: 10px;
				height: 10px;
				border: 1px solid #fff;
				border-radius: 50%;
				background: #333;
				cursor: pointer;
			}
			#buttons.on{
				background: orangered;
			}
			.arrow{
				position: absolute;
				top: 180px;
				z-index: 2;
				display: none;
				width: 40px;
				height: 40px;
				font-size: 36px;
				font-weight: bold;
				line-height: 39px;
				text-align: center;
				color: #fff;
				background-color: RGBA(0,0,0,.3);
				cursor: pointer;
			}
			.arrow:hover{
				background-color: RGBA(0,0,0,.7);
			}
			#container:hover.arrow{
				display: block;
			}
			#prev{
				left: 20px;
			}
			#next{
				right: 20px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var container=document.getElementById('container');
				var list=document.getElementById('list');
				var buttons=document.getElementById('buttons').getElementsByTagName('span');
				var prev=document.getElementById('prev');
				var next=document.getElementById('next');
				var index=1;
				var timer;
				function animate(offset){
					var newLeft=parseInt(list.style.left)+offset;
					list.style.left=newLeft+'px';
					//无限滚动判断
					if(newLeft>-600){
						list.style.left=-3000+'px';
					}
					if(newLeft<-3000){
						list.style.left=-600+'px';
					}
				}	
				function play(){
					// 重复执行的定时器
					timer=setInterval(function(){
						next.onclick();
					},2000)
				}
				function stop(){
					clearInterval(timer);
				}
				function buttonsShow(){
					// 将之前的小圆点的样式清楚
					for(var i=0;i<buttons.length;i++){
						if(buttons[i].className=="on"){
							buttons[i].className="";
						}
					}
					// 数组从0开始,index需要减1
					buttons[index-1].className="on";
				}
				prev.onclick=function(){
					index-=1;
					if(index<1){
						index=5
					}
					buttonsShow();
					animate(600);
				};
				next.onclick=function(){
					index+=1;
					if(index>5){
						index=1
					}
					animate(-600);
					buttonsShow();
				};
				for(var i=0;i<buttons.length;i++){
					(function(i){
						buttons[i].onclick=function(){
							var clickIndex=parseInt(this.getAttribute('index'));
							var offset=600*(index-clickIndex);
							animate(offset);
							index=clickIndex;
							buttonsShow();
						}
					})(i)
				}
				container.onmouseover=stop;
				container.onmouseout=play;
				play();
			}
		</script>
	</head>
	<body>
	<div id="container">
		<div id="list" style="left: -600px;">
			<img src="img/p5.jpg" alt="5"/>
			<img src="img/p1.jpg" alt="1"/>
			<img src="img/p2.jpg" alt="2"/>
			<img src="img/p3.jpg" alt="3"/>
			<img src="img/p4.jpg" alt="4"/>
			<img src="img/p5.jpg" alt="5"/>
			<img src="img/p1.jpg" alt="5"/>
		</div>
		<div id="buttons">
			<span index="1" class="on"></span>
			<span index="2"></span>
			<span index="3"></span>
			<span index="4"></span>
			<span index="5"></span>
		</div>
			<a href="javascript:;" id="prev" class="arrow">&lt;</a>
			<a href="javascript:;" id="next" class="arrow">&gt;</a>
	</div>
	</body>
</html>