JavaScript-自学成功

显示全部楼层 · 发表于 1-11-2005 12:59 PM

JavaScript 教程

什么是 JavaScript?

JavaScript 是一种居于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页（包括客户端和服务器端）上的，这个文档里的内容只涉及了客户端的 JavaScript(它是被嵌入到网页中的 HTML 代码中，并且由浏览器来执行的脚本语言)。

JavaScript 语言可以设计和访问一个 web 页面中的所有元素，如：图片元素（images）、表单元素（form elements）、链接（links）等等。这些对象属性等在 JavaScript 程序运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当前网页的动作，如：鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出想对应的反应动作，从而实现一些交互性。

还有一些平常经常用到的 JavaScript 的例子，如鼠标移动、表单过滤、动画等等。

哪些浏览器支持 JavaScript?

Netscape 在他的第二版浏览器中首次介绍了 JavaScript ，紧接着微软 Microsoft 也在他的浏览器 IE 3.0（Internet Explorer version 3）中提供了 JavaScript 的支持。如此这般，其它的浏览器也陆陆续续的开始支持 JavaScript 了。随着新版本的浏览器不断的扩展 HTML，JavaScript 也在不断地升级以适应 HTML 的扩展。

虽然如此，如何适应不同类型的浏览器和不同版本的浏览器仍然是一个话题，我们在后边将会讨论如何处理这一个话题，但是我们现在要讲精力集中在那些共同的流行的特性上。在没有特别注明的情况下，此文档中的所有 JavaScript 例子都是用于 Netscape Navigator 或者 Microsoft Internet Explorer version 3（IE 3.0）或者更高版本浏览器的。

关于这个JavaScript教程

下边的章节覆盖了如何在网页使用中 JavaScript 语言的基础知识。如果你是 JavaScript 的初学者，那就按如下章节的顺序阅读吧；如果你对 JavaScript 语言已经有了一定的了解的话，那么你可以跳过前边的一些章节，直接阅读 [高级话题] 的文章。

第一部分：第一次亲密接触 JavaScript - 覆盖了 JavaScript 语言的基础，包括如何将脚本加入到你的网页中、JavaScript 语法、以及一些用来说明它们如何工作的例子等。

第二部分：JavaScript 的对象 - 包括一些居于面向对象程序设计（OOP）的背景以及对 JavaScript 对象的描述。

第三部分：处理窗口（Windows）和帧（Frames）对象 - 概括了如何使用 JavaScript 复制窗口和帧，以及如何生成新的窗口。

第四部分：关于表单（Forms）对象 - 深入探讨了如何使用和控制表单对象以及表单里边的数据。

第五部分：高级话题 - 通过一些例子教你如何使用 JavaScript 创建新的对象、如何使用cookie、如何进行事件捕捉、如何使用正则表达式以及如何编写动态HTML（DHTML）等等。

第六部分：资源 - 100个Java原码让你用个够。

显示全部楼层 · 发表于 1-11-2005 01:01 PM

第一部分接触 JavaScript

在网页中加入 JavaScript

要在你的网页中使用 JavaScript ，你首先必须要知道该将它放在哪儿。其实很简单，只要在你的网页（HTML文件）中插入 <SCRIPT> 和 </SCRIPT> 标记对，你就可以在这两个标记队之间插入你的 JavaScript 代码了：

<script>
alert("Hello world!");
  </script>

另外，你也可以将 JavaScript 代码放在另一个单独的文件里，然后在网页（HTML文件）中使用 “SRC= 此单独文件的路径/地址（URL）”来使用此单独文件里的 JavaScript 程序代码。一般将这个单独的文件保存为扩展名为 .JS 的文件：

  <script src="mycode.js"></script>

你可以在一个 HTML 文件中使用 <SCRIPT> </SCRIPT> 标记对任意多次。虽然在通常情况下你都会将所有代码放在 HTML 文件的某一处，但有些时候为了保证你的JavaScript程序能够正确运行，你不得不将它们分散地放在 HTML 文件的多个地方。

不管你是在 HTML 文件中直接插入代码还是通过外部的单独的文件来使用 JavaScript ，通常都是将 <SCRIPT> </SCRIPT> 标记对放在 <HEAD> 和 </HEAD> 标记对之间。这样能够保证在你的网页被下载到客户端后开始执行 JavaScript 的时候你的 JavaScript 代码也已经被下载到客户端了。这同时也是放置你的 JavaScript 函数的好地方，如果你想要某些代码在你的网页显示出来之后才执行的话，你最好将这些代码放在函数里，等网页显示以后再通过调用函数来执行它们，请看示例。

另外一些时候，你有可能需要将你的脚本代码放在 <BODY> 和 </BODY> 标记对之间。这样做没什么不对的，因为如果你想要通过 JavaScript 代码来生成网页中的 HTML 语句，你就非常需要这样做，请看示例。

JavaScript 脚本标记

<SCRIPT> 标记还可以通过“ LANGUAGE = JavaScript 的版本”语句来指定所要使用的 JavaScript 的版本， “=”号后边的值可以是："JavaScript"、"JavaScript1.1" 或者 "JavaScript1.2"。大部分的浏览器都会自动识别它所支持的 JavaScript 的版本，而忽略它不支持的 JavaScript 。

你可以针对不同版本的浏览器使用不同的 JavaScript 脚本代码，下边的列表中列出了不同版本的 Netscape 浏览器所支持的不同版本的 JavaScript：

JavaScript - Netscape 2.0
JavaScript1.1 - Netscape 3.0
JavaScript1.2 - Netscape 4.0
所以对于 Netscape 2.0 浏览器，它将会忽略标记 <SCRIPT LANGUAGE="JavaScript1.2"> 中定义的 JavaScript1.2 版本的脚本代码，但是 Netscape 4.0 将会执行此版本的脚本代码（同时也可以执行前边两个版本的脚本代码）。你还可以在同一个网页（HTML 文件）中通过 <SCRIPT LANGUAGE="......"> 标记使用不同版本的 JavaScript 代码：

