javascript教程 - 教程简介 (一）、（二）
来源：互联网 发布：方舟生存进化怪物数据 编辑：程序博客网 时间：2024/06/05 06:17
javascript教程 - 第一部分 接触 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>
此例运行的结果如下：
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 获得焦点的时候
javascript教程 - 第二部分 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() 方法重复的调用一个函数，通过这个函数来获得当前的时间，并将时间显示在页面上，看起来就像是一个正在走的时钟。
【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) 进行更加深入的探讨。
在网页中加入 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>
此例运行的结果如下：
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 获得焦点的时候
javascript教程 - 第二部分 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() 方法重复的调用一个函数，通过这个函数来获得当前的时间，并将时间显示在页面上，看起来就像是一个正在走的时钟。
【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) 进行更加深入的探讨。
- javascript教程 - 教程简介 (一）、（二）
- javascript参考教程（一）JavaScript 简介
- GLUT教程 （一） 简介
- Git教程（一）简介
- Shell教程（一）：简介
- Thymeleaf教程 （一） 简介
- Thymeleaf教程（一）简介
- Thymeleaf教程 （一） 简介
- 核心Javascript教程（二）
- 核心Javascript教程（一）
- josn教程（二）---json简介
- SDL系列教程（一）：SDL简介
- ARM基础知识教程（一）：ARM简介
- ARM基础知识教程（一）：ARM简介
- Git学习教程（一）：git简介
- Qt数据库教程（一）简介
- Git学习教程（一） ：git简介
- Git学习教程（一）：git简介
- 衡量搜索引擎的性能
- 用研究两弹的精神来研究龙芯
- 《Windows95:A Developer's Guide》介绍
- O'Reilly 的经典IT图书全集下载
- 总结关于找工作的20条经验
- javascript教程 - 教程简介 (一）、（二）
- javascript教程 - 第三部分 window 和 frame 对象
- 如何修改windows收藏夹目录?
- javascript教程 - 第四部分 关于form对象
- javascript教程 - 第五部分 高级话题
- 简单就是美
- 身份证号验证正则表达式
- 人和人的相处真是比较困难
- 骗子的盛宴------Science痛批中国十一五科技规划 (ZT)
