目录

Javascript - 快速指南

JavaScript - Overview

什么是JavaScript?

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

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

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

  • JavaScript是一种轻量级的解释型编程语言。

  • 专为创建以网络为中心的应用程序而设计

  • 与Java互补并与Java集成。

  • HTML的补充和集成。

  • 开放和跨平台

Client-side JavaScript

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

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

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

当用户提交表单时执行JavaScript代码,并且只有当所有条目都有效时,才会将它们提交给Web服务器。

JavaScript可用于捕获用户启动的事件,例如按钮单击,链接导航以及用户显式或隐式启动的其他操作。

JavaScript的优点

使用JavaScript的优点是 -

  • Less server interaction - 您可以在将页面发送到服务器之前验证用户输入。 这样可以节省服务器流量,这意味着服务器负载更少。

  • Immediate feedback to the visitors - 他们不必等待页面重新加载,看他们是否忘记输入内容。

  • Increased interactivity - 您可以创建界面,当用户使用鼠标悬停它们或通过键盘激活它们时会做出反应。

  • Richer interfaces - 您可以使用JavaScript来包含诸如拖放组件和滑块之类的项目,以便为您的站点访问者提供丰富的界面。

JavaScript的局限性

我们不能将JavaScript视为一种成熟的编程语言。 它缺乏以下重要功能 -

  • 客户端JavaScript不允许读取或写入文件。 这是出于安全原因而保留的。

  • JavaScript不能用于网络应用程序,因为没有这样的支持。

  • JavaScript没有任何多线程或多处理器功能。

JavaScript是一种轻量级的解释型编程语言,它允许您在其他静态HTML页面中构建交互性。

JavaScript开发工具

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

为了让我们的生活更简单,各种供应商都提出了非常好的JavaScript编辑工具。 其中一些列在这里 -

  • Microsoft FrontPage - Microsoft开发了一个名为FrontPage的流行HTML编辑器。 FrontPage还为Web开发人员提供了许多JavaScript工具,以帮助创建交互式网站。

  • Macromedia Dreamweaver MX - Macromedia Dreamweaver MX是专业Web开发人群中非常流行的HTML和JavaScript编辑器。 它提供了几个方便的预构建JavaScript组件,与数据库完美集成,并符合XHTML和XML等新标准。

  • Macromedia HomeSite 5 - HomeSite 5是Macromedia HomeSite 5广受欢迎的HTML和JavaScript编辑器,可用于有效管理个人网站。

今天的JavaScript在哪里?

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

可以在以下站点上找到JavaScript 2.0的规范: http://www.ecmascript.org/ : http://www.ecmascript.org/

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

JavaScript - Syntax

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

您可以在网页的任何位置放置包含JavaScript的《script》标记,但通常建议您将其保留在《head》标记内。

JavaScript的简单语法如下所示。

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

脚本标记有两个重要属性 -

  • Language - 此属性指定您正在使用的脚本语言。 通常,它的值将是javascript。 虽然最近版本的HTML(和XHTML,它的继任者)已经逐步淘汰了这个属性的使用。

  • Type - 此属性现在建议用于指示正​​在使用的脚本语言,其值应设置为“text/javascript”。

所以你的JavaScript片段看起来像 -

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

你的第一个JavaScript脚本

让我们举一个示例来打印出“Hello World”。 我们添加了一个围绕JavaScript代码的可选HTML注释。 这是为了从不支持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>

Note - 使用分号是一种很好的编程习惯。

区分大小写 (Case Sensitivity)

JavaScript是一种区分大小写的语言。 这意味着语言关键字,变量,函数名称和任何其他标识符必须始终使用一致的字母大小写。

因此标识符TimeTIME将在JavaScript中传达不同的含义。

NOTE - 在JavaScript中编写变量和函数名称时应小心。

JavaScript中的评论

JavaScript支持C风格和C ++风格的注释,因此 -

  • //和行尾之间的任何文本都被视为注释,并被JavaScript忽略。

  • 字符/ *和* /之间的任何文本都被视为注释。 这可能跨越多行。

  • JavaScript还识别HTML注释开放序列 JavaScript将此视为单行注释,就像//注释一样。

  • JavaScript无法识别HTML注释结束序列 - >,因此应将其写为// - >。

例子 (Example)

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

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

Enabling JavaScript in Browsers

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

Internet Explorer中的JavaScript

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

  • 从菜单中按Tools → Internet Options

  • 从对话框中选择“ Security选项卡。

  • 单击“ Custom Level按钮。

  • 向下滚动,直到找到“ Scripting option.

  • 选择Active scripting下的Enable单选按钮。

  • 最后点击OK然后出来

要在Internet Explorer中禁用JavaScript支持,您需要在“ Active scripting下选择“ Disable单选按钮。

Firefox中的JavaScript

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

  • 打开新标签→在地址栏中输入about: config

  • 然后你会找到警告对话框。 选择I'll be careful, I promise!

  • 然后,您将在浏览器中找到configure options列表。

  • 在搜索栏中输入javascript.enabled

  • 在那里,您可以通过右键单击该选项的值来选择启用或禁用javascript→ select toggle

如果javascript.enabled为true; 点击toogle后,它会转换为false。 如果javascript被禁用; 单击切换后启用它。

Chrome中的JavaScript

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

  • 点击浏览器右上角的Chrome菜单。

  • 选择Settings

  • 单击页面末尾的“ Show advanced settings ”。

  • 在“ Privacy部分下,单击“内容设置”按钮。

  • 在“Javascript”部分中,选择“不允许任何网站运行JavaScript”或“允许所有网站运行JavaScript(推荐)”。

Opera中的JavaScript

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

  • 从菜单中按Tools → Preferences选项。

  • 从对话框中选择“ Advanced选项。

  • 从列出的项目中选择Content

  • 选择Enable JavaScript复选框。

  • 最后点击OK然后出来。

要在Opera中禁用JavaScript支持,请不要选中“ Enable JavaScript checkbox

非JavaScript浏览器的警告

如果您必须使用JavaScript执行重要操作,则可以使用《noscript》标记向用户显示警告消息。

你可以在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 - Placement in HTML File

可以灵活地在HTML文档中的任何位置包含JavaScript代码。 但是,在HTML文件中包含JavaScript的最佳方法如下 -

  • 脚本在 ... head>部分。

  • ... body>部分中的脚本。

  • 脚本在 ... body>和 ... head>部分。

  • 在外部文件中编写脚本,然后包含在 ... head>部分中。

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

... head>部分中的JavaScript

如果您希望在某个事件上运行脚本,例如当用户单击某个位置时,则会将该脚本放在头部中,如下所示 -

<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>部分中的JavaScript

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

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

此代码将产生以下结果 -

新页面打开

和部分中的JavaScript

您可以将您的JavaScript代码完全放在和部分中,如下所示 -