<script language="JavaScript">
function f1() {

   // 旧版本的 JavaScript 代码。
   ...
}
  </script>
  <script language="JavaScript1.2">
function f1() {

   // JavaScript 1.2 版的代码。
   ...
}
  </script>

在这个例子里，Netscape 2.0 浏览器将会执行第一个 <SCRIPT>....</SCRIPT> 标志对之间的函数 f1() 而忽略第二个 <SCRIPT>....</SCRIPT> 标志对之间的函数 f1() 。而对于Netscape 4.0 浏览器来说，它将会对两个 f1() 函数都进行处理，因为它支持这两个版本的 JavaScript，但是由于两个函数名字相同，浏览器会自动使用第二个函数 f1() 来覆盖掉第一个函数 f1()，因此执行的结果应该是第二个函数 f1() 的执行结果。

想要了解更多这方面的信息请参考：Netscape's JavaScript Reference.

JavaScript 语法基础

在你开始编写代码之前，你必须知道一些基本的 JavaScript 语法和结构。

JavaScript 语法与 C/C++、Java 的语法很相似，如果你想要了解非常详尽的语法，可以参考 Netscape's JavaScript Reference 或者 Microsoft's JScript Reference ，在那里你可以看到很多关于 JavaScript 语句、运算符、内建函数等等的内容列表，而我们这里只是讲一些在你开始学习 JavaScript 的时候需要掌握的一些基础语法知识！

【变量】

变量的声明使用关键字 var ，变量名可以是任意长度的字母、数字和下划线组成（“_”），同时变量名第一个字符不能是数字。注意：JavaScript 是对大小写敏感的，也就是说去分大小写，如变量 count 和变量 Count 是两个不同的变量！

在函数外边声明的变量是全局变量，在脚本代码或函数中的任何地方都可以对全局变量进行访问和使用。需要注意的是：在函数外边声明变量的时候，关键字 var 是可选的（即可用可不用，你可以直接给一个没有被声明的变量赋值），但是如果你在一个函数中想要使用一个局部变量（即变量的有效使用范围只是在函数里边），而且这个变量与函数外边的一个全局变量具有相同的变量名，那么你就必须在函数里边通过 var 来重新声明这个变量，这个变量亦即是一个局部变量。

下边是一些例子：

var text;
var high_score;
var count3 = 1;
var ErrorMessage = "Connect to host failed."
var daysLeft = 5.7;
var 82much = true; // 这行代码是有语法错误的。

【字符串】

JavaScript 中使用使用但英文的单引号（'）或双引号（"）将字符串括起来。如果你想在字符串中使用引号的话，只要在引号前边加上“\”号即可，请看下边示例：

var text1 = "Hello world.";
var text2 = 'Hello again.';
var text3 = "Don't click here.";
var text4 = "I said "No"";    // 这行代码是有语法错误的，因为双引号里边又有双引号.
var text5 = 'I said "No"';       // text5 为: I said "No".
var text6 = "I said \"No\"";  // text6 为: I said "No".

【运算操作符和表达式】

JavaScript 大部分的运算符和表达式都和 C/C++、Java 是一样的，例如，下边的语句都是合法：

total += 4;
i++;
msg = "Error code " + code; // 字符串合并

【语句】

JavaScript 大部分的语法也是和 C/C++、 Java 一样的，请看下边列表：

注释 - 使用'//' 来注释一个单行, '/*' 和 '*/' 可以注释多行；
循环 - for、do、while等等；
条件语句 - if....then....else；switch....case；
对象 - new、this、with 等等。
【函数】

使用 function 关键字来定义一个函数：

function name(arg1, arg2, ...) {
  JavaScript statements...
}

函数名必须符合变量名的命名规则，调用函数的时候，使用函数名以及函数需要的参数即可：

var w = 5;
var h = 3;
setDimensions(w, h);

正如我们前边所讲的，函数最好是放在 <HEAD>.....</HEAD> 标记对之间，那样可以保证当任何语句调用函数的时候函数已经被下载到客户端了，这样才不会出错，否则可能会产生找不到函数之类的错误！

在函数中可以使用 return 语句返回一些值，例如：

function add(x, y) {
  return x + y;
}
...
var total = add(7, 10);

执行你的代码

当浏览器下载(Load)一个页面时，任何嵌在网页中的 JavaScript 代码将会在浏览器解释执行网页的时候执行。实际上，JavaScript 代码可能会在图片(images)、背景声音(background sound)或页面的剩余部分下在完成之前执行。

显然，这样可能会发生一些问题。在这个在线示例中，我们试图通过 document.linkColor 对象获得用于超文本链接(hypertext links)的颜色，第一次尝试的代码是在 <HEAD>....</HEAD> 标记对之间，第二次尝试是在 <BODY>....</BODY> 标志对之间，下边的是简化后的源代码：

<html>
<head>
<title></title>
<script>

  // 获得页面超链接的颜色.

  var lc1 = document.linkColor;

</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>

<script>

  // 获得页面超链接的颜色.

  var lc2 = document.linkColor;

  // 显示出颜色的 RGB 十六进制值.

  document.writeln('link color: ' + lc1 + '<br>');
  document.writeln('link color: ' + lc2);

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

显示全部楼层 · 发表于 1-11-2005 01:02 PM

此例运行的结果如下：

link color: #0000ff
link color: #ff0000

在第一次尝试中，超链接的颜色是浏览器默认的蓝色 #0000ff (或是其它颜色，这取决于你对浏览器的设置)，然而超链接的颜色在 <BODY> 标记中却被修改/设置了(修改处：link="#ff0000"

