JavaScript 快速指南

什么是 JavaScript？

JavaScript 是一种动态的计算机编程语言。它轻量级且最常用于网页的一部分，其实现允许客户端脚本与用户交互并创建动态页面。它是一种具有面向对象功能的解释型编程语言。

JavaScript 最初被称为LiveScript，但 Netscape 将其名称更改为 JavaScript，可能是因为 Java 产生的兴奋。JavaScript 于 1995 年在 Netscape 2.0 中首次以LiveScript 的名称出现。该语言的通用核心已嵌入 Netscape、Internet Explorer 和其他 Web 浏览器中。

ECMA-262 规范定义了核心 JavaScript 语言的标准版本。

JavaScript 是一种轻量级、解释型的编程语言。
旨在创建网络中心应用程序。
与 Java 相辅相成并集成。
与 HTML 相辅相成并集成。
开放且跨平台

客户端 JavaScript

客户端 JavaScript 是该语言最常见的形式。脚本应包含在 HTML 文档中或由 HTML 文档引用，以便浏览器解释代码。

这意味着网页不必是静态 HTML，而是可以包含与用户交互、控制浏览器以及动态创建 HTML 内容的程序。

JavaScript 客户端机制相较于传统的 CGI 服务器端脚本提供了许多优势。例如，您可以使用 JavaScript 检查用户是否在表单字段中输入了有效的电子邮件地址。

当用户提交表单时，将执行 JavaScript 代码，并且只有在所有条目均有效时，才会将其提交到 Web 服务器。

JavaScript 可用于捕获用户发起的事件，例如按钮点击、链接导航以及用户显式或隐式发起的其他操作。

JavaScript 的优点

使用 JavaScript 的优点如下：

减少服务器交互 - 您可以先验证用户输入，然后再将页面发送到服务器。这节省了服务器流量，这意味着服务器负载更小。
立即向访问者提供反馈 - 他们不必等待页面重新加载才能查看他们是否忘记输入内容。
增强的交互性 - 您可以创建在用户将鼠标悬停在其上或通过键盘激活时做出反应的界面。
更丰富的界面 - 您可以使用 JavaScript 包含诸如拖放组件和滑块之类的项目，为您的网站访问者提供丰富的界面。

JavaScript 的局限性

我们不能将 JavaScript 视为一门完整的编程语言。它缺少以下重要功能：

客户端 JavaScript 不允许读取或写入文件。出于安全原因，此功能被保留。
JavaScript 不能用于网络应用程序，因为没有可用的此类支持。
JavaScript 没有任何多线程或多处理器功能。

再次强调，JavaScript 是一种轻量级、解释型的编程语言，允许您在原本静态的 HTML 页面中构建交互性。

JavaScript 开发工具

JavaScript 的主要优势之一是它不需要昂贵的开发工具。您可以从简单的文本编辑器（如记事本）开始。由于它是在 Web 浏览器的上下文中解释的语言，因此您甚至不需要购买编译器。

为了简化我们的工作，各种供应商推出了非常不错的 JavaScript 编辑工具。其中一些列在下面：

Microsoft FrontPage - Microsoft 开发了一种流行的 HTML 编辑器，称为 FrontPage。FrontPage 还为 Web 开发人员提供了一些 JavaScript 工具，以帮助创建交互式网站。
Macromedia Dreamweaver MX - Macromedia Dreamweaver MX 是专业 Web 开发人员中非常流行的 HTML 和 JavaScript 编辑器。它提供了几个方便的预构建 JavaScript 组件，与数据库很好地集成，并符合 XHTML 和 XML 等新标准。
Macromedia HomeSite 5 − HomeSite 5 是一款广受欢迎的来自 Macromedia 的 HTML 和 JavaScript 编辑器，可用于有效管理个人网站。

JavaScript 的现状如何？

ECMAScript 第 5 版标准将是四年多来发布的第一个更新。JavaScript 2.0 符合 ECMAScript 标准的第 5 版，两者之间的差异非常小。

JavaScript 2.0 的规范可以在以下网站找到：https://www-archive.mozilla.org/js/language/js20-2002-04/

如今，Netscape 的 JavaScript 和 Microsoft 的 JScript 符合 ECMAScript 标准，尽管这两种语言仍然支持不属于该标准的功能。

JavaScript - 语法

JavaScript 可以使用放置在网页中<script>... </script> HTML 标签内的 JavaScript 语句来实现。

您可以在网页中的任何位置放置包含 JavaScript 的<script> 标签，但通常建议您将其保留在<head> 标签内。

<script ...>
   JavaScript code
</script>

script 标签有两个重要的属性 -

Language − 此属性指定您正在使用的脚本语言。通常，其值为 javascript。尽管最新版本的 HTML（及其继任者 XHTML）已逐步淘汰此属性的使用。
Type − 此属性现在建议用于指示正在使用的脚本语言，其值应设置为“text/javascript”。

因此，您的 JavaScript 代码段将如下所示 -

<script language = "javascript" type = "text/javascript">
   JavaScript code
</script>

您的第一个 JavaScript 代码

让我们以一个打印“Hello World”的示例为例。我们添加了一个可选的 HTML 注释，用于包围我们的 JavaScript 代码。这样做是为了将我们的代码保存到不支持 JavaScript 的浏览器中。注释以“//-->”结尾。这里“//”表示 JavaScript 中的注释，因此我们添加它以防止浏览器将 HTML 注释的结尾读取为 JavaScript 代码的一部分。接下来，我们调用一个函数document.write，它将字符串写入我们的 HTML 文档。

此函数可用于写入文本、HTML 或两者兼而有之。请查看以下代码。

实时演示

<html>
   <body>   
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>      
   </body>
</html>

此代码将产生以下结果 -

Hello World!

空白字符和换行符

JavaScript 忽略 JavaScript 程序中出现的空格、制表符和换行符。您可以在程序中自由使用空格、制表符和换行符，并且可以自由地以整洁一致的方式格式化和缩进程序，使代码易于阅读和理解。

分号是可选的

JavaScript 中的简单语句通常后跟一个分号字符，就像在 C、C++ 和 Java 中一样。但是，如果您的每个语句都放在单独一行，JavaScript 允许您省略此分号。例如，以下代码可以在不使用分号的情况下编写。

<script language = "javascript" type = "text/javascript">
   <!--
      var1 = 10
      var2 = 20
   //-->
</script>

但是当以单行格式化如下时，您必须使用分号 -

<script language = "javascript" type = "text/javascript">
   <!--
      var1 = 10; var2 = 20;
   //-->
</script>

注意 − 使用分号是一种良好的编程习惯。

大小写敏感

JavaScript 是一种大小写敏感的语言。这意味着语言关键字、变量、函数名以及任何其他标识符必须始终以一致的大写字母键入。

因此，标识符Time 和TIME 在 JavaScript 中将传达不同的含义。

注意 − 在 JavaScript 中编写变量和函数名称时应注意。

JavaScript 中的注释

JavaScript 支持 C 样式和 C++ 样式的注释，因此 -

// 和行尾之间的任何文本都被视为注释，JavaScript 会忽略它。
/* 和 */ 字符之间的任何文本都被视为注释。这可能跨越多行。
JavaScript 还识别 HTML 注释开始序列<!--。JavaScript 将其视为单行注释，就像 // 注释一样。
HTML 注释结束序列 --> 未被 JavaScript 识别，因此应写为 //-->。

示例

以下示例演示如何在 JavaScript 中使用注释。

<script language = "javascript" type = "text/javascript">
   <!--
      // This is a comment. It is similar to comments in C++
   
      /*
      * This is a multi-line comment in JavaScript
      * It is very similar to comments in C Programming
      */
   //-->
</script>

在浏览器中启用 JavaScript

所有现代浏览器都内置支持 JavaScript。通常，您可能需要手动启用或禁用此支持。本章介绍如何在浏览器（Internet Explorer、Firefox、Chrome 和 Opera）中启用和禁用 JavaScript 支持的过程。

Internet Explorer 中的 JavaScript

以下是在 Internet Explorer 中打开或关闭 JavaScript 的简单步骤 -

从菜单中依次选择工具 → Internet 选项。
从对话框中选择安全选项卡。
单击自定义级别按钮。
向下滚动直到找到脚本编写选项。
在活动脚本下选择启用单选按钮。
最后单击确定并退出

要在 Internet Explorer 中禁用 JavaScript 支持，您需要在活动脚本下选择禁用单选按钮。

Firefox 中的 JavaScript

以下是在 Firefox 中打开或关闭 JavaScript 的步骤 -

打开一个新标签页 → 在地址栏中输入about:config。
然后您将找到警告对话框。选择我保证会小心！
然后您将在浏览器中找到配置选项列表。
在搜索栏中，输入javascript.enabled。
您将在那里找到通过右键单击该选项的值 →选择切换来启用或禁用 javascript 的选项。

如果 javascript.enabled 为 true；则在单击切换时将其转换为 false。如果 javascript 已禁用；则在单击切换时将其启用。

Chrome 中的 JavaScript

以下是在 Chrome 中打开或关闭 JavaScript 的步骤 -

单击浏览器右上角的 Chrome 菜单。
选择设置。
单击页面末尾的显示高级设置。
在隐私权部分，单击内容设置按钮。
在“Javascript”部分，选择“不允许任何网站运行 JavaScript”或“允许所有网站运行 JavaScript（推荐）”。

Opera 中的 JavaScript

以下是在 Opera 中打开或关闭 JavaScript 的步骤 -

从菜单中依次选择工具 → 首选项。
从对话框中选择高级选项。
从列出的项目中选择内容。
选中启用 JavaScript复选框。
最后单击确定并退出。

要在 Opera 中禁用 JavaScript 支持，您不应选中启用 JavaScript 复选框。

针对非 JavaScript 浏览器的警告

如果您必须使用 JavaScript 执行某些重要操作，则可以使用<noscript>标签向用户显示警告消息。

您可以按如下方式在脚本块之后立即添加noscript块 -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>
      
      <noscript>
         Sorry...JavaScript is needed to go ahead.
      </noscript>      
   </body>
</html>

现在，如果用户的浏览器不支持 JavaScript 或未启用 JavaScript，则屏幕上将显示来自</noscript>的消息。

JavaScript - 在 HTML 文件中的位置

可以在 HTML 文档中的任何位置包含 JavaScript 代码。但是，在 HTML 文件中包含 JavaScript 的最优方法如下 -

在<head>...</head>部分中的脚本。
在<body>...</body>部分中的脚本。
在<body>...</body>和<head>...</head>部分中的脚本。
在外部文件中编写脚本，然后包含在<head>...</head>部分中。

在下一节中，我们将了解如何以不同的方式将 JavaScript 放置在 HTML 文件中。

在<head>...</head>部分中的 JavaScript

如果希望在某些事件（例如用户单击某个位置）发生时运行脚本，则会按如下方式将该脚本放在 head 中 -

实时演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

此代码将产生以下结果 -

在<body>...</body>部分中的 JavaScript

如果需要脚本在页面加载时运行，以便脚本在页面中生成内容，则脚本位于文档的<body>部分。在这种情况下，您不会使用 JavaScript 定义任何函数。请查看以下代码。

实时演示

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

此代码将产生以下结果 -

在<body>和<head>部分中的 JavaScript

您可以将 JavaScript 代码全部放在<head>和<body>部分中，如下所示 -

实时演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

此代码将产生以下结果 -

外部文件中的 JavaScript

随着您开始更广泛地使用 JavaScript，您可能会发现某些情况下您在一个站点的多个页面上重复使用相同的 JavaScript 代码。

您无需在多个 HTML 文件中维护相同的代码。script标签提供了一种机制，允许您将 JavaScript 存储在外部文件中，然后将其包含到您的 HTML 文件中。

以下是一个示例，说明如何使用script标签及其src属性在 HTML 代码中包含外部 JavaScript 文件。

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

要使用来自外部文件源的 JavaScript，您需要将所有 JavaScript 源代码写入一个扩展名为“.js”的简单文本文件中，然后按上述方式包含该文件。

例如，您可以将以下内容保存在filename.js文件中，然后在包含 filename.js 文件后，可以在 HTML 文件中使用sayHello函数。

function sayHello() {
   alert("Hello World")
}

JavaScript - 变量

JavaScript 数据类型

编程语言最基本的特点之一是它支持的数据类型集。这些是在编程语言中可以表示和操作的值的类型。

JavaScript 允许您使用三种基本数据类型 -

数字，例如 123、120.50 等。
文本字符串，例如“This text string”等。
布尔值，例如 true 或 false。

JavaScript 还定义了两种简单数据类型，null和undefined，它们各自只定义一个值。除了这些基本数据类型之外，JavaScript 还支持一种称为对象的复合数据类型。我们将在单独的章节中详细介绍对象。

注意 − JavaScript 并不区分整数值和浮点值。JavaScript 中的所有数字都表示为浮点值。JavaScript 使用 IEEE 754 标准定义的 64 位浮点格式表示数字。

JavaScript 变量

与许多其他编程语言一样，JavaScript 也有变量。变量可以认为是命名的容器。您可以将数据放入这些容器中，然后只需命名容器即可引用数据。

在 JavaScript 程序中使用变量之前，必须先声明它。变量使用var关键字声明，如下所示。

<script type = "text/javascript">
   <!--
      var money;
      var name;
   //-->
</script>

您还可以使用相同的var关键字声明多个变量，如下所示 -

<script type = "text/javascript">
   <!--
      var money, name;
   //-->