<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,您需要在扩展名为“.js”的简单文本文件中编写所有JavaScript源代码,然后包含该文件,如上所示。

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

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

JavaScript - Variables

JavaScript数据类型

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

JavaScript允许您使用三种原始数据类型 -

  • Numbers,例如。 123,120.50等

  • 文本Strings ,例如“此文本字符串”等。

  • Boolean例如true或false。

JavaScript还定义了两个简单的数据类型, nullundefined,每个数据类型只定义一个值。 除了这些原始数据类型之外,JavaScript还支持称为object的复合数据类型。 我们将在单独的章节中详细介绍对象。

Note - 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>

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

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

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

Note - 对于声明或初始化,只使用var关键字,对于文档中任何变量名的生命周期。 您不应该两次重新声明相同的变量。

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

JavaScript变量范围

变量的范围是程序中定义它的区域。 JavaScript变量只有两个范围。

  • Global Variables - 全局变量具有全局范围,这意味着它可以在JavaScript代码中的任何位置定义。

  • Local Variables - 局部变量仅在定义它的函数中可见。 函数参数始终是该函数的本地参数。

在函数体内,局部变量优先于具有相同名称的全局变量。 如果声明一个与全局变量同名的局部变量或函数参数,则可以有效地隐藏全局变量。 请看下面的示例。

<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保留关键字用作变量名称。 这些关键字将在下一节中提到。 例如, breakboolean变量名称无效。

  • JavaScript变量名称不应以数字(0-9)开头。 它们必须以字母或下划线字符开头。 例如, 123test是无效的变量名称,但_123test是有效的。

  • JavaScript变量名称区分大小写。 例如, Namename是两个不同的变量。

JavaScript保留字

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

abstractelseinstanceofswitch
booleanenumintsynchronized
breakexportinterfacethis
byteextendslongthrow
casefalsenativethrows
catchfinalnewtransient
charfinallynulltrue
classfloatpackagetry
constforprivatetypeof
continuefunctionprotectedvar
debuggergotopublicvoid
defaultifreturnvolatile
deleteimplementsshortwhile
doimportstaticwith
doubleinsuper

JavaScript - Operators

什么是运算符?

让我们采用一个简单的表达式4 + 5 is equal to 9 。 这里4和5被称为operands ,'+'被称为operator 。 JavaScript支持以下类型的运算符。

  • 算术运算符

  • 比较运算符

  • 逻辑(或关系)运算符

  • 分配运算符

  • 条件(或三元)运算符

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

算术运算符 (Arithmetic Operators)

JavaScript支持以下算术运算符 -

假设变量A保持10,变量B保持20,则 -

Sr.No 运算符和描述
1

+ (Addition)

添加两个操作数

Ex: A + B将给出30

2

- (Subtraction)

从第一个中减去第二个操作数

Ex: A - B将给-10

3

* (Multiplication)

将两个操作数相乘

Ex: A * B将给出200

4

/ (Division)

用分母除以分子

Ex: B/A会给2

5

% (Modulus)

输出整数除法的余数

Ex: B%A将给出0

6

++ (Increment)

将整数值增加1

Ex: A ++将给出11

7

-- (Decrement)

将整数值减1

Ex: A--将给出9

Note - 加法运算符(+)适用​​于Numeric和Strings。 例如“a”+ 10将给出“a10”。

例子 (Example)

以下代码显示了如何在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>

输出 (Output)

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...

比较运算符 (Comparison Operators)

JavaScript支持以下比较运算符 -

假设变量A保持10,变量B保持20,则 -

Sr.No 运算符和描述
1

= = (Equal)

检查两个操作数的值是否相等,如果是,则条件成立。

Ex: (A == B)不是真的。

2

!= (Not Equal)

检查两个操作数的值是否相等,如果值不相等,则条件变为true。

Ex: (A!= B)是真的。

3

》 (Greater than)

检查左操作数的值是否大于右操作数的值,如果是,则条件变为真。

Ex: (A“B)不是真的。

4

《 (Less than)

检查左操作数的值是否小于右操作数的值,如果是,则条件变为真。

Ex: (A“B)是真的。

5

》= (Greater than or Equal to)

检查左操作数的值是否大于或等于右操作数的值,如果是,则条件变为真。

Ex: (A“= B)不是真的。

6

《= (Less than or Equal to)

检查左操作数的值是否小于或等于右操作数的值,如果是,则条件变为真。

Ex: (A“= B)是真的。

例子 (Example)

以下代码显示了如何在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>

输出 (Output)

(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...

逻辑运算符 (Logical Operators)

JavaScript支持以下逻辑运算符 -

假设变量A保持10,变量B保持20,则 -

Sr.No 运算符和描述
1

&& (Logical AND)

如果两个操作数都不为零,则条件成立。

Ex: (A && B)是真的。

2

|| (Logical OR)

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

Ex: (A || B)是真的。

3

! (Logical NOT)

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

Ex: ! (A && B)是假的。

例子 (Example)

请尝试以下代码以了解如何在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>

输出 (Output)

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

按位运算符 (Bitwise Operators)

JavaScript支持以下按位运算符 -

假设变量A保持2而变量B保持3,则 -

Sr.No 运算符和描述
1

& (Bitwise AND)

它对其整数参数的每个位执行布尔AND运算。

Ex: (A&B)是2。

2

| (BitWise OR)

它对其整数参数的每个位执行布尔OR运算。

Ex: (A | B)是3。

3

^ (Bitwise XOR)

它对其整数参数的每个位执行布尔异或运算。 异或表示操作数1为真或操作数2为真,但不是两者。

Ex: (A ^ B)是1。

4

~ (Bitwise Not)

它是一元运算符,通过反转操作数中的所有位来操作。

Ex: ~B)是-4。

5

《《 (Left Shift)

它将第一个操作数中的所有位向左移动第二个操作数中指定的位数。 新位用零填充。 将一个值左移一个位置相当于将其乘以2,移位两个位置相当于乘以4,依此类推。

Ex: (A“”1)是4。

6

》》 (Right Shift)

二进制右移运算符。 左操作数的值向右移动右操作数指定的位数。

Ex: “”1“为1。

7

》》》 (Right shift with Zero)

这个运算符就像>>运算符一样,只不过在左边移入的位总是为零。

Ex: “”“”1)是1。

例子 (Example)

尝试使用以下代码在JavaScript中实现Bitwise运算符。

<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...

赋值操作符 (Assignment Operators)

JavaScript支持以下赋值运算符 -

Sr.No 运算符和描述
1

= (Simple Assignment )

将值从右侧操作数分配给左侧操作数

Ex: C = A + B将A + B的值分配给C

2

+= (Add and Assignment)

它将右操作数添加到左操作数并将结果赋给左操作数。

Ex: C + = A等于C = C + A.

3

−= (Subtract and Assignment)

它从左操作数中减去右操作数,并将结果赋给左操作数。

Ex: C - = A相当于C = C - A.

