javascript 新技术简述javascript技术

转载

mob64ca140bbb8b 2023-10-31 21:52:26

文章标签 javascript 新技术 JavaScript技术 javascript HTML html 文章分类 JavaScript 前端开发

JavaScript技术

JavaScript 简介

在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。

JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。

你应该具备的基础知识：

在继续学习前，你应该对以下知识有基本的了解：

HTML
XHTML

如果你希望首先学习这些内容，请在首页访问相关教程。

什么是 JavaScript？

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
所有的人无需购买许可证均可使用 JavaScript。

Java 和 JavaScript 是相同的吗？

不同！

在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。

Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C++。

JavaScript 能做什么？

JavaScript 为 HTML 设计师提供了一种编程工具

HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。

JavaScript 可以将动态的文本放入 HTML 页面

类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write("<h1>" + name + "</h1>")

JavaScript 可以对事件作出响应

可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。

JavaScript 可以读写 HTML 元素

JavaScript 可以读取及改变 HTML 元素的内容。

JavaScript 可被用来验证数据

在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。

JavaScript 可被用来检测访问者的浏览器

JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。

JavaScript 可被用来创建 cookies

JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

真实的名称是 ECMAScript

JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护。

ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。

Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。

ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。

在 1998 年，该标准成为了国际 ISO 标准 (ISO/IEC 16262)。

这个标准仍然处于发展之中。

如何实现 JavaScript

HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中。

实例

生成文本

如何在页面中写文本

生成普通文本和标签

如何使用 JavaScript 在页面中写入普通文本和标签。

如何把 JavaScript 放入 HTML 页面

<html>

<body>

document.write("Hello World!");

</script>

</body>

</html>

上面的代码会在 HTML 页面中产生这样的输出：

Hello World!

实例解释：

如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签（同时使用 type 属性来定义脚本语言）。

这样，<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。

<html>

<body>

...

</script>

</body>

</html>

document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。

把 document.write 命令输入到 <script type="text/javascript">与</script>之间后，浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 "Hello World!"。

<html>

<body>

document.write("Hello World!");

</script>

</body>

</html>

TIY

注意：如果我们不使用 <script> 标签，浏览器就会把 document.write("Hello World!") 当作纯文本来处理，也就是说会把这条命令本身写到页面上。

TIY

如何与老的浏览器打交道

那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：

<html>

<body>

<!--

document.write("Hello World!");

//-->

</script>

</body>

</html>

注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。

把 JavaScript 放置到何处

当页面载入时，会执行位于 body 部分的 JavaScript。

当被调用时，位于 head 部分的 JavaScript 才会被执行。

实例

head 部分

包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。

body 部分

执行位于 body 部分的脚本。

外部 JavaScript

如何访问外部脚本。

在哪里放置 JavaScript

页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。

位于 head 部分的脚本：

当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。

<html>

<head>

....

</script>

</head>

....

位于 body 部分的脚本：

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

<html>

<head>

</head>

<body>

....

</script>

</body>

</html>

在 body 和 head 部分的脚本：

你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。

<html>

<head>

....

</script>

</head>

<body>

....

</script>

</body>

</html>

使用外部 JavaScript

有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。

为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意：外部文件不能包含 <script> 标签。

然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了：

<html>

<head>

</head>

<body>

</body>

</html>

提示：您可以把 .js 文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。

JavaScript 语句

JavaScript 是由浏览器执行的语句序列。

JavaScript 语句

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

这个 JavaScript 语句告诉浏览器向网页输出 "Hello world"：

document.write("Hello world");

通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯，而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的（根据 JavaScript 标准），浏览器把行末作为语句的结尾。正因如此，常常会看到一些结尾没有分号的例子。

注释：通过使用分号，可以在一行中写多条语句。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

document.write("<h1>This is a header</h1>");

document.write("<p>This is a paragraph</p>");

document.write("<p>This is another paragraph</p>");

</script>

TIY

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

{

document.write("<h1>This is a header</h1>");

document.write("<p>This is a paragraph</p>");

document.write("<p>This is another paragraph</p>");

}

</script>

TIY

上例的用处不大。仅仅演示了代码块的使用而已。通常，代码块用于在函数或条件语句中把若干语句组合起来（比方说如果条件满足，就可以执行这个语句分组了）。

您会在稍后的章节学习到更多有关函数和条件的知识。

JavaScript 注释

JavaScript 注释可用于增强代码的可读性。

JavaScript 注释

可以添加注释来对 JavaScript 进行解释，或者提高其可读性。

单行的注释以 // 开始。

本例用单行注释来解释代码：

// 这行代码输出标题：

document.write("<h1>This is a header</h1>");

// 这行代码输出段落：

document.write("<p>This is a paragraph</p>");

document.write("<p>This is another paragraph</p>");

</script>

TIY

JavaScript 多行注释

多行注释以 /* 开头，以 */ 结尾。

本例使用多行注释来解释代码：

下面的代码将输出

一个标题和两个段落

document.write("<h1>This is a header</h1>");

document.write("<p>This is a paragraph</p>");

document.write("<p>This is another paragraph</p>");

</script>

TIY

使用注释来防止执行

在本例中，我们用注释来阻止一行代码的执行：

document.write("<h1>This is a header</h1>");

document.write("<p>This is a paragraph</p>");

//document.write("<p>This is another paragraph</p>");

</script>

TIY