</script>

将值存储在变量中称为变量初始化。您可以在创建变量时或稍后在需要该变量时进行变量初始化。

例如，您可以创建一个名为money的变量，并稍后为其分配值 2000.50。对于另一个变量，您可以在初始化时分配一个值，如下所示。

<script type = "text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

注意 − 仅在声明或初始化时使用var关键字，在文档中任何变量名称的生命周期内仅使用一次。您不应重新声明相同的变量两次。

JavaScript 是一种无类型语言。这意味着 JavaScript 变量可以保存任何数据类型的值。与许多其他语言不同，您不必在变量声明期间告诉 JavaScript 变量将保存哪种类型的值。变量的值类型可以在程序执行期间更改，JavaScript 会自动处理它。

JavaScript 变量作用域

变量的作用域是定义它的程序区域。JavaScript 变量只有两个作用域。

全局变量 − 全局变量具有全局作用域，这意味着它可以在 JavaScript 代码的任何位置定义。
局部变量 − 局部变量仅在其定义的函数内可见。函数参数始终是该函数的局部变量。

在函数体内部，局部变量优先于同名全局变量。如果你声明了一个与全局变量同名的局部变量或函数参数，那么你实际上就隐藏了全局变量。请查看以下示例。

实时演示

<html>
   <body onload = checkscope();>   
      <script type = "text/javascript">
         <!--
            var myVar = "global";      // Declare a global variable
            function checkscope( ) {
               var myVar = "local";    // Declare a local variable
               document.write(myVar);
            }
         //-->
      </script>     
   </body>
</html>

这将产生以下结果 -

local

JavaScript 变量命名

在 JavaScript 中命名变量时，请记住以下规则。

你不应该使用任何 JavaScript 保留关键字作为变量名。这些关键字将在下一节中提到。例如，break 或 boolean 变量名无效。
JavaScript 变量名不能以数字 (0-9) 开头。它们必须以字母或下划线字符开头。例如，123test 是一个无效的变量名，但 _123test 是一个有效的变量名。
JavaScript 变量名区分大小写。例如，Name 和 name 是两个不同的变量。

JavaScript 保留字

下表列出了 JavaScript 中的所有保留字。它们不能用作 JavaScript 变量、函数、方法、循环标签或任何对象名称。

abstract	else	instanceof	switch
boolean	enum	int	synchronized
break	export	interface	this
byte	extends	long	throw
case	false	native	throws
catch	final	new	transient
char	finally	null	true
class	float	package	try
const	for	private	typeof
continue	function	protected	var
debugger	goto	public	void
default	if	return	volatile
delete	implements	short	while
do	import	static	with
double	in	super

JavaScript - 运算符

什么是运算符？

让我们来看一个简单的表达式 4 + 5 等于 9。这里 4 和 5 被称为 操作数，而 ‘+’ 被称为 运算符。JavaScript 支持以下类型的运算符。

算术运算符
比较运算符
逻辑（或关系）运算符
赋值运算符
条件（或三元）运算符

让我们逐一了解所有运算符。

算术运算符

JavaScript 支持以下算术运算符 -

假设变量 A 持有 10，变量 B 持有 20，则 -

序号	运算符 & 描述
1	+ (加法) 将两个操作数相加例如：A + B 将得到 30
2	- (减法) 从第一个操作数中减去第二个操作数例如：A - B 将得到 -10
3	* (乘法) 将两个操作数相乘例如：A * B 将得到 200
4	/ (除法) 将分子除以分母例如：B / A 将得到 2
5	% (模) 输出整数除法的余数例如：B % A 将得到 0
6	++ (自增) 将整数值增加 1 例如：A++ 将得到 11
7	-- (自减) 将整数值减少 1 例如：A-- 将得到 9

注意 - 加法运算符 (+) 适用于数字和字符串。例如 "a" + 10 将得到 "a10"。

示例

以下代码显示了如何在 JavaScript 中使用算术运算符。

实时演示

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br />";
         
            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a / b = ");
            result = a / b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a % b = ");
            result = a % b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a + b + c = ");
            result = a + b + c;
            document.write(result);
            document.write(linebreak);
         
            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);
         
            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>
      
      Set the variables to different values and then try...
   </body>
</html>

输出

a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

比较运算符

JavaScript 支持以下比较运算符 -

假设变量 A 持有 10，变量 B 持有 20，则 -

序号	运算符 & 描述
1	= = (等于) 检查两个操作数的值是否相等，如果相等，则条件变为真。例如：(A == B) 为假。
2	!= (不等于) 检查两个操作数的值是否相等，如果值不相等，则条件变为真。例如：(A != B) 为真。
3	> (大于) 检查左侧操作数的值是否大于右侧操作数的值，如果大于，则条件变为真。例如：(A > B) 为假。
4	< (小于) 检查左侧操作数的值是否小于右侧操作数的值，如果小于，则条件变为真。例如：(A < B) 为真。
5	>= (大于或等于) 检查左侧操作数的值是否大于或等于右侧操作数的值，如果大于或等于，则条件变为真。例如：(A >= B) 为假。
6	<= (小于或等于) 检查左侧操作数的值是否小于或等于右侧操作数的值，如果小于或等于，则条件变为真。例如：(A <= B) 为真。

示例

以下代码显示了如何在 JavaScript 中使用比较运算符。

实时演示

<html>
   <body>  
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
      
            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      Set the variables to different values and different operators and then try...
   </body>
</html>

输出

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
Set the variables to different values and different operators and then try...

逻辑运算符

JavaScript 支持以下逻辑运算符 -

假设变量 A 持有 10，变量 B 持有 20，则 -

序号	运算符 & 描述
1	&& (逻辑 AND) 如果两个操作数均非零，则条件变为真。例如：(A && B) 为真。
2	\|\| (逻辑 OR) 如果两个操作数中任何一个非零，则条件变为真。例如：(A \|\| B) 为真。
3	! (逻辑 NOT) 反转其操作数的逻辑状态。如果条件为真，则逻辑 NOT 运算符将使其变为假。例如：! (A && B) 为假。

序号

运算符 & 描述

&& (逻辑 AND)

如果两个操作数均非零，则条件变为真。

例如：(A && B) 为真。

|| (逻辑 OR)

如果两个操作数中任何一个非零，则条件变为真。

例如：(A || B) 为真。

! (逻辑 NOT)

反转其操作数的逻辑状态。如果条件为真，则逻辑 NOT 运算符将使其变为假。

例如：! (A && B) 为假。

示例

尝试以下代码以了解如何在 JavaScript 中实现逻辑运算符。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = true;
            var b = false;
            var linebreak = "<br />";
      
            document.write("(a && b) => ");
            result = (a && b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a || b) => ");
            result = (a || b);
            document.write(result);
            document.write(linebreak);
         
            document.write("!(a && b) => ");
            result = (!(a && b));
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出

(a && b) => false 
(a || b) => true 
!(a && b) => true
Set the variables to different values and different operators and then try...

位运算符

JavaScript 支持以下位运算符 -

假设变量 A 持有 2，变量 B 持有 3，则 -

序号	运算符 & 描述
1	& (按位 AND) 它对每个整数参数的每一位执行布尔 AND 运算。例如：(A & B) 为 2。
2	\| (按位 OR) 它对每个整数参数的每一位执行布尔 OR 运算。例如：(A \| B) 为 3。
3	^ (按位 XOR) 它对每个整数参数的每一位执行布尔异或运算。异或运算意味着操作数一或操作数二为真，但不能同时为真。例如：(A ^ B) 为 1。
4	~ (按位 NOT) 它是一个一元运算符，通过反转操作数中的所有位来操作。例如：(~B) 为 -4。
5	<< (左移) 它将第一个操作数中的所有位向左移动第二个操作数指定的位数。新位用零填充。将值左移一位相当于将其乘以 2，左移两位相当于将其乘以 4，依此类推。例如：(A << 1) 为 4。
6	>> (右移) 二进制右移运算符。左侧操作数的值向右移动右侧操作数指定的位数。例如：(A >> 1) 为 1。
7	>>> (带零的右移) 此运算符与 >> 运算符类似，只是左侧移入的位始终为零。例如：(A >>> 1) 为 1。

示例