4

*= (Multiply and Assignment)

它将右操作数与左操作数相乘,并将结果赋给左操作数。

Ex: C * = A等于C = C * A.

5

/= (Divide and Assignment)

它将左操作数与右操作数分开,并将结果赋给左操作数。

Ex: C/= A等于C = C/A.

6

%= (Modules and Assignment)

它使用两个操作数来获取模数,并将结果赋给左操作数。

Ex: C%= A等于C = C%A

Note - 相同的逻辑适用于按位运算符,因此它们将变为“”=,“”=,“”=,&=,| =和^ =。

例子 (Example)

尝试使用以下代码在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>

输出 (Output)

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中非常有用的conditional operator : conditional operator (?:)和typeof operator

Conditional Operator (? :)

条件运算符首先计算表达式的true或false值,然后根据评估结果执行两个给定语句中的一个。

Sr.No 运算符和描述
1

? : (Conditional )

如果条件为真? 然后是值X:否则为Y值

例子 (Example)

请尝试以下代码以了解条件运算符在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>

输出 (Output)

((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"number"
String"string"
Boolean"boolean"
Object"object"
Function"function"
Undefined"undefined"
Null"object"

例子 (Example)

以下代码显示了如何实现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>

输出 (Output)

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 statement

  • if...else statement

  • if ... else if ... statement。

如果声明

if语句是允许JavaScript有条件地做出决策和执行语句的基本控制语句。

语法 (Syntax)

基本if语句的语法如下 -

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

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

例子 (Example)

请尝试以下示例以了解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>

输出 (Output)

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

if...else statement:

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

语法 (Syntax)

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

这里评估了JavaScript表达式。 如果结果值为true,则执行“if”块中的给定语句。 如果表达式为false,则执行else块中的给定语句。

例子 (Example)

请尝试以下代码以了解如何在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>

输出 (Output)

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

if...else if... 语句

if...else if...语句是if...else if...的高级形式,允许JavaScript在几个条件下做出正确的决定。

语法 (Syntax)

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块。

例子 (Example)

请尝试以下代码以了解如何在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>

输出 (Output)

<b class="notranslate">Maths Book</b>
Set the variable to different value and then try...

JavaScript - Switch Case

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

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

流程图 (Flow Chart)

以下流程图说明了switch-case语句的工作原理。

JavaScript的javascript_quick_guide

语法 (Syntax)

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语句表示特定案例的结束。 如果省略它们,则解释器将在以下每种情况下继续执行每个语句。

我们将在Loop Control章节中解释break语句。

例子 (Example)

请尝试以下示例来实现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>

输出 (Output)

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

Break语句在switch-case语句中起主要作用。 尝试使用switch-case语句的以下代码,不带任何break语句。

<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>

输出 (Output)

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 Loops

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

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

while循环

JavaScript中最基本的循环是while循环,将在本章中讨论。 while循环的目的是只要expression为真,就重复执行语句或代码块。 表达式变为false,循环终止。

流程图

while loop流程图如下 -

循环

语法 (Syntax)

JavaScript中while loop的语法如下 -

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

例子 (Example)

请尝试以下示例来实现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>

输出 (Output)

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... 

做... while循环

do...while循环类似于while循环,除了条件检查发生在循环结束时。 这意味着循环将始终至少执行一次,即使条件为false

流程图

do-while循环的流程图如下 -

做循环

语法 (Syntax)

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

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

Note - 不要错过do ... while循环结束时使用的分号。

例子 (Example)

请尝试以下示例,以了解如何在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>

输出 (Output)

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 Loop

' for '循环是最紧凑的循环形式。 它包括以下三个重要部分 -

  • loop initialization ,我们将计数器初始化为起始值。 初始化语句在循环开始之前执行。

  • test statement将测试给定条件是否为真。 如果条件为真,则执行循环内给出的代码,否则控件将退出循环。

  • iteration statement ,您可以在其中增加或减少计数器。

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

流程图 (Flow Chart)

JavaScript中for循环的流程图如下 -

对于循环

语法 (Syntax)

for循环的语法是JavaScript如下 -

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

例子 (Example)

请尝试以下示例,了解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>

输出 (Output)

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 loop

for...in循环用于循环对象的属性。 由于我们尚未讨论对象,您可能对此循环感到不舒服。 但是一旦你理解了对象在JavaScript中的行为方式,你会发现这个循环非常有用。

语法 (Syntax)

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

在每次迭代中, object一个属性被赋值给variablename并且此循环继续,直到对象的所有属性都用完为止。

例子 (Example)

尝试以下示例来实现'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>

输出 (Output)

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 - Loop Control

JavaScript提供了完全控制来处理循环和switch语句。 可能存在这样一种情况,即您需要在没有到达底部的情况下退出循环。 当您想跳过代码块的一部分并开始循环的下一次迭代时,可能还会出现这种情况。

为了处理所有这些情况,JavaScript提供了breakcontinue语句。 这些语句用于立即从任何循环中出来或分别开始任何循环的下一次迭代。

休息声明

使用switch语句简要介绍的break语句用于提前退出循环,打破封闭的花括号。

流程图

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

休息声明

例子 (Example)

以下示例说明了使用带有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>

输出 (Output)

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

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

继续声明

continue语句告诉解释器立即启动循环的下一次迭代并跳过剩余的代码块。 当遇到continue语句时,程序流立即移动到循环检查表达式,如果条件保持为真,则它开始下一次迭代,否则控件退出循环。

例子 (Example)

此示例说明了使用带有while循环的continue语句。 注意当变量x保存的索引达到5时,如何使用continue语句跳过打印 -

<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>

输出 (Output)

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

使用标签来控制流量

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

Note - 'continue''break'语句与其标签名称之间不允许换行符。 此外,标签名称和关联循环之间不应该有任何其他语句。

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

例子1 (Example 1)

以下示例显示如何使用break语句实现Label。

<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>

输出 (Output)

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 (Example 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>

输出 (Output)

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编写自己的函数。

函数定义 (Function Definition)

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

语法 (Syntax)

这里显示了基本语法。

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

例子 (Example)

请尝试以下示例。 它定义了一个名为sayHello的函数,它不带参数 -

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

调用一个函数 (Calling a Function)

要在稍后的脚本中调用函数,您只需要编写该函数的名称,如以下代码所示。

<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>

输出 (Output)

新页面打开

功能参数

到目前为止,我们已经看到没有参数的函数。 但是在调用函数时有一个传递不同参数的工具。 可以在函数内捕获这些传递的参数,并且可以对这些参数进行任何操作。 函数可以采用逗号分隔的多个参数。

例子 (Example)

请尝试以下示例。 我们在这里修改了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>

输出 (Output)

新页面打开

return 语句

JavaScript函数可以有一个可选的return语句。 如果要从函数返回值,则需要这样做。 该语句应该是函数中的最后一个语句。

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

例子 (Example)

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

<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>

输出 (Output)

新页面打开

有很多关于JavaScript函数的知识,但是我们已经介绍了本教程中最重要的概念。

JavaScript - Events

什么是活动?

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

页面加载时,称为事件。 当用户单击按钮时,该单击也是一个事件。 其他示例包括按任意键,关闭窗口,调整窗口大小等事件。

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

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

请仔细阅读这个小教程,以便更好地理解HTML事件参考 。 在这里,我们将看到几个例子来理解Event和JavaScript之间的关系 -

onclick事件类型

这是用户单击鼠标左键时最常用的事件类型。 您可以针对此事件类型进行验证,警告等。

例子 (Example)

请尝试以下示例。

<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>

输出 (Output)

新页面打开

onsubmit事件类型

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

例子 (Example)

以下示例显示如何使用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事件,当您将鼠标从该元素移出时触发onmouseover事件。 请尝试以下示例。

<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>

输出 (Output)

新页面打开

HTML 5标准事件

此处列出了标准HTML 5事件供您参考。 这里脚本表示要对该事件执行的Javascript函数。

属性 描述
Offlinescript 文档脱机时触发
Onabortscript 触发中止事件
onafterprintscript 打印文档后触发
onbeforeonloadscript 文档加载前触发
onbeforeprintscript 打印文档前触发
onblurscript 窗口失去焦点时触发
oncanplayscript 媒体可以开始播放时触发,但可能必须停止缓冲
oncanplaythroughscript 当媒体可以播放到最后时触发,而不停止缓冲
onchangescript 元素更改时触发
onclickscript 单击鼠标时触发
oncontextmenuscript 触发上下文菜单时触发
ondblclickscript 双击鼠标触发
ondragscript 拖动元素时触发
ondragendscript 拖动操作结束时触发
ondragenterscript 将元素拖动到有效放置目标时触发
ondragleavescript 在有效放置目标上拖动元素时触发
ondragoverscript 在拖动操作开始时触发
ondragstartscript 在拖动操作开始时触发
ondropscript 删除拖动元素时触发
ondurationchangescript 更改介质长度时触发
onemptiedscript 媒体资源元素突然变空时触发。
onendedscript 媒体到达终点时触发
onerrorscript 发生错误时触发
onfocusscript 窗口获得焦点时触发
onformchangescript 表单更改时触发
onforminputscript 表单获取用户输入时触发
onhaschangescript 文档更改时触发
oninputscript 元素获取用户输入时触发
oninvalidscript 元素无效时触发
onkeydownscript 按下某个键时触发
onkeypressscript 按下并释放按键时触发
onkeyupscript 释放密钥时触发
onloadscript 文档加载时触发
onloadeddatascript 加载媒体数据时触发
onloadedmetadatascript 加载媒体元素的持续时间和其他媒体数据时触发
onloadstartscript 浏览器开始加载媒体数据时触发
onmessagescript 触发消息时触发
onmousedownscript 按下鼠标按钮时触发
onmousemovescript 鼠标指针移动时触发
onmouseoutscript 鼠标指针移出元素时触发
onmouseoverscript 鼠标指针在元素上移动时触发
onmouseupscript 释放鼠标按钮时触发
onmousewheelscript 旋转鼠标滚轮时触发
onofflinescript 文档脱机时触发
onoinescript 文档联机时触发
ononlinescript 文档联机时触发
onpagehidescript 隐藏窗口时触发
onpageshowscript 窗口变为可见时触发
onpausescript 媒体数据暂停时触发
onplayscript 媒体数据开始播放时触发
onplayingscript 媒体数据开始播放时触发
onpopstatescript 窗口历史记录更改时触发
onprogressscript 浏览器获取媒体数据时触发
onratechangescript 媒体数据的播放速率发生变化时触发
onreadystatechangescript 准备状态改变时触发
onredoscript 文档执行重做时触发
onresizescript 调整窗口大小时触发
onscrollscript 滚动元素的滚动条时触发
onseekedscript 当媒体元素的搜索属性不再为真时触发,并且搜索已经结束
onseekingscript 当媒体元素的搜索属性为真时触发,并且搜索已经开始
onselectscript 选择元素时触发
onstalledscript 在获取媒体数据时出现错误时触发
onstoragescript 文档加载时触发
onsubmitscript 提交表单时触发
onsuspendscript 浏览器获取媒体数据时触发,但在获取整个媒体文件之前停止
ontimeupdatescript 媒体更改其播放位置时触发
onundoscript 文档执行撤消时触发
onunloadscript 用户离开文档时触发
onvolumechangescript 媒体更改音量时触发,当音量设置为“静音”时触发
onwaitingscript 媒体停止播放时触发,但预计会恢复

JavaScript and Cookies

什么是饼干?

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的值将无法访问。

Note - Cookie值可能不包括分号,逗号或空格。 因此,您可能希望使用JavaScript escape()函数对值进行编码,然后将其存储在cookie中。 如果这样做,您还必须在读取cookie值时使用相应的unescape()函数。

例子 (Example)

请尝试以下方法。 它在输入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>

输出 (Output)

新页面打开

现在你的机器有一个名为name的cookie。 您可以使用以逗号分隔的多个key = value对设置多个cookie。

阅读Cookies

读取cookie就像写一个cookie一样简单,因为document.cookie对象的值是cookie。 因此,只要您想访问cookie,就可以使用此字符串。 document.cookie字符串将保留由分号分隔的名称=值对的列表,其中name是cookie的名称,value是其字符串值。

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

例子 (Example)

请尝试以下示例以获取所有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>

Note - 这里lengthArray类的一种方法,它返回一个数组的长度。 我们将在另一章中讨论数组。 到那时,请尝试消化它。

新页面打开

Note - 您的计算机上可能已设置了一些其他Cookie。 上面的代码将显示您计算机上设置的所有Cookie。

设置Cookie到期日

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

例子 (Example)

请尝试以下示例。 它说明了如何将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="formname" action="">
         Enter name: <input type="text" name="customer"/>
         <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
      </form>
   </body>
</html>

输出 (Output)

新页面打开

删除Cookie

有时您会想要删除cookie,以便随后尝试读取cookie不会返回任何内容。 要执行此操作,您只需将到期日期设置为过去的时间。

例子 (Example)

请尝试以下示例。 它说明了如何通过将其到期日期设置为当前日期之后一个月来删除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="formname" action="">
         Enter name: <input type="text" name="customer"/>
         <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
      </form>
   </body>
</html>

输出 (Output)

新页面打开

JavaScript - Page Redirection

什么是页面重定向?

您可能遇到过这样的情况:您单击了一个URL以到达页面X,但在内部您被定向到另一个页面Y.它是由于page redirection而发生的。 这个概念与JavaScript页面刷新不同。

您可能有多种原因要从原始页面重定向用户。 我们列出了一些原因 -

  • 您不喜欢您的域名,而您正在转向新域名。 在这种情况下,您可能希望将所有访问者定向到新网站。 在这里,您可以维护旧域,但只需将页面重定向放在一个页面中,以便所有旧域访问者都可以访问新域。

  • 您已根据浏览器版本或其名称构建了各种页面,或者可能基于不同的国家/地区,而不是使用服务器端页面重定向,您可以使用客户端页面重定向将用户置于相应的页面上。

  • 搜索引擎可能已经为您的网页编制了索引。 但是在转移到另一个域时,您不希望通过搜索引擎丢失访问者。 因此,您可以使用客户端页面重定向。 但请记住,不应该欺骗搜索引擎,它可能导致您的网站被禁止。

页面重定向如何工作?

页面重定向的实现如下。

例子1 (Example 1)

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

<html>
   <head>
      <script type="text/javascript">
         <!--
            function Redirect() {
               window.location="http://www.iowiki.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>

输出 (Output)

新页面打开

例子2 (Example 2)

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

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

输出 (Output)

新页面打开
You will be redirected to iowiki.com main page in 10 seconds!

例子3 (Example 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 - Dialog Boxes

JavaScript支持三种重要类型的对话框。 这些对话框可用于发出警报,或者对任何输入进行确认或从用户那里获得一种输入。 在这里,我们将逐一讨论每个对话框。

警报对话框

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

尽管如此,警报框仍可用于更友好的消息。 警报框只提供一个“确定”按钮来选择并继续。

例子 (Example)

<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>

输出 (Output)

新页面打开

确认对话框

确认对话框主要用于征得用户对任何选项的同意。 它显示一个带有两个按钮的对话框: Cancel

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

输出 (Output)

<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>

输出 (Output)

新页面打开

提示对话框

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

此对话框使用名为prompt()的方法显示,该方法采用两个参数:(i)要在文本框中显示的标签和(ii)要在文本框中显示的默认字符串。

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

例子 (Example)

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

<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>

输出 (Output)

新页面打开

JavaScript - Void Keyword

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

语法 (Syntax)

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

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

例子1 (Example 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>

输出 (Output)

新页面打开

例子2 (Example 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>

输出 (Output)

新页面打开

例子3 (Example 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>

输出 (Output)

新页面打开

JavaScript - Page Printing

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

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

例子 (Example)

请尝试以下示例。

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

输出 (Output)

新页面打开

虽然它用于获取打印输出,但它不是推荐的方式。 打印机友好页面实际上只是一个包含文本,没有图像,图形或广告的页面。

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

  • 复制页面并省略不需要的文本和图形,然后从原始页面链接到该打印机友好页面。 检查Example

  • 如果您不想保留页面的额外副本,那么您可以使用适当的注释标记您的可打印文本,例如 ..... 然后您可以在后台使用PERL或任何其他脚本来清除可打印文本并显示最终打印。 我们IoWiki使用此方法为我们的网站访问者提供打印工具。 检查Example

如何打印页面

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

File →  Print → Click OK  button.

JavaScript - Objects Overview

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

  • Encapsulation - 在对象中存储相关信息(无论是数据还是方法)的功能。

  • Aggregation - 将一个对象存储在另一个对象中的功能。

  • Inheritance - 类的某些属性和方法依赖于另一个类(或类的数量)的能力。

  • Polymorphism - 编写一种以各种不同方式工作的函数或方法的能力。

对象由属性组成。 如果属性包含函数,则将其视为对象的方法,否则将该属性视为属性。

对象属性

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

向对象添加属性的语法是 -

objectName.objectProperty = propertyValue;

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

var str = document.title;

对象方法

方法是让对象做某事或让某事做完的功能。 函数和方法之间存在细微差别 - 函数是一个独立的语句单元,一个方法附加到一个对象,可以通过this关键字引用。

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

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

document.write("This is test");

User-Defined Objects

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

新的运算符

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

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

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

The Object() Constructor

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

该变量包含对新对象的引用。 分配给对象的属性不是变量,也不是使用var关键字定义的。

例子1 (Example 1)

试试下面的例子; 它演示了如何创建一个Object。

<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>

输出 (Output)

Book name is : Perl 
Book author is : Mohtashim

例子2 (Example 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>

输出 (Output)

Book title is : Perl 
Book author is : Mohtashim

定义对象的方法

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

例子 (Example)

试试下面的例子; 它显示了如何与对象一起添加函数。

<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>

输出 (Output)

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

'with'关键字

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

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

语法 (Syntax)

with对象的语法如下 -

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

例子 (Example)

请尝试以下示例。

<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 Native Objects列表 -

JavaScript - The Number Object

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

语法 (Syntax)

创建number对象的语法如下 -

var val = new Number(number);

在number的位置,如果你提供任何非数字参数,那么参数不能转换为数字,它返回NaN (非数字)。

数字属性

以下是每个属性及其描述的列表。

Sr.No 财产和描述
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对象仅包含作为每个对象定义一部分的默认方法。

Sr.No 方法和描述
1 toExponential()

强制数字以指数表示法显示,即使该数字在JavaScript通常使用标准表示法的范围内。

2 toFixed()

格式化小数点右侧具有特定位数的数字。

3 toLocaleString()

以可能根据浏览器的本地设置而变化的格式返回当前数字的字符串值版本。

4 toPrecision()

定义显示数字的总位数(包括小数点左侧和右侧的数字)。

5 toString()

返回数字值的字符串表示形式。

6 valueOf()

返回数字的值。

在以下部分中,我们将通过一些示例来解释Number的方法。

JavaScript - The Boolean Object

Boolean对象表示两个值,“true”或“false”。 如果省略value参数或者为0,-0,null,false, NaN, undefined或空字符串(“”),则对象的初始值为false。

语法 (Syntax)

使用以下语法创建boolean对象。

var val = new Boolean(value);

布尔属性

以下是Boolean对象的属性列表 -

Sr.No 财产和描述
1 constructor

返回对创建对象的Boolean函数的引用。

2 prototype

prototype属性允许您向对象添加属性和方法。

在以下部分中,我们将通过一些示例来说明Boolean对象的属性。

布尔方法

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

Sr.No 方法和描述
1 toSource()

返回包含Boolean对象源的字符串; 您可以使用此字符串来创建等效对象。

2 toString()

返回“true”或“false”的字符串,具体取决于对象的值。

3 valueOf()

返回Boolean对象的原始值。

在以下部分中,我们将通过一些示例来演示布尔方法的用法。

JavaScript - The Strings Object

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

由于JavaScript自动在字符串基元和String对象之间进行转换,因此可以在字符串基元上调用String对象的任何辅助方法。

语法 (Syntax)

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

var val = new String(string);

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

字符串属性

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

Sr.No 财产和描述
1 constructor

返回对创建对象的String函数的引用。

2 length

返回字符串的长度。

3 prototype

prototype属性允许您向对象添加属性和方法。

在以下部分中,我们将通过一些示例来演示String属性的用法。

字符串方法

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

Sr.No 方法和描述
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 Wrappers

以下是返回包含在相应HTML标记内的字符串副本的方法列表。

Sr.No 方法和描述
1 anchor()

创建用作超文本目标的HTML锚点。

2 big()

创建一个以大字体显示的字符串,就像它在标记中一样。

3 blink()

创建一个闪烁的字符串,就像它在标记中一样。

4 bold()

创建一个字符串,显示为粗体,就像它在标签中一样。

5 fixed()

使字符串以固定间距字体显示,就像它在标记中一样

6 fontcolor()

使字符串以指定的颜色显示,就像它在标记中一样。

7 fontsize()

使字符串以指定的字体大小显示,就像它在标记中一样。

8 italics()

使字符串变为斜体,就好像它位于标记中一样。

9 link()

创建请求其他URL的HTML超文本链接。

10 small()

使字符串以小字体显示,就像它在标记中一样。

11 strike()

导致字符串显示为删除文本,就像它在标记中一样。

12 sub()

使字符串显示为下标,就好像它位于标记中一样

13 sup()

使字符串显示为上标,就好像它位于标记中一样

在以下部分中,我们将通过一些示例来演示String方法的用法。

JavaScript - The Arrays Object

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

语法 (Syntax)

使用以下语法创建一个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对象的属性列表及其描述。

Sr.No 财产和描述
1 constructor

返回对创建对象的数组函数的引用。

2

index

该属性表示字符串中匹配的从零开始的索引

3

input

此属性仅存在于由正则表达式匹配创建的数组中。

4 length

反映数组中的元素数。

5 prototype

prototype属性允许您向对象添加属性和方法。

在以下部分中,我们将通过一些示例来说明Array属性的用法。

数组方法

以下是Array对象的方法列表及其说明。

Sr.No 方法和描述
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 - The Date Object

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

创建Date对象后,可以使用许多方法对其进行操作。 大多数方法只允许您使用本地时间或UTC(通用或GMT)时间来获取和设置对象的年,月,日,小时,分钟,秒和毫秒字段。

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

语法 (Syntax)

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

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

Note - 括号中的参数始终是可选的。

以下是参数说明 -

  • No Argument - 没有参数,Date()构造函数创建一个Date对象,设置为当前日期和时间。

  • milliseconds - 当传递一个数字参数时,它将被视为日期的内部数字表示形式(以毫秒为单位),由getTime()方法返回。 例如,传递参数5000会创建一个日期,表示在1/1/70午夜过后五秒。

  • datestring - 当传递一个字符串参数时,它是日期的字符串表示形式,采用Date.parse()方法接受的格式。

  • 7 agruments - 使用上面显示的构造函数的最后一种形式。 以下是每个论点的描述 -

    • year - 表示年份的整数值。 为了兼容性(为了避免Y2K问题),您应该始终指定年份; 使用1998年,而不是98年。

    • month - 表示month整数值,从1月的0开始到12月的11。

    • date - 表示月中某天的整数值。

    • hour - 表示一天中小时的整数值(24小时刻度)。

    • minute - 表示时间读数的分钟段的整数值。

    • second - 表示时间读数的第二段的整数值。

    • millisecond - 表示时间读数的毫秒段的整数值。

日期属性

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

Sr.No 财产和描述
1 constructor

指定创建对象原型的函数。

2 prototype

prototype属性允许您向对象添加属性和方法

在以下部分中,我们将通过一些示例来演示不同Date属性的用法。

日期方法

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

Sr.No 方法和描述
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()

Deprecated - 根据当地时间返回指定日期的年份。 请改用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()

Deprecated -根据当地时间设置指定日期的年份。 请改用setFullYear。

37 toDateString()

返回Date的“date”部分作为人类可读的字符串。

38 toGMTString()

Deprecated -使用Internet GMT约定将日期转换为字符串。 请改用toUTCString。

39 toLocaleDateString()

使用当前语言环境的约定,以字符串形式返回Date的“date”部分。

40 toLocaleFormat()

使用格式字符串将日期转换为字符串。

41 toLocaleString()

使用当前语言环境的约定将日期转换为字符串。

42 toLocaleTimeString()

使用当前语言环境的约定,以字符串形式返回Date的“time”部分。

43 toSource()

返回表示等效Date对象的源的字符串; 您可以使用此值来创建新对象。

44 toString()

返回表示指定Date对象的字符串。

45 toTimeString()

返回Date的“time”部分作为人类可读的字符串。

46 toUTCString()

使用通用时间约定将日期转换为字符串。

47 valueOf()

返回Date对象的原始值。

使用通用时间约定将日期转换为字符串。

日期静态方法

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

Sr.No 方法和描述
1 Date.parse()

解析日期和时间的字符串表示形式,并返回该日期的内部毫秒表示形式。

2 Date.UTC()

返回指定的UTC日期和时间的毫秒表示形式。

在以下部分中,我们将举几个例子来演示Date Static方法的用法。

JavaScript - The Math Object

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

因此,您将常量pi称为Math.PI ,并将sine函数称为Math.sin(x) ,其中x是方法的参数。

语法 (Syntax)

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

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

数学属性

以下是数学及其描述的所有属性的列表。

Sr.No 财产和描述
1 E \

欧拉常数和自然对数的基数,约为2.718。

2 LN2

自然对数为2,约为0.693。

3 LN10

自然对数为10,约为2.302。

4 LOG2E

基数为2的对数,约为1.442。

5 LOG10E

基数为E的对数10,约为0.434。

6 PI

圆周长与直径之比约为3.14159。

7 SQRT1_2

平方根为1/2; 等价地,1平方根上的1,大约0.707。

8 SQRT2

平方根2,约1.414。

在以下部分中,我们将通过一些示例来演示Math属性的用法。

数学方法

以下是与Math对象及其描述相关的方法列表

Sr.No 方法和描述
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相关的方法的用法。

Regular Expressions and RegExp Object

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

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

语法 (Syntax)

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

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

以下是参数的说明 -

  • pattern - 一个字符串,它指定正则表达式或另一个正则表达式的模式。

  • attributes - 一个可选字符串,包含分别指定全局,不区分大小写和多行匹配的任何“g”,“i”和“m”属性。

Brackets

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

Sr.No 表达和描述
1

[...]

括号内的任何一个字符。

2

[^...]

任何一个字符不在括号之间。

3

[0-9]

它匹配从0到9的任何十进制数字。

4

[az]

它匹配从小写字母a到小写字母z的任何字符。

5

[AZ]

它匹配从大写A到大写Z的任何字符。

6

[aZ]

它匹配从小写字母a到大写字母Z的任何字符。

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

量词(Quantifiers)

括号中的字符序列和单个字符的频率或位置可以用特殊字符表示。 每个特殊字符都有特定的含义。 +,*,?和$标志都遵循字符序列。

Sr.No 表达和描述
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。

例子 (Examples)

以下示例详细介绍了匹配字符。

Sr.No 表达和描述
1

[^a-zA-Z]

它匹配任何不包含从azA到Z的任何字符的字符串。

2

pp

它匹配任何包含p,字符串p,后跟任何字符,然后是另一个p

3

^.{2}$

它匹配任何包含两个字符的字符串。

4

《b》(.*)《/b》

它匹配和 b>中包含的任何字符串。

5

p(hp)*

它匹配任何包含p字符串,后跟零个或多个序列hp实例。

文字字符

Sr.No 字符和描述
1

Alphanumeric

本身

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

元字符(Metacharacters)

元字符只是一个字母字符,前面是反斜杠,用于赋予组合特殊含义。

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

下表列出了一组可在PERL样式正则表达式中使用的元字符。

Sr.No 字符和描述
1

.

单个字符

2

\s

空格字符(空格,制表符,换行符)

3

\S

非空白字符

4

\d

一个数字(0-9)

5

\D

一个非数字

6

\w

单词字符(az,AZ,0-9,_)

7

\W

一个非单词字符

8

[\b]

文字退格(特殊情况)。

9

[aeiou]

匹配给定集合中的单个字符

10

[^aeiou]

匹配给定集合之外的单个字符

11

(foo|bar|baz)

匹配指定的任何替代方案

修饰符 Modifiers

有几种修饰符可以简化你使用regexps,的方式regexps,例如区分大小写,多行搜索等。

Sr.No 修饰符和描述
1

i

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

2

m

指定如果字符串具有换行符或回车符,则^和$运算符现在将与换行符边界匹配,而不是字符串边界

3

g

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

RegExp属性

以下是与RegExp相关的属性列表及其说明。

Sr.No 财产和描述
1 constructor

指定创建对象原型的函数。

2 global

指定是否设置“g”修饰符。

3 ignoreCase

指定是否设置“i”修饰符。

4 lastIndex

开始下一场比赛的索引。

5 multiline

指定是否设置“m”修饰符。

6 source

模式的文本。

在以下部分中,我们将通过一些示例来演示RegExp属性的用法。

RegExp方法

以下是与RegExp相关的方法列表及其说明。

Sr.No 方法和描述
1 exec()

在其字符串参数中执行匹配搜索。

2 test()

在其字符串参数中测试匹配项。

3 toSource()

返回表示指定对象的对象文字; 您可以使用此值来创建新对象。

4 toString()

返回表示指定对象的字符串。

在以下部分中,我们将通过一些示例来演示RegExp方法的用法。

JavaScript - Document Object Model or DOM

每个网页都位于浏览器窗口内,可以将其视为对象。

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

访问和修改文档内容的方式称为Document Object ModelDOM 。 对象按层次结构组织。 此分层结构适用于Web文档中对象的组织。

  • Window object - 层次结构的顶部。 它是对象层次结构的最外层元素。

  • Document object - 加载到窗口中的每个HTML文档都成为文档对象。 该文档包含页面的内容。

  • Form object - “form”中包含的所有内容...“/ form”标签设置表单对象。

  • Form control elements - 表单对象包含为该对象定义的所有元素,如文本字段,按钮,单选按钮和复选框。

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

HTML DOM

有几个DOM存在。 以下部分详细说明了每个DOM,并描述了如何使用它们来访问和修改文档内容。

  • Legacy 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 - Errors & Exceptions Handling

编程中有三种类型的错误:(a)语法错误,(b)运行时错误,以及(c)逻辑错误。

语法错误

语法错误,也称为parsing errors,在传统编程语言的编译时和JavaScript中的解释时发生。

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

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

当JavaScript中出现语法错误时,只有与语法错误包含在同一线程中的代码才会受到影响,而其他线程中的其余代码将被执行,假设它们中的任何内容都不依赖于包含错误的代码。

运行时错误

运行时错误(也称为exceptions,在执行期间(编译/解释之后)发生。

例如,以下行导致运行时错误,因为此处语法正确,但在运行时,它尝试调用不存在的方法。

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

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

逻辑错误

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

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

try...catch...finally 语句

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

您可以catch程序员生成的和runtime异常,但是您无法catch 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块。 在try/catch之后无条件执行可选的finally块。

例子 (Examples)

这是一个我们试图调用一个不存在的函数的例子,而这个函数又引发了异常。 让我们看看没有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>

输出 (Output)

新页面打开

现在让我们尝试使用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>

输出 (Output)

新页面打开

您可以使用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>

输出 (Output)

新页面打开

throw 语句

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

例子 (Example)

以下示例演示如何使用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>

输出 (Output)

新页面打开

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

The onerror() Method

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>

输出 (Output)

新页面打开

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

  • Error message - 浏览器将针对给定错误显示的相同消息

  • URL - 发生错误的文件

  • Line number - 给定URL中导致错误的行号

以下是显示如何提取此信息的示例。

例子 (Example)

<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>

输出 (Output)

新页面打开

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

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

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

您可以使用带有许多HTML标记的onerror来显示错误时的相应消息。

JavaScript - Form Validation

在客户端输入所有必要数据然后按下“提交”按钮后,通常用于在服务器上进行的表单验证。 如果客户端输入的数据不正确或者丢失了,则服务器必须将所有数据发送回客户端,并请求使用正确的信息重新提交表单。 这真是一个漫长的过程,曾经给服务器带来了很多负担。

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

  • Basic Validation - 首先,必须检查表单以确保填写所有必填字段。它只需要循环遍历表单中的每个字段并检查数据。

  • Data Format Validation - 其次,必须检查输入的数据的格式和值是否正确。 您的代码必须包含适当的逻辑来测试数据的正确性。

例子 (Example)

我们将举例说明验证过程。 这是一个简单的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>

输出 (Output)

新页面打开

基本表格验证

首先让我们看看如何进行基本表单验证。 在上面的表单中,我们调用validate()来在onsubmit事件发生时验证数据。 以下代码显示了此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服务器之前验证它们。

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

例子 (Example)

请尝试以下代码进行电子邮件验证。

<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 - Animation

您可以使用JavaScript创建复杂的动画,但不限于以下元素 -

  • Fireworks
  • Fade Effect
  • Roll-in or Roll-out
  • Page-in or Page-out
  • Object movements

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

本教程提供了有关如何使用JavaScript创建动画的基本知识。

JavaScript可用于根据逻辑方程或函数确定的某种模式在页面周围移动大量DOM元素(

或任何其他HTML元素)。

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

  • setTimeout( function, duration) - 此函数从现在起duration毫秒后调用function

  • setInterval(function, duration) - 该function在每个duration毫秒后调用function

  • clearTimeout(setTimeout_variable) - 该函数调用清除setTimeout()函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置。 您可以设置对象的top和左侧属性,以将其放置在屏幕上的任何位置。 这是它的语法。

// 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 ,我们已经设置了它的positionleft属性。

  • 我们在窗口加载时调用初始化函数。

  • 最后,我们调用moveRight()函数将左边距离增加10个像素。 您也可以将其设置为负值,将其移动到左侧。

例子 (Example)

请尝试以下示例。

<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>

输出 (Output)

新页面打开

自动化动画

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

这里我们添加了更多方法。 那么让我们看看这里有什么新东西 -

  • moveRight()函数调用setTimeout()函数来设置imgObj的位置。

  • 我们添加了一个新函数stop()来清除setTimeout()函数设置的计时器,并将对象设置在其初始位置。

例子 (Example)

请尝试以下示例代码。

<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。 此链接是图像。

  • 当用户的鼠标移动到链接上时触发onMouseOut事件处理程序,当用户的鼠标离开链接(图像)时触发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 - Multimedia

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

例子 (Example)

这是一个示例,显示如何列出浏览器中安装的所有插件 -

<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>

输出 (Output)

新页面打开

检查插件

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

  • 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>

输出 (Output)

新页面打开

NOTE - 这里我们使用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">
      </embed>
      <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>

输出 (Output)

如果您正在使用Mozilla,Firefox或Netscape,那么

新页面打开

JavaScript - Debugging

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

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

IE中的错误消息

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

错误图标

双击此图标将转到一个对话框,显示有关发生的特定错误的信息。

由于此图标很容易被忽略,因此Internet Explorer会为您提供在发生错误时自动显示“错误”对话框的选项。

要启用此选项,请选择Tools → Internet Options → Advanced tab. 然后最后选中"Display a Notification About Every Script Error"框选项,如下所示 -

互联网选项

Firefox或Mozilla中的错误消息

Firefox,Netscape和Mozilla等其他浏览器会将错误消息发送到名为JavaScript ConsoleError Consol的特殊窗口。 要查看控制台,请选择Tools → Error Consol or Web Development

遗憾的是,由于这些浏览器在发生错误时不提供可视指示,因此您必须保持控制台处于打开状态,并在脚本执行时注意错误。

错误控制台

错误通知

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

如果您使用的是Firefox,则可以单击错误控制台中可用的错误,转到脚本中出现错误的确切行。

如何调试脚本

调试JavaScript有多种方法 -

使用JavaScript验证器

检查JavaScript代码是否存在奇怪错误的一种方法是通过一个程序运行它来检查它以确保它是有效的并且它遵循该语言的官方语法规则。 这些程序称为validating parsers或简称validating parsers validators ,通常带有商业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和Netscape浏览器的最新版本的Mozilla JavaScript调试器(代号为Venkman)可在http://www.hacksrus.com/~ginda/venkman下载http://www.hacksrus.com/~ginda/venkman

开发人员的有用提示

您可以记住以下提示,以减少脚本中的错误数量并简化调试过程 -

  • 使用大量的comments 。 通过注释,您可以解释为什么以您的方式编写脚本并解释特别困难的代码部分。

  • 始终使用indentation来使代码易于阅读。 缩进语句还使您可以更轻松地匹配开始和结束标记,花括号以及其他HTML和脚本元素。

  • 编写modular code 。 尽可能将语句分组为函数。 函数允许您对相关语句进行分组,并以最少的工作量测试和重用代码部分。

  • 在命名变量和函数的方式上保持一致。 尝试使用足够长的有意义的名称,并描述变量的内容或函数的用途。

  • 命名变量和函数时使用一致的语法。 换句话说,保持全部小写或全部大写; 如果您更喜欢Camel-Back符号,请始终如一地使用它。

  • 以模块化方式Test long scripts 。 换句话说,在测试它的任何部分之前,不要尝试编写整个脚本。 在添加下一部分代码之前写一篇文章并使其工作。

  • 使用descriptive variable and function names ,避免使用单字符名称。

  • Watch your quotation marks 。 请记住,引号在字符串周围成对使用,并且两个引号必须是相同的样式(单个或双)。

  • Watch your equal signs 。 您不应该使用单个=进行比较。

  • 使用var关键字variables explicitly声明variables explicitly

JavaScript - Image Map

您可以使用JavaScript来创建客户端图像映射。 客户端图像映射由“img /”标记的usemap属性启用,并由特殊的“map”和“area”扩展标记定义。

将使用表格将要形成地图的图像插入到页面中 元素正常,除了它带有一个名为usemap的额外属性。 usemap属性的值是“map”元素上name属性的值,您将要遇到它,前面是井号或井号。

元素实际上为图像创建了地图,通常紧跟在图像之后 元件。 它充当了容器 实际定义可点击热点的元素。 该 element只携带一个属性,即name属性,它是标识地图的名称。 这就是“img /”元素如何知道要使用哪个“map”元素。

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

当鼠标移动到图像的不同部分时,以下代码组合了图像映射和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>

输出 (Output)

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

新页面打开

JavaScript - Browsers Compatibility

重要的是要理解不同浏览器之间的差异,以便按照预期的方式处理每个浏览器。 因此,了解您的网页运行的浏览器非常重要。

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

导航器属性

您可以在网页中使用几个与Navigator相关的属性。 以下是每个名称和说明的列表。

Sr.No 财产和描述
1

appCodeName

此属性是一个字符串,其中包含浏览器的代码名称,Netscape for Netscape和Microsoft Internet Explorer for Internet Explorer。

2

appVersion

此属性是一个字符串,其中包含浏览器的版本以及其他有用的信息,例如其语言和兼容性。

3

language

此属性包含浏览器使用的语言的双字母缩写。 仅限网景。

4

mimTypes[]

此属性是一个包含客户端支持的所有MIME类型的数组。 仅限网景。

5

platform[]

此属性是一个字符串,其中包含编译浏览器的平台。“Win32”用于32位Windows操作系统

6

plugins[]

此属性是一个包含客户端上已安装的所有插件的数组。 仅限网景。

7

userAgent[]

此属性是一个字符串,其中包含代码名称和浏览器版本。 该值被发送到始发服务器以识别客户端。

导航方法

有几种特定于Navigator的方法。 这是他们的名字和描述的列表。

Sr.No 描述
1

javaEnabled()

此方法确定是否在客户端中启用了JavaScript。 如果启用了JavaScript,则此方法返回true; 否则,它返回false。

2

plugings.refresh

此方法使新安装的插件可用,并使用所有新插件名称填充插件阵列。 仅限网景。

3

preference(name,value)

此方法允许签名脚本获取和设置一些Netscape首选项。 如果省略第二个参数,则此方法将返回指定首选项的值; 否则,它设置值。 仅限网景。

4

taintEnabled()

如果启用了数据污染,则此方法返回true; 否则是假的。

浏览器检测

有一个简单的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>

输出 (Output)

新页面打开
↑回到顶部↑
WIKI教程 @2018