在本例中，我们用注释来阻止若干行代码的执行：

document.write("<h1>This is a header</h1>");

document.write("<p>This is a paragraph</p>");

document.write("<p>This is another paragraph</p>");

</script>

TIY

在行末使用注释

在本例中，注释放置在语句的行末：

document.write("Hello"); // 输出 "Hello"

document.write("World"); // 输出 "World"

</script>

JavaScript 变量

变量是用于存储信息的容器：

x=5; length=66.10;

还记得在学校里学过的代数吗？

当您回忆在学校学过的代数课程时，想到的很可能是：x=5, y=6, z=x+y 等等。

还记得吗，一个字母可以保存一个值（比如 5），并且可以使用上面的信息计算出 z 的值是 11。

您一定没有忘记，对吧。

这些字母称为变量，变量可用于保存值 (x=5) 或表达式 (z=x+y)。

JavaScript 变量

正如代数一样，JavaScript 变量用于保存值或表达式。

可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。

JavaScript 变量也可以保存文本值，比如 carname="Volvo"。

JavaScript 变量名称的规则：

变量对大小写敏感（y 和 Y 是两个不同的变量）
变量必须以字母或下划线开始

注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

实例

在脚本执行的过程中，可以改变变量的值。可以通过其名称来引用一个变量，以此显示或改变它的值。

本例为您展示原理。

声明（创建） JavaScript 变量

在 JavaScript 中创建变量经常被称为“声明”变量。

您可以通过 var 语句来声明 JavaScript 变量：

var x;

var carname;

在以上声明之后，变量并没有值，不过您可以在声明它们时向变量赋值：

var x=5;

var carname="Volvo";

注释：在为变量赋文本值时，请为该值加引号。

向 JavaScript 变量赋值

通过赋值语句向 JavaScript 变量赋值：

x=5;

carname="Volvo";

变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。

在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。

向未声明的 JavaScript 变量赋值

如果您所赋值的变量还未进行过声明，该变量会自动声明。

这些语句：

x=5;

carname="Volvo";

与这些语句的效果相同：

var x=5;

var carname="Volvo";

重新声明 JavaScript 变量

如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。

var x=5;

var x;

在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。

JavaScript 算术

正如代数一样，您可以使用 JavaScript 变量来做算术：

y=x-5;

z=y+5;

在本教程的下一节中，您将学习能够在 JavaScript 变量间使用的运算符。

JavaScript 运算符

运算符 = 用于赋值。

运算符 + 用于加值。

运算符 = 用于给 JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

y=5;

z=2;

x=y+z;

在以上语句执行后，x 的值是 7。

JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。

给定 y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";

txt2="nice day";

txt3=txt1+txt2;

在以上语句执行后，变量 txt3 包含的值是 "What a verynice day"。

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

txt1="What a very ";

txt2="nice day";

txt3=txt1+txt2;

或者把空格插入表达式中：

txt1="What a very";

txt2="nice day";

txt3=txt1+" "+txt2;

在以上语句执行后，变量 txt3 包含的值是：

"What a very nice day"

对字符串和数字进行加法运算

请看这些例子：

x=5+5;

document.write(x);

x="5"+"5";

document.write(x);

x=5+"5";

document.write(x);

x="5"+5;

document.write(x);

TIY

规则是：

如果把数字与字符串相加，结果将成为字符串。

JavaScript 比较和逻辑运算符

比较和逻辑运算符用于测试 true 或 false。

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5，下面的表格解释了比较运算符：

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

如何使用

可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：

if (age<18) document.write("Too young");

您将在本教程的下一节中学习更多有关条件语句的知识。

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

JavaScript If...Else 语句

JavaScript 中的条件语句用于完成不同条件下的行为。

实例

If 语句

如何编写一个 If 语句。

If...else 语句

如何编写 if...else 语句。

If..else if...else 语句

如何编写 if..else if...else 语句

随机链接

本例演示一个随机的链接，当您单击这个链接时，会打开某个随机的网站。

条件语句

在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。

在 JavaScript 中，我们可以使用下面几种条件语句：

if 语句

在一个指定的条件成立时执行代码。

if...else 语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if...else if....else 语句

使用这个语句可以选择执行若干块代码中的一个。

switch 语句

使用这个语句可以选择执行若干块代码中的一个。

If 语句

如果希望指定的条件成立时执行代码，就可以使用这个语句。

语法：

if (条件)

{

条件成立时执行代码

}

注意：请使用小写字母。使用大写的 IF 会出错！

实例 1

//Write a "Good morning" greeting if

//the time is less than 10

var d=new Date()

var time=d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

</script>

实例 2

//Write "Lunch-time!" if the time is 11

var d=new Date()

var time=d.getHours()

if (time==11)

{

document.write("<b>Lunch-time!</b>")

}

</script>

注意：请使用双等号 (==) 来比较变量！

注意：在语法中没有 else。仅仅当条件为 true 时，代码才会执行。

If...else 语句

如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用 if....else 语句。

语法：

if (条件)

{

条件成立时执行此代码

}

else

{

条件不成立时执行此代码

}

实例

//If the time is less than 10,

//you will get a "Good morning" greeting.

//Otherwise you will get a "Good day" greeting.

var d = new Date()

var time = d.getHours()

if (time < 10)

{

document.write("Good morning!")

}

else

{

document.write("Good day!")

}

</script>

If...else if...else 语句