，改成了红色(#ff0000)，在 <BODY> 被下载之前获得的颜色值 lc1 不是 #ff0000 而是浏览器的默认值 #0000ff；我们的第二次尝试是在 <BODY> 标记已经被下载完成的情况下获得超链接颜色的，所以获得的颜色是经过 <BODY> 修改/设置后的颜色 #ff0000 (即 lc2 的值)。

对于函数中的代码，只有调用这个函数的时候才会执行，但是你知道应该在什么时候调用函数吗？请看我们的下一个主题：事件。

事件

浏览器可以识别很多的事件，例如“页面下载(Load)完成”这一事件，“用户鼠标移动到超链接或按钮上”这一事件等等。这也就给你提供了一些方便，你可以通过捕捉事件来执行相应的 JavaScript 代码。

一种捕捉事件的方法是定义一个事件句柄，这是针对 HTML 标记对象而言的，不同的 HTML 标记对应不同的对象，不同的这些对象又对应不同的时间句柄 (可以参照下边的表格)。但是并不是所有的浏览器都支持所有相同的事件，我们这里所有例子中使用到的事件都是被 Netscape 和 IE 这两种浏览器所共同支持的。

【定义一个事件句柄】

定义一个事件句柄其实很简单，就是将事件名称和事件触发是要执行的 JavaScript 代码一同加到 HTML 的标记中去即可，例如：

<a href="page2.html" onClick="count++">下一页</a>

在这个例子中，用户每次点击一下“下一页”的超链接，就会触发 onclick 事件，然后在执行跟在 onclick 事件后的 JavaScript 代码：变量 count 增加 1 (count++)。

你可以在事件句柄后边使用任何合法的 JavaScript 脚本代码，如果你想使用多条 JavaScript 语句，那么使用分号(

将各条语句隔开, 对于调用函数也是一样的。但是有一点要提醒你：在事件句柄后边的字符串中加入 JavaScript 代码的时候一定要注意如何正确使用引号。

【图片的翻滚效果(Rollover)】

看一下这个在线示例，这个例子演示了被人熟知的通过鼠标移动来改变图片(Image)的效果，即图片的翻滚(Rollover)，注意：此例无法在 Internet Explorer 3.0 以及更早的版本中正确运行。

<IMG> 标记没有鼠标移动到其上边的事件句柄 onMouseOver，但是超链接标记 <A> 由这个事件句柄，所以我们在 <IMG> 标记两边分别加了标记 <A HREF=...> 和 </A>。

让我们看一下代码先。我们事先编写了一个函数 setImage() 用来改变图片，此函数需要两个参数，name 参数是要改变图片的 <IMG> 标记对象的名字，参数 source 是名字为 name 的 <IMG> 标记对象改变后（不是改变前的）的图片文件名，改变图片的关键在于改变图片对象 <IMG> 的 src 属性：

function setImage(name, source) {

  document.images[name].src = source;
  return true;
}

下边是对每一个超链接使用了三个事件句柄，一个是鼠标移动到超链接上边是的事件 onMouseOver，一个是鼠标从超链接上边移走的时候触发的事件 onMouseOut，最后一个事件是鼠标点击超链接时触发的 onClick，代码如下：

  <a href="#"
   onMouseOver="setImage('image1', 'button_on.gif')"
   onMouseOut="setImage('image1', 'button_off.gif')"
   onClick="return false;">
  <img name="image1" border=0 src="button_off.gif"> <b>Item 1</b>
  </a>

onMouseOver 和 onMouseOut 事件都调用了函数 setImage() ，同时传递了参数 name 的值 (这个值在 <IMG> 标记中通过 “NAME= 图片英文名字” 来定义给出) 以及参数source 的值，这个值是我们想要改变后显示的图片的文件名 (包括路径/URL)，我们将在后边讲到对象的细节问题，在这里请集中注意力对付事件句柄的相关问题。

注意到 onClick 事件，触发后它只执行 return false 语句，用来告诉浏览器制止/忽略这个事件的默认动作，否则，浏览器将会执行超链接的默认动作，跟随超链接所指向的地址/URL，下载一个新的页面，而通过返回 false 值，我们可以告知浏览器不要这样做。当然，如果你想要让它转到另一个新的页面的话，你可以使用 return true 或者干脆就不要定义 onClick 事件（即删除上边语句中的 onClick 事件）。

【另一个实用的东东】

另一个实用的事件句柄是 onLoad 事件，它用于 <BODY> 标记中。在这里，为了说明这一个事件句柄，我们将以前的一个在线示例修改一下，将会得到同样的结果，请看下边代码：

<html>
<head>
<title></title>
</head>
<body bgcolor="#ffffff" link="#ff0000" onLoad="alert(document.linkColor);">
<font face="Arial,Helvetica" size=3>

An example of using the <b>onLoad</b> event. Use your browser's
RELOAD button to run the example again.

</font>
</body>
</html>

你可以试一下修改后的在线示例，alert() 函数是 JavaScript 的一个内建函数（击JavaScript自带的函数），此函数的作用是显示一个消息框，消息框里的消息即是此函数的字符串参数，在这个例子里，消息框显示的是超链接颜色 document.linkColor 的 RGB 十六进制值，这个值是在 <BODY> 标记中定义的。

事件句柄列表

下边是 HTML 标记和对应的事件句柄的列表，列表中还附带说明了什么时候会触发相应的事件，如果想详细了解事件句柄，可以参阅 Netscape HTML Reference 和 Microsoft IE Events Reference 。

HTML标记事件当....时候触发此事件
<A> onClick 用户点击超链接
onMouseOver 鼠标移动到超链接上边
onMouseOut 鼠标离开超链接
<AREA> onMouseOver 鼠标移动到图片 map 区域上边
onMouseOut 鼠标离开图片 map 区域
<BODY> onBlur 包含这个页面的窗口 window 或帧 frame 失去焦点的时候
onFocus 包含这个页面的窗口 window 或帧 frame 获得焦点的时候
onLoad 这个页面下载完成的时候
onUnload 退出这个页面的时候
<FORM> onReset 按下 RESET (重置) 按钮的时候
onSubmit 按下 SUBMIT (提交) 按钮的时候
<IMG> onAbort 下载图片的过程被用户手动停止的时候
onLoad 图片下载完成的时候
onError 在客户端接收图片时有错误发生
<INPUT> with
TYPE="BUTTON"
或 "CHECKBOX"
或 "RADIO"
或 "RESET" onClick 鼠标点击时候
<INPUT> with
TYPE="TEXT"
或 <TEXTAREA> onBlur 获得焦点的时候
onChange 输入框/文本框中的文本被改变的时候
onFocus 获得焦点的时候
onSelect 输入框/文本框中的文本被选中 (高亮显示) 的时候
<INPUT> with
TYPE="SELECT" onBlur 失去焦点的时候
onChange 用户改变了下拉列表框中的选择
onClick 用户使用鼠标点击的时候
onFocus 获得焦点的时候

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

显示全部楼层 · 发表于 1-11-2005 01:20 PM

第二部分  JavaScript 对象

什么是对象？

顾名思义，JavaScript 是居于 Java 程序设计语言而建立起来的脚本语言，两者都是面向对象的 (object-oriented)，我们并不想深入探讨面向对象程序设计 (OOP)，但是为了你能够更好地了解 JavaScript 语言，我们希望你能够知道一些与对象有关的术语和基本概念。

JavaScript 所处理的每一个对象都是属于一个类 (class) ，类里边定义了组成对象的数据、属性、方法（即是类里边的一些函数）等，使用类可以增加程序代码的复用性，这在一种程序语言中是很重要的，因为这样可以避免重复开发！

你可以将字符串、整数等数据类型看作是一个对象，当你定义一个变量的时候，你就创建了一个对象实例 (通常简称 “对象”)，你可以创建很多对象实例，使它们都属于同一个类，也即是相同的对象，比如说，“人”是一个对象（类），而每一个人都是“人”这个对象（类）中的一个对象实例。创建一个对象实例时使用 new 运算符：

var text  = new String("This is my text.");
var max = new Number(4.02);
var today = new Date(); // Date() 是 JavaScript 的内建对象类

new 运算符用来调出对象的数据结构（包括对象的属性、方法），这是用来创建一个对象实例的方法，同时还对对象实例的属性进行初始化。有一些对象 (例如 Date 对象) 拥有多种数据结构，那到底 JavaScript 会为你创建哪一种数据结构呢？这就要看你在使用 new 创建对象实例的时候传的是什么参数了。就以 Date 对象为例吧，如果在创建时不传递任何参数，则会创建一个当前系统日期时间的对象实例，就像上边的例子中的一样；但是如果你在创建对象实例时向 Date 类传递了 year(年)、month(月)、date(日) 和 time (时间) 的值的话，JavaScript 将会根据这些值为你创建一个对象实例，而不再是当前系统时间的对象实例。

一个对象既可以是 core 核心对象 (下边将会提到)，又可以是另外一些 JavaScript 的预定义对象 (例如一个图片 Image 对象)，甚至可以是你创建的一个全新的对象。

【对象的属性 (Propertie)】

在 JavaScript 中使用英文句号 (.) 来访问对象的属性值：

var text = new String("A long time ago...");
var len = text.length;  // len 为字符串对象 text 的字符串长度，length 为字符串对象的字串长度属性。

通常情况下，你可以直接改变某个对象的属性，例如，为了动态的改变页面的背景颜色，你可以直接通过动态地改变 document 对象的 bgColor 属性来实现，请看在线示例。

然而，有一些属性你是不能直接修改的，例如字符串对象 String 的 length 属性，但是如果你使用 String 对象的 concat() 方法合并两个字符串的话，length 属性也就会自动的改变了，但这种改变是系统自动实现的，而不是你直接通过赋值改变的。

【对象的方法 (Method)】

同样的，对象的方法也是通过英文句号 (.) 来执行的，在方法后边紧跟一对圆括号()，而在圆括号里边包含了使用该方法所需要的参数：

var errorMsg = new String("");
var msgHeader = new String("Error: ");
var errorCode = new String("X001");
errorMsg = msgHeader.concat(errorCode);

此例执行的结果：变量 errorMsg 的值为 "Error: X001"。

JavaScript 中的对象

JavaScript 包含很多预定义对象，一些是可以用来表示不同的数据类型 (如数字和字符串对象)，而另一些是在网页中定义的与 HTML 标记密切相关的对象 (如超链接和图片对象)。

【核心 (Core) 对象】

在 JavaScript 中可供使用的最基本的数据类型被称为核心 (core) 对象，这些对象是：

Array - 数组对象；
Boolean - 布尔对象；
Date - 时间对象；
Number - 数值对象，可以是整数和浮点数；
String - 字符串对象，可以是单引号 (') 或双引号 (") 括起来的任何字符串。
对于上边给出的对象，你都可以使用 new 操作符创建相应的对象实例，其实你也可以隐含地声明/创建 Boolean、Number 和 String 这几个对象，就像下边那样：

var found = false;
var max = 47.9;
var name = "Fred"; // 等价于：var name = new String("Fred");

【文档中的对象模块】

当页面已经被下载到客户端时，浏览器就会创建几个用来存储页面信息和页面内容的对象。这些对象构成了一个树状结构 (对象的引用也是根据这种树一层一层引用的，引用时使用 “.” 号)，在这棵“树”中，最高层的对象是 window 对象，window 对象具有以下的属性：

location - 页面的地址 (URL) 信息；
history - 包括了当前打开的这个浏览器访问过的地址 (URL) 列表；
frames - 如果页面使用了帧 (frame) 的话，这个对象包含了帧的版面布局的信息以及每一个帧所对应的窗口 (window) 对象；
document - 包含了页面的内容信息；
screen - 描述屏幕的尺寸和颜色 (仅限于 Netscape 4.0)。
在这同时，浏览器还会创建另一个高层的对象叫 navigator，这个对象包含了浏览器的类型、版本、安装的插件等等信息。

就像前边说的一样，使用英文的句号 (.) 来引用上边的对象以及对象的属性，例如，要获得当前页面的地址 (URL) 信息，我们可以这样用：

var url = window.location.href;

此外，还有一个很方便的东东产生了，那就是浏览器在创建 window 和 navigator 对象的同时，也会将 window 的属性 location、history 和 document 创建为高层对象，所以对于上边的语句，我们还可以简便的写成：

var url = location.href;

下边就简单的介绍一下 JavaScript 中为浏览器提供的对象。

【window 对象】

window 对象提供了一些很有用的方法，使用这些方法你可以在浏览器中弹处对话框 (pop-up)：

alert() 显示一个消息框，只有一个 'OK' ('确定') 按钮；
confirm() 显示一个对话框，带有 'OK' ('确定') 和 'Cancel' ('取消') 按钮；
prompt() 显示一个可以让用户输入信息的对话框。
看一下这个在线示例就一切都明白了。

我们在调试 JavaScript 脚本代码的时候经常会使用 alert() 方法，你可以将这个函数放在你的代码中，让它显示出所要调试的变量或对象的值，这对于在调试代码时跟踪错误是很重要的。

window 提供的另一些方法是打开、关闭窗口或者改变窗口的显示方式，我们将在第三部分讲到这几个方法的使用。

另外，window 对象中还有一个经常被用到的方法：setTimeout() 方法。此方法可以让 JavaScript 每隔一段间隔时间执行一段代码，代码的执行遵循事件句柄中的规则，也就是说，在这个函数中，每隔一段时间就会执行几条 JavaScript 代码 (每条代码使用“;”隔开) 或者执行调用的函数：

setTimeout("count++; alert('Hello world!');", 500);

上边的代码将会每隔半秒钟 (500毫秒) 执行一次 “count++; alert('Hello world')” 代码，此代码包含了两条 JavaScript 语句。也即是说，setTimeout() 方法有两个参数，第一个参数是想要执行的代码或函数 (在此例中是代码：count++; alert('Hello world'))，第二个函数是间隔时间，单位是毫秒 (在此例中是500毫秒)。

setTimeout() 方法的返回值是一个唯一的数值，这个数值有什么用呢？如果你想要终止 setTimeout() 方法的执行，那就必须使用 clearTimeout() 方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个 setTimeout() 方法 (因为你可能同时调用了好几个 setTimeout() 方法)，这样 clearTimeout() 方法就需要一个参数，这个参数就是 setTimeout() 方法的返回值 (数值)，用这个数值来唯一确定结束哪一个 setTimeout() 方法：

var id = setTimeout("myFunction(arg1, arg2);", 3000);

...其它的 JavaScript 语句...

if (error)
  clearTimeout(id); // 出现错误时终止 setTimeout() 方法的执行

需要注意的是，setTimeout() 方法并不会让浏览器暂停执行跟在此方法后的程序代码，浏览器会一直顺着每行代码往下执行，只不过是其它代码只执行一次，而 setTimeout() 方法则是隔一段时间执行一次。在 Netscape 4.0 中，你还可以通过使用 setInterval() 方法重复执行一段代码或函数，相对应的使用 clearInterval() 方法终止前一个方法的执行，这两个方法与 setTimeout() 和 clearTimeout() 方法是一样的，这里就不再多说了。

看一下这个在线示例吧，这个例子通过使用 setTimeout() 方法重复的调用一个函数，通过这个函数来获得当前的时间，并将时间显示在页面上，看起来就像是一个正在走的时钟。

显示全部楼层 · 发表于 1-11-2005 01:21 PM

【frame 对象】

frame 即是帧，每一个帧对应一个窗口，每一个帧都是由一个 window 对象来指定的，当有一个页面使用了帧设置 (frameset) 的时候，主窗口 (又称为母窗口或母帧) 的 window 对象就包含了一个名为 frames 的数组，这个数组的每一个元素对应一个子帧 (或叫子窗口) ，而每一个子帧都对应一个 window 对象。

那些子窗口/子帧也可以通过使用帧设置 (frameset) 拥有子窗口 (对于最顶层的窗口来说就是孙子窗口了)，这样的话它们也就同时拥有了对应于它们的子窗口的数组 frames 。在某一窗口/帧的页面上使用 window.parent 或者只是 parent 即可指向此窗口的父窗口对象。同理，可以使用 window.parent.parent 指向此窗口的父窗口的父窗口，而使用 window.top 则可以直接指向所有帧中最高层的父窗口。

这样你就可以在这个帧里使用另一个帧里的数据或调用另一个帧里的函数了，详细讲述请参考第三部分。

【document 对象】

document 对象可能将会是你使用的最多的对象之一。此对象包含了与页面内容相关的几个属性，请看：

bgColor - 页面的背景色；
fgColor - 页面的前景色，即文本的颜色；
linkColor - 超文本链接的颜色；
lastModified - 此页面 (HTML 文件) 最后被修改的时间；
images - 图片对象组成的数组，数组中的每一个元素对应于网页中的每一个 <IMG> 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序；
forms - 表单 (form) 对象组成的数组，数组中的每一个元素对应于网页中的每一个 <FORM> 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序；
links - 超文本链接对象组成的数组，数组中的每一个元素对应于网页中的每一个 <A> 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序；
通常情况下，这些属性对应的是 HTML 标记的属性值，例如 bgColor 属性对应的是 <BODY> 标记中 BGCOLOR="..." 代码中的属性值，你会发现，在其它标记 (像图片和超文本链接) 中也是这样对应的。

images、forms 和 links 属性实际上都是数组，对于数组中的元素，通常会使用像下边的语句那样访问之：

var abc = document.images[3];

这样变量 abc 指向的是网页中的第四个 (因为在 JavaScript 中数租下标是从 0 开始的) <IMG> 标记对应的图片对象，这样用起来其实并不方便，因为如果图片太多，你就必须知道每一个图片在网页中排在第几，要不然就无法知道数组的下标应该是几。不过不用担心， JavaScript 提供了一个方便的方法让你指向图片对象，那就是通过各个图片元素的名字：

var abc = document.images["menu"];

要使用这种方法，你就必须在 <IMG> 标记中加入 NAME= "图片的英文名" 的代码，此例中，<IMG> 标记的代码为：<IMG NAME="menu" SRC="test.gif">，这样你就再也不用担心你要引用的图片对象在网页中的排位顺序了，只要给它取个名字就可以了。 (在 Netscape 3.0 中，这种给图片命名的方法并不好用，可能会的不到正确的结果，这也是 Netscape 3.0 的一个 bug。)

在使用这种方法给网页中的图片对象取名子的时候，千万注意不要有重名的情况，否则就得不到正确结果了。此外，你还可以使用下边的代码一样代替上边的代码：

var abc = document.menu; // 这条语句和 var abc = document.images["menu"]; 是等价的

【图片对象 Image】

关于一个图片的信息可以保存在一个叫 Image 的对象中，此对象包含了图片路径 (URL)、图片当前的下载状态、图片的高度和宽度等信息，通常情况下你会将此对象指向在 document.images 数组中存在的图片，也就是放在网页中的图片，但是有时候你可能要处理一些不在网页中的图片对象，这时候 Image 对象就派上用场了。

当你要实现图片翻滚效果的时候，提前将你想要使用的图片下载到客户端是一个很好的想法，因为这样的话，当用户触发事件，要换图片的时候，那个图片已经在客户端了，于是图片就会马上显示出来，避免了时间的延迟，否则换图的时候再让浏览器从服务器上下载图片的话，图片翻滚就有时间延迟了。而使用 Image 对象就可以做到提前下载图片的目的，如下边的代码一样，使用 Image 对象的 src 属性指定图片的路径 (URL)，这样就将 images 目录下的图片 pic2.gif 下载到客户端了：

var myImg = new Image();
myImg.src = "images/pic2.gif";

这段代码将迫使浏览器开始从服务器下载指定的图片，如果客户端的缓存 (Cache) 中有这个图片的话，浏览器会自动将其覆盖，那样，当用户将鼠标移动到图片上边的时候，图片将会立即变换，不会有时间的延迟。

看看改进后的图片翻滚的在线示例吧，此程序使用了 Image 对象预先下载图片的方法。注意：此例不能在 Internet Explorer 3.0 或更早的版本中使用，因为它们不支持。

【超链接对象 link】

通常你可能不会想到使用 link 对象，如果想知道超链接的地址 (URL)，你可以使用 href 属性，如果想知道超链接目标窗口 (window) 或目标帧 (frame)，你可以使用 target 属性。

link 对象还包含一个 imagemap 对象，它对应的是 HTML 文件中的 <MAP> 标记。

【表单对象 form】

form 对象自身用的并不是很多，但是 form 对象包含了很多别的元素对象，这些对象组成了表单 form。这些对象包括：文本框对象 (text)、密码框对象 (password)、单选框对象 (radio button)、复选框对象 (check box)、多行文本域 (text area)、隐藏域 (hidden field)、选择列表/下拉列表 (selection list option)、提交按钮 (submit button)、重置按钮 (reset button)，它们对应的 HTML 标记可以参照相关的 HTML 语言参考。

这些对象都有共同的属性 name 和 value，value 属性是用户输入的数据或 HTML 文件给定的值，在 HTML 标记中，这两个属性分别对应的代码是 NAME="..." 和 VALUE="...."。

在使用 form 里的那些元素对象之前，首先你必须要引用 form 对象才行，因为 form 对象是那些对象的父对象，而 form 对象前边也要引用它的上一层父对象 document，这种层层引用是很重要的：

document.forms[0]       // 指向页面中的第一个 form 对象
document.forms["order"]  // 指向名为 order 的 form 对象，即<FORM>标记中包含有代码 NAME="order" 的表单
document.order          // 这和上一行的代码是等价的

类似的，你可以通过表单 form 对象的 elements 数组访问每一个 input 对象，同时也可以使用表单中各个元素对象的名字来访问这些对象。input 对象的名字也是通过 <INPUT> 标记中的 NAME="..." HTML 代码来命名的：

document.forms[0].elements[3]
  // 第一个表单 form 中的第三个 input 元素
document.forms["order"].elements["address"]
  // 指向名为 order 的表单中名为 address 的对象
document.order.address
  // 指向名为 order 的表单中名为 address 的对象，和上一行代码是一样的

通常我们使用表单对象来检查用户的输入是否正确或者用户提交的数据是否正确，这种检查是在表单数据被提交到服务器之前进行的，这样做可以节省用户填表的时间，保证用户只提交一次表单。请看在线示例，此例中演示了如何使用 form 和 form 里边的其它对象来检查用户输入的。

此例中一些需要注意的地方：

我们在 <form> 标记中使用了 onSubmit 事件，此事件在用户按下“提交”按钮的时候，调用函数 checkForm() 来检查用户输入；
在函数 checkForm() 中，无论表单中的哪一项没有填写，都会弹出一个带有错误信息的消息框，并使用 focus() 方法将鼠标的焦点放在相应的输入框 (input) 中；
如果表单中有项目没有填写，checkForm() 函数会返回 false 值，而 onSubmit() 函数在获得 false 值之后，不执行提交表单内容的动作。如果返回致使 true，onSubmit() 则会执行提交的动作。
我们将在第四部分对表单 (form) 进行更加深入的探讨。

x_sky58 · 发表于 1-11-2005 01:39 PM

谢谢分享！！！正适合我这个Javascript的初学者！！

显示全部楼层 · 发表于 1-11-2005 01:45 PM

 第三部分
 window 和 frame 对象 
创建新的 window (窗口) 对象
你有时需要打开一个新的浏览器窗口，用来显示信息或广告，但是在这里我要提醒你一下，大部分人在浏览一个网站的时候，是不会注意弹处的新窗口里边写些什么，他们会很快地关掉窗口，只有少数的人会留意这些弹出的窗口。然而，这项技术还是很不错的。
【弹出窗口的小测试】
在这个在线示例  中，我们给出一个小测试问题的列表，对应于每一个问题都一个显示答案的超链接，而这些超链接将会弹出一个小窗口来显示答案，看一看代码就清楚了。
实际上，每一个答案的超链接都调用了同一个函数 showAnswer()，通过传递的参数 url (此参数是答案所在的页面的地址 URL) 的不同，在弹出的小窗口中显示不同的页面；在这个函数中使用了 window.open() 方法来创建新的窗口：

function showAnswer(url) {
  window.open(url, "answer", "height=100,width=100,directories=no," +
                           "location=no,menubar=no," +
                           "resizeable=no,status=no,toolbar=no");
  return false;
}

open() 方法有三个参数：打开窗口中的页面地址 URL (包括路径和文件名)，给新窗口取的一个英文名字，打开的窗口的一些属性设置 (如窗口的高度、宽度、是否显示滚动条、是否显示浏览器的菜单栏等等)。
新窗口的名字在某些时候可能会用到，在别的窗口中使用 TARGET="新窗口的名字" 使超链接所链接的页面在新窗口中显示，描述窗口特性的参数是一个包含关键字和关键字值的字符串，各个关键字之间使用英文逗号 (,) 隔开，使用这个参数的时候一定要小心，各个关键字、关键字值、逗号之间千万不要有空格。
注意：此例中的 “+” 好只是为了代码能够换行书写才加上的，其实它们只是连结字符串而已，没有别的，不使用 “+” 好一样是可以的。
窗口特性 (即是打开的浏览器的样子) 的关键字、关键字值可以参考下表：
是否显示工具栏：toolbar[=yes|no]|[=1|0]
是否显示地址栏：location[=yes|no]|[=1|0]
是否显示前进、后退、刷新按钮：directories[=yes|no]|[=1|0]
是否显示状态栏：status[=yes|no]|[=1|0]
是否显示菜单栏：menubar[=yes|no]|[=1|0]
是否显示滚动条：scrollbars[=yes|no]|[=1|0]
用户是否可以改变窗口的大小：resizable[=yes|no]|[=1|0]
是否在新窗口中保留浏览器的浏览历史纪录：copyhistory[=yes|no]|[=1|0]
窗口的宽度 (单位为像素)：width=pixels
窗口的高度 (单位为像素)：height=pixels
如果在字符串中给定了这些值的话，窗口就会按你定义的现实，否则将会使用默认的值，想要进一步了解这方面的信息请参考 Netscape's JavaScript Guide ！
【给窗口指定页面】
当你使用上面的方法创建了一个新窗口之后，你还可以再次给这个窗口指定新的页面，这就要用到 open() 方法的返回值了，请看下边的代码：

myWin = window.open(url, "", "height=100,width=100");
...
myWin.location = "newpage.html";

上边的代码将打开的新窗口的页面重新指定为 newpage.html，这样窗口中就会显示页面 newpage.html 了。同时，在打开的新窗口中，你也可以通过使用 window 对象的 opener 属性将窗口对象指向打开此窗口的母窗口，这样也就可以对母窗口的数据或函数进行操作了，例如下边的代码中就是将母窗口的页面重新指定为 newpage.html：

window.opener.location = "newpage.html";

【关闭一个窗口】
再让我们看一下前边的在线示例中我们所打开的新窗口，你会窗口中没有菜单栏，那我们该如何将此窗口关掉呢？不用担心，我们可以使用 window 对象的 close() 方法来关闭打开的小窗口，那个 “关闭窗口！” 按钮中就是使用了此方法：

<form>
<input type=submit value="关闭此窗口" onClick="window.close(); return false;">
</form>

当你按下按钮后，就会触发 onClick 事件，从而调用 window 对象的 close() 方法，此方法将当前的窗口关闭掉。
处理 frame [帧] 对象
正如我们在前边的章节中提到的那样，frame 帧其实是单独的窗口，它对应于单独的窗口对象，有自己的 location、history 和 document 属性。
在这个在线示例  [或下载]中你将会看到一系列的帧，代码如下：

<html>
<head>
<title></title>
</head>

<frameset rows="300,*">
  <frame name="a" src="example3-2a.html">
  <frameset cols="33%,33%,33%">
<frame name="b" src="example3-2b.html">
<frame name="c" src="example3-2c.html">
<frame name="d" src="example3-2d.html">
  </frameset>
</frameset>

</html>

至于帧的结构、帧是如何分布的等等问题这里就不多讲了，我们希望你能查看一下例子中的源代码，你会发现帧 A 中有一个名为 setFrameColor() 的函数，它的作用是用来改变帧 B、帧 C、帧 D 的背景色，参数 fname 为目标帧的名字，参数 color 为目的背景颜色：

function setFrameColor(fname, color) {

  window.parent.frames[fname].document.bgColor = color;
  return false;
}

正如前边例中所演示的那样，B、C、D 帧的背景颜色确确实实被 document.bgColor 改变了，这里头最重要的是对帧对象的指定，这也是 window.parent.frames[fname] 的作用了，如果参数 fname 的值为 B，则改变帧 B 的颜色。
我们通过当前帧 (帧 A) 的 window.parent 属性指定到顶部的帧 (frameset，此帧包含了A、B、C、D四个帧) ，然后通过顶部帧的 frames 数组加上帧的名字 fname 指定目标帧 (帧 B、C、D)，最后通过目标帧的 document.bgColor 属性改变该帧的背景色。
下图很直观地显示了我们上边所讲的帧对象的指定关系：

显示全部楼层 · 发表于 1-11-2005 01:45 PM

【引用别的帧/窗口的变量和函数】
你不只是可以引用别的帧/窗口的 document、window 对象，而且还可以访问使用别的帧/窗口的变量和函数。
现在我们将上边的例子修改一下，请看在线示例  [或下载]。在新的例子中，我们给下边的三个帧都加了一个按钮，用来恢复各个帧的默认背景色，按下这些按钮后，将会调用帧 A 中的函数 setFrameColor()。下边就是调用帧 A 中 setFrameColor() 函数的代码：

window.parent.frames["A"].setFrameColor(window.name, "#ffffff");

正如你所看到的，我们使用了与前边一样的技巧。首先使用 window.parent 指向顶层的帧 (frameset)，然后使用 frames["A"] 指向帧 A，然后在后边加上帧 A 中的函数 setFrameColor()，并且加上两个参数，这样就可以运行帧 A 中的函数了。
需要注意的是函数 setFrameColor() 中使用的类似 window.name 的语句，这个名字和 frames[] 数组中使用的是相同的名字，同时这个名字还是 <FRAME> 标记中通过 NAME="帧的英文名" 设置的名字。
下边是与帧相关的第二个例子的关系图：

图 3.2
类似地，你也可以使用相同的方法使用别的窗口/帧里边的全局变量，只需要将上边例中的函数名改成全局变量名即可。
window 对象的 location 和 history 属性
window 对象的 location 属性包含了当前页面的地址 (URL) 信息，你可以直接改变此属性值，将其设置成新的地址 (URL)：

window.location = "http://www.yahoo.com";
或者
location = "http://www.yahoo.com";

你还可以通过下边的两种方法中的任何一种来使浏览器从服务器上下载 (Load) 页面：
reload() - 促使浏览器重新下载当前的页面，也就是“刷新”当前页面了。
replace(URL) - 促使浏览器根据 URL 参数中给出的地址 (URL) 下载页面，同时在当前浏览器存储的历史记录 (即所浏览过的页面的列表) 中使用新的地址(即此方法中的 URL 参数) 覆盖当前的页面。
使用 replace() 方法意味着用户将不能通过按 “返回” 按钮回到前边浏览过的那个页面，但这并不是说用户完全不能回到原来的所有页面，他们只不过是无法回到被 replace() 方法替换的那一个页面 (注意：只是被替换的那一个页面)。
表面上看起来这种方法并不是很有用，而且好像还有点令人讨厌，但是，在一些特殊的情况下这种方法却是很有用的。看看这个在线示例  [或下载]就知道了，此例中使用 setTimeout() 方法每个三秒钟就下载一个新的页面，让程序运行一段时间，然后点击浏览器的 “后退” 按钮，你会看到浏览器的历史记录，好多好多，你再试着通过鼠标点击回到开始的页面，怎么样，回去了吗？好像比较麻烦，因为有一大堆的页面在那里挡着。
想要解决这个问题可以使用 replace() 方法，看一下这个改进后的在线示例  [或下载]就知道了，新的例子中，你只需点击一次 “后退” 按钮即可以回到最初的页面了。
【history 对象】
history 对象是一个很有用的对象，此对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。history 对象具有两种方法：
forward() - 将历史记录向前移动一个页面；
back() - 将历史记录向后移动一个页面；
而还有一个 go() 方法也可以控制历史纪录，而且功能更加强大，使用此方法需要一个参数，这个参数值可以是正负整数、零和字符串，例如 history.go(-2) 将是当前页后退两页；如果给定的参数是字符串，那么浏览器就会搜索列表，找到最接近当前页面位置的并且地址 URL 中含有此字符串的页面，然后转到该页面。
请看，下边的两条语句是等价的：

history.go(-1);
history.back();

下边的代码将页面转到距离本页面位置最近的同时页面地址 URL 中含有字符串 "netscape" (不区分字母的大小写)  的页面：

history.go("netscape");

在使用这三个方法的时候，如果没有找到符合条件的历史记录的话，将不会发生任何变化，不会改变当前的页面，也不会显示错误。
小技巧：如果在你的网站中有很多页面，那么提供一个 “返回” 功能是很必要的，这样可以方便用户浏览你的网站，但是你并不知道用户是从哪一个页面来到当前页面的，于是你就不能使用 <A HREF="页面的地址">...</A> 的方式来做超链接了，但是可以使用下边的代码来做 “返回” 的超链接：

<a href="#" onClick="history.back(); return false;">返回</a>

改变窗口页面的内容
你可以使用 window 对象的 scroll() 方法使窗口/帧的内容滚动，这种滚动可以是水平方向的也可以是垂直方向的，在这个在线示例  [或下载]中，帧里边的美国各个城市天气变化的内容将会不停的滚动。
此例中，当页面滚动到一定的值 (此例中为 750 像素) 的时候，又将页面重新设置成最初的样子 (即坐标值为：(0,0))，这样看起来就是不停的滚动了。可惜的是，并不是所有的浏览器都提供实际的页面高和宽的像素值，所以你要亲自实践一下看看这些值要多大才合适。
你还可以重新书写一个页面中的内容，这就要用到 document 对象的 write() (此方法输出的时候不换行) 和 writeln() (此方法输出完成后自动换行)方法了。这两个方法需要一个字符串参数，这个参数就是要在页面中输出的字符串，可以在字符串中带上HTML代码，那样输出的结果就和其它网页是一样的了，看看这个在线示例 [或下载]，查看一下源代码就知道了。这个例子中是上边的帧通过 writeln() 方法向下边的帧输出内容。
在此例中，你可以试一试输入一些 HTML 代码，看看有什么效果！比如说输入下边的代码：

<script>
alert("Hi mom!");
</script>

在下边帧上，点击鼠标右键，查看一下源代码，你会发现源代码就是你输入的那些字符。
在函数 rewriteFrame() 中，有如下语句：

window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

第一条语句是将表单 (form) 的 text 中输入的内容写到下边的帧中，第二行代码是调用 document.close() 的方法告诉浏览器向页面写的操作已经结束。如果你想要是你的输入覆盖掉以前的，那就要使用 document 对象的 close() 方法。
【一个小小的改进】
你可能会注意到上边的例子中，当你点击浏览器的后退按钮的时候，你会看到你的每一次 “提交” 动作都产生了一个新的页面，他们都留在了历史记录中，所以像前边说的一样，你要按很多此 “后退” 才能会回到最初的页面，如果你想除掉这种情况，可以使用 document 对象的 open() 方法，只要在 rewriteFrame() 中加一条语句即可：

window.parent.frames["text"].document.open("text/html", "replace");
window.parent.frames["text"].document.writeln(document.forms[0].text.value);
window.parent.frames["text"].document.close();

open() 方法的第一个参数值 "text/html" 是用来告诉浏览器准备接受 HTML 数据，而第二个参数值 "replace" 告诉浏览器不要将新写入的页面加入到浏览器的历史记录列表中，和 location.replace(URL) 是很相似的，功能是一样的，请看改进后的在线示例 [或下载]。

		自动登录	找回密码
密码			注册

JavaScript-自学成功

所属分类: 电脑手机

浏览过的版块