尝试以下代码以在 JavaScript 中实现位运算符。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 2; // Bit presentation 10
            var b = 3; // Bit presentation 11
            var linebreak = "<br />";
         
            document.write("(a & b) => ");
            result = (a & b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a | b) => ");
            result = (a | b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a ^ b) => ");
            result = (a ^ b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(~b) => ");
            result = (~b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a << b) => ");
            result = (a << b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >> b) => ");
            result = (a >> b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
Set the variables to different values and different operators and then try...

赋值运算符

JavaScript 支持以下赋值运算符 -

序号	运算符 & 描述
1	= (简单赋值) 将右侧操作数的值赋给左侧操作数例如：C = A + B 将 A + B 的值赋给 C
2	+= (加法赋值) 它将右侧操作数加到左侧操作数，并将结果赋给左侧操作数。例如：C += A 等价于 C = C + A
3	−= (减法赋值) 它从左侧操作数中减去右侧操作数，并将结果赋给左侧操作数。例如：C -= A 等价于 C = C - A
4	= (乘法赋值) 它将右侧操作数乘以左侧操作数，并将结果赋给左侧操作数。例如：C = A 等价于 C = C * A
5	/= (除法赋值) 它将左侧操作数除以右侧操作数，并将结果赋给左侧操作数。例如：C /= A 等价于 C = C / A
6	%= (模赋值) 它使用两个操作数取模，并将结果赋给左侧操作数。例如：C %= A 等价于 C = C % A

注意 - 位运算符也适用相同的逻辑，因此它们将变为 <<=、>>=、>>=、&=、|= 和 ^=。

示例

尝试以下代码以在 JavaScript 中实现赋值运算符。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var linebreak = "<br />";
         
            document.write("Value of a => (a = b) => ");
            result = (a = b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a += b) => ");
            result = (a += b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a -= b) => ");
            result = (a -= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a *= b) => ");
            result = (a *= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a /= b) => ");
            result = (a /= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a %= b) => ");
            result = (a %= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出

Value of a => (a = b) => 10
Value of a => (a += b) => 20 
Value of a => (a -= b) => 10 
Value of a => (a *= b) => 100 
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...

其他运算符

我们将在本文中讨论两个在 JavaScript 中非常有用的运算符：条件运算符 (? :) 和 typeof 运算符。

条件运算符 (? :)

条件运算符首先评估表达式的真假值，然后根据评估结果执行两个给定语句中的一个。

序号	运算符和描述
1	? : (条件) 如果条件为真？则值为 X：否则为值 Y

示例

尝试以下代码以了解条件运算符在 JavaScript 中的工作原理。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
         
            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         
            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

typeof 运算符

typeof 运算符是一个一元运算符，放在其单个操作数之前，该操作数可以是任何类型。其值为一个字符串，指示操作数的数据类型。

如果其操作数是数字、字符串或布尔值，则 typeof 运算符计算结果为 "number"、"string" 或 "boolean"，并根据计算结果返回 true 或 false。

以下是 typeof 运算符的返回值列表。

类型	typeof 返回的字符串
数字	"number"
字符串	"string"
布尔值	"boolean"
对象	"object"
函数	"function"
未定义	"undefined"
空	"object"

示例

以下代码显示了如何实现 typeof 运算符。

实时演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var linebreak = "<br />";
         
            result = (typeof b == "string" ? "B is String" : "B is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         
            result = (typeof a == "string" ? "A is String" : "A is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出

Result => B is String 
Result => A is Numeric
Set the variables to different values and different operators and then try...

JavaScript - if...else 语句

在编写程序时，可能需要在给定的路径集中选择一条路径。在这种情况下，你需要使用条件语句，让你的程序做出正确的决策并执行正确的操作。

JavaScript 支持条件语句，用于根据不同的条件执行不同的操作。在这里，我们将解释 if..else 语句。

if-else 流程图

以下流程图显示了 if-else 语句的工作原理。

JavaScript 支持以下形式的 if..else 语句 -

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

if 语句

if 语句是基本的控制语句，它允许 JavaScript 进行决策并有条件地执行语句。

语法

基本 if 语句的语法如下所示：

if (expression) {
   Statement(s) to be executed if expression is true
}

这里会评估一个 JavaScript 表达式。如果结果值为真，则执行给定的语句。如果表达式为假，则不会执行任何语句。大多数情况下，在做决策时会使用比较运算符。

示例

尝试以下示例以了解 if 语句的工作原理。

实时演示

<html>
   <body>     
      <script type = "text/javascript">
         <!--
            var age = 20;
         
            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            }
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Qualifies for driving
Set the variable to different value and then try...

if...else 语句

'if...else' 语句是下一种控制语句的形式，它允许 JavaScript 以更受控的方式执行语句。

语法

if (expression) {
   Statement(s) to be executed if expression is true
} else {
   Statement(s) to be executed if expression is false
}

这里会评估 JavaScript 表达式。如果结果值为真，则执行 'if' 代码块中的给定语句。如果表达式为假，则执行 else 代码块中的给定语句。

示例

尝试以下代码以学习如何在 JavaScript 中实现 if-else 语句。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var age = 15;
         
            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            } else {
               document.write("<b>Does not qualify for driving</b>");
            }
         //-->
      </script>     
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Does not qualify for driving
Set the variable to different value and then try...

if...else if... 语句

if...else if... 语句是 if…else 的高级形式，它允许 JavaScript 从多个条件中做出正确的决策。

语法

if-else-if 语句的语法如下所示：

if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

这段代码没有什么特别之处。它只是一系列 if 语句，其中每个 if 都是前一个语句的 else 子句的一部分。根据真值条件执行语句，如果所有条件都不为真，则执行 else 代码块。

示例

尝试以下代码以学习如何在 JavaScript 中实现 if-else-if 语句。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var book = "maths";
            if( book == "history" ) {
               document.write("<b>History Book</b>");
            } else if( book == "maths" ) {
               document.write("<b>Maths Book</b>");
            } else if( book == "economics" ) {
               document.write("<b>Economics Book</b>");
            } else {
               document.write("<b>Unknown Book</b>");
            }
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
<html>

输出

Maths Book
Set the variable to different value and then try...

JavaScript - Switch Case

您可以使用多个 if...else…if 语句（如上一章所示）来执行多路分支。但是，这并不总是最佳解决方案，尤其是在所有分支都依赖于单个变量的值时。

从 JavaScript 1.2 开始，您可以使用 switch 语句来精确处理这种情况，并且它的效率比重复使用 if...else if 语句更高。

流程图

下面的流程图解释了 switch-case 语句的工作原理。

语法

switch 语句的目的是提供一个要评估的表达式以及基于表达式值的几个不同的语句。解释器会检查每个 case 与表达式的值是否匹配，直到找到匹配项。如果没有任何匹配项，则将使用 default 条件。

switch (expression) {
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

break 语句指示特定 case 的结束。如果省略了它们，解释器将继续执行每个后续 case 中的每个语句。

我们将在 循环控制 章节中解释 break 语句。

示例

尝试以下示例以实现 switch-case 语句。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               break;
            
               case 'B': document.write("Pretty good<br />");
               break;
            
               case 'C': document.write("Passed<br />");
               break;
            
               case 'D': document.write("Not so good<br />");
               break;
            
               case 'F': document.write("Failed<br />");
               break;
            
               default:  document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...

break 语句在 switch-case 语句中起着重要作用。尝试以下代码，该代码使用不带任何 break 语句的 switch-case 语句。

实时演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               case 'B': document.write("Pretty good<br />");
               case 'C': document.write("Passed<br />");
               case 'D': document.write("Not so good<br />");
               case 'F': document.write("Failed<br />");
               default: document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...

JavaScript - while 循环

在编写程序时，您可能会遇到需要反复执行某个操作的情况。在这种情况下，您需要编写循环语句来减少代码行数。

JavaScript 支持所有必要的循环来减轻编程压力。

while 循环

JavaScript 中最基本的循环是 while 循环，本章将对此进行讨论。while 循环的目的是只要 表达式 为真，就重复执行语句或代码块。一旦表达式变为假，循环就会终止。

流程图

while 循环 的流程图如下所示：

语法

JavaScript 中 while 循环 的语法如下所示：

while (expression) {
   Statement(s) to be executed if expression is true
}

示例

尝试以下示例以实现 while 循环。

实时演示

<html>
   <body>
      
      <script type = "text/javascript">
         <!--
            var count = 0;
            document.write("Starting Loop ");
         
            while (count < 10) {
               document.write("Current Count : " + count + "<br />");
               count++;
            }
         
            document.write("Loop stopped!");
         //-->
      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

do...while 循环

do...while 循环类似于 while 循环，只是条件检查发生在循环的末尾。这意味着即使条件为假，循环也始终至少执行一次。

流程图

do-while 循环的流程图如下所示：

语法

JavaScript 中 do-while 循环的语法如下所示：

do {
   Statement(s) to be executed;
} while (expression);

注意 - 不要漏掉 do...while 循环末尾的分号。

示例

尝试以下示例以学习如何在 JavaScript 中实现 do-while 循环。

实时演示

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var count = 0;
            
            document.write("Starting Loop" + "<br />");
            do {
               document.write("Current Count : " + count + "<br />");
               count++;
            }
            
            while (count < 5);
            document.write ("Loop stopped!");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Starting Loop
Current Count : 0 
Current Count : 1 
Current Count : 2 
Current Count : 3 
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript - For 循环

“for”循环是最简洁的循环形式。它包含以下三个重要部分：

循环初始化，我们在此将计数器初始化为起始值。初始化语句在循环开始前执行。
测试语句，它将测试给定条件是真还是假。如果条件为真，则执行循环内部给定的代码，否则控制权将退出循环。
迭代语句，您可以在其中增加或减少计数器。

您可以将所有三个部分放在一行中，用分号分隔。

流程图

JavaScript 中 for 循环的流程图如下所示：

语法

for 循环在 JavaScript 中的语法如下所示：

for (initialization; test condition; iteration statement) {
   Statement(s) to be executed if test condition is true
}

示例

尝试以下示例以了解 for 循环在 JavaScript 中的工作原理。

实时演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var count;
            document.write("Starting Loop" + "<br />");
         
            for(count = 0; count < 10; count++) {
               document.write("Current Count : " + count );
               document.write("<br />");
            }         
            document.write("Loop stopped!");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 
Set the variable to different value and then try...

JavaScript for...in 循环

for...in 循环用于遍历对象的属性。由于我们尚未讨论对象，因此您可能对该循环不太熟悉。但是，一旦您了解对象在 JavaScript 中的行为方式，就会发现此循环非常有用。

语法

‘for..in’ 循环的语法如下：

for (variablename in object) {
   statement or block to execute
}

在每次迭代中，object 的一个属性会被赋值给 variablename，并且此循环会一直持续到对象的属性都被遍历完。

示例

尝试以下示例以实现 ‘for-in’ 循环。它打印 Web 浏览器的 Navigator 对象。

实时演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var aProperty;
            document.write("Navigator Object Properties<br /> ");        
            for (aProperty in navigator) {
               document.write(aProperty);
               document.write("<br />");
            }
            document.write ("Exiting from the loop!");
         //-->
      </script>      
      <p>Set the variable to different object and then try...</p>
   </body>
</html>

输出

Navigator Object Properties 
serviceWorker 
webkitPersistentStorage 
webkitTemporaryStorage 
geolocation 
doNotTrack 
onLine 
languages 
language 
userAgent 
product 
platform 
appVersion 
appName 
appCodeName 
hardwareConcurrency 
maxTouchPoints 
vendorSub 
vendor 
productSub 
cookieEnabled 
mimeTypes 
plugins 
javaEnabled 
getStorageUpdates 
getGamepads 
webkitGetUserMedia 
vibrate 
getBattery 
sendBeacon 
registerProtocolHandler 
unregisterProtocolHandler 
Exiting from the loop!
Set the variable to different object and then try...

JavaScript - 循环控制

JavaScript 提供了完全的控制权来处理循环和 switch 语句。在某些情况下，您可能需要在到达循环底部之前退出循环。也可能存在您想跳过代码块的一部分并开始循环的下一轮迭代的情况。

为了处理所有这些情况，JavaScript 提供了 break 和 continue 语句。这些语句分别用于立即退出任何循环或开始任何循环的下一轮迭代。

break 语句

break 语句（已在 switch 语句中简要介绍）用于提前退出循环，跳出封闭的花括号。

流程图

break 语句的流程图如下所示：

示例

以下示例说明了如何在 while 循环中使用 break 语句。请注意，一旦 x 达到 5 并到达紧接在闭合花括号下方的 document.write (..) 语句时，循环是如何提前退出的：

实时演示

<html>
   <body>     
      <script type = "text/javascript">
         <!--
         var x = 1;
         document.write("Entering the loop<br /> ");
         
         while (x < 20) {
            if (x == 5) {
               break;   // breaks out of loop completely
            }
            x = x + 1;
            document.write( x + "<br />");
         }         
         document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

我们已经看到了 break 语句在 switch 语句中的用法。

continue 语句

continue 语句告诉解释器立即开始循环的下一轮迭代并跳过其余的代码块。当遇到 continue 语句时，程序流程会立即移动到循环检查表达式，如果条件仍然为真，则它会开始下一轮迭代，否则控制权将退出循环。

示例

此示例说明了如何在 while 循环中使用 continue 语句。请注意，continue 语句是如何用于跳过变量 x 中保存的索引达到 5 时打印操作的：

实时演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var x = 1;
            document.write("Entering the loop<br /> ");
         
            while (x < 10) {
               x = x + 1;
               
               if (x == 5) {
                  continue;   // skip rest of the loop body
               }
               document.write( x + "<br />");
            }         
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

输出

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

使用标签控制流程

从 JavaScript 1.2 开始，可以使用标签与 break 和 continue 一起更精确地控制流程。标签只是一个后跟冒号 (:) 的标识符，应用于语句或代码块。我们将看到两个不同的示例，以了解如何在 break 和 continue 中使用标签。

注意 - 在 ‘continue’ 或 ‘break’ 语句及其标签名称之间不允许换行。此外，在标签名称和关联循环之间也不应有任何其他语句。

尝试以下两个示例以更好地理解标签。

示例 1

以下示例显示了如何使用 break 语句实现标签。

实时演示

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            document.write("Entering the loop!<br /> ");
            outerloop:        // This is the label name         
            for (var i = 0; i < 5; i++) {
               document.write("Outerloop: " + i + "<br />");
               innerloop:
               for (var j = 0; j < 5; j++) {
                  if (j > 3 ) break ;           // Quit the innermost loop
                  if (i == 2) break innerloop;  // Do the same thing
                  if (i == 4) break outerloop;  // Quit the outer loop
                  document.write("Innerloop: " + j + " <br />");
               }
            }        
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
   </body>
</html>

输出

Entering the loop!
Outerloop: 0
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 1
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 2
Outerloop: 3
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 4
Exiting the loop!

示例 2

实时演示

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
         document.write("Entering the loop!<br /> ");
         outerloop:     // This is the label name
         
         for (var i = 0; i < 3; i++) {
            document.write("Outerloop: " + i + "<br />");
            for (var j = 0; j < 5; j++) {
               if (j == 3) {
                  continue outerloop;
               }
               document.write("Innerloop: " + j + "<br />");
            }
         }
         
         document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
   </body>
</html>

输出

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

JavaScript - 函数

函数是一组可重用代码，可以在程序的任何地方调用它。这消除了重复编写相同代码的需要。它有助于程序员编写模块化代码。函数允许程序员将一个大型程序划分为多个小型且易于管理的函数。

与任何其他高级编程语言一样，JavaScript 也支持编写使用函数的模块化代码所需的所有功能。您一定在前面的章节中看到过 alert() 和 write() 等函数。我们一直在反复使用这些函数，但它们只在核心 JavaScript 中编写过一次。

JavaScript 也允许我们编写自己的函数。本节解释如何在 JavaScript 中编写自己的函数。

函数定义

在使用函数之前，我们需要定义它。在 JavaScript 中定义函数最常见的方法是使用 function 关键字，后跟唯一的函数名称、参数列表（可能是空的）以及用花括号括起来的语句块。

语法

基本语法如下所示。

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

示例

尝试以下示例。它定义了一个名为 sayHello 的函数，该函数不带任何参数：

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

调用函数

要在脚本中的其他地方调用函数，您只需编写该函数的名称，如下面的代码所示。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

输出

函数参数

到目前为止，我们已经看到了不带参数的函数。但是，在调用函数时，可以使用不同的参数。这些传递的参数可以在函数内部捕获，并且可以在这些参数上进行任何操作。函数可以使用逗号分隔多个参数。

示例

尝试以下示例。我们在这里修改了我们的 sayHello 函数。现在它带有两个参数。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

输出

return 语句

JavaScript 函数可以有一个可选的 return 语句。如果您想从函数中返回值，则需要此语句。此语句应是函数中的最后一个语句。

例如，您可以将两个数字传递给函数，然后您可以期望该函数在您的调用程序中返回它们的乘积。

示例

尝试以下示例。它定义了一个函数，该函数接受两个参数并将它们连接起来，然后在调用程序中返回结果。

实时演示

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

输出

关于 JavaScript 函数还有很多内容需要学习，但是我们在这个教程中已经涵盖了最重要的概念。

JavaScript - 事件

什么是事件？

JavaScript 与 HTML 的交互是通过用户或浏览器操作页面时发生的事件来处理的。

当页面加载时，它被称为一个事件。当用户点击一个按钮时，这个点击也是一个事件。其他示例包括按下任何键、关闭窗口、调整窗口大小等事件。

开发人员可以使用这些事件来执行 JavaScript 编码的响应，这些响应会导致按钮关闭窗口、向用户显示消息、验证数据以及几乎任何其他可以想象的响应类型。

事件是文档对象模型 (DOM) 第 3 级的一部分，每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。

请仔细阅读本简短教程以更好地理解 HTML 事件参考。在这里，我们将看到一些示例来理解事件和 JavaScript 之间的关系 -

onclick 事件类型

这是最常用的事件类型，当用户点击鼠标左键时发生。您可以针对此事件类型放置您的验证、警告等。

示例

尝试以下示例。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

输出

onsubmit 事件类型

onsubmit 是当您尝试提交表单时发生的事件。您可以针对此事件类型放置表单验证。

示例

以下示例显示了如何使用 onsubmit。在这里，我们在将表单数据提交到 Web 服务器之前调用 validate() 函数。如果 validate() 函数返回 true，则表单将被提交，否则将不会提交数据。

尝试以下示例。

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

onmouseover 和 onmouseout

这两种事件类型将帮助您使用图像甚至文本创建不错的效果。onmouseover 事件在您将鼠标移到任何元素上时触发，而 onmouseout 事件在您将鼠标从该元素移开时触发。尝试以下示例。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

输出

HTML 5 标准事件

标准 HTML 5 事件列在此处以供参考。此处脚本表示针对该事件执行的 Javascript 函数。

属性	值	描述
Offline	script	文档离线时触发
Onabort	script	在中止事件时触发
onafterprint	script	文档打印后触发
onbeforeonload	script	文档加载前触发
onbeforeprint	script	文档打印前触发
onblur	script	窗口失去焦点时触发
oncanplay	script	媒体可以开始播放时触发，但可能需要停止缓冲
oncanplaythrough	script	媒体可以播放到结束时触发，无需停止缓冲
onchange	script	元素发生变化时触发
onclick	script	鼠标点击时触发
oncontextmenu	script	触发上下文菜单时触发
ondblclick	script	鼠标双击时触发
ondrag	script	拖动元素时触发
ondragend	script	拖动操作结束时触发
ondragenter	script	将元素拖动到有效放置目标时触发
ondragleave	script	将元素拖过有效放置目标时触发
ondragover	script	拖动操作开始时触发
ondragstart	script	拖动操作开始时触发
ondrop	script	拖动元素被放下时触发
ondurationchange	script	媒体长度发生变化时触发
onemptied	script	媒体资源元素突然变为空时触发。
onended	script	媒体到达结尾时触发
onerror	script	发生错误时触发
onfocus	script	窗口获得焦点时触发
onformchange	script	表单发生变化时触发
onforminput	script	表单获得用户输入时触发
onhaschange	script	文档发生更改时触发
oninput	script	元素获得用户输入时触发
oninvalid	script	元素无效时触发
onkeydown	script	按下键时触发
onkeypress	script	按下并释放键时触发
onkeyup	script	释放键时触发
onload	script	文档加载时触发
onloadeddata	script	媒体数据加载时触发
onloadedmetadata	script	媒体元素的时长和其他媒体数据加载时触发
onloadstart	script	浏览器开始加载媒体数据时触发
onmessage	script	触发消息时触发
onmousedown	script	按下鼠标按钮时触发
onmousemove	script	鼠标指针移动时触发
onmouseout	script	鼠标指针移出元素时触发
onmouseover	script	鼠标指针移到元素上时触发
onmouseup	script	释放鼠标按钮时触发
onmousewheel	script	旋转鼠标滚轮时触发
onoffline	script	文档离线时触发
onoine	script	文档上线时触发
ononline	script	文档上线时触发
onpagehide	script	窗口隐藏时触发
onpageshow	script	窗口变为可见时触发
onpause	script	媒体数据暂停时触发
onplay	script	媒体数据即将开始播放时触发
onplaying	script	媒体数据开始播放时触发
onpopstate	script	窗口历史记录更改时触发
onprogress	script	浏览器正在获取媒体数据时触发
onratechange	script	媒体数据的播放速度发生变化时触发
onreadystatechange	script	就绪状态发生变化时触发
onredo	script	文档执行重做操作时触发
onresize	script	窗口大小调整时触发
onscroll	script	滚动元素的滚动条时触发
onseeked	script	媒体元素的 seeking 属性不再为 true 且查找已结束时触发
onseeking	script	媒体元素的 seeking 属性为 true 且查找已开始时触发
onselect	script	选择元素时触发
onstalled	script	获取媒体数据时发生错误时触发
onstorage	script	文档加载时触发
onsubmit	script	提交表单时触发
onsuspend	script	浏览器一直在获取媒体数据，但在获取整个媒体文件之前停止时触发
ontimeupdate	script	媒体更改其播放位置时触发
onundo	script	文档执行撤消操作时触发
onunload	script	用户离开文档时触发
onvolumechange	script	媒体更改音量时触发，将音量设置为“静音”时也会触发
onwaiting	script	媒体停止播放但预计会恢复时触发

JavaScript 和 Cookie

什么是 Cookie？

Web 浏览器和服务器使用 HTTP 协议进行通信，而 HTTP 是一种无状态协议。但是对于商业网站，需要在不同的页面之间维护会话信息。例如，一个用户注册在完成多个页面后结束。但是如何在所有网页之间维护用户的会话信息。

在许多情况下，使用 Cookie 是记住和跟踪偏好、购买、佣金和其他信息的最有效方法，这些信息对于改善访客体验或网站统计数据是必需的。

它是如何工作的？

您的服务器以 Cookie 的形式向访客的浏览器发送一些数据。浏览器可能会接受 Cookie。如果确实如此，则会将其作为纯文本记录存储在访客的硬盘驱动器上。现在，当访客到达您网站上的另一个页面时，浏览器会将相同的 Cookie 发送到服务器以进行检索。检索后，您的服务器就会知道/记住之前存储的内容。

Cookie 是 5 个可变长度字段的纯文本数据记录 -

Expires - Cookie 将过期的日期。如果此字段为空，则 Cookie 将在访客退出浏览器时过期。
Domain - 您网站的域名。
Path - 设置 Cookie 的目录或网页的路径。如果您想从任何目录或页面检索 Cookie，则此字段可以为空。
Secure - 如果此字段包含单词“secure”，则 Cookie 只能使用安全服务器检索。如果此字段为空，则不存在此类限制。
Name=Value - Cookie 以键值对的形式设置和检索

Cookie 最初是为 CGI 编程设计的。Cookie 中包含的数据在 Web 浏览器和 Web 服务器之间自动传输，因此服务器上的 CGI 脚本可以读取和写入存储在客户端上的 Cookie 值。

JavaScript 还可以使用 Document 对象的 cookie 属性来操作 Cookie。JavaScript 可以读取、创建、修改和删除适用于当前网页的 Cookie。

存储 Cookie

创建 Cookie 的最简单方法是为 document.cookie 对象分配一个字符串值，如下所示。

document.cookie = "key1 = value1;key2 = value2;expires = date";

此处 expires 属性是可选的。如果您使用有效日期或时间提供此属性，则 Cookie 将在给定日期或时间过期，此后将无法访问 Cookie 的值。

注意 - Cookie 值可能不包含分号、逗号或空格。因此，您可能希望在将值存储在 Cookie 中之前使用 JavaScript escape() 函数对其进行编码。如果这样做，当您读取 Cookie 值时，也必须使用相应的 unescape() 函数。

示例

尝试以下操作。它在输入 Cookie 中设置客户名称。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               if( document.myform.customer.value == "" ) {
                  alert("Enter some value!");
                  return;
               }
               cookievalue = escape(document.myform.customer.value) + ";";
               document.cookie = "name=" + cookievalue;
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>      
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

输出

现在您的机器有一个名为 name 的 Cookie。您可以使用多个用逗号分隔的键=值对设置多个 Cookie。

读取 Cookie

读取 Cookie 与写入 Cookie 一样简单，因为 document.cookie 对象的值就是 Cookie。因此，您可以随时使用此字符串来访问 Cookie。document.cookie 字符串将保留用分号分隔的名称=值对列表，其中 name 是 Cookie 的名称，value 是其字符串值。

您可以使用字符串的 split() 函数将字符串分解为键和值，如下所示 -

示例

尝试以下示例以获取所有 Cookie。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("All Cookies : " + allcookies );
               
               // Get all the cookies pairs in an array
               cookiearray = allcookies.split(';');
               
               // Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
   
   <body>     
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

注意 - 此处 length 是 Array 类的函数，它返回数组的长度。我们将在单独的章节中讨论数组。在那之前，请尝试消化它。

注意 - 您的机器上可能已经设置了一些其他 Cookie。以上代码将显示设置在您的机器上的所有 Cookie。

设置 Cookie 过期日期

您可以通过设置过期日期并在 Cookie 中保存过期日期来延长 Cookie 的生命周期，使其超出当前浏览器会话。这可以通过将 ‘expires’ 属性设置为日期和时间来完成。

示例

尝试以下示例。它说明了如何将 Cookie 的过期日期延长 1 个月。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() + 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

输出

删除 Cookie

有时您需要删除 Cookie，以便后续尝试读取 Cookie 返回空值。为此，您只需将过期日期设置为过去的时间即可。

示例

尝试以下示例。它说明了如何通过将 Cookie 的过期日期设置为当前日期前一个月来删除 Cookie。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() - 1 );
               cookievalue = escape(document.myform.customer.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write("Setting Cookies : " + "name=" + cookievalue );
            }
          //-->
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

输出

JavaScript - 页面重定向

什么是页面重定向？

您可能遇到过这样的情况：您单击一个 URL 以到达页面 X，但实际上您被重定向到另一个页面 Y。这是由于 页面重定向 造成的。此概念与 JavaScript 页面刷新不同。

您可能希望将用户从原始页面重定向到其他页面，原因有很多。我们列出了一些原因 -

您不喜欢您域名的名称，并且要迁移到一个新的域名。在这种情况下，您可能希望将所有访问者重定向到新网站。在这里，您可以保留旧域名，但放置一个包含页面重定向的单一页面，以便所有旧域名访问者都可以访问您的新域名。
您已根据浏览器版本或名称或可能根据不同的国家/地区构建了各种页面，然后，您可以使用客户端页面重定向而不是使用服务器端页面重定向来将您的用户带到相应的页面。
搜索引擎可能已经索引了您的页面。但在迁移到另一个域时，您不希望失去通过搜索引擎访问的访问者。因此，您可以使用客户端页面重定向。但请记住，这不能用于欺骗搜索引擎，否则可能会导致您的网站被封禁。

页面重定向如何工作？

页面重定向的实现如下所示。

示例 1

使用客户端的 JavaScript 进行页面重定向非常简单。要将您的网站访问者重定向到新页面，您只需在头部区域添加一行代码，如下所示。

实时演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://tutorialspoint.com";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      
      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />
      </form>
      
   </body>
</html>

输出

示例 2

您可以在将网站访问者重定向到新页面之前向他们显示一条适当的消息。这需要一点时间延迟来加载新页面。以下示例演示了如何实现这一点。这里setTimeout()是一个内置的 JavaScript 函数，可用于在给定的时间间隔后执行另一个函数。

实时演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://tutorialspoint.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

输出

You will be redirected to tutorialspoint.com main page in 10 seconds!

示例 3

以下示例演示了如何根据用户的浏览器将网站访问者重定向到不同的页面。

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>

JavaScript - 对话框

JavaScript 支持三种重要的对话框类型。这些对话框可用于发出警告、获取确认或获取用户的输入。这里我们将逐一讨论每个对话框。

警告对话框

警告对话框主要用于向用户发出警告消息。例如，如果某个输入字段需要输入一些文本，但用户没有提供任何输入，那么作为验证的一部分，您可以使用警告框来发出警告消息。

尽管如此，警告框仍然可以用于更友好的消息。警告框只有一个“确定”按钮供选择并继续。

示例

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();" />
      </form>     
   </body>
</html>

输出

确认对话框

确认对话框主要用于获取用户对任何选项的同意。它会显示一个带有两个按钮的对话框：确定和取消。

如果用户单击“确定”按钮，则窗口方法confirm()将返回 true。如果用户单击“取消”按钮，则confirm()返回 false。您可以按如下方式使用确认对话框。

示例

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" />
      </form>      
   </body>
</html>

输出

提示对话框

当您想要弹出一个文本框以获取用户输入时，提示对话框非常有用。因此，它使您能够与用户交互。用户需要填写该字段，然后单击“确定”。

此对话框是使用名为prompt()的方法显示的，该方法接受两个参数：（i）您想要在文本框中显示的标签，以及（ii）要在文本框中显示的默认字符串。

此对话框有两个按钮：确定和取消。如果用户单击“确定”按钮，则窗口方法prompt()将返回文本框中输入的值。如果用户单击“取消”按钮，则窗口方法prompt()返回null。

示例

以下示例演示了如何使用提示对话框 -

实时演示

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>      
   </body>
</html>

输出

JavaScript - Void 关键字

void是 JavaScript 中一个重要的关键字，可以用作一元运算符，出现在其单个操作数之前，该操作数可以是任何类型。此运算符指定要评估的表达式，但不返回值。

语法

void的语法可以是以下两种之一 -

<head>
   <script type = "text/javascript">
      <!--
         void func()
         javascript:void func()
         or:
         void(func())
         javascript:void(func())
      //-->
   </script>
</head>

示例 1

此运算符最常见的用法是在客户端的javascript: URL 中，它允许您评估表达式的副作用，而浏览器不会显示已评估表达式的值。

这里表达式alert ('Warning!!!')被评估，但它不会加载回当前文档 -

实时演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
         //-->
      </script>   
   </head>
   
   <body>   
      <p>Click the following, This won't react at all...</p>
      <a href = "javascript:void(alert('Warning!!!'))">Click me!</a>     
   </body>
</html>

输出

示例 2

看看下面的例子。以下链接什么也不做，因为表达式“0”在 JavaScript 中没有效果。这里表达式“0”被评估，但它不会加载回当前文档。

实时演示

<html>
   <head>   
      <script type = "text/javascript">
         <!--
         //-->
      </script>      
   </head>
   
   <body>   
      <p>Click the following, This won't react at all...</p>
      <a href = "javascript:void(0)">Click me!</a>      
   </body>
</html>

输出

示例 3

void的另一个用途是故意生成undefined值，如下所示。

实时演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function getValue() {
               var a,b,c;
               
               a = void ( b = 5, c = 7 );
               document.write('a = ' + a + ' b = ' + b +' c = ' + c );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>     
   </body>
</html>

输出

JavaScript - 页面打印

很多时候，您希望在网页上放置一个按钮，以便通过实际打印机打印该网页的内容。JavaScript 通过window对象的print函数帮助您实现此功能。

JavaScript 打印函数window.print()在执行时打印当前网页。您可以使用onclick事件直接调用此函数，如下例所示。

示例

尝试以下示例。

实时演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
         //-->
      </script>
   </head>
   
   <body>      
      <form>
         <input type = "button" value = "Print" onclick = "window.print()" />
      </form>   
   </body>
<html>

输出

虽然它满足了获取打印输出的目的，但这不是推荐的方法。打印友好的页面实际上只是一个包含文本的页面，没有图像、图形或广告。

您可以通过以下方式使页面打印友好 -

复制页面并省略不需要的文本和图形，然后从原始页面链接到该打印友好页面。查看示例。
如果您不想保留页面的额外副本，则可以使用适当的注释（如..... ）标记可打印文本，然后可以使用 PERL 或任何其他后台脚本清除可打印文本并显示以进行最终打印。我们在 Tutorialspoint 使用此方法为我们的网站访问者提供打印功能。

如何打印页面？

如果在网页上找不到上述功能，则可以使用浏览器的标准工具栏打印网页。按照以下链接操作。

File →  Print → Click OK  button.

JavaScript - 对象概述

JavaScript 是一种面向对象编程 (OOP) 语言。如果编程语言为开发人员提供了四种基本功能，则可以称为面向对象的 -

封装 - 将相关信息（无论是数据还是方法）存储在一个对象中的能力。
聚合 - 将一个对象存储在另一个对象中的能力。
继承 - 一个类依赖于另一个类（或多个类）的某些属性和方法的能力。
多态 - 编写一个可以在各种不同方式下工作的功能或方法的能力。

对象由属性组成。如果属性包含函数，则认为它是对象的方法，否则属性被认为是属性。

对象属性

对象属性可以是三种基本数据类型中的任何一种，或者可以是任何抽象数据类型，例如另一个对象。对象属性通常是对象方法内部使用的变量，但也可以是整个页面中使用的全局可见变量。

向对象添加属性的语法如下 -

objectName.objectProperty = propertyValue;

例如 - 以下代码使用document对象的"title"属性获取文档标题。

var str = document.title;

对象方法

方法是允许对象执行某些操作或允许对对象执行某些操作的函数。函数和方法之间存在细微差别 - 函数是语句的独立单元，而方法附加到对象并且可以通过this关键字引用。

方法对于从将对象的内容显示到屏幕到对一组局部属性和参数执行复杂的数学运算的一切都有用。

例如 - 以下是一个简单的示例，演示如何使用document对象的write()方法在文档上写入任何内容。

document.write("This is test");

用户定义的对象

所有用户定义的对象和内置对象都是称为Object的对象的后代。

new 运算符

new运算符用于创建对象的实例。要创建对象，new运算符后跟构造函数方法。

在下面的示例中，构造函数方法是 Object()、Array() 和 Date()。这些构造函数是内置的 JavaScript 函数。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object() 构造函数

构造函数是一个创建和初始化对象的函数。JavaScript 提供了一个称为Object()的特殊构造函数来构建对象。Object()构造函数的返回值分配给一个变量。

该变量包含对新对象的引用。分配给对象的属性不是变量，并且没有使用var关键字定义。

示例 1

尝试以下示例；它演示了如何创建一个对象。

实时演示

<html>
   <head>
      <title>User-defined objects</title>     
      <script type = "text/javascript">
         var book = new Object();   // Create the object
         book.subject = "Perl";     // Assign properties to the object
         book.author  = "Mohtashim";
      </script>      
   </head>
   
   <body>  
      <script type = "text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>   
   </body>
</html>

输出

Book name is : Perl 
Book author is : Mohtashim

示例 2

此示例演示了如何使用用户定义的函数创建对象。这里this关键字用于引用已传递给函数的对象。

实时演示

<html>
   <head>   
   <title>User-defined objects</title>
      <script type = "text/javascript">
         function book(title, author) {
            this.title = title; 
            this.author  = author;
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>      
   </body>
</html>

输出

Book title is : Perl 
Book author is : Mohtashim

为对象定义方法

前面的示例演示了构造函数如何创建对象并分配属性。但我们需要通过为其分配方法来完成对象的定义。

示例

尝试以下示例；它显示了如何在对象中添加函数。

实时演示

<html>
   
   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            this.price = amount; 
         }
         
         function book(title, author) {
            this.title = title;
            this.author  = author;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

输出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

with 关键字

‘with’关键字用作引用对象属性或方法的一种简写形式。

指定为with参数的对象在后续代码块的持续时间内成为默认对象。对象的属性和方法可以在不命名对象的情况下使用。

语法

with 对象的语法如下 -

with (object) {
   properties used without the object name and dot
}

示例

尝试以下示例。

实时演示

<html>
   <head>
   <title>User-defined objects</title>   
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            with(this) {
               price = amount;
            }
         }
         function book(title, author) {
            this.title = title;
            this.author = author;
            this.price = 0;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

输出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

JavaScript 原生对象

JavaScript 有几个内置或原生对象。这些对象可以在您的程序中的任何位置访问，并且在任何运行在任何操作系统上的浏览器中都将以相同的方式工作。

以下是所有重要 JavaScript 原生对象的列表 -

JavaScript - Number 对象

Number对象表示数字数据，可以是整数或浮点数。通常，您不需要担心Number对象，因为浏览器会自动将数字字面量转换为数字类的实例。

语法

创建number对象的语法如下 -

var val = new Number(number);

如果在数字位置提供任何非数字参数，则该参数无法转换为数字，它将返回NaN（非数字）。

Number 属性

以下是每个属性及其说明的列表。

序号	属性和说明
1	MAX_VALUE JavaScript 中数字可以具有的最大可能值 1.7976931348623157E+308
2	MIN_VALUE JavaScript 中数字可以具有的最小可能值 5E-324
3	NaN 等于非数字值。
4	NEGATIVE_INFINITY 小于 MIN_VALUE 的值。
5	POSITIVE_INFINITY 大于 MAX_VALUE 的值
6	prototype Number 对象的静态属性。使用 prototype 属性将新属性和方法分配给当前文档中的 Number 对象
7	constructor 返回创建此对象实例的函数。默认情况下，这是 Number 对象。

在以下部分中，我们将通过一些示例来演示 Number 的属性。

Number 方法

Number 对象只包含作为每个对象定义一部分的默认方法。

序号	方法及描述
1	toExponential() 强制数字以指数表示法显示，即使该数字处于 JavaScript 通常使用标准表示法的范围内。
2	toFixed() 格式化一个数字，使其在小数点右侧具有指定位数。
3	toLocaleString() 返回当前数字的字符串值版本，其格式可能根据浏览器的本地设置而有所不同。
4	toPrecision() 定义要显示的数字的总位数（包括小数点左侧和右侧的数字）。
5	toString() 返回数字值的字符串表示形式。
6	valueOf() 返回数字的值。

在以下部分，我们将提供一些示例来解释 Number 的方法。

JavaScript - 布尔对象

Boolean 对象表示两个值，要么是“true”，要么是“false”。如果value 参数被省略或为 0、-0、null、false、NaN、undefined 或空字符串（""），则该对象最初的值为 false。

语法

使用以下语法创建布尔对象。

var val = new Boolean(value);

布尔属性

以下是布尔对象属性的列表：

序号	属性和说明
1	constructor 返回对创建该对象的 Boolean 函数的引用。
2	prototype prototype 属性允许您向对象添加属性和方法。

在以下部分，我们将提供一些示例来说明布尔对象的属性。

布尔方法

以下是布尔对象的方法及其描述的列表。

序号	方法及描述
1	toSource() 返回一个包含布尔对象源代码的字符串；您可以使用此字符串创建等效的对象。
2	toString() 返回一个字符串，根据对象的值返回“true”或“false”。
3	valueOf() 返回布尔对象的原始值。

在以下部分，我们将提供一些示例来演示布尔方法的使用。

JavaScript - 字符串对象

String 对象允许您使用一系列字符；它使用许多辅助方法包装 JavaScript 的字符串原始数据类型。

由于 JavaScript 会自动在字符串原始值和 String 对象之间进行转换，因此您可以在字符串原始值上调用 String 对象的任何辅助方法。

语法

使用以下语法创建 String 对象：

var val = new String(string);

String 参数是一系列已正确编码的字符。

字符串属性

以下是 String 对象的属性及其描述的列表。

序号	属性和说明
1	constructor 返回对创建该对象的 String 函数的引用。
2	length 返回字符串的长度。
3	prototype prototype 属性允许您向对象添加属性和方法。

在以下部分，我们将提供一些示例来演示 String 属性的使用。

字符串方法

以下是 String 对象中可用的方法及其描述的列表。

序号	方法及描述
1	charAt() 返回指定索引处的字符。
2	charCodeAt() 返回一个数字，指示给定索引处的字符的 Unicode 值。
3	concat() 组合两个字符串的文本并返回一个新字符串。
4	indexOf() 返回在调用 String 对象中指定值的第一次出现的索引，如果未找到则返回 -1。
5	lastIndexOf() 返回在调用 String 对象中指定值的最后一次出现的索引，如果未找到则返回 -1。
6	localeCompare() 返回一个数字，指示引用字符串在排序顺序中是在给定字符串之前、之后还是与之相同。
7	match() 用于将正则表达式与字符串匹配。
8	replace() 用于查找正则表达式和字符串之间的匹配项，并将匹配的子字符串替换为新的子字符串。
9	search() 执行在正则表达式和指定字符串之间查找匹配项的操作。
10	slice() 提取字符串的一部分并返回一个新字符串。
11	split() 通过将字符串分成子字符串，将 String 对象拆分为字符串数组。
12	substr() 返回从指定位置开始的字符串中的字符，直到指定数量的字符。
13	substring() 返回字符串中两个索引之间的字符。
14	toLocaleLowerCase() 字符串中的字符转换为小写，同时尊重当前区域设置。
15	toLocaleUpperCase() 字符串中的字符转换为大写，同时尊重当前区域设置。
16	toLowerCase() 返回调用字符串值转换为小写后的结果。
17	toString() 返回表示指定对象的字符串。
18	toUpperCase() 返回调用字符串值转换为大写后的结果。
19	valueOf() 返回指定对象的原始值。

字符串 HTML 包装器

以下是返回包含在适当 HTML 标记中的字符串副本的方法的列表。

序号	方法及描述
1	anchor() 创建一个用作超文本目标的 HTML 锚点。
2	big() 创建一个以大字体显示的字符串，就像它在<big> 标记中一样。
3	blink() 创建一个闪烁的字符串，就像它在<blink> 标记中一样。
4	bold() 创建一个以粗体显示的字符串，就像它在<b> 标记中一样。
5	fixed() 使字符串以固定间距字体显示，就像它在<tt> 标记中一样。
6	fontcolor() 使字符串以指定颜色显示，就像它在<font color="color"> 标记中一样。
7	fontsize() 使字符串以指定字体大小显示，就像它在<font size="size"> 标记中一样。
8	italics() 使字符串以斜体显示，就像它在<i> 标记中一样。
9	link() 创建一个请求另一个 URL 的 HTML 超文本链接。
10	small() 使字符串以小字体显示，就像它在<small> 标记中一样。
11	strike() 使字符串显示为删除线文本，就像它在<strike> 标记中一样。
12	sub() 使字符串显示为下标，就像它在<sub> 标记中一样。
13	sup() 使字符串显示为上标，就像它在<sup> 标记中一样。

在以下部分，我们将提供一些示例来演示 String 方法的使用。

JavaScript - 数组对象

Array 对象允许您将多个值存储在一个变量中。它存储相同类型元素的固定大小的顺序集合。数组用于存储数据集合，但通常将数组视为相同类型变量的集合更有用。

语法

使用以下语法创建Array 对象：

var fruits = new Array( "apple", "orange", "mango" );

Array 参数是字符串或整数列表。当您使用 Array 构造函数指定单个数字参数时，您指定数组的初始长度。数组允许的最大长度为 4,294,967,295。

您可以通过简单地分配值来创建数组，如下所示：

var fruits = [ "apple", "orange", "mango" ];

您将使用序数来访问和设置数组中的值，如下所示。

fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element

数组属性

以下是 Array 对象的属性及其描述的列表。

序号	属性和说明
1	constructor 返回对创建该对象的数组函数的引用。
2	index 该属性表示字符串中匹配项的基于零的索引。
3	input 此属性仅存在于由正则表达式匹配创建的数组中。
4	length 反映数组中元素的数量。
5	prototype prototype 属性允许您向对象添加属性和方法。

在以下部分，我们将提供一些示例来说明 Array 属性的使用。

数组方法

以下是 Array 对象的方法及其描述的列表。

序号	方法及描述
1	concat() 返回一个新数组，该数组由将此数组与其他数组和/或值连接而成。
2	every() 如果此数组中的每个元素都满足提供的测试函数，则返回 true。
3	filter() 创建一个新数组，其中包含此数组的所有元素，对于这些元素，提供的过滤函数返回 true。
4	forEach() 为数组中的每个元素调用一个函数。
5	indexOf() 返回数组中等于指定值的元素的第一个（最小）索引，如果未找到则返回 -1。
6	join() 将数组的所有元素连接成一个字符串。
7	lastIndexOf() 返回数组中等于指定值的元素的最后一个（最大）索引，如果未找到则返回 -1。
8	map() 创建一个新数组，其中包含对传递给此数组的每个元素调用的函数的结果。
9	pop() 从数组中删除最后一个元素并返回该元素。
10	push() 向数组的末尾添加一个或多个元素，并返回数组的新长度。
11	reduce() 同时对数组的两个值（从左到右）应用函数，以将其减少为单个值。
12	reduceRight() 同时对数组的两个值（从右到左）应用函数，以将其减少为单个值。
13	reverse() 反转数组元素的顺序 - 第一个变为最后一个，最后一个变为第一个。
14	shift() 从数组中删除第一个元素并返回该元素。
15	slice() 提取数组的一部分并返回一个新数组。
16	some() 如果此数组中的至少一个元素满足提供的测试函数，则返回 true。
17	toSource() 表示对象的源代码。
18	sort() 对数组的元素进行排序。
19	splice() 向数组添加和/或从数组中删除元素。
20	toString() 返回表示数组及其元素的字符串。
21	unshift() 向数组的前面添加一个或多个元素，并返回数组的新长度。

在以下部分，我们将提供一些示例来演示 Array 方法的使用。

JavaScript - 日期对象

Date 对象是内置于 JavaScript 语言中的数据类型。Date 对象使用new Date( ) 创建，如下所示。

创建 Date 对象后，许多方法允许您对其进行操作。大多数方法只是允许您获取和设置对象的年份、月份、日期、小时、分钟、秒和毫秒字段，使用本地时间或 UTC（通用或 GMT）时间。

ECMAScript 标准要求 Date 对象能够以毫秒精度表示 1970 年 1 月 1 日前后 1 亿天内的任何日期和时间。这是一个正负 273,785 年的范围，因此 JavaScript 可以表示到 275755 年的日期和时间。

语法

您可以使用以下任何语法使用 Date() 构造函数创建 Date 对象。

new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])

注意 - 方括号中的参数始终是可选的。

以下是参数的描述：

无参数 - 无参数时，Date() 构造函数创建一个设置为当前日期和时间的 Date 对象。
毫秒数 - 当传递一个数字参数时，它被视为日期的内部数字表示形式（以毫秒为单位），如 getTime() 方法返回的那样。例如，传递参数 5000 会创建一个表示 1970 年 1 月 1 日午夜后五秒的日期。
日期字符串 - 当传递一个字符串参数时，它是日期的字符串表示形式，格式为 Date.parse() 方法接受的格式。
7 个参数 - 要使用上面显示的构造函数的最后一种形式。以下是每个参数的描述：

年份 - 表示年份的整数。
月份 - 表示月份的整数，从 0（一月）到 11（十二月）。
日期 - 表示月份中的某一天的整数。
hour − 表示一天中小时数的整数（24 小时制）。
minute − 表示时间读数中分钟部分的整数。
second − 表示时间读数中秒部分的整数。
millisecond − 表示时间读数中毫秒部分的整数。

日期属性

以下是 Date 对象的属性及其说明列表。

序号	属性和说明
1	constructor 指定创建对象原型的函数。
2	prototype prototype 属性允许您向对象添加属性和方法。

在以下部分，我们将提供一些示例来演示不同日期属性的使用。

日期方法

以下是与Date一起使用的方法及其说明列表。

序号	方法及描述
1	Date() 返回今天的日期和时间。
2	getDate() 根据本地时间返回指定日期的月份中的日期。
3	getDay() 根据本地时间返回指定日期的一周中的日期。
4	getFullYear() 根据本地时间返回指定日期的年份。
5	getHours() 根据本地时间返回指定日期的小时数。
6	getMilliseconds() 根据本地时间返回指定日期的毫秒数。
7	getMinutes() 根据本地时间返回指定日期的分钟数。
8	getMonth() 根据本地时间返回指定日期的月份。
9	getSeconds() 根据本地时间返回指定日期的秒数。
10	getTime() 返回指定日期的数值，表示自 1970 年 1 月 1 日 00:00:00 UTC 以来经过的毫秒数。
11	getTimezoneOffset() 返回当前区域设置的时区偏移量（以分钟为单位）。
12	getUTCDate() 根据世界标准时间返回指定日期的月份中的日期。
13	getUTCDay() 根据世界标准时间返回指定日期的一周中的日期。
14	getUTCFullYear() 根据世界标准时间返回指定日期的年份。
15	getUTCHours() 根据世界标准时间返回指定日期的小时数。
16	getUTCMilliseconds() 根据世界标准时间返回指定日期的毫秒数。
17	getUTCMinutes() 根据世界标准时间返回指定日期的分钟数。
18	getUTCMonth() 根据世界标准时间返回指定日期的月份。
19	getUTCSeconds() 根据世界标准时间返回指定日期的秒数。
20	getYear() 已弃用 - 根据本地时间返回指定日期的年份。请使用 getFullYear 代替。
21	setDate() 根据本地时间设置指定日期的月份中的日期。
22	setFullYear() 根据本地时间设置指定日期的完整年份。
23	setHours() 根据本地时间设置指定日期的小时数。
24	setMilliseconds() 根据本地时间设置指定日期的毫秒数。
25	setMinutes() 根据本地时间设置指定日期的分钟数。
26	setMonth() 根据本地时间设置指定日期的月份。
27	setSeconds() 根据本地时间设置指定日期的秒数。
28	setTime() 将 Date 对象设置为自 1970 年 1 月 1 日 00:00:00 UTC 以来经过的毫秒数所表示的时间。
29	setUTCDate() 根据世界标准时间设置指定日期的月份中的日期。
30	setUTCFullYear() 根据世界标准时间设置指定日期的完整年份。
31	setUTCHours() 根据世界标准时间设置指定日期的小时数。
32	setUTCMilliseconds() 根据世界标准时间设置指定日期的毫秒数。
33	setUTCMinutes() 根据世界标准时间设置指定日期的分钟数。
34	setUTCMonth() 根据世界标准时间设置指定日期的月份。
35	setUTCSeconds() 根据世界标准时间设置指定日期的秒数。
36	setYear() 已弃用 - 根据本地时间设置指定日期的年份。请使用 setFullYear 代替。
37	toDateString() 将 Date 的“日期”部分作为人类可读的字符串返回。
38	toGMTString() 已弃用 - 使用 Internet GMT 约定将日期转换为字符串。请使用 toUTCString 代替。
39	toLocaleDateString() 使用当前区域设置的约定将 Date 的“日期”部分作为字符串返回。
40	toLocaleFormat() 使用格式字符串将日期转换为字符串。
41	toLocaleString() 使用当前区域设置的约定将日期转换为字符串。
42	toLocaleTimeString() 使用当前区域设置的约定将 Date 的“时间”部分作为字符串返回。
43	toSource() 返回表示等效 Date 对象源的字符串；您可以使用此值创建新对象。
44	toString() 返回表示指定 Date 对象的字符串。
45	toTimeString() 将 Date 的“时间”部分作为人类可读的字符串返回。
46	toUTCString() 使用世界标准时间约定将日期转换为字符串。
47	valueOf() 返回 Date 对象的原始值。

使用世界标准时间约定将日期转换为字符串。

Date 静态方法

除了前面列出的许多实例方法外，Date 对象还定义了两个静态方法。这些方法是通过 Date() 构造函数本身调用的。

序号	方法及描述
1	Date.parse( ) 解析日期和时间的字符串表示形式，并返回该日期的内部毫秒表示形式。
2	Date.UTC( ) 返回指定 UTC 日期和时间的毫秒表示形式。

在以下部分，我们将提供一些示例来演示 Date 静态方法的使用。

JavaScript - Math 对象

math 对象为您提供了数学常数和函数的属性和方法。与其他全局对象不同，Math 不是构造函数。Math 的所有属性和方法都是静态的，可以通过使用 Math 作为对象来调用，而无需创建它。

因此，您可以将常数pi 称为Math.PI，并将正弦函数称为Math.sin(x)，其中 x 是方法的参数。

语法

调用 Math 属性和方法的语法如下所示

var pi_val = Math.PI;
var sine_val = Math.sin(30);

Math 属性

以下是 Math 的所有属性及其说明列表。

序号	属性和说明
1	E \ 欧拉常数和自然对数的底数，大约为 2.718。
2	LN2 2 的自然对数，大约为 0.693。
3	LN10 10 的自然对数，大约为 2.302。
4	LOG2E E 的以 2 为底的对数，大约为 1.442。
5	LOG10E E 的以 10 为底的对数，大约为 0.434。
6	PI 圆周与其直径的比率，大约为 3.14159。
7	SQRT1_2 1/2 的平方根；等效地，1 除以 2 的平方根，大约为 0.707。
8	SQRT2 2 的平方根，大约为 1.414。

在以下部分，我们将提供一些示例来演示 Math 属性的使用。

Math 方法

以下是与 Math 对象关联的方法及其说明列表

序号	方法及描述
1	abs() 返回数字的绝对值。
2	acos() 返回数字的反余弦（以弧度为单位）。
3	asin() 返回数字的反正弦（以弧度为单位）。
4	atan() 返回数字的反正切（以弧度为单位）。
5	atan2() 返回其参数商的反正切。
6	ceil() 返回大于或等于数字的最小整数。
7	cos() 返回数字的余弦。
8	exp() 返回 E^N，其中 N 是参数，E 是欧拉常数，即自然对数的底数。
9	floor() 返回小于或等于数字的最大整数。
10	log() 返回数字的自然对数（以 E 为底）。
11	max() 返回零个或多个数字中最大的数字。
12	min() 返回零个或多个数字中最小的数字。
13	pow() 返回底数的指数次幂，即底数^指数。
14	random() 返回 0 到 1 之间的伪随机数。
15	round() 返回四舍五入到最接近整数的数字的值。
16	sin() 返回数字的正弦。
17	sqrt() 返回数字的平方根。
18	tan() 返回数字的正切。
19	toSource() 返回字符串“Math”。

在以下部分，我们将提供一些示例来演示与 Math 相关的方法的使用。

正则表达式和 RegExp 对象

正则表达式是一个描述字符模式的对象。

JavaScript 的RegExp 类表示正则表达式，String 和RegExp 都定义了使用正则表达式对文本执行强大的模式匹配和搜索替换功能的方法。

语法

正则表达式可以使用RegExp ()构造函数定义，如下所示：

var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;

以下是参数的说明：

pattern − 指定正则表达式模式的字符串或另一个正则表达式。
attributes − 一个可选字符串，包含任何“g”、“i”和“m”属性，分别指定全局、不区分大小写和多行匹配。

方括号

方括号([])在正则表达式的上下文中具有特殊含义。它们用于查找一系列字符。

序号	表达式和说明
1	[...] 方括号之间的任何一个字符。
2	[^...] 方括号之间不存在的任何一个字符。
3	[0-9] 它匹配从 0 到 9 的任何十进制数字。
4	[a-z] 它匹配从小写a到小写z的任何字符。
5	[A-Z] 它匹配从大写A到大写Z的任何字符。
6	[a-Z] 它匹配从小写a到大写Z的任何字符。

上面显示的范围是一般的；您还可以使用范围[0-3]来匹配从 0 到 3 的任何十进制数字，或使用范围[b-v]来匹配从b到v的任何小写字符。

量词

括号字符序列和单个字符的频率或位置可以用特殊字符表示。每个特殊字符都有特定的含义。+、*、?和$标记都跟随一个字符序列。

序号	表达式和说明
1	p+ 它匹配包含一个或多个p的任何字符串。
2	p* 它匹配包含零个或多个p的任何字符串。
3	p? 它匹配包含最多一个p的任何字符串。
4	p{N} 它匹配包含N个p的序列的任何字符串
5	p{2,3} 它匹配包含两个或三个p的序列的任何字符串。
6	p{2, } 它匹配包含至少两个p的序列的任何字符串。
7	p$ 它匹配任何以p结尾的字符串。
8	^p 它匹配任何以p开头的字符串。

示例

以下示例更详细地解释了字符匹配。

序号	表达式和说明
1	[^a-zA-Z] 它匹配任何不包含从a到z和A到Z的任何字符的字符串。
2	p.p 它匹配包含p、后跟任何字符，然后再次后跟另一个p的任何字符串。
3	^.{2}$ 它匹配包含正好两个字符的任何字符串。
4	*<b>(.)</b>** 它匹配任何包含在<b>和</b>之间的字符串。
5	p(hp)* 它匹配包含p后跟零个或多个hp序列的任何字符串。

字面字符

序号	字符 & 描述
1	字母数字自身
2	\0 NUL字符 (\u0000)
3	\t 制表符 (\u0009)
4	\n 换行符 (\u000A)
5	\v 垂直制表符 (\u000B)
6	\f 换页符 (\u000C)
7	\r 回车符 (\u000D)
8	\xnn 由十六进制数nn指定的拉丁字符；例如，\x0A与\n相同
9	\uxxxx 由十六进制数xxxx指定的Unicode字符；例如，\u0009与\t相同
10	\cX 控制字符^X；例如，\cJ等效于换行符\n

元字符

元字符只是一个以反斜杠开头的字母字符，用于赋予组合特殊的含义。

例如，您可以使用'\d'元字符搜索一大笔钱：/([\d]+)000/，这里\d将搜索任何数字字符的字符串。

下表列出了可以在Perl风格正则表达式中使用的一组元字符。

序号	字符 & 描述
1	. 单个字符
2	\s 空白字符（空格、制表符、换行符）
3	\S 非空白字符
4	\d 数字（0-9）
5	\D 非数字
6	\w 单词字符（a-z、A-Z、0-9、_）
7	\W 非单词字符
8	[\b] 字面退格符（特殊情况）。
9	[aeiou] 匹配给定集合中的单个字符
10	[^aeiou] 匹配给定集合之外的单个字符
11	(foo\|bar\|baz) 匹配指定的任何备选方案

修饰符

有几个可用的修饰符可以简化您使用正则表达式的方式，例如大小写敏感、多行搜索等。

序号	修饰符 & 描述
1	i 执行不区分大小写的匹配。
2	m 指定如果字符串包含换行符或回车符，则^和$运算符将匹配换行符边界，而不是字符串边界
3	g 执行全局匹配，即查找所有匹配项，而不是在第一次匹配后停止。

序号

修饰符 & 描述

执行不区分大小写的匹配。

指定如果字符串包含换行符或回车符，则^和$运算符将匹配换行符边界，而不是字符串边界

执行全局匹配，即查找所有匹配项，而不是在第一次匹配后停止。

RegExp 属性

以下是与RegExp关联的属性及其描述列表。

序号	属性和说明
1	constructor 指定创建对象原型的函数。
2	global 指定是否设置了“g”修饰符。
3	ignoreCase 指定是否设置了“i”修饰符。
4	lastIndex 开始下一次匹配的索引。
5	multiline 指定是否设置了“m”修饰符。
6	source 模式的文本。

在以下部分，我们将提供一些示例来演示RegExp属性的用法。

RegExp 方法

以下是与RegExp关联的方法及其描述列表。

序号	方法及描述
1	exec() 在其字符串参数中执行匹配搜索。
2	test() 在其字符串参数中测试匹配。
3	toSource() 返回表示指定对象的object literal；您可以使用此值创建新对象。
4	toString() 返回表示指定对象的字符串。

在以下部分，我们将提供一些示例来演示RegExp方法的用法。

JavaScript - 文档对象模型或DOM

每个网页都驻留在浏览器窗口内，该窗口可以被视为一个对象。

Document对象表示在该窗口中显示的HTML文档。Document对象具有各种属性，这些属性引用其他对象，这些对象允许访问和修改文档内容。

访问和修改文档内容的方式称为文档对象模型或DOM。对象以层次结构组织。这种层次结构适用于Web文档中对象的组织。

Window对象 - 层次结构的顶部。它是对象层次结构的最外层元素。
Document对象 - 加载到窗口中的每个HTML文档都成为一个Document对象。文档包含页面的内容。
Form对象 - 包含在<form>...</form>标记中的所有内容都设置Form对象。
表单控件元素 - Form对象包含为该对象定义的所有元素，例如文本字段、按钮、单选按钮和复选框。

这是一个几个重要对象的简单层次结构 -

存在多个DOM。以下部分详细解释了每个DOM，并描述了如何使用它们来访问和修改文档内容。

传统DOM - 这是在早期版本的JavaScript语言中引入的模型。它得到所有浏览器的良好支持，但仅允许访问文档的某些关键部分，例如表单、表单元素和图像。
W3C DOM - 此文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）标准化。此模型几乎得到所有现代浏览器的支持。
IE4 DOM - 此文档对象模型是在Microsoft Internet Explorer浏览器的版本4中引入的。IE 5及更高版本包含对大多数基本W3C DOM功能的支持。

DOM兼容性

如果要编写一个脚本，使其能够根据可用性使用W3C DOM或IE 4 DOM，则可以使用功能测试方法，该方法首先检查方法或属性的存在以确定浏览器是否具有所需的功能。例如 -

if (document.getElementById) {
   // If the W3C method exists, use it
} else if (document.all) {
   // If the all[] array exists, use it
} else {
   // Otherwise use the legacy DOM
}

JavaScript - 错误 & 异常处理

编程中有三种类型的错误：(a) 语法错误，(b) 运行时错误和 (c) 逻辑错误。

语法错误

语法错误，也称为解析错误，在传统的编程语言中发生在编译时，在JavaScript中发生在解释时。

例如，以下行会导致语法错误，因为它缺少右括号。

<script type = "text/javascript">
   <!--
      window.print(;
   //-->
</script>

当JavaScript中发生语法错误时，只有包含在与语法错误相同线程中的代码会受到影响，其他线程中的其余代码将继续执行，假设它们中没有任何内容依赖于包含错误的代码。

运行时错误

运行时错误，也称为异常，发生在执行期间（编译/解释之后）。

例如，以下行会导致运行时错误，因为这里的语法是正确的，但在运行时，它试图调用一个不存在的方法。

<script type = "text/javascript">
   <!--
      window.printme();
   //-->
</script>

异常也会影响发生它们的线程，允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。相反，当您在驱动脚本的逻辑中犯错并且没有得到预期的结果时，就会发生这些错误。

您无法捕获这些错误，因为这取决于您的业务需求，您希望在程序中使用哪种类型的逻辑。

try...catch...finally语句

最新版本的JavaScript添加了异常处理功能。JavaScript实现了try...catch...finally结构以及throw运算符来处理异常。

您可以捕获程序员生成的和运行时异常，但您无法捕获JavaScript语法错误。

以下是try...catch...finally块的语法 -

<script type = "text/javascript">
   <!--
      try {
         // Code to run
         [break;]
      } 
      
      catch ( e ) {
         // Code to run if an exception occurs
         [break;]
      }
      
      [ finally {
         // Code that is always executed regardless of 
         // an exception occurring
      }]
   //-->
</script>

try块后面必须紧跟一个catch块或一个finally块（或两者之一）。当try块中发生异常时，异常将放置在e中，并执行catch块。可选的finally块在try/catch之后无条件执行。

示例

这是一个示例，我们试图调用一个不存在的函数，该函数反过来会引发异常。让我们看看在没有try...catch的情况下它的行为如何 -

实时演示

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               alert("Value of variable a is : " + a );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>      
   </body>
</html>

输出

现在让我们尝试使用try...catch捕获此异常并显示一条用户友好的消息。如果要隐藏此错误，您也可以抑制此消息。

实时演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               try {
                  alert("Value of variable a is : " + a );
               } 
               catch ( e ) {
                  alert("Error: " + e.description );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

输出

您可以使用finally块，它将在try/catch之后始终无条件执行。这是一个示例。

实时演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               
               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
               finally {
                  alert("Finally block will always execute!" );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

输出

throw语句

您可以使用throw语句引发内置异常或自定义异常。稍后可以捕获这些异常，您可以采取适当的操作。

示例

以下示例演示了如何使用throw语句。

实时演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               var b = 0;
               
               try {
                  if ( b == 0 ) {
                     throw( "Divide by zero error." ); 
                  } else {
                     var c = a / b;
                  }
               }
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

输出

您可以使用字符串、整数、布尔值或对象在一个函数中引发异常，然后您可以在与上面相同的函数中捕获该异常，或者在另一个函数中使用try...catch块捕获该异常。

onerror() 方法

onerror 事件处理程序是 JavaScript 中第一个促进错误处理的功能。每当页面上发生异常时，就会在窗口对象上触发error 事件。

实时演示

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

输出

onerror 事件处理程序提供三条信息来识别错误的确切性质：

错误消息 - 浏览器为给定错误显示的相同消息
URL - 发生错误的文件
行号 - 给定 URL 中导致错误的行号

以下示例演示如何提取这些信息。

示例

实时演示

<html>
   <head>
   
      <script type = "text/javascript">
         <!--
            window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

输出

您可以以您认为更好的任何方式显示提取的信息。

如果加载图像时出现任何问题，您可以使用如下所示的onerror方法显示错误消息。

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

您可以将onerror与许多 HTML 标签一起使用，以便在发生错误时显示相应的提示消息。

JavaScript - 表单验证

表单验证通常在服务器端进行，在客户端输入所有必要数据并按下提交按钮后。如果客户端输入的数据不正确或丢失，服务器将不得不将所有数据发送回客户端，并请求使用正确的信息重新提交表单。这确实是一个漫长的过程，给服务器带来了很大的负担。

JavaScript 提供了一种在将表单数据发送到 Web 服务器之前在客户端计算机上验证表单数据的方法。表单验证通常执行两个功能。

基本验证 - 首先，必须检查表单以确保所有必填字段都已填写。这只需要循环遍历表单中的每个字段并检查数据。
数据格式验证 - 其次，必须检查输入的数据是否格式和值正确。您的代码必须包含适当的逻辑来测试数据的正确性。

示例

我们将举一个例子来理解验证的过程。这是一个简单的 HTML 格式表单。

实时演示

<html>   
   <head>
      <title>Form Validation</title>      
      <script type = "text/javascript">
         <!--
            // Form validation code will come here.
         //-->
      </script>      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>      
   </body>
</html>

输出

基本表单验证

首先让我们看看如何进行基本表单验证。在上面的表单中，当发生onsubmit事件时，我们调用validate()来验证数据。以下代码显示了此 validate() 函数的实现。

<script type = "text/javascript">
   <!--
      // Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

数据格式验证

现在我们将了解如何在将输入的表单数据提交到 Web 服务器之前验证它。

以下示例演示如何验证输入的电子邮件地址。电子邮件地址必须至少包含一个“@”符号和一个点 (.)。此外，“@”不能是电子邮件地址的第一个字符，最后一个点必须至少在“@”符号之后一个字符。

示例

尝试以下用于电子邮件验证的代码。

<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>

JavaScript - 动画

您可以使用 JavaScript 创建一个复杂的动画，其中包含但不限于以下元素：

烟花
淡入淡出效果
卷入或卷出
页面进入或页面退出
对象移动

您可能对现有的基于 JavaScript 的动画库感兴趣：Script.Aculo.us。

本教程提供了一个关于如何使用 JavaScript 创建动画的基本理解。

JavaScript 可用于根据由逻辑方程或函数确定的某种模式，在页面周围移动多个 DOM 元素（<img />、<div> 或任何其他 HTML 元素）。

JavaScript 提供以下两个函数，这些函数在动画程序中经常使用。

setTimeout( function, duration) - 此函数在距现在duration毫秒后调用function。
setInterval(function, duration) - 此函数每隔duration毫秒调用function。
clearTimeout(setTimeout_variable) - 此函数调用清除由 setTimeout() 函数设置的任何计时器。

JavaScript 还可以设置 DOM 对象的许多属性，包括其在屏幕上的位置。您可以设置对象的top和 left 属性以将其定位在屏幕上的任何位置。以下是其语法。

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手动动画

因此，让我们使用 DOM 对象属性和 JavaScript 函数实现一个简单的动画，如下所示。以下列表包含不同的 DOM 方法。

我们使用 JavaScript 函数getElementById()获取 DOM 对象，然后将其分配给全局变量imgObj。
我们定义了一个初始化函数init()来初始化imgObj，其中我们设置了它的position和left属性。
我们在窗口加载时调用初始化函数。
最后，我们调用moveRight()函数将左侧距离增加 10 像素。您也可以将其设置为负值以将其移动到左侧。

示例

尝试以下示例。

实时演示

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>      
   </body>
</html>

输出

自动化动画

在上面的示例中，我们看到了图像如何随着每次点击向右移动。我们可以使用 JavaScript 函数setTimeout()来自动执行此过程，如下所示：

我们添加了更多方法。因此，让我们看看这里有什么新内容：

moveRight()函数调用setTimeout()函数来设置imgObj的位置。
我们添加了一个新函数stop()来清除setTimeout()函数设置的计时器，并将对象设置为其初始位置。

示例

尝试以下示例代码。

实时演示

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);    // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>      
   </body>
</html>

鼠标事件的悬停

这是一个简单的示例，显示了使用鼠标事件的图像悬停。

让我们看看我们在以下示例中使用了什么：

在加载此页面时，“if”语句检查图像对象是否存在。如果图像对象不可用，则不会执行此代码块。
Image()构造函数创建并预加载一个名为image1的新图像对象。
src 属性被分配给名为 /images/html.gif 的外部图像文件。
类似地，我们创建了image2对象并在该对象中分配了/images/http.gif。
#（井号）禁用链接，以便浏览器在单击时不会尝试转到 URL。此链接是图像。
当用户鼠标移到链接上时，将触发onMouseOver事件处理程序，当用户鼠标移开链接（图像）时，将触发onMouseOut事件处理程序。
当鼠标移到图像上时，HTTP 图像从第一个图像更改为第二个图像。当鼠标从图像移开时，将显示原始图像。
当鼠标从链接移开时，初始图像 html.gif 将重新出现在屏幕上。

实时演示

<html>
   
   <head>
      <title>Rollover with a Mouse Events</title>
      
      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();     // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();     // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Move your mouse over the image to see the result</p>
      
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>

JavaScript - 多媒体

JavaScript 的navigator对象包含一个名为plugins的子对象。此对象是一个数组，每个浏览器中安装的每个插件都有一个条目。navigator.plugins 对象仅受 Netscape、Firefox 和 Mozilla 支持。

示例

以下示例演示如何列出浏览器中安装的所有插件：

实时演示

<html>
   <head>
      <title>List of Plug-Ins</title>
   </head>
   
   <body>
      <table border = "1">
         <tr>
            <th>Plug-in Name</th>
            <th>Filename</th>
            <th>Description</th>
         </tr>
         
         <script language = "JavaScript" type = "text/javascript">
            for (i = 0; i<navigator.plugins.length; i++) {
               document.write("<tr><td>");
               document.write(navigator.plugins[i].name);
               document.write("</td><td>");
               document.write(navigator.plugins[i].filename);
               document.write("</td><td>");
               document.write(navigator.plugins[i].description);
               document.write("</td></tr>");
            }
         </script>
      </table>      
   </body>
</html>

输出

检查插件

每个插件在数组中都有一个条目。每个条目都有以下属性：

name - 是插件的名称。
filename - 是加载以安装插件的可执行文件。
description - 是插件的描述，由开发人员提供。
mimeTypes - 是一个数组，其中包含插件支持的每个 MIME 类型的一个条目。

您可以在脚本中使用这些属性来找出已安装的插件，然后使用 JavaScript 播放相应的媒体文件。请查看以下示例。

<html>   
   <head>
      <title>Using Plug-Ins</title>
   </head>
   
   <body>   
      <script language = "JavaScript" type = "text/javascript">
         media = navigator.mimeTypes["video/quicktime"];
         
         if (media) {
            document.write("<embed src = 'quick.mov' height = 100 width = 100>");
         } else {
            document.write("<img src = 'quick.gif' height = 100 width = 100>");
         }
      </script>      
   </body>
</html>

输出

注意 - 这里我们使用 HTML <embed> 标签来嵌入多媒体文件。

控制多媒体

让我们举一个在几乎所有浏览器中都能正常工作的实际例子：

实时演示

<html>   
   <head>
      <title>Using Embeded Object</title>
      
      <script type = "text/javascript">
         <!--
            function play() {
               if (!document.demo.IsPlaying()) {
                  document.demo.Play();
               }
            }
            function stop() {
               if (document.demo.IsPlaying()) {
                  document.demo.StopPlay();
               }
            }
            function rewind() {
               if (document.demo.IsPlaying()) {
                  document.demo.StopPlay();
               }
               document.demo.Rewind();
            }
         //-->
      </script>
   </head>
   
   <body>      
      <embed id = "demo" name = "demo"
         src = "http://www.amrood.com/games/kumite.swf"
         width = "318" height = "300" play = "false" loop = "false"
         pluginspage = "http://www.macromedia.com/go/getflashplayer"
         swliveconnect = "true">
      
      <form name = "form" id = "form" action = "#" method = "get">
         <input type = "button" value = "Start" onclick = "play();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
         <input type = "button" value = "Rewind" onclick = "rewind();" />
      </form>      
   </body>
</html>

输出

如果您使用的是 Mozilla、Firefox 或 Netscape，则

JavaScript - 调试

开发人员在编码时偶尔会犯错误。程序或脚本中的错误称为bug。

查找和修复错误的过程称为调试，是开发过程的正常部分。本节介绍可以帮助您完成调试任务的工具和技术。

IE 中的错误消息

跟踪错误的最基本方法是在浏览器中打开错误信息。默认情况下，当页面上发生错误时，Internet Explorer 会在状态栏中显示一个错误图标。

双击此图标将带您到一个对话框，其中显示有关发生的特定错误的信息。

由于此图标很容易被忽略，因此 Internet Explorer 提供了在每次发生错误时自动显示错误对话框的选项。

要启用此选项，请选择工具→Internet 选项→高级选项卡，然后最后选中“显示有关每个脚本错误的通知”复选框选项，如下所示：

Firefox 或 Mozilla 中的错误消息

其他浏览器（如 Firefox、Netscape 和 Mozilla）会将错误消息发送到一个名为JavaScript 控制台或错误控制台的特殊窗口。要查看控制台，请选择工具→错误控制台或 Web 开发。

不幸的是，由于这些浏览器在发生错误时不会给出任何视觉指示，因此您必须保持控制台打开并监视脚本执行过程中的错误。

错误通知

在控制台上或通过 Internet Explorer 对话框显示的错误通知是语法错误和运行时错误的结果。这些错误通知包括发生错误的行号。

如果您使用的是 Firefox，则可以单击错误控制台中提供的错误以转到脚本中包含错误的确切行。

如何调试脚本

有多种方法可以调试您的 JavaScript：

使用 JavaScript 验证器

检查 JavaScript 代码中是否存在奇怪错误的一种方法是将其通过一个程序运行，该程序会检查它以确保它是有效的，并且遵循该语言的官方语法规则。这些程序称为验证解析器或简称验证器，通常与商业 HTML 和 JavaScript 编辑器一起提供。

JavaScript 最方便的验证器是 Douglas Crockford 的 JavaScript Lint，它可在 Douglas Crockford 的 JavaScript Lint 上免费获得。

只需访问该网页，将您的 JavaScript（仅 JavaScript）代码粘贴到提供的文本区域中，然后单击 jslint 按钮。此程序将解析您的 JavaScript 代码，确保所有变量和函数定义都遵循正确的语法。它还将检查 JavaScript 语句（例如 if 和while），以确保它们也遵循正确的格式。

向程序添加调试代码

您可以在程序中使用alert()或document.write()方法来调试代码。例如，您可能会编写如下内容：

var debugging = true;
var whichImage = "widget";

if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
   var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

通过检查alert()的内容和顺序，您可以非常轻松地检查程序的运行状况。

使用 JavaScript 调试器

调试器是一个应用程序，它将脚本执行的所有方面都置于程序员的控制之下。调试器通过一个界面提供对脚本状态的细粒度控制，允许您检查和设置值以及控制执行流程。

一旦脚本加载到调试器中，就可以一行一行地运行，或者指示它在某些断点处停止。一旦执行停止，程序员就可以检查脚本及其变量的状态，以确定是否有问题。您还可以监视变量的值变化。

Mozilla JavaScript 调试器（代号为 Venkman）的最新版本，适用于 Mozilla 和 Netscape 浏览器，可以从 http://www.hacksrus.com/~ginda/venkman 下载

开发者实用技巧

您可以牢记以下技巧，以减少脚本中的错误数量并简化调试过程 -

使用大量的注释。注释使您能够解释编写脚本的原因以及解释代码中特别困难的部分。
始终使用缩进使您的代码易于阅读。缩进语句还可以让您更轻松地匹配开始和结束标签、花括号和其他 HTML 和脚本元素。
编写模块化代码。尽可能将语句分组到函数中。函数允许您将相关语句分组，并以最小的努力测试和重用代码部分。
在命名变量和函数的方式上保持一致。尝试使用足够长的名称，这些名称具有意义并描述变量的内容或函数的用途。
在命名变量和函数时使用一致的语法。换句话说，全部使用小写或全部使用大写；如果您更喜欢驼峰式命名法，请始终如一地使用它。
测试长脚本的方式应采用模块化方式。换句话说，不要尝试在测试任何部分之前编写整个脚本。编写一部分并使其工作，然后再添加下一部分代码。
使用描述性变量和函数名称，并避免使用单字符名称。
注意您的引号。请记住，引号成对使用，用于括起字符串，并且两个引号必须是相同的样式（单引号或双引号）。
注意您的等号。您不应将单个 = 用于比较目的。
使用var关键字显式声明变量。

JavaScript - 图片地图

您可以使用 JavaScript 创建客户端图像映射。客户端图像映射由 <img /> 标签的usemap属性启用，并由特殊的 <map> 和 <area> 扩展标签定义。

将形成地图的图像以通常的方式插入页面，使用 <img /> 元素，除了它带有称为usemap的额外属性。usemap 属性的值是您即将看到的 <map> 元素的 name 属性的值，前面带有井号或哈希符号。

<map> 元素实际上为图像创建了地图，并且通常紧跟在 <img /> 元素之后。它充当 <area /> 元素的容器，这些元素实际上定义了可点击的热点。<map> 元素仅带有一个属性，即name属性，它是标识地图的名称。这就是 <img /> 元素如何知道要使用哪个 <map> 元素。

<area> 元素指定定义每个可点击热点的边界的形状和坐标。

以下代码结合了图像映射和 JavaScript，当鼠标移动到图像的不同部分时，在文本框中生成消息。

实时演示

<html>   
   <head>
      <title>Using JavaScript Image Map</title>
      
      <script type = "text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
         //-->
      </script>
   </head>
   
   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20" />
      </form>
      
      <!-- Create  Mappings -->
      <img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>
      
      <map name = "tutorials">
         <area shape="poly" 
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "rect" 
            coords = "22,83,126,125"
            href = "/html/index.htm" alt = "HTML Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('html')" 
            onMouseOut = "showTutorial('')"/>
         
         <area shape = "circle" 
            coords = "73,168,32"
            href = "/php/index.htm" alt = "PHP Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('php')" 
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>
</html>

输出

您可以通过将鼠标光标放在图像对象上来感受地图的概念。

JavaScript - 浏览器兼容性

了解不同浏览器之间的差异以处理每个浏览器的方式非常重要。因此，了解您的网页正在运行的浏览器非常重要。

要获取有关网页当前正在运行的浏览器的信息，请使用内置的navigator对象。

Navigator 属性

在您的网页中，您可以使用多个与 Navigator 相关的属性。以下是每个属性的名称和描述列表。

序号	属性和说明
1	appCodeName 此属性是一个字符串，包含浏览器的代号，Netscape 用于 Netscape，Microsoft Internet Explorer 用于 Internet Explorer。
2	appVersion 此属性是一个字符串，包含浏览器的版本以及其他有用信息，例如其语言和兼容性。
3	language 此属性包含浏览器使用的语言的两位字母缩写。仅限 Netscape。
4	mimTypes[] 此属性是一个数组，包含客户端支持的所有 MIME 类型。仅限 Netscape。
5	platform[] 此属性是一个字符串，包含为其编译浏览器的平台。“Win32”用于 32 位 Windows 操作系统
6	plugins[] 此属性是一个数组，包含已安装在客户端上的所有插件。仅限 Netscape。
7	userAgent[] 此属性是一个字符串，包含浏览器的代号和版本。此值发送到源服务器以识别客户端。

Navigator 方法

有几个特定于 Navigator 的方法。以下是它们的名称和描述列表。

序号	描述
1	javaEnabled() 此方法确定客户端是否启用了 JavaScript。如果启用了 JavaScript，则此方法返回 true；否则，返回 false。
2	plugings.refresh 此方法使新安装的插件可用，并使用所有新的插件名称填充 plugins 数组。仅限 Netscape。
3	preference(name,value) 此方法允许签名脚本获取和设置一些 Netscape 首选项。如果省略第二个参数，则此方法将返回指定首选项的值；否则，它将设置该值。仅限 Netscape。
4	taintEnabled() 如果启用了数据污染，则此方法返回 true；否则返回 false。

浏览器检测

有一个简单的 JavaScript 可以用来找出浏览器的名称，然后相应地为用户提供 HTML 页面。

实时演示

<html>   
   <head>
      <title>Browser Detection Example</title>
   </head>
   
   <body>      
      <script type = "text/javascript">
         <!--
            var userAgent   = navigator.userAgent;
            var opera       = (userAgent.indexOf('Opera') != -1);
            var ie          = (userAgent.indexOf('MSIE') != -1);
            var gecko       = (userAgent.indexOf('Gecko') != -1);
            var netscape    = (userAgent.indexOf('Mozilla') != -1);
            var version     = navigator.appVersion;
            
            if (opera) {
               document.write("Opera based browser");
               // Keep your opera specific URL here.
            } else if (gecko) {
               document.write("Mozilla based browser");
               // Keep your gecko specific URL here.
            } else if (ie) {
               document.write("IE based browser");
               // Keep your IE specific URL here.
            } else if (netscape) {
               document.write("Netscape based browser");
               // Keep your Netscape specific URL here.
            } else {
               document.write("Unknown browser");
            }
            
            // You can include version to along with any above condition.
            document.write("<br /> Browser version info : " + version );
         //-->
      </script>      
   </body>
</html>

输出

打印页面

JavaScript 快速指南

JavaScript - 概述

什么是 JavaScript？

客户端 JavaScript

JavaScript 的优点

JavaScript 的局限性

JavaScript 开发工具

JavaScript 的现状如何？

JavaScript - 语法

您的第一个 JavaScript 代码

空白字符和换行符

分号是可选的

大小写敏感

JavaScript 中的注释

示例

在浏览器中启用 JavaScript

Internet Explorer 中的 JavaScript

Firefox 中的 JavaScript

Chrome 中的 JavaScript

Opera 中的 JavaScript

针对非 JavaScript 浏览器的警告

JavaScript - 在 HTML 文件中的位置

在<head>...</head>部分中的 JavaScript

在<body>...</body>部分中的 JavaScript

在<body>和<head>部分中的 JavaScript

外部文件中的 JavaScript

JavaScript - 变量

JavaScript 数据类型

JavaScript 变量

JavaScript 变量作用域

JavaScript 变量命名

JavaScript 保留字

JavaScript - 运算符

什么是运算符？

算术运算符

示例

输出

比较运算符

示例

输出

逻辑运算符

示例

输出

位运算符

示例

赋值运算符

示例

输出

其他运算符

条件运算符 (? :)

示例

输出

typeof 运算符

示例

输出

JavaScript - if...else 语句

if-else 流程图

if 语句

语法

示例

输出

if...else 语句

语法

示例

输出

if...else if... 语句

语法

示例

输出

JavaScript - Switch Case

流程图

语法

示例

输出

输出

JavaScript - while 循环

while 循环

流程图

语法

示例