当需要选择多套代码中的一套来运行时，请使用 if....else if...else 语句。

语法：

if (条件1)

{

条件1成立时执行代码

}

else if (条件2)

{

条件2成立时执行代码

}

else

{

条件1和条件2均不成立时执行代码

}

实例：

var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>")

}

else if (time>10 && time<16)

{

document.write("<b>Good day</b>")

}

else

{

document.write("<b>Hello World!</b>")

}

</script>

JavaScript Switch 语句

JavaScript 中的条件语句用于完成基于不同条件的行为。

实例

Switch 语句

如何编写一个 Switch 语句。

JavaScript Switch 语句

如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：

语法：

switch(n)

{

case 1:

执行代码块 1

break

case 2:

执行代码块 2

break

default:

如果n即不是1也不是2，则执行此代码

}

工作原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。

实例：

//You will receive a different greeting based

//on what day it is. Note that Sunday=0,

//Monday=1, Tuesday=2, etc.

var d=new Date()

theDay=d.getDay()

switch (theDay)

{

case 5:

document.write("Finally Friday")

break

case 6:

document.write("Super Saturday")

break

case 0:

document.write("Sleepy Sunday")

break

default:

document.write("I'm looking forward to this weekend!")

}

</script>

JavaScript 消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

实例

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("文本")

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

function show_confirm()

{

var r=confirm("Press a button!");

if (r==true)

{

alert("You pressed OK!");

}

else

{

alert("You pressed Cancel!");

}

</script>

function disp_alert()

{

alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")

}

</script>

语法：

confirm("文本")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("文本","默认值")

<html>

<head>

<script type="text/javascript">

function disp_prompt()

{

var name=prompt("请输入您的名字","Bill Gates")

if (name!=null && name!="")

{

document.write("你好！" + name + " 今天过得怎么样？")

}

</script>

</head>

<body>

<input type="button" onclick="disp_prompt()" value="显示提示框" />

</body>

</html>

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

实例

函数

如何调用函数。

带有参数的函数

如何向函数传递变量，以及如何在函数中使用该变量。

带有参数的函数 2

如何向函数传递多个变量，以及如何在函数中使用这些变量。

返回值的函数

如何从函数返回值。

带有参数并返回值的函数

如何向函数输入两个参数值，并返回值。

JavaScript 函数

将脚本编写为函数，就可以避免页面载入时执行该脚本。

函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。

你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。

函数在页面起始位置定义，即 <head> 部分。

<html>

<head>

function displaymessage()

{

alert("Hello World!")

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

亲自试一试

假如上面的例子中的 alert("Hello world!!") 没有被写入函数，那么当页面被载入时它就会执行。现在，当用户击中按钮时，脚本才会执行。我们给按钮添加了 onClick 事件，这样按钮被点击时函数才会执行。

在 JS 事件这一章，你会学到更多关于 JavaScript 事件的知识。

如何定义函数

创建函数的语法：

function 函数名(var1,var2,...,varX)

{

代码．．．

}

var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。

注意：无参数的函数必须在其函数名后加括号：

function 函数名()

　　{

　　代码．．．

　　}

注意：别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。

return 语句

return 语句用来规定从函数返回的值。

因此，需要返回某个值的函数必须使用这个 return 语句。

例子

下面的函数会返回两个数相乘的值（a 和 b）：

function prod(a,b)

{

x=a*b

return x

}

当您调用上面这个函数时，必须传入两个参数：

product=prod(2,3)

而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。

JavaScript 变量的生存期

当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

JavaScript For 循环

JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。

实例

For 循环

如何编写 loop 循环来按照指定的次数执行相同的代码。

循环产生 HTML 标题

如何使用Loop循环来产生不同的HTML标题。

JavaScript 循环

在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。

JavaScript 有两种不同种类的循环：

for

将一段代码循环执行指定的次数

while

当指定的条件为 true 时循环执行代码

for 循环

在脚本的运行次数已确定的情况下使用 for 循环。

语法：

for (变量=开始值;变量<=结束值;变量=变量+步进值)

{

需执行的代码

}

实例：

解释：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。

注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。

<html>

<body>

var i=0

for (i=0;i<=10;i++)

{

document.write("The number is " + i)

document.write("<br />")

}

</script>

</body>

</html>

结果：

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

while 循环

我们将在下一节中学习 while 循环。

JavaScript While 循环

JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。

实例

While 循环

利用 while 循环在指定条件为 true 时来循环执行代码。

Do while 循环

利用 do...while 循环在指定条件为 true 时来循环执行代码。在即使条件为 false 时，这种循环也会至少执行一次。这是因为在条件被验证前，这个语句就会执行。

while 循环

while 循环用于在指定条件为 true 时循环执行代码。

语法：

while (变量<=结束值)

{

需执行的代码

}

注意：除了<=，还可以使用其他的比较运算符。

实例：

解释：下面的例子定义了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。

<html>

<body>

var i=0

while (i<=10)

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

</script>

</body>

</html>

结果：

The number is 0

The number is 1

The number is 2

The number is 3

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

do...while 循环

do...while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do...while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。

语法：

{

需执行的代码

}

while (变量<=结束值)

实例：

<html>

<body>

var i=0

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

while (i<0)

</script>

</body>

</html>

结果：

The number is 0

JavaScript Break 和 Continue

有两种可以用在循环中的语句：break 和 continue。

实例

break 语句

使用 break 语句来终止循环。

continue 语句

使用 continue 语句来终止当前的循环，然后从下一个值继续执行。

JavaScript break 和 continue 语句

有两种特殊的语句可用在循环内部：break 和 continue。

Break

break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。

实例：

<html>

<body>

var i=0

for (i=0;i<=10;i++)

{

if (i==3){break}

document.write("The number is " + i)

document.write("<br />")

}

</script>

</body>

</html>

结果：

The number is 0

The number is 1

The number is 2

Continue

continue 命令会终止当前的循环，然后从下一个值继续运行。

实例：

<html>

<body>

var i=0

for (i=0;i<=10;i++)

{

if (i==3){continue}

document.write("The number is " + i)

document.write("<br />")

}

</script>

</body>

</html>

结果：

The number is 0

The number is 1

The number is 2

The number is 4

The number is 5

The number is 6

The number is 7

The number is 8

The number is 9

The number is 10

JavaScript for...in 语句

for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。

实例

for...in 语句

如何使用 for...in 语句来遍历数组内的元素。

JavaScript for...in 语句

for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

语法：

for (变量 in 对象)

{

在此执行代码

}

“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。

实例：

使用 for ... in 循环遍历数组。

<html>

<body>

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

</body>

</html>

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

事件

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

如果需要更多有关 Javascript 可识别事件的知识，请阅读我们的 JavaScript 事件参考手册。

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn"

onmouseover="alert('An onMouseOver event');return false">

</a>

JavaScript Try...Catch 语句

try...catch 的作用是测试代码中的错误。

实例

try...catch 语句

如何编写 try...catch 语句。

带有确认框的 try...catch 语句

另一个编写 try...catch 语句的例子。

JavaScript - 捕获错误

当我们在网上冲浪时，总会看到带有 runtime 错误的 Javascript 警告框，同时会询问我们“是否进行 debug？”。像这样的错误信息或许对开发人员有用，对用户则未必。当错误发生时，他们往往会选择离开这个站点。

本节向你讲解如何捕获和处理 Javascript 的错误消息，这样就可以为受众提供更多的便利。

有两种在网页中捕获错误的方法：

使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

注意：chrome、opera 和 safari 浏览器不支持 onerror 事件。

Try...Catch 语句

try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。

语法：

try

{

//在此运行代码

}

catch(err)

{

//在此处理错误

}

注意：try...catch 使用小写字母。大写字母会出错。

实例 1

下面的例子原本用在用户点击按钮时显示 "Welcome guest!" 这个消息。不过 message() 函数中的 alert() 被误写为 adddlert()。这时错误发生了：

<html>

<head>

function message()

{

adddlert("Welcome guest!")

}

</script>

</head>

<body>

</body>

</html>

我们可以添加 try...catch 语句，这样当错误发生时可以采取更适当的措施。

下面的例子用 try...catch 语句重新修改了脚本。由于误写了 alert()，所以错误发生了。不过这一次，catch 部分捕获到了错误，并用一段准备好的代码来处理这个错误。这段代码会显示一个自定义的出错信息来告知用户所发生的事情。

<html>

<head>

var txt=""

function message()

{

try

{

adddlert("Welcome guest!")

}

catch(err)

{

txt="此页面存在一个错误。\n\n"

txt+="错误描述: " + err.description + "\n\n"

txt+="点击OK继续。\n\n"

alert(txt)

}

</script>

</head>

<body>

</body>

</html>

TIY

实例 2

下一个例子会显示一个确认框，让用户来选择在发生错误时点击确定按钮来继续浏览网页，还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false，代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true，那么代码什么也不会做。

<html>

<head>

var txt=""

function message()

{

try

{

adddlert("Welcome guest!")

}

catch(err)

{

txt="There was an error on this page.\n\n"

txt+="Click OK to continue viewing this page,\n"

txt+="or Cancel to return to the home page.\n\n"

if(!confirm(txt))

{

document.location.href="http://www.w3school.com.cn/"

}

</script>

</head>

<body>

</body>

</html>

TIY

onerror 事件

我们马上会讲解 onerror 事件。但首先您需要学习如何使用 throw 语句来创建异常。throw 语句可以与 try...catch 语句一起使用。

JavaScript Throw 声明

throw 声明的作用是创建 exception（异常或错误）。

实例

throw 声明

如何使用 throw 声明。

Throw 声明

throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。

语法：

throw(exception)

exception 可以是字符串、整数、逻辑值或者对象。

注意：使用小写字母编写 throw。使用大写字母会出错！

实例 1

下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。

<html>

<body>

var x=prompt("Enter a number between 0 and 10:","")

try

{

if(x>10)

throw "Err1"

else if(x<0)

throw "Err2"

}

catch(er)

{

if(er=="Err1")

alert("Error! The value is too high")

if(er == "Err2")

alert("Error! The value is too low")

}

</script>

</body>

</html>

JavaScript onerror 事件

使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。

实例

onerror 事件

如何使用 onerror 事件捕获网页中的错误。（chrome、opera、safari 浏览器不支持）

onerror 事件

我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。

只要页面中出现脚本错误，就会产生 onerror 事件。

如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。

语法：

onerror=handleErr

function handleErr(msg,url,l)

{

//Handle the error here

return true or false

}

浏览器是否显示标准的错误消息，取决于 onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

实例：

下面的例子展示如何使用 onerror 事件来捕获错误：

<html>

<head>

onerror=handleErr

var txt=""

function handleErr(msg,url,l)

{

txt="There was an error on this page.\n\n"

txt+="Error: " + msg + "\n"

txt+="URL: " + url + "\n"

txt+="Line: " + l + "\n\n"

txt+="Click OK to continue.\n\n"

alert(txt)

return true

}

function message()

{

adddlert("Welcome guest!")

}

</script>

</head>

<body>

</body>

</html>

JavaScript 特殊字符

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。

插入特殊字符

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

请看下面的 JavaScript 代码：

var txt="We are the so-called "Vikings" from the north."

document.write(txt)

在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为：We are the so-called。

要解决这个问题，就必须把在 "Viking" 中的引号前面加上反斜杠 (\)。这样就可以把每个双引号转换为字面上的字符串。

var txt="We are the so-called \"Vikings\" from the north."

document.write(txt)

现在 JavaScript 就可以输出正确的文本字符串了：We are the so-called "Vikings" from the north。

这是另一个例子：

document.write ("You \& me are singing!")

上面的例子会产生以下输出：

You & me are singing!

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：

代码	输出
\'	单引号
\"	双引号
\&	和号
\\	反斜杠
\n	换行符
\r	回车符
\t	制表符
\b	退格符
\f	换页符

JavaScript 指导方针

本节的内容是：在使用 JavaScript 进行编码的过程中，其他一些需要了解的重要事项。

JavaScript 对大小写敏感

名为 "myfunction" 的函数和名为 "myFunction" 的函数是两个不同的函数，同样，变量 "myVar" 和变量 "myvar" 也是不同的。

JavaScript 对大小写敏感 - 所以当您创建或使用变量、对象及函数时，请注意字符的大小写。

空格

JavaScript 会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：

name="Hege"

name = "Hege"

换行

您可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的：

document.write("Hello \

World!")

但是不能像这样折行：

document.write \

("Hello World!")

JavaScript 对象简介

JavaScript 是面向对象的编程语言 (OOP)。

OOP 语言使我们有能力自定义对象和变量类型。

面向对象编程

JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。

别着急，我们会在高级 JavaScript 的部分讲解如何创建自己的对象。现在，我们要开始学习内建的 JavaScript 对象，以及如何使用它们。从下一节开始，我们将具体地依次讲解的这些内建的 JavaScript 对象。

注意：对象只是一种特殊的数据。对象拥有属性和方法。

属性

属性指与对象有关的值。

在下面的例子中，我们使用字符串对象的长度属性来计算字符串中的字符数目。

var txt="Hello World!"

document.write(txt.length)

</script>

上面的代码输出为：

方法

方法指对象可以执行的行为（或者可以完成的功能）。

在下面的例子中，我们使用字符串对象的 toUpperCase() 方法来显示大写字母文本。

var str="Hello world!"

document.write(str.toUpperCase())

</script>

上面的代码输出为：

HELLO WORLD!

JavaScript 字符串(String)对象

String 对象

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);

String(s);

参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

String 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
constructor	对创建该对象的函数的引用	1	4
length	字符串的长度	1	3
prototype	允许您向对象添加属性和方法	1	4

String 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
anchor()	创建 HTML 锚。	1	3
big()	用大号字体显示字符串。	1	3
blink()	显示闪动字符串。	1
bold()	使用粗体显示字符串。	1	3
charAt()	返回在指定位置的字符。	1	3
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。	1	4
concat()	连接字符串。	1	4
fixed()	以打字机文本显示字符串。	1	3
fontcolor()	使用指定的颜色来显示字符串。	1	3
fontsize()	使用指定的尺寸来显示字符串。	1	3
fromCharCode()	从字符编码创建一个字符串。	1	4
indexOf()	检索字符串。	1	3
italics()	使用斜体显示字符串。	1	3
lastIndexOf()	从后向前搜索字符串。	1	3
link()	将字符串显示为链接。	1	3
localeCompare()	用本地特定的顺序来比较两个字符串。	1	4
match()	找到一个或多个正则表达式的匹配。	1	4
replace()	替换与正则表达式匹配的子串。	1	4
search()	检索与正则表达式相匹配的值。	1	4
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。	1	4
small()	使用小字号来显示字符串。	1	3
split()	把字符串分割为字符串数组。	1	4
strike()	使用删除线来显示字符串。	1	3
sub()	把字符串显示为下标。	1	3
substr()	从起始索引号提取字符串中指定数目的字符。	1	4
substring()	提取字符串中两个指定的索引号之间的字符。	1	3
sup()	把字符串显示为上标。	1	3
toLocaleLowerCase()	把字符串转换为小写。	-	-
toLocaleUpperCase()	把字符串转换为大写。	-	-
toLowerCase()	把字符串转换为小写。	1	3
toUpperCase()	把字符串转换为大写。	1	3
toSource()	代表对象的源代码。	1	-
toString()	返回字符串。	-	-
valueOf()	返回某个字符串对象的原始值。	1	4

String 对象描述

字符串是 JavaScript 的一种基本的数据类型。

String 对象的 length 属性声明了该字符串中的字符数。

String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。

需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中），字符串的行为就像只读的字符数组。例如，从字符串 s 中提取第三个字符，可以用 s[2] 代替更加标准的 s.charAt(2)。此外，对字符串应用 for/in 循环时，它将枚举字符串中每个字符的数组下标（但要注意，ECMAScript 标准规定，不能枚举 length 属性）。因为字符串的数组行为不标准，所以应该避免使用它。

JavaScript Date（日期）对象

日期对象用于处理日期和时间。

JavaScript Date（日期）对象实例

返回当日的日期和时间

如何使用 Date() 方法获得当日的日期。

getTime()

getTime() 返回从1970 年 1月 1 日至今的毫秒数。

setFullYear()

如何使用 setFullYear() 设置具体的日期。

toUTCString()

如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()

如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

显示一个钟表

如何在网页上显示一个钟表。

完整的 Date 对象参考手册

我们提供 JavaScript Date 对象参考手册，其中包括所有可用于日期对象的属性和方法。

该手册包含了对每个属性和方法的详细描述以及相关实例。

定义日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

var myDate=new Date()

注释：Date 对象自动使用当前的日期和时间作为其初始值。

操作日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()

myDate.setFullYear(2008,7,9)

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date()

myDate.setDate(myDate.getDate()+5)

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

比较日期

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2008 年 8 月 9 日做了比较：

var myDate=new Date();

myDate.setFullYear(2008,7,9);

var today = new Date();

if (myDate>today)

{

alert("Today is before 9th August 2008");

}

else

{

alert("Today is after 9th August 2008");

}

Date 对象

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
constructor	返回对创建此对象的 Date 函数的引用。	1	4
prototype	使您有能力向对象添加属性和方法。	1	4

Date 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
Date()	返回当日的日期和时间。	1	3
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。	1	3
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。	1	3
getMonth()	从 Date 对象返回月份 (0 ~ 11)。	1	3
getFullYear()	从 Date 对象以四位数字返回年份。	1	4
getYear()	请使用 getFullYear() 方法代替。	1	3
getHours()	返回 Date 对象的小时 (0 ~ 23)。	1	3
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。	1	3
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。	1	3
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。	1	4
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。	1	3
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。	1	3
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。	1	4
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。	1	4
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。	1	4
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。	1	4
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。	1	4
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。	1	4
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。	1	4
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。	1	4
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。	1	3
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。	1	3
setMonth()	设置 Date 对象中月份 (0 ~ 11)。	1	3
setFullYear()	设置 Date 对象中的年份（四位数字）。	1	4
setYear()	请使用 setFullYear() 方法代替。	1	3
setHours()	设置 Date 对象中的小时 (0 ~ 23)。	1	3
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。	1	3
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。	1	3
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。	1	4
setTime()	以毫秒设置 Date 对象。	1	3
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。	1	4
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。	1	4
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。	1	4
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。	1	4
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。	1	4
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。	1	4
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。	1	4
toSource()	返回该对象的源代码。	1	-
toString()	把 Date 对象转换为字符串。	1	4
toTimeString()	把 Date 对象的时间部分转换为字符串。	1	4
toDateString()	把 Date 对象的日期部分转换为字符串。	1	4
toGMTString()	请使用 toUTCString() 方法代替。	1	3
toUTCString()	根据世界时，把 Date 对象转换为字符串。	1	4
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。	1	3
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。	1	3
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。	1	3
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。	1	3
valueOf()	返回 Date 对象的原始值。

JavaScript Array（数组）对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

实例

创建数组

创建数组，为其赋值，然后输出这些值。

For...In 声明

使用 for...in 声明来循环输出数组中的元素。

合并两个数组 - concat()

如何使用 concat() 方法来合并两个数组。

用数组的元素组成字符串 - join()

如何使用 join() 方法将数组的所有元素组成一个字符串。

文字数组 - sort()

如何使用 sort() 方法从字面上对数组进行排序。

数字数组 - sort()

如何使用 sort() 方法从数值上对数组进行排序。

完整的 Array 对象参考手册

我们提供 JavaScript Array 对象参考手册，其中包括所有可用于数组对象的属性和方法。

该手册包含了对每个属性和方法的详细描述以及相关实例。

定义数组

数组对象用来在单独的变量名中存储一系列的值。

我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：

var myArray=new Array()

有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。

var mycars=new Array()

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

也可以使用一个整数自变量来控制数组的容量：

var mycars=new Array(3)

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

var mycars=new Array("Saab","Volvo","BMW")

注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

下面是代码行：

document.write(mycars[0])

下面是输出：

Saab

修改已有数组中的值

如需修改已有数组中的值，只要向指定下标号添加一个新值即可：

mycars[0]="Opel";

现在，以上代码：

document.write(mycars[0]);

将输出：

Opel

Array 对象

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：

new Array();

new Array(size);

new Array(element0, element1, ..., elementn);

参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Array 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
constructor	返回对创建此对象的数组函数的引用。	1	4
index		1	4
input		1	4
length	设置或返回数组中元素的数目。	1	4
prototype	使您有能力向对象添加属性和方法。	1	4

Array 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
concat()	连接两个或更多的数组，并返回结果。	1	4
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。	1	4
pop()	删除并返回数组的最后一个元素	1	5.5
push()	向数组的末尾添加一个或更多元素，并返回新的长度。	1	5.5
reverse()	颠倒数组中元素的顺序。	1	4
shift()	删除并返回数组的第一个元素	1	5.5
slice()	从某个已有的数组返回选定的元素	1	4
sort()	对数组的元素进行排序	1	4
splice()	删除元素，并向数组添加新元素。	1	5.5
toSource()	返回该对象的源代码。	1	-
toString()	把数组转换为字符串，并返回结果。	1	4
toLocaleString()	把数组转换为本地数组，并返回结果。	1	4
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	1	6
valueOf()	返回数组对象的原始值	1	4

JavaScript Boolean（逻辑）对象

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

实例

检查逻辑值

检查逻辑对象是 true 还是 false。

完整的 Boolean 对象参考手册

我们提供 JavaScript Boolean 对象参考手册，其中包括所有可用于逻辑对象的属性和方法。

该手册包含了对每个属性和方法的详细描述以及相关实例。

Boolean 对象

您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：

var myBoolean=new Boolean()

注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！

下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。

var myBoolean=new Boolean();

var myBoolean=new Boolean(0);

var myBoolean=new Boolean(null);

var myBoolean=new Boolean("");

var myBoolean=new Boolean(false);

var myBoolean=new Boolean(NaN);

亲自试一试

下面的所有的代码行均会创初始值为 true 的 Boolean 对象：

var myBoolean=new Boolean(1);

var myBoolean=new Boolean(true);

var myBoolean=new Boolean("true");

var myBoolean=new Boolean("false");

var myBoolean=new Boolean("Bill Gates");

亲自试一试

JavaScript Math（算数）对象

Math（算数）对象的作用是：执行常见的算数任务。

实例

round()

如何使用 round()。

random()

如何使用 random() 来返回 0 到 1 之间的随机数。

max()

如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

min()

如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

完整的 Math 对象参考手册

我们提供 JavaScript Math 对象的参考手册，其中包括所有可用于算术对象的属性和方法。

该手册包含了对每个属性和方法的详细描述以及相关实例。

Math 对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。

函数（方法）实例：

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7))

上面的代码输出为：

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：

document.write(Math.random())

上面的代码输出为：

0.9370844220218102

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：

document.write(Math.floor(Math.random()*11))

上面的代码输出为：

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
E	返回算术常量 e，即自然对数的底数（约等于2.718）。	1	3
LN2	返回 2 的自然对数（约等于0.693）。	1	3
LN10	返回 10 的自然对数（约等于2.302）。	1	3
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。	1	3
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。	1	3
PI	返回圆周率（约等于3.14159）。	1	3
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。	1	3
SQRT2	返回 2 的平方根（约等于 1.414）。	1	3

Math 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
abs(x)	返回数的绝对值。	1	3
acos(x)	返回数的反余弦值。	1	3
asin(x)	返回数的反正弦值。	1	3
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。	1	3
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。	1	3
ceil(x)	对数进行上舍入。	1	3
cos(x)	返回数的余弦。	1	3
exp(x)	返回 e 的指数。	1	3
floor(x)	对数进行下舍入。	1	3
log(x)	返回数的自然对数（底为e）。	1	3
max(x,y)	返回 x 和 y 中的最高值。	1	3
min(x,y)	返回 x 和 y 中的最低值。	1	3
pow(x,y)	返回 x 的 y 次幂。	1	3
random()	返回 0 ~ 1 之间的随机数。	1	3
round(x)	把数四舍五入为最接近的整数。	1	3
sin(x)	返回数的正弦。	1	3
sqrt(x)	返回数的平方根。	1	3
tan(x)	返回角的正切。	1	3
toSource()	返回该对象的源代码。	1	-
valueOf()	返回 Math 对象的原始值。

JavaScript RegExp 对象

RegExp 对象用于规定在文本中检索的内容。

什么是 RegExp？

RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

true

TIY

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

例子 1：

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

TIY

例子 2：

您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。

如需关于如何修改搜索模式的完整信息，请访问我们的 RegExp 对象参考手册。

在使用 "g" 参数时，exec() 的工作原理如下：

找到第一个 "e"，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置

var patt1=new RegExp("e","g");

{

result=patt1.exec("The best things in life are free");

document.write(result);

}

while (result!=null)

由于这个字符串中 6 个 "e" 字母，代码的输出将是：

eeeeeenull

TIY

compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

例子：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

truefalse

TIY

完整的 RegExp 对象参考手册

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	查找位于单词的开头或结尾的匹配。
\B	查找不处在单词的开头或结尾的匹配。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

JavaScript 浏览器检测

实例

检测浏览器及版本

使用 JavaScript 检测关于访问者的浏览器名称及其版本。

检测浏览器的更多信息

使用 JavaScript 检测关于访问者浏览器的更多信息。

检测浏览器的全部信息

使用 JavaScript 检测关于访问者浏览器的全部信息。

根据浏览器类型提醒用户

使用 JavaScript 检测关于访问者的浏览器名称及其版本，然后根据这些信息生成不同内容的警告框。

浏览器检测

本教程中几乎所有的代码均可在任何支持 JavaScript 的浏览器中运行。不过个别的代码无法运行于特定的浏览器，特别是老式的浏览器。

所以，有些时候对访问者的浏览器类型及版本进行检测是很有帮助的，然后可在此基础上为访问者提供合适的信息。

要做到这一点，最好的办法是使你的网页变得足够聪明，这样的话它就可以不同的方式对待不同类型的浏览器。

JavaScript 包含一个名为 Navigator 的对象，它就可以完成上述的任务。

Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等。

Navigator 对象

JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。接下来我们学习 Navigator 对象的两个属性。

appName

保存浏览器类型

appVersion

存有浏览器的版本信息（其他信息中的一项）

实例

<html>

<body>

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

document.write("Browser name: "+ browser)

document.write("<br />")

document.write("Browser version: "+ version)

</script>

</body>

</html>

上面例子中的 browser 变量存有浏览器的名称，比如，"Netscape" 或者 "Microsoft Internet Explorer"。

上面例子中的 appVersion 属性返回的字符串所包含的信息不止是版本号而已，但是现在我们只关注版本号。我们使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。

重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。怎么会出现这样的错误呢？无论如何，我们需要清楚的是，JavaScript 在 IE6、IE5 和 IE4 中的获得的版本号是相同的。

实例

下面的脚本会根据访问者的浏览器类型显示不同的警告。

<html>

<head>

function detectBrowser()

{

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")

&& (version>=4))

{alert("Your browser is good enough!")}

else

{alert("It's time to upgrade your browser!")}

}

</script>

</head>

</body>

</html>

JavaScript Cookies

cookie 用来识别用户。

实例

创建一个欢迎 cookie

利用用户在提示框中输入的数据创建一个 JavaScript Cookie，当该用户再次访问该页面时，根据 cookie 中的信息发出欢迎信息。

什么是cookie?

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

有关cookie的例子：

名字 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie

当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

创建和存储 cookie

在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。

首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：

function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

之后，我们要创建另一个函数来检查是否已设置 cookie：

function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=")

if (c_start!=-1)

{

c_start=c_start + c_name.length+1

c_end=document.cookie.indexOf(";",c_start)

if (c_end==-1) c_end=document.cookie.length

return unescape(document.cookie.substring(c_start,c_end))

}

return ""

}

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。

最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

{alert('Welcome again '+username+'!')}

else

{

username=prompt('Please enter your name:',"")

if (username!=null && username!="")

{

setCookie('username',username,365)

}

这是所有的代码：

<html>

<head>

function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=")

if (c_start!=-1)

{

c_start=c_start + c_name.length+1

c_end=document.cookie.indexOf(";",c_start)

if (c_end==-1) c_end=document.cookie.length

return unescape(document.cookie.substring(c_start,c_end))

}

return ""

}

function setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

{alert('Welcome again '+username+'!')}

else

{

username=prompt('Please enter your name:',"")

if (username!=null && username!="")

{

setCookie('username',username,365)

}

</script>

</head>

</body>

</html>

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

下面是连同 HTML 表单的代码：

<html>

<head>

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

</script>

</head>

<body>

Email: <input type="text" name="email" size="30">

</form>

</body>

</html>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

下面是连同 HTML 表单的完整代码：

<html>

<head>

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_email(email,"Not a valid e-mail address!")==false)

{email.focus();return false}

}

</script>

</head>

<body>

Email: <input type="text" name="email" size="30">

</form>

</body>

</html>

JavaScript 动画

我们可以使用 JavaScript 来创建动态的图像。

实例

按钮动画

利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。

JavaScript 动画

使用 JavaScript 创建动态图像是可行的。

窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。

在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。

HTML 代码

这是 HTML 代码：

<img border="0" alt="Visit W3School!"

src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。

onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。

onMouseOut 事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。

JavaScript 代码

通过下面的代码来切换图像：

function mouseOver()

{

document.b1.src ="/i/eg_mouse.jpg"

}

function mouseOut()

{

document.b1.src ="/i/eg_mouse2.jpg"

}

</script>

函数 mouseOver() 将图像切换为 "eg_mouse.jpg"。

函数 mouseOut() 将图像切换为 "eg_mouse2.jpg"。

完整的代码：

<html>

<head>

function mouseOver()

{

document.b1.src ="/i/eg_mouse.jpg"

}

function mouseOut()

{

document.b1.src ="/i/eg_mouse2.jpg"

}

</script>

</head>

<body>

<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

</body>

</html>

JavaScript 计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

实例

简单的计时

单击本例中的按钮后，会在 5 秒后弹出一个警告框。

另一个简单的计时

本例中的程序会执行 2 秒、4 秒和 6 秒的计时。

在一个无穷循环中的计时事件

在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。

带有停止按钮的无穷循环中的计时事件

在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。

使用计时事件制作的钟表

一个 JavaScript 小时钟

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例

当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。

<html>

<head>

function timedMsg()

{

var t=setTimeout("alert('5 seconds!')",5000)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

实例 - 无穷循环

要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。

<html>

<head>

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

clearTimeout()

语法

clearTimeout(setTimeout_variable)

实例

下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

<html>

<head>

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)

}

function stopCount()

{

clearTimeout(t)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

JavaScript制作时钟：

<html>

<head>

<script type="text/javascript">

function startTime()

{

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

// add a zero in front of numbers<10

m=checkTime(m)

s=checkTime(s)

document.getElementById('txt').innerHTML=h+":"+m+":"+s

t=setTimeout('startTime()',500)

}

function checkTime(i)

{

if (i<10)

{i="0" + i}

return i

}

</script>

</head>

<body onload="startTime()">

<div id="txt"></div>

</body>

</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java vr城市全景图 java velocity教程

下一篇：Android 开发如何获取声音安卓开发播放音频

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

javascript 新技术 简述javascript技术

javascript 新技术 简述javascript技术

51CTO博客

javascript 新技术简述javascript技术

javascript 新技术简述javascript技术