JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript,可以用于改进设计、验证表单、检测浏览器、创建cookies等。

JavaScript 非常容易学。

本教程将教你学习从初级到高级JavaScript知识。

JavaScript 在线实例

本教程包含了大量的 JavaScript 实例, 您可以点击 "尝试一下" 来在线查看实例。

实例

我的第一个 JavaScript 程序

这是一个段落




尝试一下 »

在每个页面您可以点击 "尝试一下" 在线查看实例!!!

尝试每个实例,并且在线修改代码,查看不同的运行效果!!!

Note如果能根据本站的实例一步一个脚印学习,你将会在很短的时间内学会 JavaScript。

为什么学习 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门:

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 网页的行为

本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。

谁适合阅读本教程?

1. 如果您想学习 JavaScript,您可以学习本教程:

了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。

2. 如果在此之前您已经使用过 JavaScript,您也可以阅读本教程:

JavaScript 一直在升级,所以我们需要时刻了解 JavaScript 的新技术。

阅读本教程前,您需要了解的知识:

阅读本教程,您需要有以下基础:

  • HTML 和 CSS 基础

如果您想学习这些基础知识,您可以在我们的首页找到相应的教程W3CSchool教程

JavaScript 实战闯关

我们为学习者准备了大量的JavaScript编程实战练习,供大家通过亲自编程实验来熟练编程操作

开始JavaScript编程闯关

JavaScript 实例

学习 100 多个 JavaScript 实例!

在实例页面中,您可以点击 "尝试一下" 来查看 JavaScript 在线实例。

JavaScript 测验

在 W3CSchool 中测试您的 JavaScript 技能!

JavaScript 参考手册

在 W3CSchool 中,我们为您提供完整的 JavaScript 对象、浏览器对象、HTML DOM 对象参考手册。

以下手册包含了每个对象、属性、方法的实例。

相关教程

HTML教程

CSS教程


JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。


JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。


您将学到什么

下面是您将在本教程中学到的主要内容。


JavaScript:直接写入 HTML 输出流

实例

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

尝试一下 »
lamp您只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法,会覆盖整个文档。


JavaScript:对事件的反应

实例

<button type="button" onclick="alert('欢迎!')">点我!</button>

尝试一下 »

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。


JavaScript:改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

尝试一下 »

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。


JavaScript:改变 HTML 图像

本例会动态地改变 HTML 图像的来源(src):

点亮灯泡

点击灯泡就可以打开或关闭这盏灯


尝试一下 »

“点亮灯泡”实现代码详解:

<script>function changeImage(){    //通过查看src中是否有bulbon这个单词来判断当前状态并切换到另外一种状态    element=document.getElementById('myimage');    if (element.src.match("bulbon")){        //如果src属性中有bulbon这个单词,则将其改为下面这个src        element.src="https://www.51coolma.cn/statics/images/course/pic_bulboff.gif";    }    else{        //如果src属性中没有bulbon这个单词,则将其改为这个src        element.src="https://www.51coolma.cn/statics/images/course/pic_bulbon.gif";    }}</script><img id="myimage" onclick="changeImage()" src="https://www.51coolma.cn/statics/images/course/pic_bulboff.gif" width="100" height="180">

以上实例中代码 element.src.match("bulbon") 的作用意思是:检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。


JavaScript:改变 HTML 样式

改变 HTML 元素的样式,属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

尝试一下 »


JavaScript:验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("不是数字")};

尝试一下 »

以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isNaN 是判别不出来的。

您知道吗?

lampJavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

javaScript和ECMAScript的关系

ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。

JavaScript 已经由 ECMA 通过 ECMAScript 实现语言的标准化。


ECMAScript 版本

JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式
添加 try/catch
ECMAScript 4没有发布
2009ECMAScript 5添加 "strict mode",严格模式
添加 JSON 支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 7增加指数运算符 (**)
增加 Array.prototype.includes
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。

相关教程

ECMAScript教程


以下学习脑图在各个学习章节里面也有,具体学到相应章节可以仔细研读,本篇只是做个规整 。

价值10000元的javascript知识图谱,值得你珍藏。
M8T)~}ASYH82XGK5B74G0BF
价值10000元的javascript知识图谱,值得你珍藏。

价值10000元的javascript知识图谱,值得你珍藏。


未标题-1


价值10000元的javascript知识图谱,值得你珍藏。
价值10000元的javascript知识图谱,值得你珍藏。

价值10000元的javascript知识图谱,值得你珍藏。
价值10000元的javascript知识图谱,值得你珍藏。
价值10000元的javascript知识图谱,值得你珍藏。


HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。


<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

实例

<script>
    alert("我的第一个 JavaScript");
</script>

您无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码 

lamp那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

实例

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

尝试一下 »


JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。


在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。


<head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:

实例

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</head>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()">尝试一下</button>

</body>
</html>


尝试一下 »

<body> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()">尝试一下</button>

<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</body>
</html>


尝试一下 »

提示:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。


外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

实例

<!DOCTYPE html>
<html>
<body>
    <script src="myScript.js"></script>
</body>
</html>

尝试一下 »

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下:

function myFunction() {    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; }
lamp外部脚本不能包含 <script> 标签。


本章节为大家介绍如何在浏览器上进行 JavaScript 代码的运行与调试。

目前的主流浏览器有谷歌的Chrome(使用blink内核),微软的edge(使用chromium内核,这是一款谷歌提供的开源浏览器内核)和IE(使用trident内核),网景的火狐浏览器(使用gecko内核),以及macOS的Safari(使用webkit内核),这些浏览器的开发者工具都大同小异,本文以谷歌的Chrome浏览器为例进行介绍。

Chrome 是由 Google 开发的免费网页浏览器,对于前端开发来说(尤其是调试代码)非常方便。

Chrome 官网地址:https://www.google.com/intl/zh-CN/chrome/

我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击页面,选择"检查"来开启开发者工具。

也可以在右上角菜单栏选择 "更多工具"=》"开发者工具" 来开启:

1、Console 窗口调试 JavaScript 代码

打开开发者工具后,我们可以在 Console 窗口调试 JavaScript代码,如下图:


上图中我们在 > 符号后输入我们要执行的代码 console.log("W3Cschool"),按回车后执行。

我们也可以在其他地方复制一段代码过来执行,比如复制以下代码到 Console 窗口,按回车执行:

console.log("W3Cschool")console.log("编程狮")


清空 Console 窗口到内容可以按以下按钮:


2、Chrome snippets 小脚本

我们也可以在 Chrome 浏览器中创建一个脚本来执行,在开发者工具中点击 Sources 面板,选择 Snippets 选项卡,在导航器中右击鼠标,然后选择 Create new snippet 来新建一个脚本文件:

如果你没看到 Snippets ,可以点下面板上到 >> 就能看到了。

点击 Create new snippet 后,会自动创建一个文件,你只需在右侧窗口输入以下代码,然后按 Command+S(Mac)或 Ctrl+S(Windows 和 Linux)保存更改即可。

console.log("W3Cschool")console.log("编程狮")

保存后,右击文件名,选择 "Run" 执行代码:


JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

 严格来说,JavaScript 没有任何打印或者输出的函数,以上几种方式都只不过是一种数据展示的方法,最接近输出的方法应该是console,但这种方法只是一种调试辅助工具。


使用 window.alert()

你可以弹出警告框来显示数据:

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

尝试一下 »

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>

document.getElementById("demo").innerHTML = "段落已修改。";

</script>

</body>

</html>


尝试一下 »

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。

innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。


在本教程中

在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:

下面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:


写到 HTML 文档

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。

出于测试目的,您可以将JavaScript直接写在HTML 文档中:

实例

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>W3Cschool教程(51coolma.cn)</title> 

</head>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>

document.write(Date());

</script>

</body>

</html>


尝试一下 »
Note

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button >

<script>

function myFunction() {

    document.write(Date());

}

</script>

</body>

</html>


尝试一下 »


写到控制台

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<script>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

</body>

</html>


尝试一下 »
提示:console.log() 方法能够让你看到你在页面中的输出内容,让你更容易调试javascript;与alert相比,console不会打断你页面的操作,console里面的内容非常丰富,你可以在控制台输入 console。

您知道吗?

Note程序中调试是测试,查找及减少bug(错误)的过程。


JavaScript 是一门程序语言。语法规则定义了语言结构。


JavaScript 语法

JavaScript 是一个脚本语言。

它是一个轻量级,但功能强大的编程语言。


JavaScript 字面量

在编程语言中,一个字面量是一个常量,如 3.14。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

3.14

1001

123e5

尝试一下 »

字符串(String)字面量 可以使用单引号或双引号 :

"John Doe"

'John Doe'

尝试一下 »

表达式字面量 用于计算:

5 + 6

5 * 10

尝试一下 »

数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}


JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length

x = 5

length = 6

尝试一下 »

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。

Note变量是一个名称。字面量是一个

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

尝试一下 »

JavaScript使用赋值运算符给变量赋值:

x = 5
y = 6
z = (x + y) * 10

尝试一下 »

JavaScript语言有多种类型的运算符:

Type实例描述
赋值,算术和位运算符=  +  -  *  /在 JS 运算符中描述
条件,比较及逻辑运算符==  != <  > 在 JS 比较运算符中描述


JavaScript 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令。浏览器通过 JavaScript 语句明白要执行什么操作。

语句是用分号分隔:

x = 5 + 6;
y = x * 10;


JavaScript 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量:

var x = 5 + 6;
var y = x * 10;


JavaScript 标识符

和其他任何编程语言一样,JavaScript 保留了一些标识符为自己所用。

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

JavaScript 标识符必须以字母、下划线(_)或美元符($)开始。

后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开标识符和数字)。

以下是 JavaScript 中最​​重要的保留字(按字母顺序):

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

// 我不会执行

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值


数据类型的概念

编程语言中,数据类型是一个非常重要的内容。

为了可以操作变量,了解数据类型的概念非常重要。

如果没有使用数据类型,以下实例将无法执行:

16 + "Volvo"

16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢?

"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。


JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘于 b 的结果
}


JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

提示:在本站的编程实战中,你可以通过练习理解JavaScript变量的大小写敏感性


JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

如需进一步了解,请学习我们的 完整 Unicode 参考手册


您知道吗?

NoteJavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。
NoteJavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。


JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。


JavaScript 语句

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello Dolly" :

实例

document.getElementById("demo").innerHTML = "你好 Dolly.";

尝试一下 »


分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

Writing:

a = 5;
b = 6;
c = a + b;

Is the same as writing:

a = 5; b = 6; c = a + b;

尝试一下 »
lamp您也可能看到不带有分号的案例。
在 JavaScript 中,用分号来结束语句是可选的。


JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

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

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

实例

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

尝试一下 »


JavaScript 代码块

JavaScript 可以分批地组合起来。

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

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

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

实例

function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

尝试一下 »

您将在稍后的章节学到更多有关函数的知识。


JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) :

语句描述
break用于跳出循环。
catch语句块,在 try 语句块执行出错时执行 catch 语句块。
continue跳过循环中的一个迭代。
do ... while执行一个语句块,在条件语句为 true 时继续执行该语句块。
for在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function定义一个函数
if ... else用于基于不同的条件来执行不同的动作。
return退出函数
switch用于基于不同的条件来执行不同的动作。
throw抛出(生成)错误 。
try实现错误处理,与 catch 一同使用。
var声明一个变量。
while当条件语句为 true 时,执行语句块。



空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var person="Hege";var person = "Hege";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("你好  W3Cschool!");

不过,您不能像这样折行:

document.write  ("你好W3Cschool!");

JavaScript 语句练习

JavaScript 注释语句操作

练习如何在JavaScript中对语句进行注释,被注释的代码块在JavaScript之中是不会被运行的。 


JavaScript 注释可用于提高代码的可读性。


JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头。

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

实例

// 输出标题:
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落:
document.getElementById("myP").innerHTML="这是我的第一个段落。";

尝试一下 »


JavaScript 多行注释

多行注释以 /* 开始,以 */ 结尾。

下面的例子使用多行注释来解释代码:

实例

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

尝试一下 »


使用注释来阻止执行

在下面的例子中,注释用于阻止其中一条代码行的执行(可用于调试):

实例

//document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

尝试一下 »

在下面的例子中,注释用于阻止代码块的执行(可用于调试):

实例

/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/

尝试一下 »


在行末使用注释

在下面的例子中,我们把注释放到代码行的结尾处:

实例

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

尝试一下 »

相关练习

《JavaScript编程实战》:JavaScript 注释语句操作


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

实例

var x=5;
var y=6;
var z=x+y;

尝试一下 »


就像代数那样

x=5
y=6
z=x+y

在代数中,我们使用字母(比如 x)来保存值(比如 5)。

通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。

在 JavaScript 中,这些字母被称为变量。

lamp您可以把变量看做存储数据的容器。


JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)
lampJavaScript 语句和 JavaScript 变量都对大小写敏感。


JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

实例

var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

尝试一下 »


声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量:

var carname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号

carname="Volvo";

不过,您也可以在声明变量时对其赋值:

var carname="Volvo";

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 "Volvo",然后把它放入 id="demo" 的 HTML 段落中:

实例

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

尝试一下 »

提示:你可以通过本站的JavaScript编程实战部分来练习如何声明JavaScript变量

lamp一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。


一条语句,多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行:

var lastname="Doe",age=30,job="carpenter";


Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";var carname;

JavaScript 算数

您可以通过 JavaScript 变量来做算数,使用的是 = 和 + 这类运算符:

实例

y=5;
x=y+2;

尝试一下 »

您将在本教程稍后的章节学到更多有关 JavaScript 运算符的知识。

您可以在JavaScript编程实战部分中了解JavaScript算数。

JavaScript变量学习图



JavaScript有以下几种类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。


JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

实例

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串


JavaScript 字符串

字符串是存储字符(比如 "Bill Gates")的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号:

实例

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

尝试一下 »

您将在本教程的高级部分学到更多关于字符串的知识。


JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

实例

var x1=34.00;      // 使用小数点来写
var x2=34;         // 不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

实例

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

尝试一下 »

您将在本教程的高级部分学到更多关于数字的知识。


JavaScript 布尔

布尔(逻辑)只能有两个值:true 或 false。

 var x=true; var y=false;

布尔常用在条件测试中。您将在本教程稍后的章节中学到更多关于条件测试的知识。


JavaScript 数组

下面的代码创建名为 cars 的数组:

 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";

或者 (condensed array):

 var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

实例

var cars=["Saab","Volvo","BMW"];

尝试一下 »

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

您将在本教程稍后的章节中学到更多关于数组的知识。


JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

 var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

 var person={ firstname : "John", lastname  : "Doe", id        :  5566 };

对象属性有两种寻址方式:

实例

name=person.lastname;
name=person["lastname"];

尝试一下 »

您将在本教程稍后的章节中学到更多关于对象的知识。


Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;
person=null;

尝试一下 »


声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

 var carname=new String; var x=      new Number; var y=      new Boolean; var cars=   new Array; var person= new Object;
lamp JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

提示:JavaScript具有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。

JavaScript数据类型学习脑图:



相关文章

JavaScript 标准参考教程:JavaScript数据类型


在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。


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

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}

</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>


JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

 function functionname() {执行代码 }

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

lamp JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

提示:function 中的花括号是必需的,即使函数体内只包含一条语句,仍然必须使用花括号将其括起来。



调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数,由逗号 (,) 分隔:

 myFunction(argument1,argument2)

当您声明函数时,请把参数作为变量来声明:

 function myFunction(var1,var2){代码 }

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

实例

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

尝试一下 »

上面的函数在按钮被点击时会提示 "Welcome Harry Potter, the Wizard"。

函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:

实例

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<button onclick="myFunction('Bob','Builder')">Try it</button>

尝试一下 »

根据您点击的不同的按钮,上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。


带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

语法

 function myFunction(){var x=5;return x;}

上面的函数会返回值 5。

注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

 var myVar=myFunction();

myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量,您也可以使用返回值:

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数:

实例

计算两个数字的乘积,并返回结果:

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素的 innerHTML 将是:

12

尝试一下 »

在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:


function myFunction(a,b){    if (a>b){        return;    }    x=a+b}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。


局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

局部变量比同名全局变量的优先级高,所以局部变量会隐藏同名的全局变量。


全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。


JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。


向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

 carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。

JavaScript函数学习脑图


相关文章

JavaScript学习笔记整理(6):函数


作用域是可访问变量的集合。

在JavaScript中,能够定义全局作用域或者局部作用域。

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。


JavaScript 局部作用域

变量在函数内声明,变量为局部作用域。

局部变量:只能在函数内部访问。

实例

// 此处不能调用 carName 变量

function myFunction() {
    var carName = "Volvo";

    // 函数内可调用 carName 变量

}

尝试一下 »

因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。


JavaScript 全局变量

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 

实例

var carName = " Volvo";

// 此处可调用 carName 变量

function myFunction() {

    // 函数内可调用 carName 变量

}

尝试一下 »

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

以下实例中 carName 在函数内,但是为全局变量。

实例

// 此处可调用 carName 变量

function myFunction() {
    carName = "Volvo";

    // 此处可调用 carName 变量

}

尝试一下 »


JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。


函数参数

函数参数只在函数内起作用,是局部变量。


HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

实例

//此处可使用 window.carName

function myFunction() {
    carName = "Volvo";
}

尝试一下 »


你知道吗?

Note你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。
局部变量,包括 window 对象可以覆盖全局变量和函数。
Note

在 ES6 中,提供了 let 关键字和 const 关键字。

let 的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。

使用 const 声明的是常量,其值一旦被设定便不可被更改。


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


HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。


HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

单引号:

 <some-HTML-element some-event='some JavaScript'>

双引号:

 <some-HTML-element some-event="some JavaScript">

在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码):

实例

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

尝试一下 »

以上实例中,JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):

实例

<button onclick="this.innerHTML=Date()">The time is?</button>

尝试一下 »

Note JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:

实例

<button onclick="displayDate()">The time is?</button>

尝试一下 »


常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件


JavaScript 可以做什么?

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...
Note 在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。


JavaScript 字符串用于存储和处理文本。


JavaScript 字符串

字符串可以存储一系列字符,如 "John Doe"。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:

实例

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

你可以使用索引位置来访问字符串中的每个字符:

实例

var character = carname[7];

字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同:

实例

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

你也可以在字符串添加转义字符来使用引号:

实例

var answer = 'It's alright';
var answer = "He is called "Johnny"";

尝试一下 »


字符串长度

可以使用内置属性 length 来计算字符串的长度:

实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

尝试一下 »

提示:你可以通过本站的JavaScript编程实战部分来进一步了解JavaScript获取字符串长度的操作。


特殊字符

在 JavaScript 中,字符串写在单引号或双引号中。

因为这样,以下实例 JavaScript 无法解析:

  "We are the so-called "Vikings" from the north."

字符串 "We are the so-called " 被截断。

如何解决以上的问题呢?可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号,如下:

"We are the so-called "Vikings" from the north." 

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:

转义字符 () 可以用于转义撇号,换行,引号,等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符:

代码 输出
' 单引号
" 双引号
反斜杠
换行
回车
tab(制表符)
 退格符
f 换页符


字符串可以是对象

通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")

实例

var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object

尝试一下 »
Note 不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用:

实例

var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.

尝试一下 »


字符串属性和方法

原始值字符串,如 "John", 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串方法我们将在下一章节中介绍。


字符串属性

属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法


字符串方法

Method 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将指定的 Unicode 值转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

相关文章

JavaScript 标准参考手册:JavaScript String对象


本节将介绍JavaScript中的三种类型的运算符:算术运算符、赋值运算符以及字符串连接运算符。


运算符 = 用于赋值。

运算符 + 用于加值。


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

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

实例

指定变量值,并将值相加:

y=5;
z=2;
x=y+z;

在以上语句执行后,x 的值是:

7

尝试一下 »


JavaScript 算术运算符

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

y=5

,下面的表格解释了这些算术运算符:

运算符描述例子x 运算结果y 运算结果在线实例
+加法x=y+275实例 »
-减法x=y-235实例 »
*乘法x=y*2105实例 »
/除法x=y/22.55实例 »
%取模(余数)x=y%215实例 »
++自增x=++y66实例 »
x=y++56实例 »
--自减x=--y44实例 »
x=y--54实例 »


JavaScript 赋值运算符

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

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

运算符例子等同于运算结果在线实例
=x=y x=5实例 »
+=x+=yx=x+yx=15实例 »
-=x-=yx=x-yx=5实例 »
*=x*=yx=x*yx=50实例 »
/=x/=yx=x/yx=2实例 »
%=x%=yx=x%yx=0实例 »


用于字符串的 + 运算符

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

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

实例

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

txt3 运算结果如下:

What a verynice day

尝试一下 »

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

实例

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

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

What a very nice day

尝试一下 »

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

实例

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

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

What a very nice day

尝试一下 »


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

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串,如下实例:

实例

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, 和 z 输出结果为:

10
55
Hello5

尝试一下 »

规则:如果把数字与字符串相加,结果将成为字符串!

提示:为了熟悉JavaScript运算符的使用,你可以参考本站的JavaScript编程实战

JavaScript运算符学习脑图

1470710264211893

参考文章

轻松学习 JavaScript:JavaScript 运算符


比较和逻辑运算符用于变量(或一些数据类型)之间的比较和逻辑推断。并返回比较或推断结果(返回真(True)或假(False))。


比较运算符

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

给定

x=5,下面的表格解释了比较运算符:
运算符描述比较返回值实例
==等于x==8false实例 »
x==5true实例 »
===绝对等于(值和类型均相等)x==="5"false实例 »
x===5true实例 »
!=不等于x!=8true实例 »
!==不绝对等于(值和类型有一个不相等,或两个都不相等)x!=="5"true实例 »
x!==5false实例 »
> 大于x>8false实例 »
< 小于x<8true实例 »
>= 大于或等于x>=8false实例 »
<= 小于或等于x<=8true实例 »


如何使用

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

if (age<18) x="Too young";

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


逻辑运算符

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

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

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

提示:JavaScript逻辑运算符的优先级是:!、&& 、||。


条件运算符

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

语法

 variablename=(condition)?value1:value2

例子

实例

如果变量 age 中的值小于 18,则向变量 voteable 赋值 "年龄太小",否则赋值 "年龄已达到"。

voteable=(age<18)?"年龄太小":"年龄已达到";
尝试一下 »


JavaScript提供了一组位运算符,可以用来做简单的位运算。

 与Java等语言不同,JavaScript的数值型默认是浮点型,在进行位运算的时候需要先转换为整型才能运算,所以JavaScript的位运算效率比较低。

运算符

运算符名称描述
&AND如果两位都是 1 则设置每位为 1
|OR如果两位之一为 1 则设置每位为 1
^XOR如果两位只有一位为 1 则设置每位为 1
~NOT反转所有位
<<零填充左位移通过从右推入零向左位移,并使最左边的位脱落。
>>有符号右位移通过从左推入最左位的拷贝来向右位移,并使最右边的位脱落。
>>>零填充右位移通过从左推入零来向右位移,并使最右边的位脱落。

实例

操作结果等同于结果
5 & 110101 & 00010001
5 | 150101 | 00010101
5 ^ 140101 ^ 00010100
~ 510~01011010
5 << 1100101 << 11010
5 >> 120101 >> 10010
5 >>> 120101 >>> 10010

JavaScript 使用 32 位按位运算数

JavaScript 将数字存储为 64 位浮点数,但所有按位运算都以 32 位二进制数执行。

在执行位运算之前,JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后,结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数,JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

位运算 AND

当对一对数位执行位运算 AND 时,如果数位均为 1 则返回 1。

单位示例:

运算结果
0 & 00
0 & 10
1 & 00
1 & 11

四位示例:

运算结果
1111 & 00000000
1111 & 00010001
1111 & 00100010
1111 & 01000100

位运算 OR

当对一对数位执行位运算 OR 时,如果其中一位是 1 则返回 1:

单位示例

运算结果
0 | 00
0 | 11
1 | 01
1 | 11

四位运算:

操作结果
1111 | 00001111
1111 | 00011111
1111 | 00101111
1111 | 01001111

位运算 XOR

当对一对数位进行位运算 XOR 时,如果数位是不同的则返回 1:

单位示例:

运算结果
0 ^ 00
0 ^ 11
1 ^ 01
1 ^ 10

四位示例:

运算结果
1111 ^ 00001111
1111 ^ 00011110
1111 ^ 00101101
1111 ^ 01001011

JavaScript 位运算 AND (&)

如果位数都是 1,则位运算 AND 返回 1:

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 & 100000000000000000000000000000001 (1)

实例

var x = 5 & 1;

JavaScript 位运算 OR (|)

如果数位之一是 1,则位运算 OR 返回 1:

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 | 100000000000000000000000000000101 (5)

实例

var x = 5 | 1;

JavaScript 位运算 XOR (^)

如果数位是不同的,则 XOR 返回 1:

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 ^ 100000000000000000000000000000100 (4)

实例

var x = 5 ^ 1;

JavaScript 位运算 NOT (~)

十进制二进制
500000000000000000000000000000101
~511111111111111111111111111111010 (-6)

实例

var x = ~5;

JavaScript(零填充)位运算左移(<<)

这是零填充的左移。一个或多个零数位从右被推入,最左侧的数位被移除:

十进制二进制
500000000000000000000000000000101
5 << 100000000000000000000000000001010 (10)

实例

var x = 5 << 1;

JavaScript(有符号)位运算右移(>>)

这是保留符号的右移。最左侧的数位被从左侧推入,最右侧的数位被移出:

十进制二进制
-511111111111111111111111111111011
-5 >> 111111111111111111111111111111101 (-3)

实例

var x = -5 >> 1;

JavaScript(零填充)右移(>>>)

这是零填充的右移。一个或多个零数位从左侧被推入,最右侧的数位被移出:

十进制二进制
500000000000000000000000000000101
5 >>> 100000000000000000000000000000010 (2)

实例

var x = 5 >>> 1;

32-bit 有符号整数(二进制数)

仅设置一位的 32 位整数很好理解:

二进制表示十进制值
000000000000000000000000000000011
000000000000000000000000000000102
000000000000000000000000000001004
000000000000000000000000000010008
0000000000000000000000000001000016
0000000000000000000000000010000032
0000000000000000000000000100000064

多设置一些数位揭示了二进制的模式:

二进制表示十进制值
000000000000000000000000000001015 (4 + 1)
0000000000000000000000000010100040 (32 + 8)
0000000000000000000000000010110145 (32 + 8 + 4 + 1)

负数是正数的二进制补码加 1:

二进制表示十进制值
000000000000000000000000000001015
11111111111111111111111111111011-5
0000000000000000000000000010100040
11111111111111111111111111011000-40
11111111111111111111111111011001-41

把十进制转换为二进制

实例

function dec2bin(dec){    return (dec >>> 0).toString(2);}

把二进制转换为十进制

实例

function bin2dec(bin){    return parseInt(bin, 2).toString(10);}


JavaScript 通过规定的语句让程序代码有条件的按照一定的方式执行。



条件语句用于基于不同的条件来执行不同的动作。


条件语句

通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中,我们可使用以下条件语句:

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • JavaScript三目运算 - 当条件为true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

只有当指定条件为 true 时,该语句才会执行代码。

语法

if (condition){ 当条件为 true 时执行的代码 }

请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!

实例

当时间小于 20:00 时,生成问候 "Good day":

if (time<20){
  x="Good day";
}
x 的结果是:
Good day

尝试一下 »

请注意,在这个语法中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。


If...else 语句

请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。

语法

if (condition)  {  当条件为 true 时执行的代码 }else{    当条件不为 true 时执行的代码  }

实例

当时间小于 20:00 时,生成问候 "Good day",否则生成问候 "Good evening"。

if (time<20){
  x="Good day";
}
else{
  x="Good evening";
}

x 的结果是:

Good day

尝试一下 »

提示:在本站的编程实战中,你可以练习如何使用JavaScript的if语句



Javascript三目运算(三元运算) 语句

与其他语言类似,JavaScript存在一个用于条件判断的三目(三元)运算符,它的基本使用方式是这样的:对于条件表达式b ? x : y,先计算条件b,然后进行判断。如果b的值为true,计算x的值,运算结果为x的值;否则,计算y的值,运算结果为y的值。一个条件表达式绝不会既计算x,又计算y。条件运算符是右结合的,也就是说,从右向左分组计算。例如,a ? b : c ? d : e将按a ? b : (c ? d : e)执行。
实例
5 > 3 ? alert("5大于3") : alert("5小于3");
注意:if...else与三目运算这两者的区别,总结为一句话:三目运算有返回值,if else没有返回值

例子1:

var n=1;if(n>1){    n=0;}else{    n++;}console.log(n);//输出结果:2var n=1;n = n>1?0 : n++;console.log(n);//输出结果为:1

例子2:

var n=1;if(n>1){    n=0;}else{    ++n;}console.log(n);//输出结果:2var n=1;n = n>1?0 : ++n; console.log(n); //输出结果为:2


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

使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (condition1){  当条件 1 为 true 时执行的代码 }else if (condition2){ 当条件 2 为 true 时执行的代码   }  else{  当条件 1 和 条件 2 都不为 true 时执行的代码  }

实例

如果时间小于 10:00,则生成问候 "Good morning",如果时间大于 10:00 小于 20:00,则生成问候 "Good day",否则生成问候 "Good evening":

if (time<10){
  x="Good morning";
}
else if (time>=10 && time<20){
  x="Good day";
}
else{
  x="Good evening";
}

x 的结果是:

Good morning

尝试一下 »

提示:在使用if、else if语句的时候需要注意它们中代码的执行顺序,具体练习请参考本站的《JavaScript编程实战》


Examples

更多实例

随机链接
这个实例演示了一个链接,当您点击链接时,会带您到不同的地方去。每种机会都是 50% 的概率。

相关阅读

JavaScript标准参考手册:javascript if条件


switch 语句用于在不同的条件执行不同的动作。搭配case和default使用(default可以认为是一个特殊的case,case对应一种或多种(default)情况,Switch语句没有case是没有办法体现其功能的)。


JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。你可以在JavaScript编程实战中了解怎么使用switch语句进行多选项选择

语法

switch(n){    case 1:        执行代码块 1        break;          case 2:              执行代码块 2              break;          default:        n 与 case 1 和 case 2 不同时执行的代码}

代码解释:

  • 计算一次 switch 表达式
  • 把表达式的值与每个case的值进行对比
  • 如果存在匹配,则执行关联代码

工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行,因为默认情况下Switch会按顺序将所有匹配的case(default)执行完毕!

实例

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:

var day=new Date().getDay();
switch (day){
    case 0:
        x="Today it's Sunday";
        break;
    case 1:
        x="Today it's Monday";
        break;
    case 2:
        x="Today it's Tuesday";
        break;
    case 3:
        x="Today it's Wednesday";
        break;
    case 4:
        x="Today it's Thursday";
        break;
    case 5:
        x="Today it's Friday";
        break;
    case 6:
        x="Today it's Saturday";
        break;
}

x 的运行结果:

Today it's Sunday

尝试一下 »

break 关键词

如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配,并完成任务,则随机中断执行(break)。无需更多测试。

break 能够节省大量执行时间,因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

请使用 default 关键词来规定匹配不存在时做的事情(default也是case,是一类特殊的case,即已有case情况外的case):

实例

如果今天不是星期六或星期日,则会输出默认的消息:

var day=new Date().getDay();
switch (day){
    case 6:
        x="Today it's Saturday";
        break;
    case 0:
        x="Today it's Sunday";
        break;
    default:
        x="Looking forward to the Weekend";
}

尝试一下 »

default不必是 switch 代码块中最后一个 case:

实例

switch (new Date().getDay()){

    default: 

        text = "期待周末!";

        break;

    case 6:

        text = "今天是周六";

        break; 

    case 0:

        text = "今天是周日";

}


尝试一下 »

如果 default 不是 switch 代码块中最后一个 case,请记得用 break 结束默认 default。

常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中,case 4 和 5 分享相同的代码块,而 0 和 6 分享另一段代码块:

实例

switch (new Date().getDay()) {

    case 4:

    case 5:

        text = "周末快到了:)";

        break; 

    case 0:

    case 6:

        text = "今天是周末~";

         break;

    default: 

        text = "期待周末!";

}


尝试一下 »

Switching 的细节

如果多种 case 匹配一个 case 值,则选择第一个 case。

如果未找到匹配的 case,程序将继续使用默认 label。

如果未找到默认 label,程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较(===)。

值必须与要匹配的类型相同。

只有操作数属于同一类型时,严格比较才能为 true。

在这个例子中,x 将不匹配:

实例

var x = "0";

switch (x) {

    case 0:

        text = "Off";

        break;

    case 1:

        text = "On";

        break;

    default:

        text = "No value found";

}


尝试一下 »

相关文章

轻松学习JavaScript:JavaScript Switch Case


循环可以将代码块执行指定的次数。


JavaScript 循环

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

我们可以这样输出数组的值:

一般写法:

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

使用for循环

for (var i=0;i<cars.length;i++){
    document.write(cars[i] + "<br>");
}

尝试一下 »


不同类型的循环

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法:

for (语句 1; 语句 2; 语句 3){
  被执行的代码块
}

语句 1 (代码块)开始前执行 starts.

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

实例

for (var i=0; i<5; i++){
  x=x + "The number is " + i + "<br>";
}

尝试一下 »

从上面的例子中,您可以看到:

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件(i 必须小于 5)。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。


语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的,也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意(或者多个)值:

实例:

for (var i=0,len=cars.length; i<len; i++){
    document.write(cars[i] + "<br>");
}

尝试一下 »

同时您还可以省略语句 1(比如在循环开始前已经设置了值时):

实例:

var i=2,len=cars.length;
for (; i<len; i++){
    document.write(cars[i] + "<br>");
}

尝试一下 »


语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。

lamp如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。


语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。

语句 3 也可以省略(比如当循环内部有相应的代码时):

实例:

var i=0,len=cars.length;
for (; i<len; ){
    document.write(cars[i] + "<br>");
    i++;
}

尝试一下 »


For/In 循环

JavaScript for/in 语句循环遍历对象的属性:

实例

var person={fname:"John",lname:"Doe",age:25};
for (x in person){
  txt=txt + person[x];
}

尝试一下 »

提示:在JavaScript中,for in循环不仅可以遍历对象的属性,还可以遍历数组。

您将在有关 JavaScript 对象的章节学到更多有关 for / in 循环的知识。


While 循环

我们将在下一章为您讲解 while 循环和 do/while 循环。


相关实例

使用for语句循环迭代

通过一个for循环语句你可以多次执行代码。

使用for循环逆向迭代

通过for循环可以逆向迭代,只要我们定义好合适的条件。


JavaScript while 循环的目的是为了反复执行语句或代码块。

只要指定条件为 true,循环就可以一直执行代码块。


while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件){ 需要执行的代码}

实例

本例中的循环将继续运行,只要变量 i 小于 5:

实例

while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

尝试一下 »

提示:在本站JavaScript编程实战部分,您可以通过练习来实现使用while语句循环迭代

lamp 如果您忘记增加条件中所用变量的值,该循环永远不会结束。这可能导致浏览器崩溃。


do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。

语法

 do{  需要执行的代码 }while (条件);

实例

下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行:

实例

do{
  x=x + "The number is " + i + "<br>";
  i++;
}while (i<5);

尝试一下 »

别忘记增加条件中所用变量的值,否则循环永远不会结束!


比较 for 和 while

如果您已经阅读了前面那一章关于 for 循环的内容,您会发现 while 循环与 for 循环很像。

本例中的循环使用 for 循环来显示 cars 数组中的所有值:

实例

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
    document.write(cars[i] + "<br>");
    i++;
}

尝试一下 »

本例中的循环使用 while 循环来显示 cars 数组中的所有值:

实例

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
    document.write(cars[i] + "<br>");
    i++;
}

尝试一下 »


break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。


Break 语句

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。

break 语句可用于跳出循环。

continue 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):

实例

for (i=0;i<10;i++){
  if (i==3){
    break;
  }
  x=x + "The number is " + i + "<br>";
}

尝试一下 »

由于这个 if 语句只有一行代码,所以可以省略花括号:

for (i=0;i<10;i++){
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
}

Continue 语句

continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 该例子跳过了值 3:

实例

for (i=0;i<=10;i++){
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

尝试一下 »

注意:由于 break 语句的作用是跳出代码块,所以 break 可以使用于循环和 switch 等;而 continue 语句的作用是进入下一个迭代,所以 continue 只能用于循环的代码块。


JavaScript 标签

正如您在 switch 语句那一章中看到的,可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句,请在语句之前加上冒号:

label:
statements

break 和 continue 语句仅仅是能够跳出代码块的语句。

语法:

break labelname;
continue labelname;

continue 语句(带有或不带标签引用)只能用在循环中。

break 语句(不带标签引用),只能用在循环或 switch 中。

通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:

实例

cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

尝试一下 »

相关文章

轻松学习 JavaScript:JavaScript 循环控制


Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。


JavaScript 数据类型

在 JavaScript 中有 5 不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

实例

typeof "John"                 // 返回 string
typeof3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [ 1,2,3,4]              // 返回 object
typeof {name: 'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar没有被实例化的话)
typeof null                   // 返回 object

尝试一下 »

请注意:

  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object
  • 日期(Date)的数据类型为 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ,我们就无法通过 typeof 来判断他们的类型,因为都是 返回 Object。


constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

实例

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2, 3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function() {}.constructor         // 返回函数 Function(){ [native code] }

尝试一下 »

你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):

实例

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

尝试一下 »

你可以使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):

实例

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

尝试一下 »


JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型:

  • 通过使用 JavaScript 函数
  • 通过 JavaScript 自身自动转换

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字,字母,变量,表达式:

实例

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String( 100+ 23// 将数字表达式转换为字符串并返回

尝试一下 »

Number 方法 toString() 也是有同样的效果。

实例

x.toString()
(123).toString()
(100 + 23).toString()

尝试一下 »

Number 方法 章节中,你可以找到更多数字转换为字符串的方法:

方法描述
toExponential()把对象的值转换为指数计数法。
toFixed()把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision()把数字格式化为指定的长度。


将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

String(false)        // 返回 "false"
String(true)         // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"


将日期转换为字符串

全局方法 String() 可以将日期转换为字符串。

String(Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

实例

Date().toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 章节中,你可以查看更多关于日期转换为字符串的函数:

方法描述
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()从 Date 对象以四位数字返回年份。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。


将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

Number 方法 章节中,你可以查看到更多关于字符串转为数字的方法:

方法描述
parseFloat()解析一个字符串,并返回一个浮点数。
parseInt()解析一个字符串,并返回一个整数。


一元运算符 +

Operator + 可用于将变量转换为数字:

实例

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字

尝试一下 »

如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):

实例

var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

尝试一下 »


将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

Number(false)     // 返回 0
Number(true)      // 返回 1


将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d = new Date();
Number(d)          // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();
d.getTime()        // 返回 1404568027739


自动转换类型 Type Conversion

当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。

以下输出结果不是你所期望的:

5 + null    // 返回 5         because null is converted to 0
"5" + null  // 返回"5null"   because null is converted to "null"
"5" + 1     // 返回 "51"      because 1 is converted to "1" 
"5" - 1     // 返回 4         because "5" is converted to 5


自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换:

// if myVar = 123             // toString 转换为 "123"
// if myVar = true            // toString 转换为 "true"
// if myVar = false           // toString 转换为 "false"

null

在 JavaScript 中 null 表示 "什么都没有",是一个只有一个值的特殊类型,表示一个空对象引用。

当设置为“null”时,可以用来清空对象:

var person = null; // 值为 null(空), 但类型为对象

提示:你可以使用 typeof 检测 null 返回是object。


undefined

在 JavaScript 中 undefined 是一个没有设置值的变量。

如果一个变量没有设置值的话,就会返回 undefined:

var person; // 值为 undefined(空), 类型是undefined

相关文章

JavaScript标准参考教程:JavaScript 数据类型转换


正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。


什么是正则表达式?

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符,或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

实例:

var patt = /51coolma/i

实例解析:

/51coolma/i  是一个正则表达式。

51coolma  是一个模式 (用于检索)。

i  是一个修饰符 (搜索不区分大小写)。


使用字符串方法

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子字符串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子字符串


search() 方法使用正则表达式

实例

使用正则表达式搜索 "51coolma" 字符串,且不区分大小写:

var str = "Visit 51coolma";
var n = str.search(/51coolma/i);

输出结果为:

6

尝试一下 »


search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式:

实例

检索字符串中 "51coolma" 的子字符串:

var str = "Visit 51coolma!";
var n = str.search("51coolma");

尝试一下 »


replace() 方法使用正则表达式

实例

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 51coolma :

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "51coolma");

结果输出为:

Visit 51coolma!

尝试一下 »

replace() 方法使用字符串

replace() 方法将接收字符串作为参数:

var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "51coolma");

尝试一下 »


你注意到了吗?

Note正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

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

正则表达式模式

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

表达式描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(x|y)查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符描述
d查找数字。
s查找空白字符。
匹配单词边界。
uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。


使用 RegExp 对象

在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。


使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

以下实例用于搜索字符串中的字符 "e":

实例

var patt = /e/;
patt.test("The best things in life are free!");

字符串中含有 "e",所以该实例输出为:

true

尝试一下 »

你可以不用设置正则表达式的变量,以上两行代码可以合并为一行:

/e/.test("The best things in life are free!")


使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

Example 1

/e/.exec("The best things in life are free!");

字符串中含有 "e",所以该实例输出为:

e

尝试一下 »



使用 compile()

compile() 方法用于改变 RegExp。

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

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

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

truefalse

完整的 RegExp 参考手册

完整的 RegExp 对象参考手册,请参考我们的 JavaScript RegExp 参考手册

该参考手册包含了所有 RegExp 对象的方法和属性。

如果你想知道有哪些js常用的正则表达式,请参考 js 实战手册。


JavaScript正则表达式在线测试工具

JavaScript正则表达式在线测试工具



JavaScript 正则表达式学习导图


throw、try 和 catch


try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。


 JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:

可能是语法错误,通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然,也可能是由于许多其他不可预知的因素。


JavaScript 抛出(throw)错误

当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。

描述这种情况的技术术语是:JavaScript 将抛出一个错误。


JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 trycatch 是成对出现的。

语法

 try{   //在这里运行代码}catch(err){   //在这里处理错误}

实例

在下面的例子中,我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误,并执行代码来处理它。

实例

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message(){
    try{
      adddlert("Welcome guest!");
    }catch(err){
      txt="本页有一个错误。 ";
      txt+="错误描述:" + err.message + " ";
      txt+="点击确定继续。 ";
      alert(txt);
    }
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()">
</body>
</html>

尝试一下 »

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是:创建或抛出异常(exception)。

如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

语法

 throw exception 

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

实例

<script>
function myFunction(){
    try{
      var x=document.getElementById("demo").value;
      if(x=="")    throw "empty";
      if(isNaN(x)) throw "not a number";
      if(x>10)     throw "too high";
      if(x<5)      throw "too low";
    }catch(err){
      var y=document.getElementById("mess");
      y.innerHTML="Error: " + err + ".";
    }
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

尝试一下 »

请注意,如果 getElementById 函数出错,上面的例子也会抛出一个错误。

相关文章

JavaScript标准参考手册:JavaScript 错误处理机制


在编写 JavaScript 时,如果没有调试工具将是一件很痛苦的事情。


JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。

通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。

Note 通常,你在编写一个新的 JavaScript 代码过程中都会发生错误。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难,但幸运的是,很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

有了调试工具,我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。


console.log() 方法

如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值:

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

尝试一下 »


设置断点

在调试窗口中,你可以设置 JavaScript 代码的断点。

在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。

在检查完毕后,可以重新执行代码(如播放按钮)。


debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用,debugger 语句将无法工作。

开启 debugger ,代码在第三行前停止执行。

实例

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

尝试一下 »


主要浏览器的调试工具

通常,浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

各浏览器的步骤如下:

Chrome 浏览器

  • 打开浏览器。
  • 在菜单中选择工具。
  • 在工具中选择开发者工具。
  • 最后,选择 Console。

Firefox 浏览器

  • 打开浏览器。
  • 访问页面:
    http://www.getfirebug.com。
  • 按照说明 :
    安装 Firebug。

Internet Explorer 浏览器。

  • 打开浏览器。
  • 在菜单中选择工具。
  • 在工具中选择开发者工具。
  • 最后,选择 Console。

Opera

  • 打开浏览器。
  • Opera 的内置调试工具为 Dragonfly,详细说明可访问页面:
    http://www.opera.com/dragonfly/。

Safari

  • 打开浏览器。
  • 访问页面:
    http://extentions.apple.com。
  • 按说明操作:
    install Firebug Lite。

扩展阅读

Firebug教程:使用Firebug调试JavaScript


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

表单数据经常需要使用 JavaScript 来验证其正确性:

  • 验证表单数据是否为空?
  • 验证输入是否是一个正确的email地址?
  • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

必填(或必选)项目

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

function validateForm() {            var x=document.forms["myForm"]["fname"].value;            if (x==null || x==""){                alert("First name must be filled out");                return false;            }        }

以上函数在 form 表单提交时被调用:

实例

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

尝试一下 »


E-mail 验证

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

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

function validateForm(){        var x=document.forms["myForm"]["email"].value;        var atpos=x.indexOf("@");        var dotpos=x.lastIndexOf(".");        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){          alert("Not a valid e-mail address");          return false;          }       }

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

实例

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

尝试一下 »

数字验证

下面的函数检查输入的数据是否是1~10之间的数字。假如输入的不为数字或不是,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

实例

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 

<strong>请输入1到10之间的数字:</strong>

<input id="number">

<button type="button" onclick="myFunction()">提交</button>

</form>


尝试一下 »

相关文章

JavaScript标准参考教程:JavaScript 表单


保留关键字在意思上表达成为将来的关键字而保留的单词。

在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名。


JavaScript 标准

所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript 的第三版,从 1999 年开始)。

ECMAScript 4(ES4)未通过。

ECMAScript 5(ES5,2009 年发布),是 JavaScript 最新的官方版本。

随着时间的推移,我们开始看到,所有的现代浏览器已经完全支持 ES5。


JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

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

* 标记的关键字是 ECMAScript5 中新添加的。


JavaScript 对象、属性和方法

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名:

Array Date eval function hasOwnProperty
Infinity isFinite isNaN isPrototypeOf length
Math NaN name Number Object
prototype String toString undefined valueOf


Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符:

getClass java JavaArray javaClass JavaObject JavaPackage


Windows 保留关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。

在 HTML 中,您必须(为了可移植性,您也应该这么做)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名:

alert all anchor anchors area
assign blur button checkbox clearInterval
clearTimeout clientInformation close closed confirm
constructor crypto decodeURI decodeURIComponent defaultStatus
document element elements embed embeds
encodeURI encodeURIComponent escape event fileUpload
focus form forms frame innerHeight
innerWidth layer layers link location
mimeTypes navigate navigator frames frameRate
hidden history image images offscreenBuffering
open opener option outerHeight outerWidth
packages pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin prompt
propertyIsEnum radio reset screenX screenY
scroll secure select self setInterval
setTimeout status submit taint text
textarea top unescape untaint window


HTML 事件句柄

除此之外,您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。

实例:

onblur onclick onerror onfocus
onkeydown onkeypress onkeyup onmouseover
onload onmouseup onmousedown onsubmit

注意:在JavaScript中关键字不能用作变量名或者函数名,否则可能会得到错误消息,例如“"Identifier Expected"(应该有标识符、期望标识符)”。



非标准 JavaScript

除了保留关键字,在 JavaScript 实现中也有一些非标准的关键字。

一个实例是 const 关键字,用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。

Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。建议:不要使用它


JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。


什么是 JSON?

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言 *
  • JSON 易于理解。

Note* JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。

JSON 实例

以下 JSON 语法定义了 employees 对象: 3 条员工记录(对象)的数组:

JSON Example

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}


JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。


JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。

键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"firstName":"John"

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对:

{"firstName":"John", "lastName":"Doe"}

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象:

"employees":[            {"firstName":"John", "lastName":"Doe"},            {"firstName":"Anna", "lastName":"Smith"},         {"firstName":"Peter", "lastName":"Jones"}        ]

在以上实例中,对象 "employees" 是一个数组。包含了三个对象。

每个为个对象为员工的记录(姓和名)。


JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据,并在网页中显示数据。

简单起见,我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后,在你的页面中使用新的 JavaScript 对象:

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

尝试一下 »

更多 JSON 信息,你可以阅读我们的 JSON 教程


我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢?

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。

下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。

实例

<a href="javascript:void(0)">单击此处什么也不会发生</a>

尝试一下 »

当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

以下实例中,在用户点击链接后显示警告信息:

实例

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

尝试一下 »

以下实例中参数 a 将返回 undefined :

实例

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

尝试一下 »

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

如果你要定义一个死链接请使用 javascript:void(0) 。

实例

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p>

尝试一下 »

注意:void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行


相关文章

javascript百科大全:javascript:;与javascript:void(0)使用介绍


所有的 JavaScript 项目适用同一种规范。


JavaScript 代码规范

代码规范通常包括以下几个方面:

  • 变量和函数的命名规则
  • 空格,缩进,注释的使用规则。
  • 其他常用规范……

规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定,可以跟你的团队成员来协商设置。


变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName = "John";lastName = "Doe";price = 19.90;tax = 0.20;fullPrice = price + (price * tax);

在JavaScript中定义变量名时,还应该注意以下事项:

  • 变量名应该区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号;
  • 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型;
  • 变量名的命名应该是有意义的;
  • 变量名不能为JavaScript中的关键词、保留字全名;
  • 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

var x = y + z;var values = ["Volvo", "Saab", "Fiat"];

代码缩进

通常使用 4 个空格符号来缩进代码块:

函数:

function toCelsius(fahrenheit) {    return (5 / 9) * (fahrenheit - 32);}

注意:不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。


语句规则

简单语句的通用规则:

  • 一条语句通常以分号作为结束符。

实例:

var values = ["Volvo", "Saab", "Fiat"];var person = {    firstName: "John",    lastName: "Doe",    age: 50,    eyeColor: "blue"};

复杂语句的通用规则:

  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要忘记以分号结束一个复杂的声明。

 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

函数:

function toCelsius(fahrenheit) {    return (5 / 9) * (fahrenheit - 32);}

循环:

for (i = 0; i < 5; i++) {    x += i;}

条件语句:

if (time < 20) {    greeting = "Good day";} else {    greeting = "Good evening";}

对象规则

对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号,数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行,并以分号作为结束符号。

实例:

var person = {    firstName: "John",    lastName: "Doe",    age: 50,    eyeColor: "blue"};

短的对象代码可以直接写成一行:

实例:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。

实例:

实例:

document.getElementById("demo").innerHTML =
    "Hello W3Cschool.";

尝试一下 »

注意:在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 前换行。


命名规则

一般很多代码语言的命名规则都是类似的,例如:

  • 变量和函数为驼峰法( camelCase
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则: hyp-hens, camelCase, 或under_scores ?

HTML 和 CSS 的横杠(-)字符:

HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。

CSS 使用 - 来连接属性名 (font-size)。


注意:- 通常在 JavaScript 中被认为是减法,所以不允许使用。


下划线:

很多程序员比较喜欢使用下划线(如:date_of_birth), 特别是在 SQL 数据库中。

PHP 语言通常都使用下划线。

帕斯卡拼写法(PascalCase):

帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法:

JavaScript 中通常推荐使用驼峰法,jQuery 及其他 JavaScript 库都使用驼峰法。


注意:变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。



HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj =getElementById("Demo")
var obj = getElementById("demo")

尝试一下 »

HTML 与 JavaScript 尽量使用相同的命名规则。

访问 HTML(5) 代码规范


文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css

JavaScript 文件后缀是 .js


使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格,我们建议统一使用小写的文件名。

学完本教程之后,W3Cschool推荐您进行实战练习来巩固自己的知识:javascript实战


JavaScript 格式化整理工具

在线JavaScript 格式化整理工具

 


相关阅读

前端编码规范:JavaScript 规范


JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义,也可以是一个表达式。


函数声明

在之前的教程中,你已经了解了函数声明的语法 :

函数声明后不会立即执行,会在我们需要的时候调用到。

实例

function myFunction(a, b) {
    return a * b;
}

尝试一下 »

Note分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句,所以不以分号结束。

函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中:

实例

var x = function (a, b) {return a * b};

尝试一下 »

在函数表达式存储在变量后,变量也可作为一个函数使用:

实例

var x = function (a, b) {return a * b};
var z = x(4, 3);

尝试一下 »

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中,不需要函数名称,通常通过变量名来调用。

Note上述函数以分号结尾,因为它是一个执行语句。


Function() 构造函数

在以上实例中,我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

实例

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

尝试一下 »

实际上,你不必使用构造函数。上面实例可以写成:

实例

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

尝试一下 »
Note在 JavaScript 中,很多时候,你需要避免使用 new 关键字。


函数提升(Hoisting)

在之前的教程中我们已经了解了 "hoisting(提升)"。

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升(Hoisting)应用在变量的声明与函数的声明。

因此,函数可以在声明之前调用:

myFunction(5);               function myFunction(y) {            return y * y;        }

使用表达式定义函数时无法提升。


自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

不能自调用声明的函数。

通过添加括号,来说明它是一个函数表达式:

实例

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

尝试一下 »

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。


函数可作为一个值使用

JavaScript 函数作为一个值使用:

实例

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);

尝试一下 »

JavaScript 函数可作为表达式使用:

实例

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;

尝试一下 »


函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但,JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性 方法

arguments.length 属性返回函数调用过程接收到的参数个数:

实例

function myFunction(a, b) {
    return arguments.length;
}

尝试一下 »

toString() 方法将函数作为一个字符串返回:

实例

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

尝试一下 »
Note函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。

JavaScript 函数练习

JavaScript 函数定义

在 JavaScript 中把代码的重复部分抽取出来,放到一个函数(functions)中。

JavaScript 定义带参数函数

JavaScript函数的参数parameters充当占位符(也叫形参)的作用,参数可以为一个或多个。调用一个函数时所传入的参数为实参,实参决定着形参真正的值。 


JavaScript 函数对参数的值(arguments)没有进行任何的检查。

JavaScript 函数参数与大多数其他语言的函数参数的区别在于:它不会关注有多少个参数被传递,不关注传递的参数的数据类型。


函数显式参数与隐藏参数(arguments)

在先前的教程中,我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) {
    code to be executed
}

函数显式参数在函数定义时列出。

函数隐藏参数(arguments)在函数调用时传递给函数真正的值。


参数规则

JavaScript 函数定义时参数没有指定数据类型。

JavaScript 函数对隐藏参数(arguments)没有进行检测。

JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。


默认参数

如果函数在调用时缺少参数,参数会默认设置为: undefined

有时这是可以接受的,但是建议最好为参数设置一个默认值:

实例

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    }
}

尝试一下 »

或者,更简单的方式:

实例

function myFunction(x, y) {
    y = y || 0;
}

尝试一下 »
Note 如果y已经定义 , y || 0返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。


Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象.

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最后一个参数的值:

实例

x = findMax(1, 123, 500, 115, 44, 88);


function findMax() {

    var i, max = arguments[0];


    if(arguments.length < 2)return max;


    for (i = 0; i < arguments.length; i++) {

        if (arguments[i] > max) {

            max = arguments[i];

        }

    }

    return max;

}


尝试一下 »

或者创建一个函数用来统计所有数值的和:

实例

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

尝试一下 »


通过值传递参数

在函数中调用的参数是函数的参数。

如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。

总结:JavaScript函数传值只是将参数的值传入函数,函数会另外配置内存保存参数值,所以并不会改变原参数的值。

实例

var x = 1;// 通过值传递参数function myFunction(x) {    x++; //修改参数x的值,将不会修改在函数外定义的变量 x    console.log(x);}myFunction(x); // 2console.log(x); // 1

通过对象传递参数

在JavaScript中,可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部(全局变量)。

实例

var obj = {x:1};// 通过对象传递参数function myFunction(obj) {    obj.x++; //修改参数对象obj.x的值,函数外定义的obj也将会被修改    console.log(obj.x);}myFunction(obj); // 2console.log(obj.x); // 2

提示:你可以在本站的JavaScript编程实战中练习使用JavaScript函数参数!


JavaScript 函数有 4 种调用方式。

每种方式的不同在于 this 的初始化。


this 关键字

一般而言,在Javascript中,this指向函数执行时的当前对象。

Note 注意 this 是保留关键字,你不能修改 this 的值。

提示:本站的《深入理解 JavaScript》中的 this 关键字一节你可以学到更多与JavaScript this 关键字相关的内容!



调用 JavaScript 函数

在之前的章节中我们已经学会了如何创建函数。

函数中的代码在函数被调用后执行。


作为一个函数调用

实例

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

尝试一下 »

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

myFunction() 和 window.myFunction() 是一样的:

实例

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

尝试一下 »
Note 这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时, this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

实例

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

尝试一下 »
Note 函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstNamelastName), 及一个方法 (fullName):

实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

尝试一下 »

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

测试一下!修改 fullName 方法并返回 this 值:

实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

尝试一下 »
Note 函数作为对象方法调用,会使得 this 的值成为对象本身。

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:

实例

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

尝试一下 »

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

Note 构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call()apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

实例

function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

实例

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

Note 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。


JavaScript 变量可以是局部变量或全局变量。

私有变量可以用到闭包。


全局变量

函数可以访问函数内部定义的变量,如:

实例

function myFunction() {
    var a = 4;
    return a * a;
}

尝试一下 »

函数也可以访问函数外部定义的变量,如:

实例

var a = 4;
function myFunction() {
    return a * a;
}

尝试一下 »

后面一个实例中, a 是一个 全局 变量。

在web页面中全局变量属于 window 对象。

全局变量可应用于页面上的所有脚本。

在第一个实例中, a 是一个 局部 变量。

局部变量只能用于定义它函数内部。对于其他的函数或脚本代码是不可用的。

全局和局部变量即便名称相同,它们也是两个不同的变量。修改其中一个,不会影响另一个的值。

Note 变量声明是如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。

提示:请在JavaScript编程实战中练习如何定义JavaScript函数的全局变量



变量生命周期

全局变量的作用域是全局性的,即在整个JavaScript程序中,全局变量处处都在。

而在函数内部声明的变量,只在函数内部起作用。这些变量是局部变量,作用域是局部性的;函数的参数也是局部性的,只在函数内部起作用。


计数器困境

设想下如果你想统计一些数值,且该计数器在所有函数中都是可用的。

你可以使用全局变量,函数设置计数器递增:

实例

var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// 计数器现在为 3

尝试一下 »

计数器数值在执行 add() 函数时发生变化。

但问题来了,页面上的任何脚本都能改变计数器,即便没有调用 add() 函数。

如果我在函数内声明计数器,如果没有调用函数将无法修改计数器的值:

实例

function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违,输出的都是 1 !

尝试一下 »

以上代码将无法正确输出,每次我调用 add() 函数,计数器都会设置为 1。

JavaScript 内嵌函数可以解决该问题。


JavaScript 内嵌函数

所有函数都能访问全局变量。  

实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:

实例

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}

尝试一下 »

如果我们能在外部访问 plus() 函数,这样就能解决计数器的困境。

我们同样需要确保 counter = 0 只执行一次。

我们需要闭包。


JavaScript 闭包

还记得函数自我调用吗?该函数会做什么?

实例

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

尝试一下 »

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护,只能通过 add 方法修改。

Note 闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。

相关文章参考

JavaScript学习笔记:学习Javascript闭包


通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。


HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,你可以访问所有的 HTML 元素,连同它们所包含的文本和属性。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

HTML DOM 模型被构造为对象的树:

HTML DOM 树

DOM HTML tree

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

本例查找 id="intro" 元素:

实例

var x=document.getElementById("intro");

尝试一下 »

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。


通过标签名查找 HTML 元素

本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:

实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

尝试一下 »


通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:

实例

var x=document.getElementsByClassName("intro");

尝试一下 »


HTML DOM 教程

在本教程接下来的篇幅中,您将学到:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加或删除 HTML 元素

相关教程

JavaScript 和 HTML DOM 参考手册

javascript DOM知识脑图



HTML DOM 允许 JavaScript 改变 HTML 元素的内容。


改变 HTML 输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

尝试一下 »

lamp绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。


改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

本例改变了 <p>元素的内容:

实例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

尝试一下 »

本例改变了 <h1> 元素的内容:

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

尝试一下 »

实例讲解:

  • 上面的 HTML 文档含有 id="header" 的 <h1> 元素


  • 我们使用 HTML DOM 来获得 id="header" 的元素


  • JavaScript 更改此元素的内容 (innerHTML)



改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value

本例改变了 <img> 元素的 src 属性:

实例

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

尝试一下 »

实例讲解:

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素

  • 我们使用 HTML DOM 来获得 id="image" 的元素

  • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")


HTML DOM 允许 JavaScript 改变 HTML 元素的样式。


改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style 

下面的例子会改变 <p> 元素的样式:

实例

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

尝试一下 »

本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

尝试一下 »


更多实例

Visibility
如何使元素不可见。您希望元素显示或消失吗?


参考文章

JavaScript 和 HTML 参考手册:Style 对象


HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

实例

Mouse Over Me
Click Me


对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript 

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

实例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

尝试一下 »

本例从事件处理器调用一个函数:

实例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
    <h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

尝试一下 »


HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

实例

向 button 元素分配 onclick 事件:

<button onclick="displayDate()">点我</button>

尝试一下 »

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。


使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:

实例

向 button 元素分配 onclick 事件:

document.getElementById("myBtn").onclick=function(){displayDate()};

尝试一下 »

在上面的例子中,名为 displayDate 的函数被分配给 id=myBtn" 的 HTML 元素。

按钮点击时Javascript函数将会被执行。


onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

实例

<body onload="checkCookies()">

尝试一下 »


onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

实例

<input type="text" id="fname" onchange="upperCase()">

尝试一下 »


onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例

一个简单的 onmouseover-onmouseout 实例:

Mouse Over Me

尝试一下 »


onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

实例

一个简单的 onmousedown-onmouseup 实例:

Thank You

尝试一下 »


更多实例

onmousedown 和onmouseup
当用户按下鼠标按钮时,更换一幅图像。

onload
当页面完成加载时,显示一个提示框。

onfocus
当输入字段获得焦点时,改变其背景色。

鼠标事件
当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。


相关知识

JavaScript 和 HTML 参考手册:HTML DOM事件对象


通过JavaScript,我们可以给页面的某些元素添加事件的监听器,当元素触发相应事件的时候监听器就会捕捉到这个事件并执行相应的代码。

addEventListener() 方法

实例

当用户点击按钮时触发监听事件:

document.getElementById("myBtn").addEventListener("click", displayDate);

尝试一下 »

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。


语法

 element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

Note注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。


向原元素添加事件句柄

实例

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

尝试一下 »

你可以使用函数名,来引用外部函数:

实例

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

尝试一下 »


向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:

实例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

尝试一下 »

你可以向同个元素添加不同类型的事件:

实例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

尝试一下 »

提示:你可以在本站的 HTML DOM addEventListener() 方法部分获得更多有关addEventListener()方法的信息!



向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。

实例

当用户重置窗口大小时添加事件监听:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

尝试一下 »


传递参数

当传递参数值时,使用"匿名函数"调用带参数的函数:

实例

element.addEventListener("click", function(){ myFunction(p1, p2); });

尝试一下 »


事件冒泡或事件捕获?

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在冒泡中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕传递。

实例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

尝试一下 »

提示:DOM事件流同时支持两种事件模型:捕获型事件和冒泡型事件,捕获型事件首先发生。捕获型事件和冒泡型事件会触及DOM中的所有对象,从document对象开始,也在document对象结束。


removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

实例

element.removeEventListener("mousemove", myFunction);

尝试一下 »


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法     
addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器,除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

尝试一下 »


HTML DOM 事件对象参考手册

所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册


创建新的 HTML 元素

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性,分别是:

  1. nodeName : 节点的名称
  2. nodeValue :节点的值
  3. nodeType :节点的类型


创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

 实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

尝试一下 »


例子解析: 

这段代码创建新的<p> 元素:

var para=document.createElement("p");

如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("This is a new paragraph.");

然后您必须向 <p> 元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素:

element.appendChild(para);


删除已有的 HTML 元素

以下代码将已有的元素删除:

实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


尝试一下 »


实例解析 

这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

找到 id="div1" 的元素:

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素:

var child=document.getElementById("p1");

从父元素中删除子元素:

parent.removeChild(child);

lamp 如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);


HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加或删除 HTML 元素

如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识,请访问我们完整的 HTML DOM 教程


JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。


所有事物都是对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

JavaScript 对象

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


访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值将是:

12


访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法:

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值将是:

HELLO WORLD!


创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

  • 定义并创建对象的实例
  • 使用函数来定义对象,然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

尝试一下 »

替代语法(使用对象 literals):

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

尝试一下 »
提示:

你可以在本站的JavaScript编程实战中练习使用

JavaScript对象操作


使用对象构造器

本例使用函数来构造对象:

实例

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

尝试一下 »

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)


创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");


把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性:

假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

在以上代码执行后,x 的值将是:

John


把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

现在您可以试一下:

myMother.changeName("Doe");

尝试一下 »

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。


JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object)
{
  code to be executed
}

注意: for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性:

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

尝试一下 »
下面给出一个完整简易的dictionary实现。注意其外部使用了function,内部使用了Object对象的动态添加属性的一些特性。

请仔细研究并考察其用法:尝试一下 »

相关文章

轻松学习 JavaScript:JavaScript 对象概述

JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象,由 Number() 构造器创建。

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。


JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写:

实例

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

极大或极小的数字可通过科学(指数)计数法来写:

实例

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123


所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324

值 (aka Fraction/Mantissa)指数Sign
52 bits (0 - 51) 11 bits (52 - 62)1 bit (63)


精度

整数(不使用小数点或指数计数法)最多为 15 位。

小数的最大位数是 17,但是浮点运算并不总是 100% 准确:

实例

var x = 0.2+0.1; // result will be 0.30000000000000004

尝试一下 »


八进制和十六进制

如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

实例

var y = 0377;
var z = 0xFF;

尝试一下 »

lamp绝不要在数字前面写零,除非您需要进行八进制转换。 

默认情况下,JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

实例

var myNumber=128;
myNumber.toString(16);   // returns 80
myNumber.toString(8);    // returns 200
myNumber.toString(2);    // returns 10000000

尝试一下 »


无穷大(Infinity)

当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。

实例

myNumber=2;
while (myNumber!=Infinity)
{
myNumber=myNumber*myNumber; // Calculate until Infinity
}

尝试一下 »

除以0也产生了无限:

实例

var x = 2/0;
var y = -2/0;

尝试一下 »


NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

实例

var x = 1000 / "Apple";
isNaN(x); // returns true
var y = 100 / "1000";
isNaN(y); // returns false

尝试一下 »

除以0是无穷大,无穷大是一个数字:

实例

var x = 1000 / 0;
isNaN(x); // returns false

尝试一下 »

提示:在 JavaScript 中,如果参数无法被转换为数字,则返回 NaN。



数字可以是数字或者对象

数字可以私有数据进行初始化,就像 x = 123;

JavaScript 数字对象初始化数据, var y = new Number(123);

实例

var x = 123;
var y = new Number(123);
typeof(x) // returns Number
typeof(y) // returns Object

尝试一下 »

实例

var x = 123;             
var y = new Number(123);
(x === y) // is false because x is a number and y is an object.

尝试一下 »


数字属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY
  • NaN
  • prototype
  • constructor

数字方法

  • toExponential()
  • toFixed()
  • toPrecision()
  • toString()
  • valueOf()

相关文章

JavaScript 和 HTML DOM 参考手册:JavaScript Number 对象


 String 对象用于处理已有的字符块。


JavaScript 字符串

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号:

实例

var carname="Volvo XC60";
var carname='Volvo XC60';

你使用位置(索引)可以访问字符串中任何的字符:

实例

var character=carname[7];

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

你可以在字符串中使用引号,如下实例:

实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

或者你可以在字符串中使用转义字符()使用引号:

实例

var answer='It's alright';
var answer="He is called "Johnny"";

尝试一下 »


字符串(String)

字符串(String)使用长度属性length来计算字符串的长度:

实例

var txt="Hello World!";
document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);

尝试一下 »

JavaScript 获取字符串的长度:通过在字符串变量或字符串后面写上 .length 来获得变量中string (字符串)值的长度。


在字符串中查找字符串

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:

实例

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");

尝试一下 »

如果没找到对应的字符函数返回-1

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。



内容匹配

match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

实例

var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));

尝试一下 »


替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

实例

str="Please visit Microsoft!"
var n=str.replace("Microsoft","51coolma");

尝试一下 »


字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

实例

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 is txt converted to upper
var txt2=txt.toLowerCase();   // txt2 is txt converted to lower

尝试一下 »


字符串转为数组

字符串使用string>split()函数转为数组:

实例

txt="a,b,c,d,e"   // String
txt.split(",");   // Split on commas
txt.split(" ");   // Split on spaces
txt.split("|");   // Split on pipe 

尝试一下 »


特殊字符

Javascript 中可以使用反斜线()插入特殊符号,如:撇号,引号等其他特殊符号。

查看如下 JavaScript 代码:

var txt="We are the so-called "Vikings" from the north.";document.write(txt);

在JavaScript中,字符串的开始和停止使用单引号或双引号。这意味着,上面的字符串将被切成: We are the so-called

解决以上的问题可以使用反斜线来转义引号:

var txt="We are the so-called "Vikings" from the north.";document.write(txt);

JavaScript将输出正确的文本字符串:We are the so-called "Vikings" from the north.

下表列出其他特殊字符,可以使用反斜线转义特殊字符:

代码输出
'单引号
"双引号
斜杆
换行
回车
tab
空格
f换页


字符串属性和方法

属性:

  • length
  • prototype
  • constructor

方法:

  • charAt()
  • charCodeAt()
  • concat()
  • fromCharCode()
  • indexOf()
  • lastIndexOf()
  • match()
  • replace()
  • search()
  • slice()
  • split()
  • substr()
  • substring()
  • toLowerCase()
  • toUpperCase()
  • valueOf()

相关文章

JavaScript 和 HTML DOM 参考手册:JavaScript String 对象



JavaScript 字符串函数学习脑图


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


Examples

在线实例

返回当日的日期和时间
如何使用 Date() 方法获得当日的日期。

getFullYear()
使用 getFullYear() 获取年份。

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

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

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

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

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


完整的 Date 对象参考手册

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

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


创建日期

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

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

有四种方式初始化日期:

new Date() // 当前日期和时间        new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数        new Date(dateString)        new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。

从 1970 年 1 月 1 日通用一天计算为86,400,000毫秒

实例化一个日期的一些例子:

var today = new Date()        var d1 = new Date("October 13, 1975 11:13:00")        var d2 = new Date(79,5,24)        var d3 = new Date(79,5,24,11,33,0)

设置日期

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

在下面的例子中,我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日):

var myDate=new Date();        myDate.setFullYear(2010,0,14);

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

var myDate=new Date();        myDate.setDate(myDate.getDate()+5);

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


两个日期比较

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

下面的代码将当前日期与 2100 年 1 月 14 日做了比较:

var x=new Date();        x.setFullYear(2100,0,4);        var today = new Date();                if (x>today){          alert("Today is before 14th January 2100");        }        else{          alert("Today is after 14th January 2100");        }


相关阅读

轻松学习 JavaScript:JavaScript 日期对象


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

参数

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

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

返回值

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

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

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

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

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


Array 对象属性

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

Examples

在线实例

创建数组, 为其赋值:

实例

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

尝试一下 »

页面底部你可以找到更多的实例。

提示:在JavaScript数组中,第一个数组元素的索引值为 0,第二个索引值为 1,依次类推。


什么是数组?

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

如果你有一组数据(例如:车名字),存在单独变量如下所示:

var car1="Saab";var car2="Volvo";var car3="BMW";

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!

最好的方法就是用数组。

数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。


创建一个数组

创建一个数组,有三种方法。

下面的代码定义了一个名为 myCars的数组对象:

1: 常规方式:

var myCars=new Array();myCars[0]="Saab";      myCars[1]="Volvo";     myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

提示:你可以通过本站的JavaScript编程实战来练习如何创建JavaScript数组


访问数组

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

以下实例可以访问myCars数组的第一个值:

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";
lamp[0] 是数组的第一个元素。[1] 是数组的第二个元素。


在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此,你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;      myArray[1]=myFunction;myArray[2]=myCars;

数组方法和属性

使用数组对象预定义属性和方法:

var x=myCars.length             // the number of elements in myCars var y=myCars.indexOf("Volvo")   // the index position of "Volvo"

完整的数组对象参考手册

你可以参考本站关于数组的所有属性和方法的完整参考手册。

参考手册包含了所有属性和方法的描述(和更多的例子)。

完整数组对象参考手册


创建新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

实例:创建一个新的方法。

Array.prototype.ucase=function(){
   for (i=0;i<this.length;i++){
      this[i]=this[i].toUpperCase();
   }
}

尝试一下 »

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。


Examples

更多实例

合并两个数组 - concat()

合并三个数组 - concat()

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

删除数组的最后一个元素 - pop()

数组的末尾添加新的元素 - push()

将一个数组中的元素的顺序反转排序 - reverse()

删除数组的第一个元素 - shift()

从一个数组中选择元素 - slice()

数组排序(按字母顺序升序)- sort()

数字排序(按数字顺序升序)- sort()

数字排序(按数字顺序降序)- sort()

在数组的第2位置添加一个元素 - splice()

转换数组到字符串 -toString()

在数组的开头添加新元素 - unshift()


JavaScript 数组知识图



Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false),是三种包装对象:Number、String和Boolean中最简单的一种,它没有大量的实例属性和方法。


Examples

在线实例

检查布尔值
检查布尔对象是 true 还是 false。


完整的 Boolean(布尔) 对象参考手册

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

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


创建 Boolean 对象

Boolean 对象代表两个值:"true" 或者 "false"

下面的代码定义了一个名为 myBoolean 的布尔对象:

 var myBoolean=new Boolean();

如果布尔对象无初始值或者其值为:

  • 0
  • -0
  • null
  • ""
  • false
  • undefined
  • NaN

那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

相关练习

你可以在本站的JavaScript编程实战中练习使用JavaScript布尔boolean数据类型


Math(算数)对象的作用是:执行常见的算数任务。


Examples

在线实例

round()
如何使用 round()。

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

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

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


完整的 Math 对象参考手册

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

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


Math 对象

Math(算数)对象的作用是:执行普通的算数任务。

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

使用Math的属性/方法的语法:

var x=Math.PI;var y=Math.sqrt(16);

注意: Math对象无需在使用这个对象之前对它进行定义。

提示: Math 对象不能使用 new 关键字创建对象实例。直接用 “对象名.成员”的格式来访问其属性或者方法。


算数值

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

你可以参考如下Javascript常量使用方法:

Math.EMath.PIMath.SQRT2Math.SQRT1_2Math.LN2Math.LN10Math.LOG2EMath.LOG10E

算数方法

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

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

document.write(Math.round(4.7));

上面的代码输出为:

5

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

document.write(Math.random());

上面的代码输出为:

0.6581708136621066

你也可以在JavaScript编程实战中练习使用random()生成随机小数

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

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

上面的代码输出为:

8


RegExp:是正则表达式(regular expression)的简写。

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


完整 RegExp 对象参考手册

请查看我们的 JavaScript RegExp 对象的参考手册,其中提供了可以与字符串对象一同使用的所有的属性和方法。

这个手册包含的关于每个属性和方法的用法的详细描述和实例。


什么是 RegExp?

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

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

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

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

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

语法

var patt=new RegExp(pattern,modifiers);        

另一种更简单的方式:

var patt=/pattern/modifiers;
  • 模式描述了一个表达式模型。
  • 修饰符描述了检索是否是全局,区分大小写等。

RegExp 修饰符

修饰符用于执行不区分大小写和全文的搜索。

i - 修饰符是用来执行不区分大小写的匹配。

g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。

实例 1

在字符串中不区分大小写找"W3CSchool"

var str="Visit W3CSchool";
var patt1=/51coolma/i;

以下标记的文本是获得的匹配的表达式:

W3CSchool

尝试一下 »

实例 2

全文查找 "is"

var str="Is this all there is?";
var patt1=/is/g;

以下标记的文本是获得的匹配的表达式:

Is this all there is?

尝试一下 »

实例 3

全文查找和不区分大小写搜索 "is"

var str="Is this all there is?";
var patt1=/is/gi;

以下 标记的文本是获得的匹配的表达式:

Is this all there is?

尝试一下 »


test()

The test()方法搜索字符串指定的值,根据结果并返回真或假。

下面的示例是从字符串中搜索字符 "e" :

实例

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

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

true

尝试一下 »


exec()

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

下面的示例是从字符串中搜索字符 "e" :

实例 1

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

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

e

尝试一下 »

RegExp 实战练习

JavaScript使用正则表达式操作字符串

Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。

JavaScript 使用正则表达式选取数值

我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。

JavaScript 使用正则表达式反转匹配

你可以用正则表达式选择器的大写版本来反转任何匹配(相反意思)。


Window 对象表示浏览器中打开的窗口。


Window 对象描述

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。


完整 Window 对象参考手册

请查看我们的 JavaScript Window 对象的参考手册,其中提供了可以与 Window 对象一同使用的所有的属性和方法。

这个手册包含的关于每个属性和方法的用法的详细描述和实例。


Window 子对象

Window的子对象主要有如下几个:

  1. JavaScript document 对象
  2. JavaScript frames 对象
  3. JavaScript history 对象
  4. JavaScript location 对象
  5. JavaScript navigator 对象
  6. JavaScript screen 对象

JavaScript Window对象学习脑图

 


execCommand函数命令

execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令。处理Html数据时常用
如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可用值或属性值(如下例中的”true”)。

document.execCommand("2D-Position","false","true");下面列出的是指令参数及意义2D-Position 允许通过拖曳移动绝对定位的对象。AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。BackColor 设置或获取当前选中区的背景颜色。BlockDirLTR 目前尚未支持。BlockDirRTL 目前尚未支持。Bold 切换当前选中区的粗体显示与否。BrowseMode 目前尚未支持。Copy 将当前选中区复制到剪贴板。CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。Cut 将当前选中区复制到剪贴板并删除之。Delete 删除当前选中区。DirLTR 目前尚未支持。DirRTL 目前尚未支持。EditMode 目前尚未支持。FontName 设置或获取当前选中区的字体。FontSize 设置或获取当前选中区的字体大小。ForeColor 设置或获取当前选中区的前景(文本)颜色。FormatBlock 设置当前块格式化标签。Indent 增加选中文本的缩进。InlineDirLTR 目前尚未支持。InlineDirRTL 目前尚未支持。InsertButton 用按钮控件覆盖当前选中区。InsertFieldset 用方框覆盖当前选中区。InsertHorizontalRule 用水平线覆盖当前选中区。InsertIFrame 用内嵌框架覆盖当前选中区。InsertImage 用图像覆盖当前选中区。InsertInputButton 用按钮控件覆盖当前选中区。InsertInputCheckbox 用复选框控件覆盖当前选中区。InsertInputFileUpload 用文件上载控件覆盖当前选中区。InsertInputHidden 插入隐藏控件覆盖当前选中区。InsertInputImage 用图像控件覆盖当前选中区。InsertInputPassword 用密码控件覆盖当前选中区。InsertInputRadio 用单选钮控件覆盖当前选中区。InsertInputReset 用重置控件覆盖当前选中区。InsertInputSubmit 用提交控件覆盖当前选中区。InsertInputText 用文本控件覆盖当前选中区。InsertMarquee 用空字幕覆盖当前选中区。InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。InsertParagraph 用换行覆盖当前选中区。InsertSelectDropdown 用下拉框控件覆盖当前选中区。InsertSelectListbox 用列表框控件覆盖当前选中区。InsertTextArea 用多行文本输入控件覆盖当前选中区。InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。Italic 切换当前选中区斜体显示与否。JustifyCenter 将当前选中区在所在格式化块置中。JustifyFull 目前尚未支持。JustifyLeft 将当前选中区所在格式化块左对齐。JustifyNone 目前尚未支持。JustifyRight 将当前选中区所在格式化块右对齐。LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。Open 目前尚未支持。Outdent 减少选中区所在格式化块的缩进。OverWrite 切换文本状态的插入和覆盖。Paste 用剪贴板内容覆盖当前选中区。PlayImage 目前尚未支持。Print 打开打印对话框以便用户可以打印当前页。Redo 目前尚未支持。Refresh 刷新当前文档。RemoveFormat 从当前选中区中删除格式化标签。RemoveParaFormat 目前尚未支持。SaveAs 将当前 Web 页面保存为文件。SelectAll 选中整个文档。SizeToControl 目前尚未支持。SizeToControlHeight 目前尚未支持。SizeToControlWidth 目前尚未支持。Stop 目前尚未支持。StopImage 目前尚未支持。StrikeThrough 目前尚未支持。Subscript 目前尚未支持。Superscript 目前尚未支持。UnBookmark 从当前选中区中删除全部书签。Underline 切换当前选中区的下划线显示与否。Undo 目前尚未支持。Unlink 从当前选中区中删除全部超级链接。Unselect 清除当前选中区的选中状态。

document.ExecCommand() – html实例

<HTML>     <HEAD>         <TITLE>JavaScript--execCommand指令集</TITLE><SCRIPT LANGUAGE="javascript">//该function执行copy指令function fn_doufucopy(){    edit.select();    document.execCommand('Copy');}//该function执行paste指令function fn_doufupaste() {     tt.focus();    document.execCommand('paste');} //该function用来创建一个超链接function fn_creatlink(){    document.execCommand('CreateLink',true,'true');//弹出一个对话框输入URL    //document.execCommand('CreateLink',false,'http://www.51coolma.cn');}//该function用来将选中的区块设为指定的背景色function fn_change_backcolor(){    document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以}//该function用来将选中的区块设为指定的前景色,改变选中区块的字体大小,改变字体,字体变粗变斜function fn_change_forecolor(){    //指定前景色    document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以    //指定背景色    document.execCommand('FontSize',false,7);   //true或false都可以    //字体必须是系统支持的字体    document.execCommand('FontName',false,'标楷体');   //true或false都可以    //字体变粗    document.execCommand('Bold');    //变斜体    document.execCommand('Italic');}//该function用来将选中的区块加上不同的线条function fn_change_selection(){    //将选中的文字加下划线    document.execCommand('Underline');    //在选中的文字上划粗线    document.execCommand('StrikeThrough');    //将选中的部分文字变细    document.execCommand('SuperScript');    //将选中区块的下划线取消掉    document.execCommand('Underline'); }//该function用来将选中的区块排成不同的格式function fn_format(){    //有序列表    document.execCommand('InsertOrderedList');    //实心无序列表    document.execCommand('InsertUnorderedList');    //空心无序列表    document.execCommand('Indent');}//该function用来将选中的区块剪下或是删除掉function fn_CutOrDel(){    //删除选中的区块    //document.execCommand('Delete');    //剪下选中的区块    document.execCommand('Cut');}//该function用来将选中的区块重设为一个相应的物件function fn_InsObj(){/*  ******************************************  * 以下指令都是为选中的区块重设一个object;  * 如没有特殊说明,第二个参数true或false是一样的;  * 参数三表示为该object的id;  * 可以用在javascript中通过其指定的id来控制它  *******************************************//*重设为一个button(InsertButton和InsertInputButtong一样,只不前者是button,后者是input)*/    /*document.execCommand('InsertButton',false,"aa"); //true或false无效    document.all.aa.value="风舞九天";*/    //重设为一个fieldset    /*document.execCommand('InsertFieldSet',true,"aa");    document.all.aa.innerText="刀剑如梦";*/    //插入一个水平线    //document.execCommand('InsertHorizontalRule',true,"aa");    //插入一个iframe    //document.execCommand('InsertIFrame',true,"aa");    //插入一个InsertImage,设为true时需要图片,false时不需图片    //document.execCommand('InsertImage',false,"aa");    //插入一个checkbox    //document.execCommand('InsertInputCheckbox',true,"aa");    //插入一个file类型的object    //document.execCommand('InsertInputFileUpload',false,"aa");    //插入一个hidden    /*document.execCommand('InsertInputHidden',false,"aa");    alert(document.all.aa.id);*/    //插入一个InputImage    /*document.execCommand('InsertInputImage',false,"aa");    document.all.aa.src="F-a10.gif";*/    //插入一个Password    //document.execCommand('InsertInputPassword',true,"aa");    //插入一个Radio    //document.execCommand('InsertInputRadio',false,"aa");    //插入一个Reset    //document.execCommand('InsertInputReset',true,"aa");    //插入一个Submit    //document.execCommand('InsertInputSubmit',false,"aa");    //插入一个input text    //document.execCommand('InsertInputText',false,"aa");    //插入一个textarea    //document.execCommand('InsertTextArea',true,"aa");    //插入一个 select list box    //document.execCommand('InsertSelectListbox',false,"aa");    //插入一个single select    document.execCommand('InsertSelectDropdown',true,"aa");    //插入一个line break(硬回车??)    //document.execCommand('InsertParagraph');    //插入一个marquee    /*document.execCommand('InsertMarquee',true,"aa");    document.all.aa.innerText="bbbbb";*/    //用于取消选中的阴影部分    //document.execCommand('Unselect');    //选中页面上的所有元素    //document.execCommand('SelectAll');}//该function用来将页面保存为一个文件function fn_save(){    //第二个参数为欲保存的文件名    document.execCommand('SaveAs','mycodes.txt');    //打印整个页面    //document.execCommand('print');}</SCRIPT>     </HEAD>     <body>         <input id="edit" value="范例" NAME="edit"><br>         <button onclick="fn_doufucopy()" ID="Button1">Copy</button> <button onclick="fn_doufupaste()" ID="Button2">paste</button><br>         <textarea id="tt" rows="10" cols="50" NAME="tt"></textarea>         <hr>         <br>         浮沉聚散变化又再,但是总可卷土重来.<br>         天若有情天亦老,人间正道是沧桑.<br>         都怪我,太执着,却也等不到花开叶落.<br>         <br>         Please select above letters, then click following buttons:<br>         <hr>         <input type="button" value="创建CreateLink" onclick="fn_creatlink()" ID="Button3" NAME="Button3"><br>         <input type="button" value="改变文字背景色" onclick="fn_change_backcolor()" ID="Button4" NAME="Button4"><br>         <input type="button" value="改变文字前景色" onclick="fn_change_forecolor()" ID="Button5" NAME="Button5"><br>         <input type="button" value="给文字加线条" onclick="fn_change_selection()" ID="Button6" NAME="Button6"><br>         <input type="button" value="改变文字的排列" onclick="fn_format()" ID="Button7" NAME="Button7"><br>         <input type="button" value="删除或剪下选中的部分" onclick="fn_CutOrDel()" ID="Button8" NAME="Button8"><br>         <input type="button" value="插入Object" onclick="fn_InsObj()" ID="Button9" NAME="Button9"><br>         <input type="button" value="保存或打印文件" onclick="fn_save()" ID="Button10" NAME="Button10"><br>         <input type="button" value="测试Refresh属性" onclick="document.execCommand('Refresh')" ID="Button11" NAME="Button11">     </body></HTML>


JavaScript Window - 浏览器对象模型


浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

Window 对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。


浏览器对象模型 (BOM)

浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。


Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

 window.document.getElementById("header"); 

与此相同:

document.getElementById("header");  

Window 子对象

Window的子对象主要有如下几个:

  1. JavaScript document 对象
  2. JavaScript frames 对象
  3. JavaScript history 对象
  4. JavaScript location 对象
  5. JavaScript navigator 对象
  6. JavaScript screen 对象

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的窗口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

尝试一下 »

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)


其他 Window 方法

一些其他方法:


window.screen 对象包含有关用户屏幕的信息。

这些信息可以用来了解客户端硬件的基本配置。


Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性:

  • screen.availWidth - 可用的屏幕宽度

  • screen.availHeight - 可用的屏幕高度


Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。

实例

返回您的屏幕的可用宽度:

<script>
    document.write("可用宽度: " + screen.availWidth);
</script>

以上代码输出为:

可用宽度: 1920

尝试一下 »



Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

实例

返回您的屏幕的可用高度:

<script>
    document.write("可用高度: " + screen.availHeight);
</script>

以上代码将输出:

可用高度: 1040

尝试一下 »



相关文章

请查看我们的 JavaScript Screen 对象的参考手册,其中提供了可以与 Screen 对象一同使用的所有的属性。 


window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

这种方法既可以用于具有onclick事件的标签,也可以用于满足某些条件进行跳转,特点是方便且灵活。


Window Location

window.location 对象在编写时可不使用 window 这个前缀。 一些例子:

一些实例:


Window Location Href

location.href 属性返回当前页面的 URL。

实例

返回(当前页面的)整个 URL:

<script>
    document.write(location.href);
</script>

以上代码输出为:

//www.51coolma.cn/javascript/js-window-location.html


Window Location Pathname

location.pathname 属性返回 URL 的路径名。

实例

返回当前 URL 的路径名:

<script>
    document.write(location.pathname);
</script>

以上代码输出为:

/javascript/js-window-location.html


Window Location Assign

location.assign() 方法加载新的文档。

实例

加载一个新的文档:

<html>
  <head>
    <script>
      function newDoc(){
          window.location.assign("https://www.51coolma.cn")
      }
    </script>
  </head>
  <body>
    <input type="button" value="Load new document" onclick="newDoc()">
  </body>
</html>

尝试一下 »

相关阅读

JavaScript百科大全:JavaScript重定向跳转


window.history 对象包含浏览器的历史。


Window History

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

一些方法:


Window History Back

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的:

实例

在页面上创建后退按钮:

<html>
  <head>
    <script>
    function goBack(){
      window.history.back()
    }
    </script>
  </head>
  <body>
    <input type="button" value="Back" onclick="goBack()">
  </body>
</html>

以上代码输出为:



Window History Forward

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的:

实例

在页面上创建一个向前的按钮:

<html>
  <head>
    <script>
    function goForward(){
        window.history.forward()
  }
</script>
</head>
<body>
  <input type="button" value="Forward" onclick="goForward()">
</body>
</html>

以上代码输出为:



相关文章

JavaScript标准参考教程:JavaScript History 对象


window.navigator 对象包含有关访问者浏览器的信息。


Window Navigator

window.navigator 对象在编写时可不使用 window 这个前缀。

实例

<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

尝试一下 »


警告!!!

来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。

例子:if (window.opera) {...some action...}


相关阅读

请查看我们的 JavaScript Navigator 对象的参考手册,其中提供了Navigator对象的所有的属性和方法。

这个手册包含的关于每个属性和方法的用法的详细描述和实例。


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


警告框

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

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

语法

window.alert("sometext");

window.alert() 方法可以不带上window对象,直接使用alert()方法。

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
  alert("你好,我是一个警告框!");
}
</script>
</head>
<body>
  <input type="button" onclick="myFunction()" value="显示警告框">
</body>
</html>

尝试一下 »


确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带上window对象,直接使用confirm()方法。

实例

var r=confirm("按下按钮");
if (r==true){
    x="你按下了"确定"按钮!";
}
else{
    x="你按下了"取消"按钮!";
}

尝试一下 »


提示框

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

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

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

语法

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不带上window对象,直接使用prompt()方法。

实例

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
  x="你好 " + person + "!今天感觉如何?";
}

尝试一下 »

提示:在本站中你可以获得有关 Window prompt() 方法的更多知识!


换行

弹窗使用 反斜杠 + "n"( ) 来设置换行。

实例

alert("Hello How are you?");

尝试一下 »

相关文章

JavaScript 对话框


1
2
3
4
5
6
7
8
9
10
11
12

JavaScript 一个设定的时间间隔之后来执行代码

我们称之为计时事件


JavaScript 计时事件

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

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

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。


setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()

setInterval() 第一个参数是函数(function)。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

实例

每三秒弹出 "hello" :

setInterval(function(){alert("Hello")},3000);

尝试一下 »

实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是和手表一样。

实例

显示当前时间

var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

尝试一下 »


如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:

myVar=setInterval("javascript function",milliseconds);

然后你可以使用clearInterval() 方法来停止执行。

实例

以下例子,我们添加了 "Stop time" 按钮:

<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

尝试一下 »


setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

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

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

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

提示:1000 毫秒等于一秒。

实例

等待3秒,然后弹出 "Hello":

setTimeout(function(){alert("Hello")},3000);

尝试一下 »


如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。

实例

以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

var myVar;
function myFunction(){
    myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
    clearTimeout(myVar);
}

尝试一下 »


Examples

更多实例

另一个简单的计时


JavaScript Cookies


Cookies 用于存储 web 页面的用户信息。

由于 JavaScript 是运行在客户端的脚本,所以可以使用JavaScript来设置运行在客户端的Cookies。


什么是 Cookies?

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

  • 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储,如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。


使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

JavaScript 中,创建 cookie 如下所示:

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookies:

var x = document.cookie;
Notedocument.cookie 将以字符串的方式返回所有的 cookies,类型格式: cookie1=value; cookie2=value; cookie3=value;


使用 JavaScript 修改 Cookie

在 JavaScript 中,修改 cookies 类似于创建 cookies,如下所示:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。


使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当您删除时不必指定 cookie 的值。


Cookie 字符串

document.cookie 属性看起来像一个普通的文本字符串,其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:

cookie1=value; cookie2=value;

     

如果您需要查找一个指定 cookie 值,您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。


JavaScript Cookie 实例

在以下实例中,我们将创建 cookie 来存储访问者名称。

首先,访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时,他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检测 cookie 值的函数

设置 cookie 值的函数

首先,我们创建一个函数用于存储访问者的名字:

function setCookie(cname,cvalue,exdays){            var d = new Date();            d.setTime(d.getTime()+(exdays*24*60*60*1000));            var expires = "expires="+d.toGMTString();            document.cookie = cname + "=" + cvalue + "; " + expires;        }

函数解析:

以上的函数参数中,cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。


获取 cookie 值的函数

然后,我们创建一个函数用户返回指定 cookie 的值:

function getCookie(cname){            var name = cname + "=";            var ca = document.cookie.split(';');            for(var i=0; i<ca.length; i++){                var c = ca[i].trim();                if(c.indexOf(name)==0) return c.substring(name.length,c.length);            }            return "";        }

函数解析:

cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + "="。

使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。

循环 ca 数组 (i=0;i<ca.length;i++),然后读取数组中的每个值,并去除前后空格 (c=ca[i].trim())。

如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 ""。


检测 cookie 值的函数

最后,我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie,将显示一个问候信息。

如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

function checkCookie(){    var username=getCookie("username");            if (username!=""){                alert("Welcome again " + username);            }            else{                username = prompt("Please enter your name:","");                if (username!="" && username!=null){            setCookie("username",username,365);                }            }        }

完整实例

实例

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++){
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}

function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("Welcome again " + user);
    }
    else{
        user = prompt("Please enter your name:","");
        if (user!="" && user!=null){
            setCookie("username",user,365);
        }
    }
}

尝试一下 »

以下实例在页面载入时执行 checkCookie() 函数。


相关文章

JavaScript笔记:JavaScript操作Cookies


JavaScript 库 - jQuery、Prototype、MooTools。


JavaScript 框架(库)

JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。

为了应对这些调整,许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架

在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:

  • jQuery
  • Prototype
  • MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。

在本教程中,您将学习到如何开始使用它们,来使得 JavaScript 编程更容易、更安全且更有乐趣。


jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。

jQuery 同时提供 companion UI(用户界面)和插件。

许多大公司在网站上使用 jQuery:

  • Google
  • Microsoft
  • IBM
  • Netflix

如需更深入地学习 jQuery,请访问我们的 jQuery 教程


Prototype

Prototype 是一种库,提供用于执行常见 web 任务的简单 API。

API 是应用程序编程接口(Application Programming Interface)的缩写。它是包含属性和方法的库,用于操作 HTML DOM。

Prototype 通过提供类和继承,实现了对 JavaScript 的增强。

提示:Prototype 框架最大的部分就是对DOM的扩展。通过Prototype框架里的$()函数能够返回一个网页DOM元素,框架给这个元素添加了很多方便的方法。


MooTools

MooTools 也是一个框架,提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。

提示:虽然Mootools跟Prototype几乎拥有一样的语法,但是它提供了比Prototype多的功能,而且更强大,拥有实用而清晰的文档和示例帮助你轻松入门。


其他框架

下面是其他一些在上面未涉及的框架:

YUI - Yahoo! User Interface Framework,涵盖大量函数的大型库,从简单的 JavaScript 功能到完整的 internet widget。

Ext JS - 可定制的 widget,用于构建富因特网应用程序(rich Internet applications)。

Dojo - 用于 DOM 操作、事件、widget 等的工具包。

script.aculo.us - 开源的 JavaScript 框架,针对可视效果和界面行为。

UIZE - Widget、AJAX、DOM、模板等等。


CDN -内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小,同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN,包括:

  • jQuery
  • Prototype
  • MooTools
  • Dojo
  • Yahoo! YUI

但是由于 Google 在中国经常被GFW(防火长城,英文名称Great Firewall of China,简写为Great Firewall,缩写GFW)屏蔽,造成访问不稳定,所以建议使用百度静态资源公共库:http://cdn.code.baidu.com/

如需在您的网页中使用 JavaScript 框架库,只需在 <script> 标签中引用该库即可:

引用 jQuery

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" >
</script>

使用框架

在您决定为网页使用 JavaScript 框架之前,首先对框架进行测试是明智的。

JavaScript 框架很容易进行测试。您无需在计算机上安装它们,同时也没有安装程序。

通常您只需从网页中引用一个库文件。

在本教程的下一章,我们会为您完整地讲解 jQuery 的测试过程。


相关教程

HTML DOM教程


测试 JavaScript 框架库 - jQuery


引用 jQuery

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 jQuery

<!DOCTYPE html>
<html>
    <head>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
    </head>
    <body>
    </body>
</html>


jQuery 描述

主要的 jQuery 函数是 $() 函数(jQuery 函数)。如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction(){
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价的 jQuery 是不同的:

jQuery 方式:

function myFunction(){
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最后一行,HTML DOM 文档对象被传递到 jQuery :$(document)。

当您向 jQuery 传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。

由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

lamp jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
jQuery 对象拥有的属性和方法,与 DOM 对象的不同。
您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。


测试 jQuery

请试一下下面这个例子:

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

尝试一下 »

请再试一下这个例子:

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

尝试一下 »

正如您在上面的例子中看到的,jQuery 允许链接(链式语法)。

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。

需要学习更多内容吗?W3Cschool 为您提供了非常棒的 jQuery 教程


测试 JavaScript 框架库 - Prototype


引用 Prototype

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 Prototype

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
</body>
</html>

Prototype 描述

Prototype 提供的函数可使 HTML DOM 编程更容易。

与 jQuery 类似,Prototype 也有自己的 $() 函数。

$() 函数接受 HTML DOM 元素的 id 值(或 DOM 元素),并会向 DOM 对象添加新的功能。

与 jQuery 不同,Prototype 没有用以取代 window.onload() 的 ready() 方法。相反,Prototype 会向浏览器及 HTML DOM 添加扩展。

在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction(){
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;

等价的 Prototype 是不同的:

Prototype 方式:

function myFunction(){
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数:

  • 您希望处理的 HTML DOM 或 BOM(浏览器对象模型)对象
  • 您希望处理的事件
  • 您希望调用的函数

测试 Prototype

请试一下下面这个例子:

Example

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

尝试一下 »

请再试一下这个例子:

Example

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

测试一下 »

正如您在上面的例子中看到的,与 jQuery 相同,Prototype 允许链式语法。

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。


相关文章

JavaScript prototype 对象


使用内置的JavaScript对象实例。

String(字符串)对象

Date(日期)对象

Array(数组)对象

Boolean(布尔)对象

Math(算数)对象

一般


使用JavaScript来访问和控制浏览器对象实例。

Window 对象

Navigator 对象

Screen 对象

History 对象

Location 对象


使用内置JavaScript的对象实例。

Document 对象

Anchor 对象

Area 对象

Base 对象

Button 对象

Form 对象

Frame/IFrame 对象

Image 对象

Event 对象

Option and Select 对象

Table, TableHeader, TableRow, TableData 对象


本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强。

你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本。

你也学到了如何创建和使用对象,以及如何使用 JavaScript 的内置对象。

如需更多关于 JavaScript 的信息和知识,请参阅我们的 JavaScript 实例JavaScript 参考手册

提示:向网页中添加 JavaScript的三种方式为:1)使用<script></script>标签内部样式;2)使用外部js文件;3)直接在HTML标签中的行内样式。


现在已经你已经学习了 JavaScript,接下来该学习什么呢?

下一步应该学习 HTML DOM 和 DHTML。

如果你希望学习关于服务器端脚本的知识,那么下一步应该学习 ASP,PHP, .Net。

HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。 HTML DOM 独立于平台和语言,可被任何编程语言使用,比如 Java、JavaScript 和 VBscript。 假如希望了解更多关于 DOM 的知识,请访问我们的

HTML DOM 教程

jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

假如希望了解更多关于 jQuery 的知识,请访问我们的 jQuery 教程

AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。

通过与服务器进行数据交换,AJAX 可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

假如您希望学习更多关于 AJAX 的知识,请访问我们的 AJAX 教程

Vue/React/Angular

Vue/React/Angular是目前前端最火的三大框架,在国内Angular的应用比较少,React和Vue是当前国内比较火的前端框架。

通过前端框架的学习,我们能比较省时省力的快速构建出一个优秀的高性能的前端页面,组件的可复用性也可以提高工作效率。

如果您想要学习Vue的相关知识,可以访问我们的Vue3教程Vue2教程

如果您想要学习React的相关知识,可以访问我们的React教程

如果您想要学习Angular的相关知识,可以访问我们的Angular教程

ASP / PHP / .NET

和 HTML 文档中的脚本运行于客户端(浏览器)不同,ASP/PHP 文件中的脚本在服务器上运行。

使用 ASP,你可以动态地编辑、改变或者添加网站内容,对由 HTML 表单提交而来的数据进行响应,访问数据或者数据库并向浏览器返回结果,或者定制对不同的用户来说更有帮助的网页。

由于 ASP/PHP 文件返回的是纯粹的 HTML,因此可显示在任何浏览器中。

如果希望学习更多关于 ASP 的知识,请访问我们的 ASP 教程

如果希望学习更多关于 PHP 的知识,请访问我们的 PHP 教程

如果希望学习更多关于 .NET 的知识,请访问我们的.NET 实例/教程


您可以通过 W3Cschool 的测验程序来测试您的 JavaScript 技能。

关于本测验

本测验包含 20 道题,每道题的最长答题时间是 20 分钟(这是由于每个 session 的默认有效时间是 20 钟)。

本测验是非官方的测试,它仅仅提供了一个了解您对 JavaScript 的掌握程度的工具。

测验会被记分

每道题的分值是 1 分。在您完成全部的 20 道题之后,系统会为您的测验打分,并提供您做错的题目的正确答案。其中,绿色为正确答案,而红色为错误答案。

现在就开始测验!祝您好运。


为了帮助广大学习者,做到学以致用,我们为大家准备了大量的JavaScript编程实战题,通过这些实战题,您可以一边学习一边操作,来达到巩固学习的作用。

请选择你喜欢的实战提,开始进行编程闯关。

JavaScript课程列表

数组对于程序语言的重要性自不必多说,而在使用javascript的时候难免也会需要用到数组操作,主要用于封装多个任意类型的数据,并对它们进行管理,在js中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法。js中的数组和其他语言的数组也有着比较大的区别,下面我们来一起重点讨论下js中的数组操作的一些常见方法和技巧。

数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改。

创建数组

在JavaScript多种方式创建数组

构造函数

1.无参构造函数,创建一空数组

var a1=new Array();

2.一个数字参数构造函数,指定数组长度(由于数组长度可以动态调整,作用并不大),创建指定长度的数组

var a2=new Array(5);

3.带有初始化数据的构造函数,创建数组并初始化参数数据

var a3=new Array(4,'hello',new Date());

字面量

1.使用方括号,创建空数组,等同于调用无参构造函数

var a4=[];

2.使用中括号,并传入初始化数据,等同于调用调用带有初始化数据的构造函数

var a5=[10];

注意点

1.在使用构造函数创建数组时如果传入一个数字参数,则会创建一个长度为参数的数组,如果传入多个,则创建一个数组,参数作为初始化数据加到数组中

var a1=new Array(5);console.log(a1.length);//5console.log(a1); //[] ,数组是空的var a2=new Array(5,6);console.log(a2.length);//2console.log(a2); //[5,6]

但是使用字面量方式,无论传入几个参数,都会把参数当作初始化内容

var a1=[5];console.log(a1.length);//1console.log(a1); //[5]var a2=[5,6];console.log(a2.length);//2console.log(a2); //[5,6]

2.使用带初始化参数的方式创建数组的时候,最好最后不要带多余的”,”,在不同的浏览器下对此处理方式不一样

var a1=[1,2,3,];console.log(a1.length);console.log(a1);

这段脚本在现代浏览器上运行结果和我们设想一样,长度是3,但是在低版本IE下却是长度为4的数组,最后一条数据是undefined

数组的索引与长度

数组的值可以通过自然数索引访问进行读写操作,下标也可以是一个得出非负整数的变量或表达式

var a1=[1,2,3,4];console.log(a1[0]); //1var i=1;console.log(a1[i]); //2console.log(a1[++i]); //3

数组也是对象,我们可以使用索引的奥秘在于,数组会把索引值转换为对应字符串(1=>”1”)作为对象属性名

console.log(1 in a1);//true,确实是一个属性

索引特殊性在于数组会自动更新length属性,当然因为JavaScript语法规定数字不能作为变量名,所以我们不能显示使用array.1这样的格式。由此可见其实负数,甚至非数字”索引“都是允许的,只不过这些会变成数组的属性,而不是索引

var a=new Array(1,2,3);a[-10]="a[-10]";a["sss"]="sss";
js数组代码

这样我们可以看出所有的索引都是属性名,但只有自然数(有最大值)才是索引,一般我们在使用数组的时候不会出现数组越界错误也正是因为此,数组的索引可以不是连续的,访问index不存在的元素的时候返回undefined

var a=new Array(1,2,3);a[100]=100;console.log(a.length); //101console.log(a[3]); //undefinedconsole.log(a[99]); //undefinedconsole.log(a[100]); 100

js数组代码片段

上面的例子中,虽然直接对a[100]赋值不会影响a[4]或a[99],但数组的长度却受到影响,数组length属性等于数组中最大的index+1,我们知道数组的length属性同样是个可写的属性,当强制把数组的length属性值设置为小于等于最大index值时,数组会自动删除indexd大于等于length的数据,在刚才代码中追加几句

a.length=2;console.log(a);//[1,2]
这时候会发现a[2]和a[100]被自动删除了,同理,如果把length设置为大于最大index+1的值的时候,数组也会自动扩张,但是不会为数组添加新元素,只是在尾部追加空空间
a.length=5;console.log(a); //[1,2] //后面没有3个undefined

元素添加/删除

基本方法

上面例子已经用到向数组内添加元素方法,直接使用索引就可以(index没必要连续)

var a=new Array(1,2,3);a[3]=4;console.log(a);//[1, 2, 3, 4]

前面提到数组也是对象,索引只是特殊的属性,所以我们可以使用删除对象属性的方法,使用delete 删除数组元素

delete a[2];console.log(a[2]); //undefined

这样和直接把a[2]赋值为undefined类似,不会改变数组长度,也不会改变其他数据的index和value对应关系



元素添加/删除

栈方法

上面例子总有同学就发现了,尤其是其删除方法,并不是我们希望的表现形式,我们很多时候希望删除中间一个元素后,后面元素的index都自动减一,数组length同时减一,就好像在一个堆栈中拿去的一个,数组已经帮我们做好了这种操作方式,pop和push能够让我们使用堆栈那样先入后出使用数组

var a=new Array(1,2,3);a.push(4);console.log(a);//[1, 2, 3, 4] console.log(a.length);//4console.log(a.pop(a));//4console.log(a); //[1, 2, 3] console.log(a.length);//3

队列方法

既然栈方法都实现了,先入先出的队列怎么能少,shift方法可以删除数组index最小元素,并使后面元素index都减一,length也减一,这样使用shift/push就可以模拟队列了,当然与shift方法对应的有一个unshift方法,用于向数组头部添加一个元素

var a=new Array(1,2,3);a.unshift(4);console.log(a);//[4, 1, 2, 3] console.log(a.length);//4console.log(a.shift(a));//4console.log(a); //[1, 2, 3] console.log(a.length);//3

终极神器

JavaScript提供了一个splice方法用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数
1.开始索引
2.删除元素的位移
3.插入的新元素,当然也可以写多个
splice方法返回一个由删除元素组成的新数组,没有删除则返回空数组

var a=new Array(1,2,3,4,5);

删除

指定前两个参数,可以使用splice删除数组元素,同样会带来索引调整及length调整

var a=new Array(1,2,3,4,5);console.log(a.splice(1,3));//[2, 3, 4] console.log(a.length);//2console.log(a);//[1,5]
如果数组索引不是从0开始的,那么结果会很有意思,有一这样数组
var a=new Array();a[2]=2;a[3]=3;a[7]=4;a[8]=5;
数组
console.log(a.splice(3,4)); //[3] console.log(a.length); //5console.log(a); //[2: 2, 3: 4, 4: 5]
插入与替换

上面例子可以看到,splice的第一个参数是绝对索引值,而不是相对于数组索引,第二个参数并不是删除元素的个数,而是删除动作执行多少次,并不是按数组实际索引移动,而是连续移动。同时调整后面元素索引,前面索引不理会

插入与替换

只要方法第二个参数,也就是删除动作执行的次数设为0,第三个参数及以后填写要插入内容就splice就能执行插入操作,而如果第二个参数不为0则变成了先在该位置删除再插入,也就是替换效果

var a=new Array(1,2,3,4,5);a.splice(1,0,9,99,999);console.log(a.length); //8console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5] a.splice(1,3,8,88,888);console.log(a.length);//8console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

常用方法

join(char)

这个方法在C#等语言中也有,作用是把数组元素(对象调用其toString()方法)使用参数作为连接符连接成一字符串

var a=new Array(1,2,3,4,5);console.log(a.join(',')); //1,2,3,4,5 console.log(a.join(' ')); //1 2 3 4 5

slice(start,end)

var a=new Array(1,2,3,4,5);console.log(a); //[1, 2, 3, 4, 5] console.log(a.slice(1,2));//2console.log(a.slice(1,-1));//[2, 3, 4] console.log(a.slice(3,2));//[]console.log(a); //[1, 2, 3, 4, 5]

不要和splice方法混淆,slice方法用于返回数组中一个片段或子数组,如果只写一个参数返回参数到数组结束部分,如果参数出现负数,则从数组尾部计数(-3意思是数组倒第三个,一般人不会这么干,但是在不知道数组长度,想舍弃后n个的时候有些用,不过数组长度很好知道。。。。,好纠结的用法),如果start大于end返回空数组,值得注意的一点是slice不会改变原数组,而是返回一个新的数组。

concat(array)

看起来像是剪切,但这个真不是形声字,concat方法用于拼接数组,a.concat(b)返回一个a和b共同组成的新数组,同样不会修改任何一个原始数组,也不会递归连接数组内部数组。

var a=new Array(1,2,3,4,5);var b=new Array(6,7,8,9);console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a); //[1, 2, 3, 4, 5] console.log(b); //[6, 7, 8, 9]

reverse()

方法用于将数组逆序,与之前不同的是它会修改原数组

var a=new Array(1,2,3,4,5);a.reverse();console.log(a); //[5, 4, 3, 2, 1]
同样,当数组索引不是连续或以0开始,结果需要注意
var a=new Array();a[2]=2;a[3]=3;a[7]=4;a[8]=5;
reverse()
a.reverse();
sort

sort

sort方法用于对数组进行排序,当没有参数的时候会按字母表升序排序,如果含有undefined会被排到最后面,对象元素则会调用其toString方法,如果想按照自己定义方式排序,可以传一个排序方法进去,很典型的策略模式,同样sort会改变原数组。
var a=new Array(5,4,3,2,1);a.sort();console.log(a);//[1, 2, 3, 4, 5]

不过······

var a=new Array(7,8,9,10,11);a.sort();console.log(a);//[10, 11, 7, 8, 9]
因为按照字母表排序,7就比10大了,这时候我们需要传入自定义排序函数
var a=new Array(7,8,9,10,11);a.sort(function(v1,v2){    return v1-v2;});console.log(a);//[7, 8, 9, 10, 11]

原理和C#中的sort类似,只不过可以直接传递方法进去,以下内容仅供参考:

sort内部使用快速排序,每次比较两个元素大小的时候如果没有参数,则直接判断字母表,如果有参数,则把正在比较的两个参数传入自定义方法并调用(正在比较的两个数会传给自定义方法的v1、v2),如果返回值大于0表示v1>v2,如果等于0,表示v1=v2,如果小于0,表示v1<v2,其实我们传入的方法就是告诉sort怎么比较两个元素谁大谁小,至于排序移动元素过程人家写好了。

js数组循环遍历数组内所有元素的方法

在js中数组遍历最简单的办法就是使用for然后再利用arr.length长度作为for最大限度值即可解决了,下面我们来看看一些有用的实例。

for(){}遍历数组

var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){    arr[i] = arr[i]/2.0;}alert(arr);

for in循环遍历数组

var xvar mycars = new Array()mycars[0] = "Saab"mycars[1] = "Volvo"mycars[2] = "BMW"for (x in mycars){    document.write(mycars[x] + "<br />")}

js数组与字符串的相互转换方法

1、数组转字符串

需要将数组元素用某个字符连接成字符串,示例代码如下:

var a, b;a = new Array(0,1,2,3,4);b = a.join("-");

2、字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下:

var s = "abc,abcd,aaa";ss = s.split(",");// 在每个逗号(,)处进行分解。

JavaScript 数组练习

如果你已经掌握了上面介绍的JavaScript数组的常用方法,那么你可以通过以下的练习来加深对JavaScript数组的使用!

Javascript 数组操作

通过JavaScript数组,我们可以将多个数据存储于同一个变量中。

Javascript 多维数组操作

这个练习让你可以在数组中包含其他数组

JavaScript 使用索引查找数组中的数据

你可以像操作字符串一样通过数组索引[index]来访问数组中的数据。

提示:如果你需要更多关于JavaScript数组的练习,请移步本站的JavaScript编程实战


使用过ajax的朋友经常会见到这样的代码:here,这里面的void是一个操作符,该操作符指定要计算一个表达式但是不返回值。javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。

提示:在学习一下内容之前,你可以先通过javascript:void(0) 含义一节的内容来了解或者复习什么是javascript:void(0) !

void 操作符用法格式如下:

1. javascript:void (expression)
2. javascript:void expression
expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0)
你可以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。
下面的代码创建了一个超级链接,当用户以后不会发生任何事。当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

<a herf="javascript:void(0)">点击此处什么也不会发生</a> 

下面的代码创建了一个超级链接,用户单时会提交表单。

<a href="javascript:void(document.form.submit())"> 

单此处提交表单</a>

下面代码则执行了subgo()函数,

<a href="javascript:void(0)"onclick="subgo()">点我</a>

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

<a href="#" onclick="subgo()">点我</a>与<ahref="javascript:void(0)" onclick="subgo()">点我</a>区别。
<a href="javascript:void(0)"onclick="javascript:history.back();">返回 </a>

href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢甚至崩溃。而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)

href="#"与javascript:void(0)的区别
href="#"方法其实也是空连接的意思,但是点击之后会自动跳转到页面的最上面,因为用了这个方法就相当于点击了一个锚记,但是这个锚记又没写ID,所以就默认跳转到页面顶部。从上面的例子也可以看出,当要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。
其实我们可以这样用,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。
说白了,href="#"这种形式会整体刷新页面,而href="javascript:void(0)" 则不会。所以如果是空连接的话,还是推荐javascript:void(0)。
href = "#"当页面有滚动条时,点击后会返回到页面顶端的解决办法
目前有如下几种解决办法:
1、点击链接后不做任何事情

<a href="javascript:void(0);" >test</a> 

<a href="javascript:;" >test</a> 

<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的 

2、点击链接后,响应用户自定义的点击事件

<a href="javascript:void(0)" onclick="doSomething()">test</a> 

<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href="" 

<a href="#" onclick="alert();event.returnValue=false;">test</a> 

使用javascript:void(0)会引起什么问题?
链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。 如果仅仅是想鼠标移过,变成手形,则可以使用。
我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说的效果同的效果是一样的。
既然容易引起问题,为何新浪微博,淘宝等大站的首页JS操作的href都是javascript:void(0);呢?

新浪微博
淘宝网首页

<a href=”void(0);” rel=”nofollow”>

Click here to do nothing

</a>

<a href=”void(document.body.style.backgroundColor=’green’);” rel=”nofollow”>

Click here for green background

</a>

有可能是 javascript:void(0); 既保证了返回值是undefined,又保证如果连接点击需要处理一些代码,随时将0替换掉就可以。
href上加js是为了防止连接跳转,以前用#但是在部分浏览器下回跳转到页面顶部。这样就不好了,于是有人想到了添加onclick=“return false”但是这样问题又来了,这样做会阻止绑定的时间,比如我们用jquery。于是就有了用href=”javascript:void(0);”的写法,这种做法开始确实是由一些写c的人,因为编写习惯而写的。后来有人讲void函数去掉了。就有了比较简洁的写法,其实在a在没有连接的时候完全可以去掉href属性或改用其他元素,只要加个指向时的鼠标样式就可以了。根据个人习惯而定。
解决IE下使用javascript:void(0)方法会跳转的方法
一般情况下,在IE下的A标签使用onclick的方法,在href属性下都加上javascript:void(0)或者javascript:;
原代码如下:

<a href="javascript:void(0)" title="关闭" onclick="delbook();">关闭</a>

或者:

<a href="javascript:;" title="关闭" onclick="delbook();">关闭</a>

以上两种方法都可能会出现跳转。

但是你会发现:在执行完clidk事件后会执行javascript:void(0),或者javascript:;

解决办法:

<a href="javascript:void(0)" title="关闭" onclick="delbook();return false;">关闭</a>

或者

<a href="javascript:void(0)" target="_self" title="关闭" onclick="delbook();">关闭</a>

使用return false;可以阻止javascript:void(0)去执行。

使用target="_self"可以阻止会跳转到其他页面,因其是空函数,则不会发生页面刷新。

当然,在使用target="_self"的情况下,你可以直接这样写。

<a href="javascript:delbook()" target="_self" title="关闭">关闭</a>
只要是页面中有刷新或者跳转动作就要用上面的解决方法。

JS的几种跳转方式:
1.

window.open(”url“) 

2.用自定义函数

<script> function openWin(tag,obj) {     obj.target="_blank";     obj.href = "Web/Substation/Substation.aspx?stationno="+tag;     obj.click(); } </script> <a href="javascript:void(0)"onclick="openWin(3,this)">点我</a>
3.
window.location.href='';


在网页制作中,总是需要用到各种JavaScript特效,有页面特效,时间日期特效、Cookie脚本特效、按钮特效等,不胜枚举,而目前会写原生代码的人才稀缺,因此本文搜集多例针对的各个应用方向的JavaScript网页经典特效代码,供初学者参考练习。


先给大家推荐一本书《JavaScript网页特效经典300例》,这本书分为3篇26章,一共收集了300个典型实例,不仅涉及的基础语法、开发技巧、对象支持等基础知识,还涵盖了各类常见的网页开发特效,包括图层、表单控件、表格、层等各类网页元素的特效应用,以及的HTML5、CSS3技术。最后,《网页特效经典300例》还用实例演示了流行框架的应用,如Prototype、Dojo、YUI、jQuery等。本书的实例非常具有代表性,能直接应用于真实的开发实践中。可作为自学语言和大、中专院校师生提高编程实践能力的指导教材,也可作为在职开发人员的参考用书。


下载地址:点此下载电子书(注:书中案例需右键查看源代码)


JavaScript网页特效经典300例

再来一个JavaScript的100多个犀利效果打包下载


JavaScript的100多个犀利效果

下载地址:点此下载


1500个JS网页特效打包下载 CHM版

这是一个非常经典的CHM教程,共收集了1500个JS网页特效,由于制作成CHM版本,因此有些图片可能无法显示,请自动修改图片路径吧,对于学习js的朋友来说是非常有帮助的。

1500个JS网页特效


下载地址1:点此下载
下载地址2:点此下载


最新炫目JavaScript动态网页特效实战精讲 (孙军) pdf扫描版
讲述javascript的所有知识以及详细的应用效果,展现这门技术给网站建设带来的丰富的体验。本书通俗易懂,按照循序渐进的方法详细介绍javascript的基本概念、html基本知识、javascript的基本语法及其内置对象和浏览器对象。全书通过动态网页特效的200多个经典案例应用,展现javascript在网页应用中的独特魅力。书中每章都有关于本章的经典提示,每个经典提示都是作者多年工作经验的总结。书中对每个知识点都配备相应的实例,每个案例中都有学习的难点提示、代码解释和最终的案例效果,使读者全面理解javascript和体验其应用效果。

最新炫目JavaScript动态网页特效实战精讲

下载地址:点击下载

以上就是51coolma精选的一些可下载的Javascript特效代码资源,希望对你的编程学习和工作带来帮助。

当然,本站也为您准备了一些JavaScript特效代码,欢迎查看!


在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛。在web应用项目中,需要大量JavaScript的代码,将来也会越来越多。但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题,因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导致浏览器负荷过重。 Javascript性能优化绝不是一种书面的技能,那么应该如何正确的加载和执行 JavaScript代码,从而提高其在浏览器中的性能呢?下面就给大家做一些优化小窍门的知识汇总。


无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或JavaScript的命名空间,它们会对后面页面内容造成影响。一个典型的例子就是在页面中使用:

document.write()
示例:
<html><head>    <title>Source Example</title></head><body>    <p>    <script type="text/javascript">        document.write("Today is " + (new Date()).toDateString());    </script>    </p></body></html>
当浏览器遇到<script>标签时,当前 HTML 页面无从获知 JavaScript 是否会向<p> 标签添加内容,或引入其他元素,或甚至移除该标签。因此,这时浏览器会停止处理页面,先执行 JavaScript代码,然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中,浏览器必须先花时间下载外链文件中的代码,然后解析并执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。

不要使用 with() 语句

这是因为 with() 语句将会在作用域链的开始添加额外的变量。额外的变量意味着,当任何变量需要被访问的时候,JavaScript引擎都需要先扫描with()语句产生的变量,然后才是局部变量,最后是全局变量。  因此with()语句同时给局部变量和全局变量的性能带来负面影响,最终使我们优化JavaScript性能的计划破产。

对象属性和数组元素的速度都比变量慢

谈到JavaScript的数据,一般来说有4种访问方式:数值、变量、对象属性和数组元素。在考虑优化时,数值和变量的性能差不多,并且速度显著优于对象属性和数组元素。

因此当你多次引用一个对象属性或者数组元素的时候,你可以通过定义一个变量来获得性能提升。(这一条在读、写数据时都有效)虽然这条规则在绝大多数情况下是正确的,但是Firefox在优化数组索引上做了一些有意思的工作,能够让它的实际性能优于变量。但是考虑到数组元素在其他浏览器上的性能弊端,还是应该尽量避免数组查找,除非你真的只针对于火狐浏览器的性能而进行开发。

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些
function search() {    //当我要使用当前页面地址和主机域名    alert(window.location.href + window.location.host);}    //最好的方式是如下这样  先用一个简单变量保存起来function search() {    var location = window.location;    alert(location.href + location.host);}

避免with语句

和函数类似 ,with语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度,由于额外的作用域链的查找,在with语句中执行的代码肯定会比外面执行的代码要慢,在能不使用with语句的时候尽量不要使用with语句。
with (a.b.c.d) {    property1 = 1;    property2 = 2;}//可以替换为:var obj = a.b.c.d;obj.property1 = 1;obj.property2 = 2;

数字转换成字符串

般最好用”" + 1来将数字转换成字符串,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:
(“” +) > String() > .toString() > new String()

通过模板元素clone,替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写HTML来创建节点,其实这样做,1:无法保证代码的有效性,2:字符串操作效率低,所以应该是用document.createElement()方法,而如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,应该先准备一个样板节点。
var frag = document.createDocumentFragment();for (var i = 0; i < 1000; i++) {    var el = document.createElement('p');    el.innerHTML = i;    frag.appendChild(el);}document.body.appendChild(frag);//替换为:var frag = document.createDocumentFragment();var pEl = document.getElementsByTagName('p')[0];for (var i = 0; i < 1000; i++) {    var el = pEl.cloneNode(false);    el.innerHTML = i;    frag.appendChild(el);}document.body.appendChild(frag);

避免低效率的脚本位置

HTML 4 规范指出 <script> 标签可以放在 HTML 文档的<head>或<body>中,并允许出现多次。Web 开发人员一般习惯在 <head> 中加载外链的 JavaScript,接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。
低效率脚本位置示例:
<html><head>    <title>Source Example</title>    <script type="text/javascript" src="script1.js"></script>    <script type="text/javascript" src="script2.js"></script>    <script type="text/javascript" src="script3.js"></script>    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>    <p>Hello world!</p></body></html>
然而这种常规的做法却隐藏着严重的性能问题。在清单 2 的示例中,当浏览器解析到 <script> 标签(第 4 行)时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,这意味着,其后的 styles.css 样式文件和<body>标签都无法被加载,由于<body>标签无法被加载,那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前,页面都是一片空白。下图描述了页面加载过程中脚本和样式文件的下载过程。

脚本位置
我们可以发现一个有趣的现象:第一个 JavaScript 文件开始下载,与此同时阻塞了页面其他文件的下载。此外,从 script1.js 下载完成到 script2.js 开始下载前存在一个延时,这段时间正好是 script1.js 文件的执行过程。每个文件必须等到前一个文件下载并执行完成才会开始下载。在这些文件逐个下载过程中,用户看到的是一片空白的页面。
从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。这是个好消息,因为<script>标签在下载外部资源时不会阻塞其他<script>标签。遗憾的是,JavaScript 下载过程仍然会阻塞其他资源的下载,比如样式文件和图片。尽管脚本的下载过程不会互相影响,但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。因此,尽管最新的浏览器通过允许并行下载提高了性能,但问题尚未完全解决,脚本阻塞仍然是一个问题。
由于脚本会阻塞页面其他资源的下载,因此推荐将所有<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
推荐的代码放置位置示例:
<head>    <title>Source Example</title>    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>    <p>Hello world!</p>    <!-- Example of efficient script positioning -->    <script type="text/javascript" src="script1.js"></script>    <script type="text/javascript" src="script2.js"></script>    <script type="text/javascript" src="script3.js"></script></body></html>
这段代码展示了在 HTML 文档中放置<script>标签的推荐位置。尽管脚本下载会阻塞另一个脚本,但是页面的大部分内容都已经下载完成并显示给了用户,因此页面下载不会显得太慢。这是优化 JavaScript 的首要规则:将脚本放在底部。

小心使用闭包

虽然你可能还不知道“闭包”,但你可能在不经意间经常使用这项技术。闭包基本上被认为是JavaScript中的new,当我们定义一个即时函数的时候,我们就使用了闭包,比如:
document.getElementById('foo').onclick = function(ev) { };

闭包的问题在于:根据定义,在它们的作用域链中至少有三个对象:闭包变量、局部变量和全局变量。这些额外的对象将会导致其他的性能问题。但是Nicholas并不是要我们因噎废食,闭包对于提高代码可读性等方面还是非常有用的,只是不要滥用它们(尤其在循环中)。

提示:如果您对JavaScript闭包掌握得还不是很透彻,请参考本站的JavaScript闭包一节!

在循环时将控制条件和控制变量合并起来

提到性能,在循环中需要避免的工作一直是个热门话题,因为循环会被重复执行很多次。所以如果有性能优化的需求,先对循环开刀有可能会获得最明显的性能提升。

一种优化循环的方法是在定义循环的时候,将控制条件和控制变量合并起来,下面是一个没有将他们合并起来的例子:

for ( var x = 0; x < 10; x++ ) {};
当我们要添加什么东西到这个循环之前,我们发现有几个操作在每次迭代都会出现。JavaScript引擎需要:
#1:检查 x 是否存在#2:检查 x 是否小于 0 <span style="color: #888888;">(这里可能有笔误)</span>#3:使 x 增加 1
然而如果你只是迭代元素中的一些元素,那么你可以使用while循环进行轮转来替代上面这种操作:
var x = 9;do { } while( x-- );

使用 XMLHttpRequest(XHR)对象

此技术首先创建一个 XHR 对象,然后下载 JavaScript 文件,接着用一个动态<script>元素将 JavaScript 代码注入页面。
通过 XHR 对象加载 JavaScript 脚本:
var xhr = new XMLHttpRequest();xhr.open("get", "script1.js", true);xhr.onreadystatechange = function(){    if (xhr.readyState == 4){        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){            var script = document.createElement ("script");            script.type = "text/javascript";            script.text = xhr.responseText;            document.body.appendChild(script);        }    }};xhr.send(null);
此代码向服务器发送一个获取 script1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查readyState 是不是 4,然后检查 HTTP 状态码是不是有效(2XX 表示有效的回应,304 表示一个缓存响应)。如果收到了一个有效的响应,那么就创建一个新的<script>元素,将它的文本属性设置为从服务器接收到的 responseText 字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档,代码将被执行,并准备使用。
这种方法的主要优点是,您可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外(换句话说不受<script>标签约束),它下载后不会自动执行,这使得您可以推迟执行,直到一切都准备好了。另一个优点是,同样的代码在所有现代浏览器中都不会引发异常。
此方法最主要的限制是:JavaScript 文件必须与页面放置在同一个域内,不能从 CDN 下载(CDN 指”内容投递网络(Content Delivery Network)”,所以大型网页通常不采用 XHR 脚本注入技术。

提示:在本站的《AJAX教程》的 XHR 创建对象一节中你也可以学习如何创建 XHR 对象!

注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能
 var images = document.getElementsByTagName('img');        for (var i = 0, len = images.length; i < len; i++) {}
编写JavaScript的时候一定要知道何时返回NodeList对象,这样可以最小化对它们的访问
1、进行了对getElementsByTagName()的调用
2、获取了元素的childNodes属性
3、获取了元素的attributes属性
4、访问了特殊的集合,如document.forms、document.images等等
要了解了当使用NodeList对象时,合理使用会极大的提升代码执行速度

避免与null进行比较

由于JavaScript是弱类型的,所以它不会做任何的自动类型检查,所以如果看到与null进行比较的代码,尝试使用以下技术替换:

1、如果值应为一个引用类型,使用instanceof操作符检查其构造函数

2、如果值应为一个基本类型,作用typeof检查其类型

3、如果是希望对象包含某个特定的方法名,则使用typeof操作符确保指定名字的方法存在于对象上

尊重对象的所有权

因为JavaScript可以在任何时候修改任意对象,这样就可以以不可预计的方式覆写默认的行为,所以如果你不负责维护某个对象,它的对象或者它的方法,那么你就不要对它进行修改,具体一点就是说:
1、不要为实例或原型添加属性
2、不要为实例或者原型添加方法
3、不要重定义已经存在的方法
4、不要重复定义其它团队成员已经实现的方法,永远不要修改不是由你所有的对象,你可以通过以下方式为对象创建新的功能:
1、创建包含所需功能的新对象,并用它与相关对象进行交互
2、创建自定义类型,继承需要进行修改的类型,然后可以为自定义类型添加额外功能

循环引用

如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。
简单的循环引用:
 var el = document.getElementById('MyElement'); var func = function () { //… } el.func = func; func.element = el;
但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。
function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }}init();

init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用:

1、置空dom对象

function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }}init();//可以替换为:function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }    el = null;}init();

将el置空,context中不包含对dom对象的引用,从而打断循环应用。

如果我们需要将dom对象返回,可以用如下方法:

function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }    return el;}init();//可以替换为:function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }    try {        return el;    }    finally {        el = null;    }}init();
2、构造新的context
function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }}init();//可以替换为:function elClickHandler() {//……}function init() {    var el = document.getElementById('MyElement');    el.onclick = elClickHandler;}init();

把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。

通过javascript创建的dom对象,必须append到页面中

IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!

function create() {    var gc = document.getElementById('GC');    for (var i = 0; i < 5000; i++) {        var el = document.createElement('div');        el.innerHTML = "test";        //下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化        gc.appendChild(el);    }}

字符串连接

如果要连接多个字符串,应该少使用+=,如

s+=a;

s+=b;

s+=c;

应该写成s+=a + b + c;

而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存,使用JavaScript数组来收集,最后使用join方法连接起来

var buf = [];for (var i = 0; i < 100; i++) {    buf.push(i.toString());}var all = buf.join("");

JavaScript编程实战:JavaScript字符串连接方式

各种类型转换

var myVar = "3.14159",str = "" + myVar, //转成string类型i_int = ~ ~myVar,  //转成int类型  f_float = 1 * myVar,  //转成浮点型  b_bool = !!myVar,  /*  转成布尔类型,任何长度不为0的字符串和除0以外的任何数字都为真*/
array = [myVar]; // 转成数组
如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高

多个类型声明

在JavaScript中所有变量都可以使用单个var语句来声明,这样就是组合在一起的语句,以减少整个脚本的执行时间,就如上面代码一样,上面代码格式也挺规范,让人一看就明了。

插入迭代器

如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

使用直接量

var aTest = new Array(); //替换为var aTest = [];var aTest = new Object; //替换为var aTest = {};var reg = new RegExp(); //替换为var reg = /../;//如果要创建具有一些特性的一般对象,也可以使用字面量,如下:var oFruit = new O;oFruit.color = "red";oFruit.name = "apple";//前面的代码可用对象字面量来改写成这样:var oFruit = { color: "red", name: "apple" };

避免双重解释

如果要提高代码性能,尽可能避免出现需要按照JavaScript解释的字符串,也就是
1、尽量少使用eval函数
使用eval相当于在运行时再次调用解释引擎对内容进行运行,需要消耗大量时间,而且使用Eval带来的安全性问题也是不容忽视的。
2、不要使用Function构造器
不要给setTimeout或者setInterval传递字符串参数
 var num = 0; setTimeout('num++', 10); //可以替换为:var num = 0;function addNum() {    num++;}setTimeout(addNum, 10);

缩短否定检测

if(oTest != '#ff0000'){    //do something}if(oTest != null){//do something}if(oTest != false){  //do something}//虽然这些都正确,但用逻辑非操作符来操作也有同样的效果:if(!oTest){//do something}

释放javascript对象

在rich应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。

对象:obj = null

对象属性:delete obj.myproperty

数组item:使用数组的splice方法释放数组中不用的item

性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快

通过将case语句按照最可能到最不可能的顺序进行组织

3、位运算较快

当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快

4、巧用||和&&布尔运算符

function eventHandler(e) {    if (!e) e = window.event;}//可以替换为:function eventHandler(e) {    e = e || window.event;}
if(myobj){    doSomething(myobj);}//可以替换为:myobj && doSomething(myobj);

避免错误应注意的地方

1、每条语句末尾须加分号

在if语句中,即使条件表达式只有一条语句也要用{}把它括起来,以免后续如果添加了语句之后造成逻辑错误

2、使用+号时需谨慎

JavaScript 和其他编程语言不同的是,在 JavaScript 中,’+'除了表示数字值相加,字符串相连接以外,还可以作一元运算符用,把字符串转换为数字。因而如果使用不当,则可能与自增符’++’混淆而引起计算错误

var valueA = 20;var valueB = "10";alert(valueA + valueB);     //ouput: 2010 alert(valueA + (+valueB));  //output: 30 alert(valueA + +valueB);    //output:30 alert(valueA ++ valueB);     //Compile error

3、使用return语句需要注意

一条有返回值的return语句不要用()括号来括住返回值,如果返回表达式,则表达式应与return关键字在同一行,以避免压缩时,压缩工具自动加分号而造成返回与开发人员不一致的结果

function F1(){    var valueA = 1;    var valueB = 2;    return valueA + valueB;}function F2() {    var valueA = 1;    var valueB = 2;    return valueA + valueB;}alert(F1());  //输出: 3 alert(F2());  //输出: undefined

==和===的区别

避免在if和while语句的条件部分进行赋值,如if (a = b),应该写成if (a == b),但是在比较是否相等的情况下,最好使用全等运行符,也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换
var valueA = "1";var valueB = 1;if(valueA == valueB) {    alert("Equal");}else{    alert("Not equal");}//输出: "Equal"if(valueA === valueB){    alert("Equal");}else{    alert("Not equal");}//输出: "Not equal"

不要使用生偏语法

不要使用生偏语法,写让人迷惑的代码,虽然计算机能够正确识别并运行,但是晦涩难懂的代码不方便以后维护

函数返回统一类型

虽然JavaScript是弱类型的,对于函数来说,前面返回整数型数据,后面返回布尔值在编译和运行都可以正常通过,但为了规范和以后维护时容易理解,应保证函数应返回统一的数据类型

总是检查数据类型

要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢,而是因为他们很忙,并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

何时用单引号,何时用双引号

虽然在JavaScript当中,双引号和单引号都可以表示字符串, 为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号,但为了兼容各个浏览器,也为了解析时不会出错,定义JSON对象时,最好使用双引号

部署

1、用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问题。
2、部署之前推荐使用压缩工具将JS文件压缩。
3、文件编码统一用UTF-8。
4、JavaScript 程序应该尽量放在 .js 的文件中,需要调用的时候在 HTML 中以 <script src=”filename.js”> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的,则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小,无益于代码的压缩和缓存的使用。另外,<script src=”filename.js”> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。
永远不要忽略代码优化工作,重构是一项从项目开始到结束需要持续的工作,只有不断的优化代码才能让代码的执行效率越来越好。


JavaScript的正则表达式是前端中比较重要的部分,正则表达式主要用于字符串处理,表单验证等场合,实用高效。JavaScript中的正则表达式比起C#中的正则表达式要弱很多,但基本够用了。在js中定义正则表达式很简单,有两种方式,一种是通过构造函数,一种是通过//,也就是两个斜杠:

var re =new RegExp("?(w{1,}=w{1,}&){1,}w{1,}=w{1,}");

使用构造函数定义正则表达式,注意大小写,否则就会不起作用。由于构造函数的参数是一个字符串,也可以是两个斜杠的方式定义,遇到一些特殊字符就需要使用进行转义通过双斜杠的方式定义同样的正则表达式。

var re =/?(w{1,}=w{1,}&){1,}w{1,}=w{1,}/;
var re =new RegExp( /^?(w{1,}=w{1,}&){1,}w{1,}=w{1,}/);
可以和构造函数达到同样的效果,但仔细分析,发现,通过构造函数需要更多的转义字符

如何在javascript中真正使用正则表达式呢?在JavaScript中RegExp和String对象都有处理正则表达式的方法。

  • test -- RegExp的test方法用来测试字符串是否匹配给出的匹配模式,返回布尔值;
  • exec -- RegExp的exec方法返回包含第一个匹配的的数组或null;
  • match -- String的match方法返回包含所有匹配子字符串的数组;
  • replace -- String的replace方法完成string的替换操作,支持正则表达式;
  • search -- 与String的indexof方法类似,不同的是search支持正则表达式,而不仅仅是字符串;
  • split -- 按照一定规则拆分字符串并将子字符串存储到数组中的String方法。

关于这些函数的具体使用方法,可以参阅JS的相关函数手册。

一个实例对象除了方法当然还有属性,一个正则表达式有以下属性:

  • global -- 布尔值,若全局选项g已设置则返回true,否则返回false;
  • ignoreCase -- 布尔值,若忽略大小写选项i已设置则返回true,否则返回false;
  • lastIndex -- 整数,使用exec或test方法时被填入,表示下次匹配将会从哪个字符位置开始;
  • multiline -- 布尔值,表示多行模式选项m是否设置,若设置则返回true,否则返回false;
  • source -- 正则表达式的元字符串形式。//的source将返回”“。
javascript

常用的经典Javascript正则表达式

匹配中文字符的正则表达式:
[u4e00-u9fa5]
匹配双字节字符(包括汉字在内):
[^x00-xff]
应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
String.prototype.len=function(){ return this.replace([^x00-xff]/g,"aa").length; }
匹配空行的正则表达式:

[s|]*

匹配HTML标记的正则表达式:

/<(.*)>.*</1>|<(.*) />/

匹配首尾空格的正则表达式:
(^s*)|(s*$)
应用:JavaScript中没有像VBScript那样的trim函数,我们就可以利用这个表达式来实现,如下:
String.prototype.trim = function(){    return this.replace(/(^s*)|(s*$)/g, "");}
利用正则表达式分解和转换IP地址:
下面是利用正则表达式匹配IP地址,并将IP地址转换成对应数值的Javascript程序:
function IP2V(ip){    re=/(d+).(d+).(d+).(d+)/g  //匹配IP地址的正则表达式    if(re.test(ip)){        return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1    }    else{        throw new Error("Not a valid IP address!")    }}
不过上面的程序如果不用正则表达式,而直接用split函数来分解可能更简单,程序如下:
var ip="10.100.20.168"ip=ip.split(".")alert("IP值是:"+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
匹配Email地址的正则表达式:
w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式:
http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
利用正则表达式去除字串中重复的字符的算法程序:[*注:此程序不正确]
var s="abacabefgeeii"var s1=s.replace(/(.).*1/g,"$1")var re=new RegExp("["+s1+"]","g")var s2=s.replace(re,"")alert(s1+s2)  //结果为:abcefgi
*注
===============================
如果var s = “abacabefggeeii”
结果就不对了,结果为:abeicfgg
正则表达式的能力有限
===============================
表达式来实现去除重复字符的方法:
使用后向引用取出包括重复的字符,再以重复的字符建立第二个表达式,取到不重复的字符,两者串连。这个方法对于字符顺序有要求的字符串可能不适用,得用正则表达式从URL地址中提取文件名的javascript程序,如下结果为page1
s="http://blog.penner.cn/page1.htm"s=s.replace(/(.*/){ 0, }([^.]+).*/ig,"$2")alert(s)

利用正则表达式限制网页表单里的文本框输入内容:

用正则表达式限制只能输入中文:

onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用正则表达式限制只能输入全角字符:
onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正则表达式限制只能输入数字:
onkeyup="value=value.replace(/[^d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用正则表达式限制只能输入数字和英文:
onkeyup="value=value.replace(/[W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
匹配非负整数(正整数 + 0)
^d+$
匹配正整数
^[0-9]*[1-9][0-9]*$
匹配非正整数(负整数 + 0)
^((-d+)|(0+))$
匹配负整数
^-[0-9]*[1-9][0-9]*$
匹配整数
^-?d+$
匹配非负浮点数(正浮点数 + 0)
^d+(.d+)?$
匹配正浮点数
^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
匹配非正浮点数(负浮点数 + 0)
^((-d+(.d+)?)|(0+(.0+)?))$
匹配负浮点数
^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
匹配浮点数
^(-?d+)(.d+)?$
匹配由26个英文字母组成的字符串
^[A-Za-z]+$
匹配由26个英文字母的大写组成的字符串
^[A-Z]+$
匹配由26个英文字母的小写组成的字符串
^[a-z]+$
匹配由数字和26个英文字母组成的字符串
^[A-Za-z0-9]+$
匹配由数字、26个英文字母或者下划线组成的字符串
^w+$
匹配email地址
^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$
匹配url
^[a-zA-z]+://匹配(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
匹配html tag
<s*(S+)(s[^>]*)?>(.*?)<s*/1s*>

js

javascript常用的正则表达式实例

// 取得字符串的字节长度function strlen(str){    var i;       var len;       len = 0;       for (i=0;i<str.length;i++){

        if (str.charCodeAt(i)>255) len+=2;        else len++;   

    }  

return len; } // 判断是否为数字,是则返回true,否则返回falsefunction f_check_number(obj){ if(/^d+$/.test(obj.value)){ return true; } else{ f_alert(obj,"请输入数字"); return false; } } // 判断是否为自然数,是则返回true,否则返回false function f_check_naturalnumber(obj){ var s = obj.value; if(/^[0-9]+$/.test( s ) && (s > 0)){ return true; } else{ f_alert(obj,"请输入自然数"); return false; } } // 判断是否为整数,是则返回true,否则返回falsefunction f_check_integer(obj){ if(/^(+|-)?d+$/.test( obj.value)){ return true; } else{ f_alert(obj,"请输入整数"); return false; } } // 判断是否为实数,是则返回true,否则返回falsefunction f_check_float(obj){ if(/^(+|-)?d+($|.d+$)/.test( obj.value)){ return true; } else{ f_alert(obj,"请输入实数"); return false; }} // 校验数字的长度和精度function f_check_double(obj){ var numReg; var value = obj.value; var strValueTemp, strInt, strDec; var dtype = obj.eos_datatype; var pos_dtype = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")).split(","); var len = pos_dtype[0], prec = pos_dtype[1]; try{ numReg =/[-]/; strValueTemp = value.replace(numReg, ""); numReg =/[+]/; strValueTemp = strValueTemp.replace(numReg, ""); //整数 if(prec==0){ numReg =/[.]/; if(numReg.test(value) == true){ f_alert(obj, "输入必须为整数类型"); return false; } } if(strValueTemp.indexOf(".") < 0 ){   

            if(strValueTemp.length >( len - prec)){   

                f_alert(obj, "整数位不能超过"+ (len - prec) +"位");   

                return false;   

            }  }        else{ strInt = strValueTemp.substr( 0, strValueTemp.indexOf(".") ); if(strInt.length >( len - prec)){ f_alert(obj, "整数位不能超过"+ (len - prec) +"位"); return false; } strDec = strValueTemp.substr( (strValueTemp.indexOf(".")+1), strValueTemp.length ); if(strDec.length > prec){ f_alert(obj, "小数位不能超过"+ prec +"位"); return false; } } return true; }    catch(e){ alert("in f_check_double = " + e); return false; } } // 校验数字的最小最大值,返回boolfunction f_check_interval(obj){ var value = parseFloat(obj.value); var dtype = obj.eos_datatype; var pos_dtype = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")).split(","); var minLimit = pos_dtype[0]; var maxLimit = pos_dtype[1]; var minVal = parseFloat(pos_dtype[0]); var maxVal = parseFloat(pos_dtype[1]); if(isNaN(value)){ f_alert(obj, "值必须为数字"); return false; } if((isNaN(minVal) && (minLimit != "-")) || (isNaN(maxVal) && (maxLimit != "+"))){ f_alert(obj, "边界值必须为数字或-、+"); return false; } if(minLimit == "-" && !isNaN(maxVal)){ if(value > maxVal){ f_alert(obj, "值不能超过" + maxVal); return false; } } if(!isNaN(minVal) && maxLimit == "+"){ if(value < minVal){

            f_alert(obj, "值不能小于" + minVal);   

            return false;   

        }

    }   

    if(!isNaN(minVal) && !isNaN(maxVal)){

        if(minVal > maxVal){

            f_alert(obj, "起始值" + minVal + "不能大于终止值" + maxVal);   

        }        else{   

            if(!(value <= maxVal && value >= minVal)){

                f_alert(obj, "值应该在" + minVal + "和" + maxVal + "之间");   

                return false;   

            }   

       }   

    } return true; } //用途:检查输入字符串是否只由汉字组成,如果通过验证返回true,否则返回falsefunction f_check_zh(obj){ if(/^[u4e00-u9fa5]+$/.test(obj.value)) { return true; } f_alert(obj,"请输入汉字"); return false; } // 判断是否为小写英文字母,是则返回true,否则返回falsefunction f_check_lowercase(obj){ if(/^[a-z]+$/.test( obj.value )){ return true; } f_alert(obj,"请输入小写英文字母"); return false; } // 判断是否为大写英文字母,是则返回true,否则返回falsefunction f_check_uppercase(obj){ if (/^[A-Z]+$/.test( obj.value )){ return true; } f_alert(obj,"请输入大写英文字母"); return false; } // 判断是否为英文字母,是则返回true,否则返回falsefunction f_check_letter(obj){ if(/^[A-Za-z]+$/.test( obj.value )){ return true; } f_alert(obj,"请输入英文字母"); return false; } /**用途:检查输入字符串是否只由汉字、字母、数字组成输入:value:字符串返回:如果通过验证返回true,否则返回false*/function f_check_ZhOrNumOrLett(obj){ //判断是否是汉字、字母、数字组成 var regu = "^[0-9a-zA-Zu4e00-u9fa5]+$"; var re = new RegExp(regu); if(re.test( obj.value )) { return true; } f_alert(obj,"请输入汉字、字母或数字"); return false; } /*用途:校验ip地址的格式输入:strIP:ip地址返回:如果通过验证返回true,否则返回false;*/function f_check_IP(obj){ var re=/^(d+).(d+).(d+).(d+)$/; //匹配IP地址的正则表达式 if(re.test( obj.value )){

        if(RegExp.$1<=255 && RegExp.$1>=0          &&RegExp.$2<=255 && RegExp.$2>=0 

         &&RegExp.$3<=255 && RegExp.$3>=0  

         &&RegExp.$4<=255 && RegExp.$4>=0 ){

        return true;     } } f_alert(obj,"请输入合法的计算机IP地址"); return false; } /*用途:检查输入对象的值是否符合端口号格式输入:str 输入的字符串返回:如果通过验证返回true,否则返回false*/function f_check_port(obj){ if(!f_check_number(obj)) return false;   

    if(obj.value < 65536) return true;   

    f_alert(obj,"请输入合法的计算机IP地址端口号");   

    return false;    

}   

       

/*

用途:检查输入对象的值是否符合网址格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function f_check_URL(obj){     

    var myReg = /^((http:[/][/])?w+([.]w+|[/]w*)*)?$/;    

    if(myReg.test( obj.value )) return true;    

    f_alert(obj,"请输入合法的网页地址");   

    return false;    

}   

/*

用途:检查输入对象的值是否符合E-Mail格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function f_check_email(obj){     

    var myReg = /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/;    

    if(myReg.test( obj.value )) return true;    

    f_alert(obj,"请输入合法的电子邮件地址");   

    return false;    

}   

   

/*

要求:一、移动电话号码为11或12位,如果为12位,那么第一位为0

二、11位移动电话号码的第一位和第二位为"13"

三、12位移动电话号码的第二位和第三位为"13"

用途:检查输入手机号码是否正确

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/function f_check_mobile(obj){      

    var regu =/(^[1][3][0-9]{9}$)|(^0[1][3][0-9]{9}$)/;   

    var re = new RegExp(regu);   

    if (re.test( obj.value )) return true; 

    f_alert(obj,"请输入正确的手机号码");   

    return false;      

}  

       

/*

要求:一、电话号码由数字、"("、")"和"-"构成

二、电话号码为3到8位

三、如果电话号码中包含有区号,那么区号为三位或四位

四、区号用"("、")"或"-"和其他部分隔开

用途:检查输入的电话号码格式是否正确

输入:

strPhone:字符串

返回:

如果通过验证返回true,否则返回false

*/       

function f_check_phone(obj){

    var regu =/(^([0][1-9]{2,3}[-])?d{3,8}(-d{1,6})?$)|(^([0][1-9]{2,3})d{3,8}((d{1,6}))?$)|(^d{3,8}$)/;    

    var re = new RegExp(regu);   

    if(re.test(obj.value)){   

        return true;   

    }   

    f_alert(obj,"请输入正确的电话号码");   

    return false;   

}          

/* 判断是否为邮政编码 */ 

function f_check_zipcode(obj){

    if(!f_check_number(obj)) return false;   

    if(obj.value.length!=6){

        f_alert(obj,"邮政编码长度必须是6位");   

        return false;   

    }   

    return true;   

}       

/*

用户ID,可以为数字、字母、下划线的组合,

第一个字符不能为数字,且总长度不能超过20。

*/

function f_check_userID(obj){

    var userID = obj.value;   

    if(userID.length > 20){

        f_alert(obj,"ID长度不能大于20");   

        return false;   

    }   

    if(!isNaN(userID.charAt(0))){

        f_alert(obj,"ID第一个字符不能为数字");   

        return false;   

    }   

    if(!/^w{1,20}$/.test(userID)){

        f_alert(obj,"ID只能由数字、字母、下划线组合而成");   

        return false;   

    }   

    return true;   

}   

       

/*

功能:验证身份证号码是否有效

提示信息:未输入或输入身份证号不正确!

使用:f_check_IDno(obj)

返回:bool

*/

function f_check_IDno(obj){ var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; var iSum = 0; var info = ""; var strIDno = obj.value; var idCardLength = strIDno.length; if(!/^d{17}(d|x)$/i.test(strIDno)&&!/^d{15}$/i.test(strIDno)){ f_alert(obj,"非法身份证号"); return false; } //在后面的运算中x相当于数字10,所以转换成a strIDno = strIDno.replace(/x$/i,"a"); if(aCity[parseInt(strIDno.substr(0,2))]==null){ f_alert(obj,"非法地区"); return false; }     //18位身份证验算 if (idCardLength==18){ sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2)); var d = new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())){ f_alert(obj,"非法生日"); return false; } //验证身份正好是否合法(最后一位校验码验算)     for(var i = 17;i>=0;i --){            iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11);        } if(iSum%11!=1){ f_alert(obj,"非法身份证号"); return false; } }    //15位身份证验算 else if (idCardLength==15){ sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2)); var d = new Date(sBirthday.replace(/-/g,"/")) var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate(); if(sBirthday != dd){ f_alert(obj,"非法生日"); return false; } } return true; } /** 判断字符串是否符合指定的正则表达式*/function f_check_formatStr(obj){ var str = obj.value; var dtype = obj.eos_datatype; var regu = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")); //指定的正则表达式 var re = new RegExp(regu); if(re.test(str)) return true; f_alert(obj , "不符合指定的正则表达式要求"); return false; } /*功能:判断是否为日期(格式:yyyy年MM月dd日,yyyy-MM-dd,yyyy/MM/dd,yyyyMMdd)提示信息:未输入或输入的日期格式错误!使用:f_check_date(obj)返回:bool*/function f_check_date(obj){ var date = Trim(obj.value); var dtype = obj.eos_datatype; var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")); //日期格式 var year,month,day,datePat,matchArray; if(/^(y{4})(-|/)(M{1,2})2(d{1,2})$/.test(format)) datePat = /^(d{4})(-|/)(d{1,2})2(d{1,2})$/; else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)$/.test(format)) datePat = /^(d{4})年(d{1,2})月(d{1,2})日$/; else if(format=="yyyyMMdd") datePat = /^(d{4})(d{2})(d{2})$/; else{ f_alert(obj,"日期格式不对"); return false; } matchArray = date.match(datePat); if(matchArray == null){ f_alert(obj,"日期长度不对,或日期中有非数字符号"); return false; } if(/^(y{4})(-|/)(M{1,2})2(d{1,2})$/.test(format)){ year = matchArray[1]; month = matchArray[3]; day = matchArray[4]; }    else{ year = matchArray[1]; month = matchArray[2]; day = matchArray[3]; } if (month < 1 || month > 12){

        f_alert(obj,"月份应该为1到12的整数");   

        return false;   

    }   

    if (day < 1 || day > 31){

        f_alert(obj,"每个月的天数应该为1到31的整数");   

        return false;   

    }        

    if ((month==4 || month==6 || month==9 || month==11) && day==31){

        f_alert(obj,"该月不存在31号");   

        return false;   

    }        

    if(month==2){

        var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));   

        if(day>29){                  

            f_alert(obj,"2月最多有29天");   

            return false;   

        }   

        if((day==29) && (!isleap)){

            f_alert(obj,"闰年2月才有29天");   

            return false;   

        }   

    }   

    return true;   

}   

       

/*

功能:校验的格式为yyyy年MM月dd日HH时mm分ss秒,yyyy-MM-dd HH:mm:ss,yyyy/MM/dd HH:mm:ss,yyyyMMddHHmmss

提示信息:未输入或输入的时间格式错误

使用:f_check_time(obj)

返回:bool

*/

function f_check_time(obj){ var time = Trim(obj.value); var dtype = obj.eos_datatype; var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")); //日期格式 var datePat,matchArray,year,month,day,hour,minute,second; if(/^(y{4})(-|/)(M{1,2})2(d{1,2}) (HH:mm:ss)$/.test(format)) datePat = /^(d{4})(-|/)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/; else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)(HH时mm分ss秒)$/.test(format)) datePat = /^(d{4})年(d{1,2})月(d{1,2})日(d{1,2})时(d{1,2})分(d{1,2})秒$/; else if(format == "yyyyMMddHHmmss") datePat = /^(d{4})(d{2})(d{2})(d{2})(d{2})(d{2})$/; else{ f_alert(obj,"日期格式不对"); return false; } matchArray = time.match(datePat); if(matchArray == null){ f_alert(obj,"日期长度不对,或日期中有非数字符号"); return false; } if(/^(y{4})(-|/)(M{1,2})2(d{1,2}) (HH:mm:ss)$/.test(format)){ year = matchArray[1]; month = matchArray[3]; day = matchArray[4]; hour = matchArray[5]; minute = matchArray[6]; second = matchArray[7]; }    else{ year = matchArray[1]; month = matchArray[2]; day = matchArray[3]; hour = matchArray[4]; minute = matchArray[5]; second = matchArray[6]; } if(month < 1 || month > 12){

        f_alert(obj,"月份应该为1到12的整数");   

        return false;   

    }   

    if(day < 1 || day > 31){              

        f_alert(obj,"每个月的天数应该为1到31的整数");   

        return false;   

    }        

    if((month==4 || month==6 || month==9 || month==11) && day==31){            

        f_alert(obj,"该月不存在31号");   

        return false;   

    }        

    if(month==2){   

        var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));   

        if(day>29){                  

            f_alert(obj,"2月最多有29天");   

            return false;   

        }   

        if((day==29) && (!isleap)){                  

            f_alert(obj,"闰年2月才有29天");   

            return false;   

        }   

    }   

    if(hour<0 || hour>23){   

        f_alert(obj,"小时应该是0到23的整数");   

        return false;   

    }   

    if(minute<0 || minute>59){   

        f_alert(obj,"分应该是0到59的整数");   

        return false;   

    }   

    if(second<0 || second>59){   

        f_alert(obj,"秒应该是0到59的整数");   

        return false;   

    }   

    return true;   }   

// 判断当前对象是否可见function isVisible(obj){ var visAtt,disAtt; try{ disAtt=obj.style.display; visAtt=obj.style.visibility; }    catch(e){} if(disAtt=="none" || visAtt=="hidden") return false; return true; } // 判断当前对象及其父对象是否可见function checkPrVis(obj){ var pr=obj.parentNode; do{ if(pr == undefined || pr == "undefined") return true; else{ if(!isVisible(pr)) return false; } }while(pr=pr.parentNode); return true; } // 弹出警告对话框,用户点确定后将光标置于出错文本框上, 并且将原来输入内容选中。function f_alert(obj,alertInfo){ var caption = obj.getAttribute("eos_displayname"); if(caption == null) caption = ""; alert(caption + ":" + alertInfo + "!"); obj.select(); if(isVisible(obj) && checkPrVis(obj)) obj.focus(); }

// 检测字符串是否为空

function isnull(str){   

    var i;   

    if(str.length == 0)   

        return true;   

    for(i=0;i<str.length;i++){   

        if(str.charAt(i)!=' ')    

            return false;   

    }   

    return true;   

}   

       

/**

* 检测指定文本框输入是否合法。

* 如果用户输入的内容有错,则弹出提示对话框,

* 同时将焦点置于该文本框上,并且该文本框前面

* 会出现一个警告图标(输入正确后会自动去掉)。

*/

function checkInput(object){   

    var image;   

    var i;   

    var length;   

    if(object.eos_maxsize + "" != "undefined") length = object.eos_maxsize;   

    else length = 0;   

    if (object.eos_isnull=="true" && isnull(object.value))  return true;   

    /* 长度校验 */  

    if(length != 0 && strlen(object.value) > parseInt(length)){   

        f_alert(object, "超出最大长度" + length);   

        return false;   

    }    

    /* 数据类型校验 */  

    else{   

        if(object.eos_datatype + "" != "undefined"){          

            var dtype = object.eos_datatype;   

            var objName = object.name;   

            //如果类型名后面带有括号,则视括号前面的字符串为校验类型   

            if(dtype.indexOf("(") != -1)   

                dtype = dtype.substring(0,dtype.indexOf("("));   

                //根据页面元素的校验类型进行校验   

            try{   

                if(eval("f_check_" + dtype + "(object)") != true)   

                    return false;   

            }            catch(e){return true;}   

            /*  如果form中存在name前半部分相同,并且同时存在以"min"和"max"结尾的表单域,  

                那么视为按区间查询。即"min"结尾的表单域的值要小于等于"max"结尾的表单域的值。 */ 

            if(objName.substring((objName.length-3),objName.length)=="min"){   

                var objMaxName = objName.substring(0, (objName.length-3)) + "max";   

                if(document.getElementById(objMaxName) != undefined && document.getElementById(objMaxName) != "undefined" ){   

                    if(checkIntervalObjs(object, document.getElementById(objMaxName)) != true)   

                        return false;                      

                }   

            }              

        }   

    }   

    return true;   

}   

       

/* 检测表单中所有输入项的正确性,一般用于表单的onsubmit事件 */

function checkForm(myform){   

    var i;   

    for (i=0;i<myform.elements.length;i++){   

        /* 非自定义属性的元素不予理睬 */        

        if(myform.elements[i].eos_displayname + "" == "undefined") continue;   

        /* 非空校验 */  

        if(myform.elements[i].eos_isnull=="false" && isnull(myform.elements[i].value)){   

            f_alert(myform.elements[i],"不能为空");   

            return false;   

        }          

        /* 数据类型校验 */  

        if(checkInput(myform.elements[i])==false)   

            return false;                  

    }   

    return true;   

}   

       

/**

* 校验两个表单域数据的大小,目前只允许比较日期和数字。

* @param obj1 小值表单域

* @param obj2 大值表单域

*/

function checkIntervalObjs(obj1 , obj2){      

    var caption1 = obj1.getAttribute("eos_displayname");   

    var caption2 = obj2.getAttribute("eos_displayname");   

    var val1 = parseFloat(obj1.value);   

    var val2 = parseFloat(obj2.value);   

    // 非自定义属性的元素不予理睬   

    if(obj1.eos_displayname + "" == "undefined" || obj2.eos_displayname + "" == "undefined") {   

        return false;   

    }   

    // 日期类型的比较   

    if(f_check_date(obj1) == true && f_check_date(obj2) == true){   

        var dtype = obj1.eos_datatype;   

        var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")"));  //日期格式   

        val1 = getDateByFormat(obj1.value, format);   

        dtype = obj2.eos_datatype;   

        format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")"));  //日期格式   

        val2 = getDateByFormat(obj2.value, format);   

        if(val1 > val2){   

            obj2.select();   

        if(isVisible(obj) && checkPrVis(obj))   

            obj2.focus();   

        alert(caption1 + "的起始日期不能大于其终止日期!");   

        return false;    

    }     

    // 数字类型的比较   

    if((isNaN(val1) && !isnull(val1)) || (isNaN(val2) && !isnull(val2))){   

        alert(caption1 + "的值不全为数字则不能比较!");   

        return false;   

    }   

    if(val1 > val2){   

        obj2.select();   

        if(isVisible(obj) && checkPrVis(obj))   

            obj2.focus();   

        alert(caption1 + "的起始值不能大于其终止值!");   

        return false;   

    }   

    return true;   

}   

       

/*根据日期格式,将字符串转换成Date对象。

格式:yyyy-年,MM-月,dd-日,HH-时,mm-分,ss-秒。

(格式必须写全,例如:yy-M-d,是不允许的,否则返回null;格式与实际数据不符也返回null。)

默认格式:yyyy-MM-dd HH:mm:ss,yyyy-MM-dd。*/ 

function getDateByFormat(str){   

    var dateReg,format;   

    var y,M,d,H,m,s,yi,Mi,di,Hi,mi,si;   

    if((arguments[1] + "") == "undefined")        format = "yyyy-MM-dd HH:mm:ss";   

    else         format = arguments[1];   

    yi = format.indexOf("yyyy");   

    Mi = format.indexOf("MM");   

    di = format.indexOf("dd");   

    Hi = format.indexOf("HH");   

    mi = format.indexOf("mm");   

    si = format.indexOf("ss");   

    if(yi == -1 || Mi == -1 || di == -1)        return null;   

    else{   

        y = parseInt(str.substring(yi, yi+4));   

        M = parseInt(str.substring(Mi, Mi+2));   

        d = parseInt(str.substring(di, di+2));   

    }   

    if(isNaN(y) || isNaN(M) || isNaN(d))         return null;   

    if(Hi == -1 || mi == -1 || si == -1)         return new Date(y, M-1, d);   

    else{   

        H = str.substring(Hi, Hi+4);   

        m = str.substring(mi, mi+2);   

        s = str.substring(si, si+2);   

    }   

    if(isNaN(parseInt(y)) || isNaN(parseInt(M)) || isNaN(parseInt(d)))         return new Date(y, M-1, d);   

    else        return new Date(y, M-1, d,H, m, s);   

}   

       

/*LTrim(string):去除左边的空格*/

function LTrim(str){   

    var whitespace = new String("  ");   

    var s = new String(str);      

    if(whitespace.indexOf(s.charAt(0)) != -1){   

        var j=0, i = s.length;   

        while(j < i && whitespace.indexOf(s.charAt(j)) != -1){   

            j++;   

        }   

        s = s.substring(j, i);   

    }   

    return s;   

}   

       

/*RTrim(string):去除右边的空格*/

function RTrim(str){   

    var whitespace = new String("  ");   

    var s = new String(str);   

    if (whitespace.indexOf(s.charAt(s.length-1)) != -1){   

        var i = s.length - 1;   

        while (i >= 0 && whitespace.indexOf(s.charAt(i)) != -1){   

            i--;   

        }   

        s = s.substring(0, i+1);   

    }   

    return s;   

}   

       

/*Trim(string):去除字符串两边的空格*/

function Trim(str){   

    return RTrim(LTrim(str));   

}

js正则表达式

正则表达式在JavaScript中的高级应用


子模式
子模式了。用来指定重复次数的元字符只能作用于紧挨着它的字符或元字符,而在实际应用中我们需要进行重复匹配的字符往往不一定就只是一个字符或元字符,就如reUrl中所要匹配的“http”和“net”就是多个字符,这时候就可以使用(和)将多个字符括起来作为一个独立的元素来使用。

比如验证email地址的正则表达式var reMail = /w+@w+.w+/i;并不完善,一个有效的用户名除了可以是字母、数字、下划线外,还可以是点号,同时域名部分也不能保证是mail.com这行的形式,也完全有可能是mail.mymail.com这样的形式,所以一个更为完善的匹配有效email地址的正则表达式是这样的:
var reEmail = /(w+.)*w+@(w+.)+w+/i;

回溯引用
在web开发中,我们经常需要去匹配HTML标签,大多数的HTML标签都有一个开始标记和结束标记如<h1></h1>,<div></div>,如果只需单纯的匹配H1和DIV我们可以很容易的构造出该正则表达式:

var reH1 = /<h1>.*?</h1>/gi;

var reDiv = /<div>.*?</div>/gi;

但是我们所要匹配的并不是某个或某几个HTML标签,事实上HTML具体是什么样的形式我们完全是未知的,比如XML的标记我们是完全无法预计的,所以分组匹配在这里完全排不上用场。幸运的是,在正则表达式中回溯引用允许正则表达式模式引用前面的匹配结果。具体应用可以参考下面匹配HTML标签的正则表达式。

var html = "<h1>nowamagic</h1>";

var reTag = /<(w+d?)>.*?</1>/gi;

document.write(html.match(reTag));//<h1>nowamagic</h1>

reTag最后部分的1便是一个回溯引用,引用的前面的第一个子模式(w+d?),当然如果前面还存在第二个子模式我们也可以使用2引用、。注意:回溯引用只能引用前面已经匹配过的结果,而下面这样的写法就是错误的。

var reTag = /<1>.*?</(w+d?)>/gi;

回溯引用在替换操作中有着十分广泛的应用。比如我们要将一段文本中的所有网址自动添加上其对应的超链接,即是将“http://nowamagic.net”的字符串替换成nowamagic的形式。我们就可以这样处理:

var url = "http://nowamagic.net";

var reUrl = /(http[s]*:/{2}(w+.)+w+)/gi;

//<a href="http://nowamagic.net" rel="external nofollow" target="_blank" >http://nowamagic.net</a>

document.write(url.replace(reUrl,'<a href="$1">$1</a>'));

$1引用了前面的子模式(http[s]*:/{2}(w+.)+w+)。注意:javascript中进行替换操作时回溯引用使用”$”而不是””。

前后查找
如果我们需要获取h1标签中的文本(包含在h1标签中的文本,不包括h1本身),这个正则表达式应该如何写?比如”<h1>front-end</h1>”,在所有介绍过的方法中,似乎都还没有提及过要匹配某个字符串,但却只返回某些字符前或后的字符串的情况,正则表达式中确实是存在这样的语法。

var fe = "<h1>front-end</h1>";

var reInnerText = /(?<=<h1>).*?(?=</h1>))/i;

在reInnerText和/<h1>.*?</h1>/i的匹配模式是相同的,唯一不同的返回结果,/<h1>.*?</h1>/i会返回整个fe字符串,而reInnerText只返回”front-end”,比较这两个正则表达式可以发现两处不同的写法:(?<=<h1>),(?=</h1>)。(?<=<h1>)定义了一个向后查找模式,即匹配结果只包括”<h1>”后面的部分;(?=</h1>)则定义的是一个向前查找模式,匹配结果只返回”</h1>”前的结果;所以reInnerText的匹配结果只返回”<h1>”和”</h1>”之间的内容!前后查找的语法很简单,向前查找是一个以”?=”开头的字表达式,而向后查找确实一个以”?<=”开头的字表达式。

遗憾的是javascript并不支持正则表达式的向后查找,所以事实上reInnerText的写法在javascript是有语法错误的。有条件可以使用其他支持前后查找的语言进行验证,比如PHP。

$title = '<h1>front-end</h1>';

if(preg_match('/(?<=<h1>).*?(?=</h1>)/i',$title,$rst)){

   echo $rst[0];//front-end

}

提示:如果您想要进一步巩固对于JavaScript正则表达式的使用,请参考本站的JavaScript编程实战部分


在讲原型之前我们先来了解一下函数。

在JS中,函数的本质就是对象,它与其他对象不同的是,创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢?是一个叫做Function的特殊函数,通过new Function 产生的对象就是一个函数。

function f1() {}//上面的函数等同于:var f1 = new Function();function sum(a, b) {    return a + b;}//上面的函数等同于:var sum = new Function("a", "b", "return a + b");//前面的是函数形参名,最后一个参数是函数体

也就是说:只要通过Function创建的对象就是函数,函数都是通过Function创建的。

看下面这张图片:

以上我们可以看到普通对象是由函数创建的,函数是由Function创建的。那我们会有一个疑问Function是从哪里来的?其实Function是不通过其他函数得到,它是JS执行引擎初始化就直接通过本地代码直接放置到内存中的。

当一个函数被创建后,这个函数就会自动附带一个属性prototype,它就是一个Object对象,代表着函数的原型。也就是说prototype就是原型对象

原型对象中包含两个属性:constructor和__proto__。constructor这个属性是指创建原型的函数,它指向函数本身。所以有以下关系:

看这样一段代码:

var Person = function () { };var p = new Person();    

我们来看看这个 new 究竟做了什么?

我们把 new 的过程拆分成以下三步:

1. var p={}; 也就是说,初始化一个对象p。

2. p.__proto__=Person.prototype;

3. Person.call(p);也就是说构造p,也可以称之为初始化p。

我们来证明一下:

var Person = function () { };var p = new Person();alert(p.__proto__ === Person.prototype); // true

这段代码会返回 true。说明我们步骤2是正确的。


那么__proto__是什么?

每个对象都会在其内部初始化一个属性,就是 __proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是 Firefox 的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

我们看一下下面这些代码:

var Person = function () { };    Person.prototype.Say = function () {    alert("Person say");}var p = new Person();p.Say();

我们看下为什么 p 可以访问 Person 的 Say。

首先var p=new Person();

可以得出 p.__proto__=Person.prototype。那么当我们调用 p.Say() 时,首先 p 中没有 Say 这个属性, 于是,他就需要到他的 __proto__ 中去找,也就是 Person.prototype,而我们在上面定义了 Person.prototype.Say = function(){}; 于是,就找到了这个方法。

好,接下来,让我们看个更复杂的。


我们来做这样的推导:

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!


包含最重要的概念、函数​​、方法等的 JavaScript 备忘单。初学者的完整快速参考。

开始

介绍

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

console.log()

alert('Hello world!');console.log('Hello world!');// => Hello world!

数值

let amount = 6;let price = 4.99;

变量

let x = null;let name = "Tammy";const found = false;// => Tammy, false, nullconsole.log(name, found, x);var a;console.log(a); // => undefined

字符串

let single = 'Wheres my bandit hat?';let double = "Wheres my bandit hat?";// => 21console.log(single.length);

算术运算符

5 + 5 = 10     // Addition10 - 5 = 5     // Subtraction5 * 10 = 50    // Multiplication10 / 5 = 2     // Division10 % 5 = 0     // Modulo

注释

// This line will denote a comment/*  The below configuration must be changed before deployment. */

赋值运算符

let number = 100;// Both statements will add 10number = number + 10;number += 10;console.log(number); // => 120

字符串插值

let age = 7;// String concatenation'Tommy is ' + age + ' years old.';// String interpolation`Tommy is ${age} years old.`;

let 关键字

let count; console.log(count); // => undefinedcount = 10;console.log(count); // => 10

const 关键字

const numberOfColumns = 4;// TypeError: Assignment to constant...numberOfColumns = 8;

JavaScript 条件

if 语句

const isMailSent = true;if (isMailSent) {  console.log('Mail sent to recipient');}

三元运算符

var x=1;// => trueresult = (x == 1) ? true : false;

运算符

true || false;       // true10 > 5 || 10 > 20;   // truefalse || false;      // false10 > 100 || 10 > 20; // false

逻辑运算符 &&

true && true;        // true1 > 2 && 2 > 1;      // falsetrue && false;       // false4 === 4 && 3 > 1;    // true

比较运算符

1 > 3                // false3 > 1                // true250 >= 250           // true1 === 1              // true1 === 2              // false1 === '1'            // false

逻辑运算符!

let lateToWork = true;let oppositeValue = !lateToWork;// => falseconsole.log(oppositeValue); 

否则如果

const size = 10;if (size > 100) {  console.log('Big');} else if (size > 20) {  console.log('Medium');} else if (size > 4) {  console.log('Small');} else {  console.log('Tiny');}// Print: Small

switch 语句

const food = 'salad';switch (food) {  case 'oyster':    console.log('The taste of the sea');    break;  case 'pizza':    console.log('A delicious pie');    break;  default:    console.log('Enjoy your meal');}

JavaScript 函数

函数

// Defining the function:function sum(num1, num2) {  return num1 + num2;}// Calling the function:sum(3, 6); // 9

匿名函数

// Named functionfunction rocketToMars() {  return 'BOOM!';}// Anonymous functionconst rocketToMars = function() {  return 'BOOM!';}

箭头函数 (ES6)

两个参数

const sum = (param1, param2) => {   return param1 + param2; }; console.log(sum(2,5)); // => 7 

没有参数

const printHello = () => {   console.log('hello'); }; printHello(); // => hello

一个参数

const checkWeight = weight => {   console.log(`Weight : ${weight}`); }; checkWeight(25); // => Weight : 25 

简洁的箭头函数

const multiply = (a, b) => a * b; // => 60 console.log(multiply(2, 30)); 

返回关键字

// With returnfunction sum(num1, num2) {  return num1 + num2;}// The function doesn't output the sumfunction sum(num1, num2) {  num1 + num2;}

调用函数

// Defining the functionfunction sum(num1, num2) {  return num1 + num2;}// Calling the functionsum(2, 4); // 6

函数表达式

const dog = function() {  return 'Woof!';}

功能参数

// The parameter is namefunction sayHello(name) {  return `Hello, ${name}!`;}

函数声明

function add(num1, num2) {  return num1 + num2;}

JavaScript 范围

范围

function myFunction() {    var pizzaName = "Volvo";  // Code here can use pizzaName  }// Code here can't use pizzaName

块作用域变量

const isLoggedIn = true;if (isLoggedIn == true) {  const statusMessage = 'Logged in.';}// Uncaught ReferenceError...console.log(statusMessage);

全局变量

// Variable declared globallyconst color = 'blue';function printColor() {  console.log(color);}printColor(); // => blue

JavaScript 数组

数组

const a1 = [0, 1, 2, 3];// Different data typesconst a2 = [1, 'chicken', false];

属性 .length

const numbers = [1, 2, 3, 4];numbers.length // 4

指数

// Accessing an array elementconst myArray = [100, 200, 300];console.log(myArray[0]); // 100console.log(myArray[1]); // 200

方法 .push()

// Adding a single element:const cart = ['apple', 'orange'];cart.push('pear'); // Adding multiple elements:const numbers = [1, 2];numbers.push(3, 4, 5);

方法 .pop()

const a= ['eggs', 'flour', 'chocolate'];const p = a.pop(); // 'chocolate'console.log(a); // ['eggs', 'flour']

可变的

const names = ['Alice', 'Bob'];names.push('Carl');// ['Alice', 'Bob', 'Carl']

JavaScript 循环

While 循环

while (condition) {  // code block to be executed}let i = 0;while (i < 5) {          console.log(i);  i++;}

反向循环

const a = ['banana', 'cherry'];for (let i = a.length - 1; i >= 0; i--){  console.log(`${i}. ${items[i]}`);}// => 2. cherry// => 1. banana

Do...while 语句

x = 0i = 0do {  x = x + i;  console.log(x)  i++;} while (i < 5);// => 0 1 3 6 10

For循环

for (let i = 0; i < 4; i += 1) {  console.log(i);};// => 0, 1, 2, 3

循环遍历数组

for (let i = 0; i < array.length; i++){  console.log(array[i]);}// => Every item in the array

Break

for (let i = 0; i < 99; i += 1) {  if (i > 5) {     break;  }  console.log(i)}// => 0 1 2 3 4 5

Continue

for (i = 0; i < 10; i++) {  if (i === 3) { continue; }  text += "The number is " + i + "<br>";}

嵌套循环

for (let i = 0; i < 2; i += 1) {  for (let j = 0; j < 3; j += 1) {    console.log(`${i}-${j}`);  }}

for...in 循环

let dic = {brand: 'Apple', model: ''};for (let key in mobile) {  console.log(`${key}: ${mobile[key]}`);}

JavaScript 迭代器

分配给变量的函数

let plusFive = (number) => {  return number + 5;  };// f is assigned the value of plusFivelet f = plusFive;plusFive(3); // 8// Since f has a function value, it can be invoked. f(9); // 14

回调函数

const isEven = (n) => {  return n % 2 == 0;}let printMsg = (evenFunc, num) => {  const isNumEven = evenFunc(num);  console.log(`${num} is an even number: ${isNumEven}.`)}// Pass in isEven as the callback functionprintMsg(isEven, 4); // => The number 4 is an even number: True.

数组方法 .reduce()

const arrayOfNumbers = [1, 2, 3, 4];const sum = arrayOfNumbers.reduce((accumulator, curVal) => {    return accumulator + curVal;});console.log(sum); // 10

数组方法 .map()

const a = ['Taylor', 'Donald', 'Don', 'Natasha', 'Bobby'];const announcements = a.map(member => {  return member + ' joined the contest.';})console.log(announcements);

数组方法 .forEach()

const numbers = [28, 77, 45, 99, 27];numbers.forEach(number => {    console.log(number);}); 

数组方法 .filter()

const randomNumbers = [4, 11, 42, 14, 39];const filteredArray = randomNumbers.filter(n => {    return n > 5;});

JavaScript 对象

访问属性

const apple = {   color: 'Green',  price: { bulk: '$3/kg', smallQty: '$4/kg' }};console.log(apple.color); // => Greenconsole.log(apple.price.bulk); // => $3/kg

命名属性

// Example of invalid key namesconst trainSchedule = {  // Invalid because of the space between words.  platform num: 10,   // Expressions cannot be keys.  40 - 10 + 2: 30,  // A + sign is invalid unless it is enclosed in quotations.  +compartment: 'C'}

不存在的属性

const classElection = {  date: 'January 12'};console.log(classElection.place); // undefined

可变的

const student = {  name: 'Sheldon',  score: 100,  grade: 'A',}console.log(student)// { name: 'Sheldon', score: 100, grade: 'A' }delete student.scorestudent.grade = 'F'console.log(student)// { name: 'Sheldon', grade: 'F' }student = {}// TypeError: Assignment to constant variable.

赋值速记语法

const person = {  name: 'Tom',  age: '22',};const {name, age} = person;console.log(name); // 'Tom'console.log(age);  // '22'

删除运算符

const person = {  firstName: "Matilda",  age: 27,  hobby: "knitting",  goal: "learning JavaScript"};delete person.hobby; // or delete person[hobby];console.log(person);/*{  firstName: "Matilda"  age: 27  goal: "learning JavaScript"}*/	

对象作为参数

const origNum = 8;const origObj = {color: 'blue'};const changeItUp = (num, obj) => {  num = 7;  obj.color = 'red';};changeItUp(origNum, origObj);// Will output 8 since integers are passed by value.console.log(origNum);// Will output 'red' since objects are passed // by reference and are therefore mutable.console.log(origObj.color);

速记对象创建

const activity = 'Surfing';const beach = { activity };console.log(beach); // { activity: 'Surfing' }

this 关键字

const cat = {  name: 'Pipey',  age: 8,  whatName() {    return this.name    }};console.log(cat.whatName()); // => Pipey

工厂函数

// A factory function that accepts 'name', // 'age', and 'breed' parameters to return // a customized dog object. const dogFactory = (name, age, breed) => {  return {    name: name,    age: age,    breed: breed,    bark() {      console.log('Woof!');      }  };};

方法

const engine = {  // method shorthand, with one argument  start(adverb) {    console.log(`The engine starts up ${adverb}...`);  },    // anonymous arrow function expression with no arguments  sputter: () => {    console.log('The engine sputters...');  },};engine.start('noisily');engine.sputter();

Getters and setters

const myCat = {  _name: 'Dottie',  get name() {    return this._name;    },  set name(newName) {    this._name = newName;    }};// Reference invokes the getterconsole.log(myCat.name);// Assignment invokes the settermyCat.name = 'Yankee';

JavaScript 类

静态方法

class Dog {  constructor(name) {    this._name = name;    }    introduce() {     console.log('This is ' + this._name + ' !');    }    // A static method  static bark() {    console.log('Woof!');    }}const myDog = new Dog('Buster');myDog.introduce();// Calling the static methodDog.bark();

Class

class Song {  constructor() {    this.title;    this.author;  }    play() {    console.log('Song playing!');  }}const mySong = new Song();mySong.play();

类构造函数

class Song {  constructor(title, artist) {    this.title = title;    this.artist = artist;  }}const mySong = new Song('Bohemian Rhapsody', 'Queen');console.log(mySong.title);

类方法

class Song {  play() {    console.log('Playing!');  }    stop() {    console.log('Stopping!');  }}

延伸

// Parent classclass Media {  constructor(info) {    this.publishDate = info.publishDate;    this.name = info.name;  }}// Child classclass Song extends Media {  constructor(songData) {    super(songData);    this.artist = songData.artist;  }}const mySong = new Song({   artist: 'Queen',   name: 'Bohemian Rhapsody',   publishDate: 1975});

JavaScript 模块

Require

var moduleA = require( "./module-a.js" );// The .js extension is optionalvar moduleA = require( "./module-a" );// Both ways will produce the same result.// Now the functionality of moduleA can be usedconsole.log(moduleA.someFunctionality)

Export

// module "moduleA.js"export default function cube(x) {  return x * x * x;}// In main.jsimport cube from './moduleA.js';// Now the `cube` function can be used straightforwardly.console.log(cube(3)); // 27

导出模块

let Course = {};Course.name = "Javascript Node.js"module.exports = Course;

导入关键字

// add.jsexport const add = (x, y) => {    return x + y}// main.jsimport { add } from './add';console.log(add(2, 3)); // 5

JavaScript 承诺

承诺状态

const promise = new Promise((resolve, reject) => {  const res = true;  // An asynchronous operation.  if (res) {    resolve('Resolved!');  }  else {    reject(Error('Error'));  }});promise.then((res) => console.log(res), (err) => alert(err));

执行器函数

const executorFn = (resolve, reject) => {  resolve('Resolved!');};const promise = new Promise(executorFn);

setTimeout()

const loginAlert = () =>{  alert('Login');};setTimeout(loginAlert, 6000); 

.then() 方法

const promise = new Promise((resolve, reject) => {      setTimeout(() => {    resolve('Result');  }, 200);});promise.then((res) => {  console.log(res);}, (err) => {  alert(err);}); 

.catch() 方法

const promise = new Promise((resolve, reject) => {    setTimeout(() => {    reject(Error('Promise Rejected Unconditionally.'));  }, 1000);});promise.then((res) => {  console.log(value);});promise.catch((err) => {  alert(err);});

Promise.all()

const promise1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve(3);  }, 300);});const promise2 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve(2);  }, 200);});Promise.all([promise1, promise2]).then((res) => {  console.log(res[0]);  console.log(res[1]);});

避免嵌套 Promise 和 .then()

const promise = new Promise((resolve, reject) => {    setTimeout(() => {    resolve('*');  }, 1000);});const twoStars = (star) => {    return (star + star);};const oneDot = (star) => {    return (star + '.');};const print = (val) => {  console.log(val);};// Chaining them all togetherpromise.then(twoStars).then(oneDot).then(print);

创建

const executorFn = (resolve, reject) => {  console.log('The executor function of the promise!');};const promise = new Promise(executorFn);

链接多个 .then()

const promise = new Promise(resolve => setTimeout(() => resolve('dAlan'), 100));promise.then(res => {  return res === 'Alan' ? Promise.resolve('Hey Alan!') : Promise.reject('Who are you?')}).then((res) => {  console.log(res)}, (err) => {  alert(err)});

JavaScript 异步等待

异步

function helloWorld() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Hello World!');    }, 2000);  });}const msg = async function() { //Async Function Expression  const msg = await helloWorld();  console.log('Message:', msg);}const msg1 = async () => { //Async Arrow Function  const msg = await helloWorld();  console.log('Message:', msg);}msg(); // Message: Hello World! <-- after 2 secondsmsg1(); // Message: Hello World! <-- after 2 seconds

解决承诺

let pro1 = Promise.resolve(5);let pro2 = 44;let pro3 = new Promise(function(resolve, reject) {  setTimeout(resolve, 100, 'foo');});Promise.all([pro1, pro2, pro3]).then(function(values) {  console.log(values);});// expected => Array [5, 44, "foo"]

异步等待承诺

function helloWorld() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Hello World!');    }, 2000);  });}async function msg() {  const msg = await helloWorld();  console.log('Message:', msg);}msg(); // Message: Hello World! <-- after 2 seconds

错误处理

let json = '{ "age": 30 }'; // incomplete datatry {  let user = JSON.parse(json); // <-- no errors  alert( user.name ); // no name!} catch (e) {  alert( "Invalid JSON data!" );}

Aysnc 等待运算符

function helloWorld() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Hello World!');    }, 2000);  });}async function msg() {  const msg = await helloWorld();  console.log('Message:', msg);}msg(); // Message: Hello World! <-- after 2 seconds

JavaScript 请求

JSON

const jsonObj = {  "name": "Rick",  "id": "11A",  "level": 4  };

XMLHttpRequest

const xhr = new XMLHttpRequest();xhr.open('GET', 'mysite.com/getjson');

GET

const req = new XMLHttpRequest();req.responseType = 'json';req.open('GET', '/getdata?id=65');req.onload = () => {  console.log(xhr.response);};req.send();

POST

const data = {  fish: 'Salmon',  weight: '1.5 KG',  units: 5};const xhr = new XMLHttpRequest();xhr.open('POST', '/inventory/add');xhr.responseType = 'json';xhr.send(JSON.stringify(data));xhr.onload = () => {  console.log(xhr.response);};

获取 API

fetch(url, {    method: 'POST',    headers: {      'Content-type': 'application/json',      'apikey': apiKey    },    body: data  }).then(response => {    if (response.ok) {      return response.json();    }    throw new Error('Request failed!');  }, networkError => {    console.log(networkError.message)  })}

JSON 格式

fetch('url-that-returns-JSON').then(response => response.json()).then(jsonResponse => {  console.log(jsonResponse);});

承诺url参数获取api

fetch('url').then(  response  => {    console.log(response);  }, rejection => {    console.error(rejection.message););

获取 API 函数

fetch('https://api-xxx.com/endpoint', {  method: 'POST', body: JSON.stringify({id: "200"})}).then(response => {  if(response.ok){	  return response.json();    }	throw new Error('Request failed!');}, networkError => {  console.log(networkError.message);}).then(jsonResponse => {  console.log(jsonResponse);})

异步等待语法

const getSuggestions = async () => {  const wordQuery = inputField.value;  const endpoint = `${url}${queryParams}${wordQuery}`;  try{const response = await fetch(endpoint, {cache: 'no-cache'});    if(response.ok){      const jsonResponse = await response.json()    }  }  catch(error){    console.log(error)  }}


JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript,可以用于改进设计、验证表单、检测浏览器、创建cookies等。

JavaScript 非常容易学。

本教程将教你学习从初级到高级JavaScript知识。

JavaScript 在线实例

本教程包含了大量的 JavaScript 实例, 您可以点击 "尝试一下" 来在线查看实例。

实例

我的第一个 JavaScript 程序

这是一个段落




尝试一下 »

在每个页面您可以点击 "尝试一下" 在线查看实例!!!

尝试每个实例,并且在线修改代码,查看不同的运行效果!!!

Note如果能根据本站的实例一步一个脚印学习,你将会在很短的时间内学会 JavaScript。

为什么学习 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门:

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 网页的行为

本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。

谁适合阅读本教程?

1. 如果您想学习 JavaScript,您可以学习本教程:

了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。

2. 如果在此之前您已经使用过 JavaScript,您也可以阅读本教程:

JavaScript 一直在升级,所以我们需要时刻了解 JavaScript 的新技术。

阅读本教程前,您需要了解的知识:

阅读本教程,您需要有以下基础:

  • HTML 和 CSS 基础

如果您想学习这些基础知识,您可以在我们的首页找到相应的教程W3CSchool教程

JavaScript 实战闯关

我们为学习者准备了大量的JavaScript编程实战练习,供大家通过亲自编程实验来熟练编程操作

开始JavaScript编程闯关

JavaScript 实例

学习 100 多个 JavaScript 实例!

在实例页面中,您可以点击 "尝试一下" 来查看 JavaScript 在线实例。

JavaScript 测验

在 W3CSchool 中测试您的 JavaScript 技能!

JavaScript 参考手册

在 W3CSchool 中,我们为您提供完整的 JavaScript 对象、浏览器对象、HTML DOM 对象参考手册。

以下手册包含了每个对象、属性、方法的实例。

相关教程

HTML教程

CSS教程


JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。


JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。


您将学到什么

下面是您将在本教程中学到的主要内容。


JavaScript:直接写入 HTML 输出流

实例

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

尝试一下 »
lamp您只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法,会覆盖整个文档。


JavaScript:对事件的反应

实例

<button type="button" onclick="alert('欢迎!')">点我!</button>

尝试一下 »

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。


JavaScript:改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

尝试一下 »

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。


JavaScript:改变 HTML 图像

本例会动态地改变 HTML 图像的来源(src):

点亮灯泡

点击灯泡就可以打开或关闭这盏灯


尝试一下 »

“点亮灯泡”实现代码详解:

<script>function changeImage(){    //通过查看src中是否有bulbon这个单词来判断当前状态并切换到另外一种状态    element=document.getElementById('myimage');    if (element.src.match("bulbon")){        //如果src属性中有bulbon这个单词,则将其改为下面这个src        element.src="https://www.51coolma.cn/statics/images/course/pic_bulboff.gif";    }    else{        //如果src属性中没有bulbon这个单词,则将其改为这个src        element.src="https://www.51coolma.cn/statics/images/course/pic_bulbon.gif";    }}</script><img id="myimage" onclick="changeImage()" src="https://www.51coolma.cn/statics/images/course/pic_bulboff.gif" width="100" height="180">

以上实例中代码 element.src.match("bulbon") 的作用意思是:检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。


JavaScript:改变 HTML 样式

改变 HTML 元素的样式,属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

尝试一下 »


JavaScript:验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("不是数字")};

尝试一下 »

以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isNaN 是判别不出来的。

您知道吗?

lampJavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

javaScript和ECMAScript的关系

ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。

JavaScript 已经由 ECMA 通过 ECMAScript 实现语言的标准化。


ECMAScript 版本

JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式
添加 try/catch
ECMAScript 4没有发布
2009ECMAScript 5添加 "strict mode",严格模式
添加 JSON 支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 7增加指数运算符 (**)
增加 Array.prototype.includes
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。

相关教程

ECMAScript教程


以下学习脑图在各个学习章节里面也有,具体学到相应章节可以仔细研读,本篇只是做个规整 。

价值10000元的javascript知识图谱,值得你珍藏。
M8T)~}ASYH82XGK5B74G0BF
价值10000元的javascript知识图谱,值得你珍藏。

价值10000元的javascript知识图谱,值得你珍藏。


未标题-1


价值10000元的javascript知识图谱,值得你珍藏。
价值10000元的javascript知识图谱,值得你珍藏。

价值10000元的javascript知识图谱,值得你珍藏。
价值10000元的javascript知识图谱,值得你珍藏。
价值10000元的javascript知识图谱,值得你珍藏。


HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。


<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

实例

<script>
    alert("我的第一个 JavaScript");
</script>

您无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码 

lamp那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

实例

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

尝试一下 »


JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。


在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。


<head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:

实例

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</head>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()">尝试一下</button>

</body>
</html>


尝试一下 »

<body> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用:

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()">尝试一下</button>

<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</body>
</html>


尝试一下 »

提示:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。


外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

实例

<!DOCTYPE html>
<html>
<body>
    <script src="myScript.js"></script>
</body>
</html>

尝试一下 »

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下:

function myFunction() {    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; }
lamp外部脚本不能包含 <script> 标签。


本章节为大家介绍如何在浏览器上进行 JavaScript 代码的运行与调试。

目前的主流浏览器有谷歌的Chrome(使用blink内核),微软的edge(使用chromium内核,这是一款谷歌提供的开源浏览器内核)和IE(使用trident内核),网景的火狐浏览器(使用gecko内核),以及macOS的Safari(使用webkit内核),这些浏览器的开发者工具都大同小异,本文以谷歌的Chrome浏览器为例进行介绍。

Chrome 是由 Google 开发的免费网页浏览器,对于前端开发来说(尤其是调试代码)非常方便。

Chrome 官网地址:https://www.google.com/intl/zh-CN/chrome/

我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击页面,选择"检查"来开启开发者工具。

也可以在右上角菜单栏选择 "更多工具"=》"开发者工具" 来开启:

1、Console 窗口调试 JavaScript 代码

打开开发者工具后,我们可以在 Console 窗口调试 JavaScript代码,如下图:


上图中我们在 > 符号后输入我们要执行的代码 console.log("W3Cschool"),按回车后执行。

我们也可以在其他地方复制一段代码过来执行,比如复制以下代码到 Console 窗口,按回车执行:

console.log("W3Cschool")console.log("编程狮")


清空 Console 窗口到内容可以按以下按钮:


2、Chrome snippets 小脚本

我们也可以在 Chrome 浏览器中创建一个脚本来执行,在开发者工具中点击 Sources 面板,选择 Snippets 选项卡,在导航器中右击鼠标,然后选择 Create new snippet 来新建一个脚本文件:

如果你没看到 Snippets ,可以点下面板上到 >> 就能看到了。

点击 Create new snippet 后,会自动创建一个文件,你只需在右侧窗口输入以下代码,然后按 Command+S(Mac)或 Ctrl+S(Windows 和 Linux)保存更改即可。

console.log("W3Cschool")console.log("编程狮")

保存后,右击文件名,选择 "Run" 执行代码:


JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

 严格来说,JavaScript 没有任何打印或者输出的函数,以上几种方式都只不过是一种数据展示的方法,最接近输出的方法应该是console,但这种方法只是一种调试辅助工具。


使用 window.alert()

你可以弹出警告框来显示数据:

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

尝试一下 »

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>

document.getElementById("demo").innerHTML = "段落已修改。";

</script>

</body>

</html>


尝试一下 »

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。

innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。


在本教程中

在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:

下面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:


写到 HTML 文档

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。

出于测试目的,您可以将JavaScript直接写在HTML 文档中:

实例

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>W3Cschool教程(51coolma.cn)</title> 

</head>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>

document.write(Date());

</script>

</body>

</html>


尝试一下 »
Note

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button >

<script>

function myFunction() {

    document.write(Date());

}

</script>

</body>

</html>


尝试一下 »


写到控制台

如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<script>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

</body>

</html>


尝试一下 »
提示:console.log() 方法能够让你看到你在页面中的输出内容,让你更容易调试javascript;与alert相比,console不会打断你页面的操作,console里面的内容非常丰富,你可以在控制台输入 console。

您知道吗?

Note程序中调试是测试,查找及减少bug(错误)的过程。


JavaScript 是一门程序语言。语法规则定义了语言结构。


JavaScript 语法

JavaScript 是一个脚本语言。

它是一个轻量级,但功能强大的编程语言。


JavaScript 字面量

在编程语言中,一个字面量是一个常量,如 3.14。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。

3.14

1001

123e5

尝试一下 »

字符串(String)字面量 可以使用单引号或双引号 :

"John Doe"

'John Doe'

尝试一下 »

表达式字面量 用于计算:

5 + 6

5 * 10

尝试一下 »

数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}


JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length

x = 5

length = 6

尝试一下 »

变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。

Note变量是一个名称。字面量是一个

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

尝试一下 »

JavaScript使用赋值运算符给变量赋值:

x = 5
y = 6
z = (x + y) * 10

尝试一下 »

JavaScript语言有多种类型的运算符:

Type实例描述
赋值,算术和位运算符=  +  -  *  /在 JS 运算符中描述
条件,比较及逻辑运算符==  != <  > 在 JS 比较运算符中描述


JavaScript 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令。浏览器通过 JavaScript 语句明白要执行什么操作。

语句是用分号分隔:

x = 5 + 6;
y = x * 10;


JavaScript 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量:

var x = 5 + 6;
var y = x * 10;


JavaScript 标识符

和其他任何编程语言一样,JavaScript 保留了一些标识符为自己所用。

JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

JavaScript 标识符必须以字母、下划线(_)或美元符($)开始。

后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开标识符和数字)。

以下是 JavaScript 中最​​重要的保留字(按字母顺序):

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略:

// 我不会执行

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值


数据类型的概念

编程语言中,数据类型是一个非常重要的内容。

为了可以操作变量,了解数据类型的概念非常重要。

如果没有使用数据类型,以下实例将无法执行:

16 + "Volvo"

16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢?

"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。


JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘于 b 的结果
}


JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementByIdgetElementbyID 是不同的。

同样,变量 myVariableMyVariable 也是不同的。

提示:在本站的编程实战中,你可以通过练习理解JavaScript变量的大小写敏感性


JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符,包含标点等字符。

如需进一步了解,请学习我们的 完整 Unicode 参考手册


您知道吗?

NoteJavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。
NoteJavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。


JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。


JavaScript 语句

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello Dolly" :

实例

document.getElementById("demo").innerHTML = "你好 Dolly.";

尝试一下 »


分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

Writing:

a = 5;
b = 6;
c = a + b;

Is the same as writing:

a = 5; b = 6; c = a + b;

尝试一下 »
lamp您也可能看到不带有分号的案例。
在 JavaScript 中,用分号来结束语句是可选的。


JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

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

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

实例

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

尝试一下 »


JavaScript 代码块

JavaScript 可以分批地组合起来。

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

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

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

实例

function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

尝试一下 »

您将在稍后的章节学到更多有关函数的知识。


JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) :

语句描述
break用于跳出循环。
catch语句块,在 try 语句块执行出错时执行 catch 语句块。
continue跳过循环中的一个迭代。
do ... while执行一个语句块,在条件语句为 true 时继续执行该语句块。
for在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function定义一个函数
if ... else用于基于不同的条件来执行不同的动作。
return退出函数
switch用于基于不同的条件来执行不同的动作。
throw抛出(生成)错误 。
try实现错误处理,与 catch 一同使用。
var声明一个变量。
while当条件语句为 true 时,执行语句块。



空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var person="Hege";var person = "Hege";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("你好  W3Cschool!");

不过,您不能像这样折行:

document.write  ("你好W3Cschool!");

JavaScript 语句练习

JavaScript 注释语句操作

练习如何在JavaScript中对语句进行注释,被注释的代码块在JavaScript之中是不会被运行的。 


JavaScript 注释可用于提高代码的可读性。


JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头。

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

实例

// 输出标题:
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落:
document.getElementById("myP").innerHTML="这是我的第一个段落。";

尝试一下 »


JavaScript 多行注释

多行注释以 /* 开始,以 */ 结尾。

下面的例子使用多行注释来解释代码:

实例

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

尝试一下 »


使用注释来阻止执行

在下面的例子中,注释用于阻止其中一条代码行的执行(可用于调试):

实例

//document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

尝试一下 »

在下面的例子中,注释用于阻止代码块的执行(可用于调试):

实例

/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/

尝试一下 »


在行末使用注释

在下面的例子中,我们把注释放到代码行的结尾处:

实例

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

尝试一下 »

相关练习

《JavaScript编程实战》:JavaScript 注释语句操作


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

实例

var x=5;
var y=6;
var z=x+y;

尝试一下 »


就像代数那样

x=5
y=6
z=x+y

在代数中,我们使用字母(比如 x)来保存值(比如 5)。

通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。

在 JavaScript 中,这些字母被称为变量。

lamp您可以把变量看做存储数据的容器。


JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)
lampJavaScript 语句和 JavaScript 变量都对大小写敏感。


JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

实例

var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

尝试一下 »


声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量:

var carname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号

carname="Volvo";

不过,您也可以在声明变量时对其赋值:

var carname="Volvo";

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 "Volvo",然后把它放入 id="demo" 的 HTML 段落中:

实例

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

尝试一下 »

提示:你可以通过本站的JavaScript编程实战部分来练习如何声明JavaScript变量

lamp一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。


一条语句,多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行:

var lastname="Doe",age=30,job="carpenter";


Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname="Volvo";var carname;

JavaScript 算数

您可以通过 JavaScript 变量来做算数,使用的是 = 和 + 这类运算符:

实例

y=5;
x=y+2;

尝试一下 »

您将在本教程稍后的章节学到更多有关 JavaScript 运算符的知识。

您可以在JavaScript编程实战部分中了解JavaScript算数。

JavaScript变量学习图



JavaScript有以下几种类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。


JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

实例

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串


JavaScript 字符串

字符串是存储字符(比如 "Bill Gates")的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号:

实例

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

尝试一下 »

您将在本教程的高级部分学到更多关于字符串的知识。


JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

实例

var x1=34.00;      // 使用小数点来写
var x2=34;         // 不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

实例

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

尝试一下 »

您将在本教程的高级部分学到更多关于数字的知识。


JavaScript 布尔

布尔(逻辑)只能有两个值:true 或 false。

 var x=true; var y=false;

布尔常用在条件测试中。您将在本教程稍后的章节中学到更多关于条件测试的知识。


JavaScript 数组

下面的代码创建名为 cars 的数组:

 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";

或者 (condensed array):

 var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

实例

var cars=["Saab","Volvo","BMW"];

尝试一下 »

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

您将在本教程稍后的章节中学到更多关于数组的知识。


JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

 var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

 var person={ firstname : "John", lastname  : "Doe", id        :  5566 };

对象属性有两种寻址方式:

实例

name=person.lastname;
name=person["lastname"];

尝试一下 »

您将在本教程稍后的章节中学到更多关于对象的知识。


Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;
person=null;

尝试一下 »


声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

 var carname=new String; var x=      new Number; var y=      new Boolean; var cars=   new Array; var person= new Object;
lamp JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

提示:JavaScript具有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。

JavaScript数据类型学习脑图:



相关文章

JavaScript 标准参考教程:JavaScript数据类型


在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。


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

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}

</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>


JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

 function functionname() {执行代码 }

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

lamp JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

提示:function 中的花括号是必需的,即使函数体内只包含一条语句,仍然必须使用花括号将其括起来。



调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数,由逗号 (,) 分隔:

 myFunction(argument1,argument2)

当您声明函数时,请把参数作为变量来声明:

 function myFunction(var1,var2){代码 }

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

实例

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

尝试一下 »

上面的函数在按钮被点击时会提示 "Welcome Harry Potter, the Wizard"。

函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:

实例

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<button onclick="myFunction('Bob','Builder')">Try it</button>

尝试一下 »

根据您点击的不同的按钮,上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。


带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

语法

 function myFunction(){var x=5;return x;}

上面的函数会返回值 5。

注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

 var myVar=myFunction();

myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量,您也可以使用返回值:

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数:

实例

计算两个数字的乘积,并返回结果:

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素的 innerHTML 将是:

12

尝试一下 »

在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:


function myFunction(a,b){    if (a>b){        return;    }    x=a+b}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。


局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

局部变量比同名全局变量的优先级高,所以局部变量会隐藏同名的全局变量。


全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。


JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。


向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

 carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。

JavaScript函数学习脑图


相关文章

JavaScript学习笔记整理(6):函数


作用域是可访问变量的集合。

在JavaScript中,能够定义全局作用域或者局部作用域。

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。


JavaScript 局部作用域

变量在函数内声明,变量为局部作用域。

局部变量:只能在函数内部访问。

实例

// 此处不能调用 carName 变量

function myFunction() {
    var carName = "Volvo";

    // 函数内可调用 carName 变量

}

尝试一下 »

因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。


JavaScript 全局变量

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 

实例

var carName = " Volvo";

// 此处可调用 carName 变量

function myFunction() {

    // 函数内可调用 carName 变量

}

尝试一下 »

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

以下实例中 carName 在函数内,但是为全局变量。

实例

// 此处可调用 carName 变量

function myFunction() {
    carName = "Volvo";

    // 此处可调用 carName 变量

}

尝试一下 »


JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。


函数参数

函数参数只在函数内起作用,是局部变量。


HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

实例

//此处可使用 window.carName

function myFunction() {
    carName = "Volvo";
}

尝试一下 »


你知道吗?

Note你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。
局部变量,包括 window 对象可以覆盖全局变量和函数。
Note

在 ES6 中,提供了 let 关键字和 const 关键字。

let 的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。

使用 const 声明的是常量,其值一旦被设定便不可被更改。


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


HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。


HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

单引号:

 <some-HTML-element some-event='some JavaScript'>

双引号:

 <some-HTML-element some-event="some JavaScript">

在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码):

实例

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

尝试一下 »

以上实例中,JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):

实例

<button onclick="this.innerHTML=Date()">The time is?</button>

尝试一下 »

Note JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:

实例

<button onclick="displayDate()">The time is?</button>

尝试一下 »


常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件


JavaScript 可以做什么?

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...
Note 在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。


JavaScript 字符串用于存储和处理文本。


JavaScript 字符串

字符串可以存储一系列字符,如 "John Doe"。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:

实例

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

你可以使用索引位置来访问字符串中的每个字符:

实例

var character = carname[7];

字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同:

实例

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

你也可以在字符串添加转义字符来使用引号:

实例

var answer = 'It's alright';
var answer = "He is called "Johnny"";

尝试一下 »


字符串长度

可以使用内置属性 length 来计算字符串的长度:

实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

尝试一下 »

提示:你可以通过本站的JavaScript编程实战部分来进一步了解JavaScript获取字符串长度的操作。


特殊字符

在 JavaScript 中,字符串写在单引号或双引号中。

因为这样,以下实例 JavaScript 无法解析:

  "We are the so-called "Vikings" from the north."

字符串 "We are the so-called " 被截断。

如何解决以上的问题呢?可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号,如下:

"We are the so-called "Vikings" from the north." 

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:

转义字符 () 可以用于转义撇号,换行,引号,等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符:

代码 输出
' 单引号
" 双引号
反斜杠
换行
回车
tab(制表符)
 退格符
f 换页符


字符串可以是对象

通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")

实例

var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object

尝试一下 »
Note 不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用:

实例

var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.

尝试一下 »


字符串属性和方法

原始值字符串,如 "John", 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串方法我们将在下一章节中介绍。


字符串属性

属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法


字符串方法

Method 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将指定的 Unicode 值转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

相关文章

JavaScript 标准参考手册:JavaScript String对象


本节将介绍JavaScript中的三种类型的运算符:算术运算符、赋值运算符以及字符串连接运算符。


运算符 = 用于赋值。

运算符 + 用于加值。


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

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

实例

指定变量值,并将值相加:

y=5;
z=2;
x=y+z;

在以上语句执行后,x 的值是:

7

尝试一下 »


JavaScript 算术运算符

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

y=5

,下面的表格解释了这些算术运算符:

运算符描述例子x 运算结果y 运算结果在线实例
+加法x=y+275实例 »
-减法x=y-235实例 »
*乘法x=y*2105实例 »
/除法x=y/22.55实例 »
%取模(余数)x=y%215实例 »
++自增x=++y66实例 »
x=y++56实例 »
--自减x=--y44实例 »
x=y--54实例 »


JavaScript 赋值运算符

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

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

运算符例子等同于运算结果在线实例
=x=y x=5实例 »
+=x+=yx=x+yx=15实例 »
-=x-=yx=x-yx=5实例 »
*=x*=yx=x*yx=50实例 »
/=x/=yx=x/yx=2实例 »
%=x%=yx=x%yx=0实例 »


用于字符串的 + 运算符

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

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

实例

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

txt3 运算结果如下:

What a verynice day

尝试一下 »

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

实例

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

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

What a very nice day

尝试一下 »

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

实例

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

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

What a very nice day

尝试一下 »


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

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串,如下实例:

实例

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, 和 z 输出结果为:

10
55
Hello5

尝试一下 »

规则:如果把数字与字符串相加,结果将成为字符串!

提示:为了熟悉JavaScript运算符的使用,你可以参考本站的JavaScript编程实战

JavaScript运算符学习脑图

1470710264211893

参考文章

轻松学习 JavaScript:JavaScript 运算符


比较和逻辑运算符用于变量(或一些数据类型)之间的比较和逻辑推断。并返回比较或推断结果(返回真(True)或假(False))。


比较运算符

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

给定

x=5,下面的表格解释了比较运算符:
运算符描述比较返回值实例
==等于x==8false实例 »
x==5true实例 »
===绝对等于(值和类型均相等)x==="5"false实例 »
x===5true实例 »
!=不等于x!=8true实例 »
!==不绝对等于(值和类型有一个不相等,或两个都不相等)x!=="5"true实例 »
x!==5false实例 »
> 大于x>8false实例 »
< 小于x<8true实例 »
>= 大于或等于x>=8false实例 »
<= 小于或等于x<=8true实例 »


如何使用

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

if (age<18) x="Too young";

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


逻辑运算符

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

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

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

提示:JavaScript逻辑运算符的优先级是:!、&& 、||。


条件运算符

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

语法

 variablename=(condition)?value1:value2

例子

实例

如果变量 age 中的值小于 18,则向变量 voteable 赋值 "年龄太小",否则赋值 "年龄已达到"。

voteable=(age<18)?"年龄太小":"年龄已达到";
尝试一下 »


JavaScript提供了一组位运算符,可以用来做简单的位运算。

 与Java等语言不同,JavaScript的数值型默认是浮点型,在进行位运算的时候需要先转换为整型才能运算,所以JavaScript的位运算效率比较低。

运算符

运算符名称描述
&AND如果两位都是 1 则设置每位为 1
|OR如果两位之一为 1 则设置每位为 1
^XOR如果两位只有一位为 1 则设置每位为 1
~NOT反转所有位
<<零填充左位移通过从右推入零向左位移,并使最左边的位脱落。
>>有符号右位移通过从左推入最左位的拷贝来向右位移,并使最右边的位脱落。
>>>零填充右位移通过从左推入零来向右位移,并使最右边的位脱落。

实例

操作结果等同于结果
5 & 110101 & 00010001
5 | 150101 | 00010101
5 ^ 140101 ^ 00010100
~ 510~01011010
5 << 1100101 << 11010
5 >> 120101 >> 10010
5 >>> 120101 >>> 10010

JavaScript 使用 32 位按位运算数

JavaScript 将数字存储为 64 位浮点数,但所有按位运算都以 32 位二进制数执行。

在执行位运算之前,JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后,结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数,JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

位运算 AND

当对一对数位执行位运算 AND 时,如果数位均为 1 则返回 1。

单位示例:

运算结果
0 & 00
0 & 10
1 & 00
1 & 11

四位示例:

运算结果
1111 & 00000000
1111 & 00010001
1111 & 00100010
1111 & 01000100

位运算 OR

当对一对数位执行位运算 OR 时,如果其中一位是 1 则返回 1:

单位示例

运算结果
0 | 00
0 | 11
1 | 01
1 | 11

四位运算:

操作结果
1111 | 00001111
1111 | 00011111
1111 | 00101111
1111 | 01001111

位运算 XOR

当对一对数位进行位运算 XOR 时,如果数位是不同的则返回 1:

单位示例:

运算结果
0 ^ 00
0 ^ 11
1 ^ 01
1 ^ 10

四位示例:

运算结果
1111 ^ 00001111
1111 ^ 00011110
1111 ^ 00101101
1111 ^ 01001011

JavaScript 位运算 AND (&)

如果位数都是 1,则位运算 AND 返回 1:

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 & 100000000000000000000000000000001 (1)

实例

var x = 5 & 1;

JavaScript 位运算 OR (|)

如果数位之一是 1,则位运算 OR 返回 1:

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 | 100000000000000000000000000000101 (5)

实例

var x = 5 | 1;

JavaScript 位运算 XOR (^)

如果数位是不同的,则 XOR 返回 1:

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 ^ 100000000000000000000000000000100 (4)

实例

var x = 5 ^ 1;

JavaScript 位运算 NOT (~)

十进制二进制
500000000000000000000000000000101
~511111111111111111111111111111010 (-6)

实例

var x = ~5;

JavaScript(零填充)位运算左移(<<)

这是零填充的左移。一个或多个零数位从右被推入,最左侧的数位被移除:

十进制二进制
500000000000000000000000000000101
5 << 100000000000000000000000000001010 (10)

实例

var x = 5 << 1;

JavaScript(有符号)位运算右移(>>)

这是保留符号的右移。最左侧的数位被从左侧推入,最右侧的数位被移出:

十进制二进制
-511111111111111111111111111111011
-5 >> 111111111111111111111111111111101 (-3)

实例

var x = -5 >> 1;

JavaScript(零填充)右移(>>>)

这是零填充的右移。一个或多个零数位从左侧被推入,最右侧的数位被移出:

十进制二进制
500000000000000000000000000000101
5 >>> 100000000000000000000000000000010 (2)

实例

var x = 5 >>> 1;

32-bit 有符号整数(二进制数)

仅设置一位的 32 位整数很好理解:

二进制表示十进制值
000000000000000000000000000000011
000000000000000000000000000000102
000000000000000000000000000001004
000000000000000000000000000010008
0000000000000000000000000001000016
0000000000000000000000000010000032
0000000000000000000000000100000064

多设置一些数位揭示了二进制的模式:

二进制表示十进制值
000000000000000000000000000001015 (4 + 1)
0000000000000000000000000010100040 (32 + 8)
0000000000000000000000000010110145 (32 + 8 + 4 + 1)

负数是正数的二进制补码加 1:

二进制表示十进制值
000000000000000000000000000001015
11111111111111111111111111111011-5
0000000000000000000000000010100040
11111111111111111111111111011000-40
11111111111111111111111111011001-41

把十进制转换为二进制

实例

function dec2bin(dec){    return (dec >>> 0).toString(2);}

把二进制转换为十进制

实例

function bin2dec(bin){    return parseInt(bin, 2).toString(10);}


JavaScript 通过规定的语句让程序代码有条件的按照一定的方式执行。



条件语句用于基于不同的条件来执行不同的动作。


条件语句

通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中,我们可使用以下条件语句:

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • JavaScript三目运算 - 当条件为true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

只有当指定条件为 true 时,该语句才会执行代码。

语法

if (condition){ 当条件为 true 时执行的代码 }

请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!

实例

当时间小于 20:00 时,生成问候 "Good day":

if (time<20){
  x="Good day";
}
x 的结果是:
Good day

尝试一下 »

请注意,在这个语法中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。


If...else 语句

请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。

语法

if (condition)  {  当条件为 true 时执行的代码 }else{    当条件不为 true 时执行的代码  }

实例

当时间小于 20:00 时,生成问候 "Good day",否则生成问候 "Good evening"。

if (time<20){
  x="Good day";
}
else{
  x="Good evening";
}

x 的结果是:

Good day

尝试一下 »

提示:在本站的编程实战中,你可以练习如何使用JavaScript的if语句



Javascript三目运算(三元运算) 语句

与其他语言类似,JavaScript存在一个用于条件判断的三目(三元)运算符,它的基本使用方式是这样的:对于条件表达式b ? x : y,先计算条件b,然后进行判断。如果b的值为true,计算x的值,运算结果为x的值;否则,计算y的值,运算结果为y的值。一个条件表达式绝不会既计算x,又计算y。条件运算符是右结合的,也就是说,从右向左分组计算。例如,a ? b : c ? d : e将按a ? b : (c ? d : e)执行。
实例
5 > 3 ? alert("5大于3") : alert("5小于3");
注意:if...else与三目运算这两者的区别,总结为一句话:三目运算有返回值,if else没有返回值

例子1:

var n=1;if(n>1){    n=0;}else{    n++;}console.log(n);//输出结果:2var n=1;n = n>1?0 : n++;console.log(n);//输出结果为:1

例子2:

var n=1;if(n>1){    n=0;}else{    ++n;}console.log(n);//输出结果:2var n=1;n = n>1?0 : ++n; console.log(n); //输出结果为:2


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

使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (condition1){  当条件 1 为 true 时执行的代码 }else if (condition2){ 当条件 2 为 true 时执行的代码   }  else{  当条件 1 和 条件 2 都不为 true 时执行的代码  }

实例

如果时间小于 10:00,则生成问候 "Good morning",如果时间大于 10:00 小于 20:00,则生成问候 "Good day",否则生成问候 "Good evening":

if (time<10){
  x="Good morning";
}
else if (time>=10 && time<20){
  x="Good day";
}
else{
  x="Good evening";
}

x 的结果是:

Good morning

尝试一下 »

提示:在使用if、else if语句的时候需要注意它们中代码的执行顺序,具体练习请参考本站的《JavaScript编程实战》


Examples

更多实例

随机链接
这个实例演示了一个链接,当您点击链接时,会带您到不同的地方去。每种机会都是 50% 的概率。

相关阅读

JavaScript标准参考手册:javascript if条件


switch 语句用于在不同的条件执行不同的动作。搭配case和default使用(default可以认为是一个特殊的case,case对应一种或多种(default)情况,Switch语句没有case是没有办法体现其功能的)。


JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。你可以在JavaScript编程实战中了解怎么使用switch语句进行多选项选择

语法

switch(n){    case 1:        执行代码块 1        break;          case 2:              执行代码块 2              break;          default:        n 与 case 1 和 case 2 不同时执行的代码}

代码解释:

  • 计算一次 switch 表达式
  • 把表达式的值与每个case的值进行对比
  • 如果存在匹配,则执行关联代码

工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行,因为默认情况下Switch会按顺序将所有匹配的case(default)执行完毕!

实例

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:

var day=new Date().getDay();
switch (day){
    case 0:
        x="Today it's Sunday";
        break;
    case 1:
        x="Today it's Monday";
        break;
    case 2:
        x="Today it's Tuesday";
        break;
    case 3:
        x="Today it's Wednesday";
        break;
    case 4:
        x="Today it's Thursday";
        break;
    case 5:
        x="Today it's Friday";
        break;
    case 6:
        x="Today it's Saturday";
        break;
}

x 的运行结果:

Today it's Sunday

尝试一下 »

break 关键词

如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配,并完成任务,则随机中断执行(break)。无需更多测试。

break 能够节省大量执行时间,因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

请使用 default 关键词来规定匹配不存在时做的事情(default也是case,是一类特殊的case,即已有case情况外的case):

实例

如果今天不是星期六或星期日,则会输出默认的消息:

var day=new Date().getDay();
switch (day){
    case 6:
        x="Today it's Saturday";
        break;
    case 0:
        x="Today it's Sunday";
        break;
    default:
        x="Looking forward to the Weekend";
}

尝试一下 »

default不必是 switch 代码块中最后一个 case:

实例

switch (new Date().getDay()){

    default: 

        text = "期待周末!";

        break;

    case 6:

        text = "今天是周六";

        break; 

    case 0:

        text = "今天是周日";

}


尝试一下 »

如果 default 不是 switch 代码块中最后一个 case,请记得用 break 结束默认 default。

常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中,case 4 和 5 分享相同的代码块,而 0 和 6 分享另一段代码块:

实例

switch (new Date().getDay()) {

    case 4:

    case 5:

        text = "周末快到了:)";

        break; 

    case 0:

    case 6:

        text = "今天是周末~";

         break;

    default: 

        text = "期待周末!";

}


尝试一下 »

Switching 的细节

如果多种 case 匹配一个 case 值,则选择第一个 case。

如果未找到匹配的 case,程序将继续使用默认 label。

如果未找到默认 label,程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较(===)。

值必须与要匹配的类型相同。

只有操作数属于同一类型时,严格比较才能为 true。

在这个例子中,x 将不匹配:

实例

var x = "0";

switch (x) {

    case 0:

        text = "Off";

        break;

    case 1:

        text = "On";

        break;

    default:

        text = "No value found";

}


尝试一下 »

相关文章

轻松学习JavaScript:JavaScript Switch Case


循环可以将代码块执行指定的次数。


JavaScript 循环

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

我们可以这样输出数组的值:

一般写法:

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

使用for循环

for (var i=0;i<cars.length;i++){
    document.write(cars[i] + "<br>");
}

尝试一下 »


不同类型的循环

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法:

for (语句 1; 语句 2; 语句 3){
  被执行的代码块
}

语句 1 (代码块)开始前执行 starts.

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

实例

for (var i=0; i<5; i++){
  x=x + "The number is " + i + "<br>";
}

尝试一下 »

从上面的例子中,您可以看到:

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件(i 必须小于 5)。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。


语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的,也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意(或者多个)值:

实例:

for (var i=0,len=cars.length; i<len; i++){
    document.write(cars[i] + "<br>");
}

尝试一下 »

同时您还可以省略语句 1(比如在循环开始前已经设置了值时):

实例:

var i=2,len=cars.length;
for (; i<len; i++){
    document.write(cars[i] + "<br>");
}

尝试一下 »


语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。

lamp如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。


语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。

语句 3 也可以省略(比如当循环内部有相应的代码时):

实例:

var i=0,len=cars.length;
for (; i<len; ){
    document.write(cars[i] + "<br>");
    i++;
}

尝试一下 »


For/In 循环

JavaScript for/in 语句循环遍历对象的属性:

实例

var person={fname:"John",lname:"Doe",age:25};
for (x in person){
  txt=txt + person[x];
}

尝试一下 »

提示:在JavaScript中,for in循环不仅可以遍历对象的属性,还可以遍历数组。

您将在有关 JavaScript 对象的章节学到更多有关 for / in 循环的知识。


While 循环

我们将在下一章为您讲解 while 循环和 do/while 循环。


相关实例

使用for语句循环迭代

通过一个for循环语句你可以多次执行代码。

使用for循环逆向迭代

通过for循环可以逆向迭代,只要我们定义好合适的条件。


JavaScript while 循环的目的是为了反复执行语句或代码块。

只要指定条件为 true,循环就可以一直执行代码块。


while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件){ 需要执行的代码}

实例

本例中的循环将继续运行,只要变量 i 小于 5:

实例

while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

尝试一下 »

提示:在本站JavaScript编程实战部分,您可以通过练习来实现使用while语句循环迭代

lamp 如果您忘记增加条件中所用变量的值,该循环永远不会结束。这可能导致浏览器崩溃。


do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。

语法

 do{  需要执行的代码 }while (条件);

实例

下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行:

实例

do{
  x=x + "The number is " + i + "<br>";
  i++;
}while (i<5);

尝试一下 »

别忘记增加条件中所用变量的值,否则循环永远不会结束!


比较 for 和 while

如果您已经阅读了前面那一章关于 for 循环的内容,您会发现 while 循环与 for 循环很像。

本例中的循环使用 for 循环来显示 cars 数组中的所有值:

实例

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
    document.write(cars[i] + "<br>");
    i++;
}

尝试一下 »

本例中的循环使用 while 循环来显示 cars 数组中的所有值:

实例

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
    document.write(cars[i] + "<br>");
    i++;
}

尝试一下 »


break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。


Break 语句

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。

break 语句可用于跳出循环。

continue 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):

实例

for (i=0;i<10;i++){
  if (i==3){
    break;
  }
  x=x + "The number is " + i + "<br>";
}

尝试一下 »

由于这个 if 语句只有一行代码,所以可以省略花括号:

for (i=0;i<10;i++){
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
}

Continue 语句

continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 该例子跳过了值 3:

实例

for (i=0;i<=10;i++){
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

尝试一下 »

注意:由于 break 语句的作用是跳出代码块,所以 break 可以使用于循环和 switch 等;而 continue 语句的作用是进入下一个迭代,所以 continue 只能用于循环的代码块。


JavaScript 标签

正如您在 switch 语句那一章中看到的,可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句,请在语句之前加上冒号:

label:
statements

break 和 continue 语句仅仅是能够跳出代码块的语句。

语法:

break labelname;
continue labelname;

continue 语句(带有或不带标签引用)只能用在循环中。

break 语句(不带标签引用),只能用在循环或 switch 中。

通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:

实例

cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

尝试一下 »

相关文章

轻松学习 JavaScript:JavaScript 循环控制


Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。


JavaScript 数据类型

在 JavaScript 中有 5 不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

实例

typeof "John"                 // 返回 string
typeof3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [ 1,2,3,4]              // 返回 object
typeof {name: 'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar没有被实例化的话)
typeof null                   // 返回 object

尝试一下 »

请注意:

  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object
  • 日期(Date)的数据类型为 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ,我们就无法通过 typeof 来判断他们的类型,因为都是 返回 Object。


constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

实例

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2, 3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function() {}.constructor         // 返回函数 Function(){ [native code] }

尝试一下 »

你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):

实例

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

尝试一下 »

你可以使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):

实例

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

尝试一下 »


JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型:

  • 通过使用 JavaScript 函数
  • 通过 JavaScript 自身自动转换

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字,字母,变量,表达式:

实例

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String( 100+ 23// 将数字表达式转换为字符串并返回

尝试一下 »

Number 方法 toString() 也是有同样的效果。

实例

x.toString()
(123).toString()
(100 + 23).toString()

尝试一下 »

Number 方法 章节中,你可以找到更多数字转换为字符串的方法:

方法描述
toExponential()把对象的值转换为指数计数法。
toFixed()把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision()把数字格式化为指定的长度。


将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

String(false)        // 返回 "false"
String(true)         // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"


将日期转换为字符串

全局方法 String() 可以将日期转换为字符串。

String(Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

实例

Date().toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 章节中,你可以查看更多关于日期转换为字符串的函数:

方法描述
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()从 Date 对象以四位数字返回年份。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。


将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

Number 方法 章节中,你可以查看到更多关于字符串转为数字的方法:

方法描述
parseFloat()解析一个字符串,并返回一个浮点数。
parseInt()解析一个字符串,并返回一个整数。


一元运算符 +

Operator + 可用于将变量转换为数字:

实例

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字

尝试一下 »

如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):

实例

var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

尝试一下 »


将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

Number(false)     // 返回 0
Number(true)      // 返回 1


将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d = new Date();
Number(d)          // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();
d.getTime()        // 返回 1404568027739


自动转换类型 Type Conversion

当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。

以下输出结果不是你所期望的:

5 + null    // 返回 5         because null is converted to 0
"5" + null  // 返回"5null"   because null is converted to "null"
"5" + 1     // 返回 "51"      because 1 is converted to "1" 
"5" - 1     // 返回 4         because "5" is converted to 5


自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换:

// if myVar = 123             // toString 转换为 "123"
// if myVar = true            // toString 转换为 "true"
// if myVar = false           // toString 转换为 "false"

null

在 JavaScript 中 null 表示 "什么都没有",是一个只有一个值的特殊类型,表示一个空对象引用。

当设置为“null”时,可以用来清空对象:

var person = null; // 值为 null(空), 但类型为对象

提示:你可以使用 typeof 检测 null 返回是object。


undefined

在 JavaScript 中 undefined 是一个没有设置值的变量。

如果一个变量没有设置值的话,就会返回 undefined:

var person; // 值为 undefined(空), 类型是undefined

相关文章

JavaScript标准参考教程:JavaScript 数据类型转换


正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。


什么是正则表达式?

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符,或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

实例:

var patt = /51coolma/i

实例解析:

/51coolma/i  是一个正则表达式。

51coolma  是一个模式 (用于检索)。

i  是一个修饰符 (搜索不区分大小写)。


使用字符串方法

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子字符串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子字符串


search() 方法使用正则表达式

实例

使用正则表达式搜索 "51coolma" 字符串,且不区分大小写:

var str = "Visit 51coolma";
var n = str.search(/51coolma/i);

输出结果为:

6

尝试一下 »


search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式:

实例

检索字符串中 "51coolma" 的子字符串:

var str = "Visit 51coolma!";
var n = str.search("51coolma");

尝试一下 »


replace() 方法使用正则表达式

实例

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 51coolma :

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "51coolma");

结果输出为:

Visit 51coolma!

尝试一下 »

replace() 方法使用字符串

replace() 方法将接收字符串作为参数:

var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "51coolma");

尝试一下 »


你注意到了吗?

Note正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

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

正则表达式模式

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

表达式描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(x|y)查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符描述
d查找数字。
s查找空白字符。
匹配单词边界。
uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。


使用 RegExp 对象

在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。


使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

以下实例用于搜索字符串中的字符 "e":

实例

var patt = /e/;
patt.test("The best things in life are free!");

字符串中含有 "e",所以该实例输出为:

true

尝试一下 »

你可以不用设置正则表达式的变量,以上两行代码可以合并为一行:

/e/.test("The best things in life are free!")


使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

Example 1

/e/.exec("The best things in life are free!");

字符串中含有 "e",所以该实例输出为:

e

尝试一下 »



使用 compile()

compile() 方法用于改变 RegExp。

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

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

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

truefalse

完整的 RegExp 参考手册

完整的 RegExp 对象参考手册,请参考我们的 JavaScript RegExp 参考手册

该参考手册包含了所有 RegExp 对象的方法和属性。

如果你想知道有哪些js常用的正则表达式,请参考 js 实战手册。


JavaScript正则表达式在线测试工具

JavaScript正则表达式在线测试工具



JavaScript 正则表达式学习导图


throw、try 和 catch


try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。


 JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:

可能是语法错误,通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然,也可能是由于许多其他不可预知的因素。


JavaScript 抛出(throw)错误

当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。

描述这种情况的技术术语是:JavaScript 将抛出一个错误。


JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 trycatch 是成对出现的。

语法

 try{   //在这里运行代码}catch(err){   //在这里处理错误}

实例

在下面的例子中,我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误,并执行代码来处理它。

实例

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message(){
    try{
      adddlert("Welcome guest!");
    }catch(err){
      txt="本页有一个错误。 ";
      txt+="错误描述:" + err.message + " ";
      txt+="点击确定继续。 ";
      alert(txt);
    }
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()">
</body>
</html>

尝试一下 »

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是:创建或抛出异常(exception)。

如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

语法

 throw exception 

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

实例

<script>
function myFunction(){
    try{
      var x=document.getElementById("demo").value;
      if(x=="")    throw "empty";
      if(isNaN(x)) throw "not a number";
      if(x>10)     throw "too high";
      if(x<5)      throw "too low";
    }catch(err){
      var y=document.getElementById("mess");
      y.innerHTML="Error: " + err + ".";
    }
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

尝试一下 »

请注意,如果 getElementById 函数出错,上面的例子也会抛出一个错误。

相关文章

JavaScript标准参考手册:JavaScript 错误处理机制


在编写 JavaScript 时,如果没有调试工具将是一件很痛苦的事情。


JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。

通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。

Note 通常,你在编写一个新的 JavaScript 代码过程中都会发生错误。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难,但幸运的是,很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

有了调试工具,我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。


console.log() 方法

如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值:

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

尝试一下 »


设置断点

在调试窗口中,你可以设置 JavaScript 代码的断点。

在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。

在检查完毕后,可以重新执行代码(如播放按钮)。


debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用,debugger 语句将无法工作。

开启 debugger ,代码在第三行前停止执行。

实例

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

尝试一下 »


主要浏览器的调试工具

通常,浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

各浏览器的步骤如下:

Chrome 浏览器

  • 打开浏览器。
  • 在菜单中选择工具。
  • 在工具中选择开发者工具。
  • 最后,选择 Console。

Firefox 浏览器

  • 打开浏览器。
  • 访问页面:
    http://www.getfirebug.com。
  • 按照说明 :
    安装 Firebug。

Internet Explorer 浏览器。

  • 打开浏览器。
  • 在菜单中选择工具。
  • 在工具中选择开发者工具。
  • 最后,选择 Console。

Opera

  • 打开浏览器。
  • Opera 的内置调试工具为 Dragonfly,详细说明可访问页面:
    http://www.opera.com/dragonfly/。

Safari

  • 打开浏览器。
  • 访问页面:
    http://extentions.apple.com。
  • 按说明操作:
    install Firebug Lite。

扩展阅读

Firebug教程:使用Firebug调试JavaScript


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

表单数据经常需要使用 JavaScript 来验证其正确性:

  • 验证表单数据是否为空?
  • 验证输入是否是一个正确的email地址?
  • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

必填(或必选)项目

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

function validateForm() {            var x=document.forms["myForm"]["fname"].value;            if (x==null || x==""){                alert("First name must be filled out");                return false;            }        }

以上函数在 form 表单提交时被调用:

实例

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

尝试一下 »


E-mail 验证

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

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

function validateForm(){        var x=document.forms["myForm"]["email"].value;        var atpos=x.indexOf("@");        var dotpos=x.lastIndexOf(".");        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){          alert("Not a valid e-mail address");          return false;          }       }

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

实例

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

尝试一下 »

数字验证

下面的函数检查输入的数据是否是1~10之间的数字。假如输入的不为数字或不是,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

实例

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 

<strong>请输入1到10之间的数字:</strong>

<input id="number">

<button type="button" onclick="myFunction()">提交</button>

</form>


尝试一下 »

相关文章

JavaScript标准参考教程:JavaScript 表单


保留关键字在意思上表达成为将来的关键字而保留的单词。

在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名。


JavaScript 标准

所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript 的第三版,从 1999 年开始)。

ECMAScript 4(ES4)未通过。

ECMAScript 5(ES5,2009 年发布),是 JavaScript 最新的官方版本。

随着时间的推移,我们开始看到,所有的现代浏览器已经完全支持 ES5。


JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

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

* 标记的关键字是 ECMAScript5 中新添加的。


JavaScript 对象、属性和方法

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名:

Array Date eval function hasOwnProperty
Infinity isFinite isNaN isPrototypeOf length
Math NaN name Number Object
prototype String toString undefined valueOf


Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符:

getClass java JavaArray javaClass JavaObject JavaPackage


Windows 保留关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。

在 HTML 中,您必须(为了可移植性,您也应该这么做)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名:

alert all anchor anchors area
assign blur button checkbox clearInterval
clearTimeout clientInformation close closed confirm
constructor crypto decodeURI decodeURIComponent defaultStatus
document element elements embed embeds
encodeURI encodeURIComponent escape event fileUpload
focus form forms frame innerHeight
innerWidth layer layers link location
mimeTypes navigate navigator frames frameRate
hidden history image images offscreenBuffering
open opener option outerHeight outerWidth
packages pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin prompt
propertyIsEnum radio reset screenX screenY
scroll secure select self setInterval
setTimeout status submit taint text
textarea top unescape untaint window


HTML 事件句柄

除此之外,您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。

实例:

onblur onclick onerror onfocus
onkeydown onkeypress onkeyup onmouseover
onload onmouseup onmousedown onsubmit

注意:在JavaScript中关键字不能用作变量名或者函数名,否则可能会得到错误消息,例如“"Identifier Expected"(应该有标识符、期望标识符)”。



非标准 JavaScript

除了保留关键字,在 JavaScript 实现中也有一些非标准的关键字。

一个实例是 const 关键字,用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。

Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。建议:不要使用它


JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。


什么是 JSON?

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言 *
  • JSON 易于理解。

Note* JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。

JSON 实例

以下 JSON 语法定义了 employees 对象: 3 条员工记录(对象)的数组:

JSON Example

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}


JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。


JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。

键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"firstName":"John"

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对:

{"firstName":"John", "lastName":"Doe"}

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象:

"employees":[            {"firstName":"John", "lastName":"Doe"},            {"firstName":"Anna", "lastName":"Smith"},         {"firstName":"Peter", "lastName":"Jones"}        ]

在以上实例中,对象 "employees" 是一个数组。包含了三个对象。

每个为个对象为员工的记录(姓和名)。


JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据,并在网页中显示数据。

简单起见,我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后,在你的页面中使用新的 JavaScript 对象:

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

尝试一下 »

更多 JSON 信息,你可以阅读我们的 JSON 教程


我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢?

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。

下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。

实例

<a href="javascript:void(0)">单击此处什么也不会发生</a>

尝试一下 »

当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

以下实例中,在用户点击链接后显示警告信息:

实例

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

尝试一下 »

以下实例中参数 a 将返回 undefined :

实例

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

尝试一下 »

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

如果你要定义一个死链接请使用 javascript:void(0) 。

实例

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p>

尝试一下 »

注意:void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行


相关文章

javascript百科大全:javascript:;与javascript:void(0)使用介绍


所有的 JavaScript 项目适用同一种规范。


JavaScript 代码规范

代码规范通常包括以下几个方面:

  • 变量和函数的命名规则
  • 空格,缩进,注释的使用规则。
  • 其他常用规范……

规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定,可以跟你的团队成员来协商设置。


变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName = "John";lastName = "Doe";price = 19.90;tax = 0.20;fullPrice = price + (price * tax);

在JavaScript中定义变量名时,还应该注意以下事项:

  • 变量名应该区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号;
  • 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型;
  • 变量名的命名应该是有意义的;
  • 变量名不能为JavaScript中的关键词、保留字全名;
  • 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

var x = y + z;var values = ["Volvo", "Saab", "Fiat"];

代码缩进

通常使用 4 个空格符号来缩进代码块:

函数:

function toCelsius(fahrenheit) {    return (5 / 9) * (fahrenheit - 32);}

注意:不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。


语句规则

简单语句的通用规则:

  • 一条语句通常以分号作为结束符。

实例:

var values = ["Volvo", "Saab", "Fiat"];var person = {    firstName: "John",    lastName: "Doe",    age: 50,    eyeColor: "blue"};

复杂语句的通用规则:

  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要忘记以分号结束一个复杂的声明。

 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

函数:

function toCelsius(fahrenheit) {    return (5 / 9) * (fahrenheit - 32);}

循环:

for (i = 0; i < 5; i++) {    x += i;}

条件语句:

if (time < 20) {    greeting = "Good day";} else {    greeting = "Good evening";}

对象规则

对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号,数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行,并以分号作为结束符号。

实例:

var person = {    firstName: "John",    lastName: "Doe",    age: 50,    eyeColor: "blue"};

短的对象代码可以直接写成一行:

实例:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。

实例:

实例:

document.getElementById("demo").innerHTML =
    "Hello W3Cschool.";

尝试一下 »

注意:在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 前换行。


命名规则

一般很多代码语言的命名规则都是类似的,例如:

  • 变量和函数为驼峰法( camelCase
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则: hyp-hens, camelCase, 或under_scores ?

HTML 和 CSS 的横杠(-)字符:

HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。

CSS 使用 - 来连接属性名 (font-size)。


注意:- 通常在 JavaScript 中被认为是减法,所以不允许使用。


下划线:

很多程序员比较喜欢使用下划线(如:date_of_birth), 特别是在 SQL 数据库中。

PHP 语言通常都使用下划线。

帕斯卡拼写法(PascalCase):

帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法:

JavaScript 中通常推荐使用驼峰法,jQuery 及其他 JavaScript 库都使用驼峰法。


注意:变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。



HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj =getElementById("Demo")
var obj = getElementById("demo")

尝试一下 »

HTML 与 JavaScript 尽量使用相同的命名规则。

访问 HTML(5) 代码规范


文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css

JavaScript 文件后缀是 .js


使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格,我们建议统一使用小写的文件名。

学完本教程之后,W3Cschool推荐您进行实战练习来巩固自己的知识:javascript实战


JavaScript 格式化整理工具

在线JavaScript 格式化整理工具

 


相关阅读

前端编码规范:JavaScript 规范


JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义,也可以是一个表达式。


函数声明

在之前的教程中,你已经了解了函数声明的语法 :

函数声明后不会立即执行,会在我们需要的时候调用到。

实例

function myFunction(a, b) {
    return a * b;
}

尝试一下 »

Note分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句,所以不以分号结束。

函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中:

实例

var x = function (a, b) {return a * b};

尝试一下 »

在函数表达式存储在变量后,变量也可作为一个函数使用:

实例

var x = function (a, b) {return a * b};
var z = x(4, 3);

尝试一下 »

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中,不需要函数名称,通常通过变量名来调用。

Note上述函数以分号结尾,因为它是一个执行语句。


Function() 构造函数

在以上实例中,我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

实例

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

尝试一下 »

实际上,你不必使用构造函数。上面实例可以写成:

实例

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

尝试一下 »
Note在 JavaScript 中,很多时候,你需要避免使用 new 关键字。


函数提升(Hoisting)

在之前的教程中我们已经了解了 "hoisting(提升)"。

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升(Hoisting)应用在变量的声明与函数的声明。

因此,函数可以在声明之前调用:

myFunction(5);               function myFunction(y) {            return y * y;        }

使用表达式定义函数时无法提升。


自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

不能自调用声明的函数。

通过添加括号,来说明它是一个函数表达式:

实例

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

尝试一下 »

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。


函数可作为一个值使用

JavaScript 函数作为一个值使用:

实例

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3);

尝试一下 »

JavaScript 函数可作为表达式使用:

实例

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;

尝试一下 »


函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但,JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性 方法

arguments.length 属性返回函数调用过程接收到的参数个数:

实例

function myFunction(a, b) {
    return arguments.length;
}

尝试一下 »

toString() 方法将函数作为一个字符串返回:

实例

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

尝试一下 »
Note函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。

JavaScript 函数练习

JavaScript 函数定义

在 JavaScript 中把代码的重复部分抽取出来,放到一个函数(functions)中。

JavaScript 定义带参数函数

JavaScript函数的参数parameters充当占位符(也叫形参)的作用,参数可以为一个或多个。调用一个函数时所传入的参数为实参,实参决定着形参真正的值。 


JavaScript 函数对参数的值(arguments)没有进行任何的检查。

JavaScript 函数参数与大多数其他语言的函数参数的区别在于:它不会关注有多少个参数被传递,不关注传递的参数的数据类型。


函数显式参数与隐藏参数(arguments)

在先前的教程中,我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) {
    code to be executed
}

函数显式参数在函数定义时列出。

函数隐藏参数(arguments)在函数调用时传递给函数真正的值。


参数规则

JavaScript 函数定义时参数没有指定数据类型。

JavaScript 函数对隐藏参数(arguments)没有进行检测。

JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。


默认参数

如果函数在调用时缺少参数,参数会默认设置为: undefined

有时这是可以接受的,但是建议最好为参数设置一个默认值:

实例

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    }
}

尝试一下 »

或者,更简单的方式:

实例

function myFunction(x, y) {
    y = y || 0;
}

尝试一下 »
Note 如果y已经定义 , y || 0返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。


Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象.

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最后一个参数的值:

实例

x = findMax(1, 123, 500, 115, 44, 88);


function findMax() {

    var i, max = arguments[0];


    if(arguments.length < 2)return max;


    for (i = 0; i < arguments.length; i++) {

        if (arguments[i] > max) {

            max = arguments[i];

        }

    }

    return max;

}


尝试一下 »

或者创建一个函数用来统计所有数值的和:

实例

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

尝试一下 »


通过值传递参数

在函数中调用的参数是函数的参数。

如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。

总结:JavaScript函数传值只是将参数的值传入函数,函数会另外配置内存保存参数值,所以并不会改变原参数的值。

实例

var x = 1;// 通过值传递参数function myFunction(x) {    x++; //修改参数x的值,将不会修改在函数外定义的变量 x    console.log(x);}myFunction(x); // 2console.log(x); // 1

通过对象传递参数

在JavaScript中,可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部(全局变量)。

实例

var obj = {x:1};// 通过对象传递参数function myFunction(obj) {    obj.x++; //修改参数对象obj.x的值,函数外定义的obj也将会被修改    console.log(obj.x);}myFunction(obj); // 2console.log(obj.x); // 2

提示:你可以在本站的JavaScript编程实战中练习使用JavaScript函数参数!


JavaScript 函数有 4 种调用方式。

每种方式的不同在于 this 的初始化。


this 关键字

一般而言,在Javascript中,this指向函数执行时的当前对象。

Note 注意 this 是保留关键字,你不能修改 this 的值。

提示:本站的《深入理解 JavaScript》中的 this 关键字一节你可以学到更多与JavaScript this 关键字相关的内容!



调用 JavaScript 函数

在之前的章节中我们已经学会了如何创建函数。

函数中的代码在函数被调用后执行。


作为一个函数调用

实例

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

尝试一下 »

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

myFunction() 和 window.myFunction() 是一样的:

实例

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

尝试一下 »
Note 这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时, this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

实例

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

尝试一下 »
Note 函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstNamelastName), 及一个方法 (fullName):

实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

尝试一下 »

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

测试一下!修改 fullName 方法并返回 this 值:

实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

尝试一下 »
Note 函数作为对象方法调用,会使得 this 的值成为对象本身。

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:

实例

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

尝试一下 »

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

Note 构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call()apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

实例

function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

实例

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

Note 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。


JavaScript 变量可以是局部变量或全局变量。

私有变量可以用到闭包。


全局变量

函数可以访问函数内部定义的变量,如:

实例

function myFunction() {
    var a = 4;
    return a * a;
}

尝试一下 »

函数也可以访问函数外部定义的变量,如:

实例

var a = 4;
function myFunction() {
    return a * a;
}

尝试一下 »

后面一个实例中, a 是一个 全局 变量。

在web页面中全局变量属于 window 对象。

全局变量可应用于页面上的所有脚本。

在第一个实例中, a 是一个 局部 变量。

局部变量只能用于定义它函数内部。对于其他的函数或脚本代码是不可用的。

全局和局部变量即便名称相同,它们也是两个不同的变量。修改其中一个,不会影响另一个的值。

Note 变量声明是如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。

提示:请在JavaScript编程实战中练习如何定义JavaScript函数的全局变量



变量生命周期

全局变量的作用域是全局性的,即在整个JavaScript程序中,全局变量处处都在。

而在函数内部声明的变量,只在函数内部起作用。这些变量是局部变量,作用域是局部性的;函数的参数也是局部性的,只在函数内部起作用。


计数器困境

设想下如果你想统计一些数值,且该计数器在所有函数中都是可用的。

你可以使用全局变量,函数设置计数器递增:

实例

var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// 计数器现在为 3

尝试一下 »

计数器数值在执行 add() 函数时发生变化。

但问题来了,页面上的任何脚本都能改变计数器,即便没有调用 add() 函数。

如果我在函数内声明计数器,如果没有调用函数将无法修改计数器的值:

实例

function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// 本意是想输出 3, 但事与愿违,输出的都是 1 !

尝试一下 »

以上代码将无法正确输出,每次我调用 add() 函数,计数器都会设置为 1。

JavaScript 内嵌函数可以解决该问题。


JavaScript 内嵌函数

所有函数都能访问全局变量。  

实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:

实例

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}

尝试一下 »

如果我们能在外部访问 plus() 函数,这样就能解决计数器的困境。

我们同样需要确保 counter = 0 只执行一次。

我们需要闭包。


JavaScript 闭包

还记得函数自我调用吗?该函数会做什么?

实例

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

尝试一下 »

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护,只能通过 add 方法修改。

Note 闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。

相关文章参考

JavaScript学习笔记:学习Javascript闭包


通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。


HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,你可以访问所有的 HTML 元素,连同它们所包含的文本和属性。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

HTML DOM 模型被构造为对象的树:

HTML DOM 树

DOM HTML tree

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

本例查找 id="intro" 元素:

实例

var x=document.getElementById("intro");

尝试一下 »

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。


通过标签名查找 HTML 元素

本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:

实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

尝试一下 »


通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:

实例

var x=document.getElementsByClassName("intro");

尝试一下 »


HTML DOM 教程

在本教程接下来的篇幅中,您将学到:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加或删除 HTML 元素

相关教程

JavaScript 和 HTML DOM 参考手册

javascript DOM知识脑图



HTML DOM 允许 JavaScript 改变 HTML 元素的内容。


改变 HTML 输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

尝试一下 »

lamp绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。


改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

本例改变了 <p>元素的内容:

实例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

尝试一下 »

本例改变了 <h1> 元素的内容:

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

尝试一下 »

实例讲解:

  • 上面的 HTML 文档含有 id="header" 的 <h1> 元素


  • 我们使用 HTML DOM 来获得 id="header" 的元素


  • JavaScript 更改此元素的内容 (innerHTML)



改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value

本例改变了 <img> 元素的 src 属性:

实例

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

尝试一下 »

实例讲解:

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素

  • 我们使用 HTML DOM 来获得 id="image" 的元素

  • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")


HTML DOM 允许 JavaScript 改变 HTML 元素的样式。


改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style 

下面的例子会改变 <p> 元素的样式:

实例

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

尝试一下 »

本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

尝试一下 »


更多实例

Visibility
如何使元素不可见。您希望元素显示或消失吗?


参考文章

JavaScript 和 HTML 参考手册:Style 对象


HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

实例

Mouse Over Me
Click Me


对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript 

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

实例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

尝试一下 »

本例从事件处理器调用一个函数:

实例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
    <h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

尝试一下 »


HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

实例

向 button 元素分配 onclick 事件:

<button onclick="displayDate()">点我</button>

尝试一下 »

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。


使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:

实例

向 button 元素分配 onclick 事件:

document.getElementById("myBtn").onclick=function(){displayDate()};

尝试一下 »

在上面的例子中,名为 displayDate 的函数被分配给 id=myBtn" 的 HTML 元素。

按钮点击时Javascript函数将会被执行。


onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

实例

<body onload="checkCookies()">

尝试一下 »


onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

实例

<input type="text" id="fname" onchange="upperCase()">

尝试一下 »


onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例

一个简单的 onmouseover-onmouseout 实例:

Mouse Over Me

尝试一下 »


onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

实例

一个简单的 onmousedown-onmouseup 实例:

Thank You

尝试一下 »


更多实例

onmousedown 和onmouseup
当用户按下鼠标按钮时,更换一幅图像。

onload
当页面完成加载时,显示一个提示框。

onfocus
当输入字段获得焦点时,改变其背景色。

鼠标事件
当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。


相关知识

JavaScript 和 HTML 参考手册:HTML DOM事件对象


通过JavaScript,我们可以给页面的某些元素添加事件的监听器,当元素触发相应事件的时候监听器就会捕捉到这个事件并执行相应的代码。

addEventListener() 方法

实例

当用户点击按钮时触发监听事件:

document.getElementById("myBtn").addEventListener("click", displayDate);

尝试一下 »

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。


语法

 element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

Note注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。


向原元素添加事件句柄

实例

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

尝试一下 »

你可以使用函数名,来引用外部函数:

实例

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

尝试一下 »


向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:

实例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

尝试一下 »

你可以向同个元素添加不同类型的事件:

实例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

尝试一下 »

提示:你可以在本站的 HTML DOM addEventListener() 方法部分获得更多有关addEventListener()方法的信息!



向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。

实例

当用户重置窗口大小时添加事件监听:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

尝试一下 »


传递参数

当传递参数值时,使用"匿名函数"调用带参数的函数:

实例

element.addEventListener("click", function(){ myFunction(p1, p2); });

尝试一下 »


事件冒泡或事件捕获?

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在冒泡中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕传递。

实例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

尝试一下 »

提示:DOM事件流同时支持两种事件模型:捕获型事件和冒泡型事件,捕获型事件首先发生。捕获型事件和冒泡型事件会触及DOM中的所有对象,从document对象开始,也在document对象结束。


removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

实例

element.removeEventListener("mousemove", myFunction);

尝试一下 »


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法     
addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器,除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

尝试一下 »


HTML DOM 事件对象参考手册

所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册


创建新的 HTML 元素

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性,分别是:

  1. nodeName : 节点的名称
  2. nodeValue :节点的值
  3. nodeType :节点的类型


创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

 实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

尝试一下 »


例子解析: 

这段代码创建新的<p> 元素:

var para=document.createElement("p");

如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("This is a new paragraph.");

然后您必须向 <p> 元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素:

element.appendChild(para);


删除已有的 HTML 元素

以下代码将已有的元素删除:

实例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


尝试一下 »


实例解析 

这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

找到 id="div1" 的元素:

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素:

var child=document.getElementById("p1");

从父元素中删除子元素:

parent.removeChild(child);

lamp 如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);


HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件作出反应
  • 如何添加或删除 HTML 元素

如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识,请访问我们完整的 HTML DOM 教程


JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。


所有事物都是对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

JavaScript 对象

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


访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值将是:

12


访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法:

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值将是:

HELLO WORLD!


创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

  • 定义并创建对象的实例
  • 使用函数来定义对象,然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

尝试一下 »

替代语法(使用对象 literals):

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

尝试一下 »
提示:

你可以在本站的JavaScript编程实战中练习使用

JavaScript对象操作


使用对象构造器

本例使用函数来构造对象:

实例

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

尝试一下 »

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)


创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");


把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性:

假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

在以上代码执行后,x 的值将是:

John


把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

现在您可以试一下:

myMother.changeName("Doe");

尝试一下 »

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。


JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object)
{
  code to be executed
}

注意: for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性:

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

尝试一下 »
下面给出一个完整简易的dictionary实现。注意其外部使用了function,内部使用了Object对象的动态添加属性的一些特性。

请仔细研究并考察其用法:尝试一下 »

相关文章

轻松学习 JavaScript:JavaScript 对象概述

JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象,由 Number() 构造器创建。

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。


JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写:

实例

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

极大或极小的数字可通过科学(指数)计数法来写:

实例

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123


所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324

值 (aka Fraction/Mantissa)指数Sign
52 bits (0 - 51) 11 bits (52 - 62)1 bit (63)


精度

整数(不使用小数点或指数计数法)最多为 15 位。

小数的最大位数是 17,但是浮点运算并不总是 100% 准确:

实例

var x = 0.2+0.1; // result will be 0.30000000000000004

尝试一下 »


八进制和十六进制

如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

实例

var y = 0377;
var z = 0xFF;

尝试一下 »

lamp绝不要在数字前面写零,除非您需要进行八进制转换。 

默认情况下,JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

实例

var myNumber=128;
myNumber.toString(16);   // returns 80
myNumber.toString(8);    // returns 200
myNumber.toString(2);    // returns 10000000

尝试一下 »


无穷大(Infinity)

当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。

实例

myNumber=2;
while (myNumber!=Infinity)
{
myNumber=myNumber*myNumber; // Calculate until Infinity
}

尝试一下 »

除以0也产生了无限:

实例

var x = 2/0;
var y = -2/0;

尝试一下 »


NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

实例

var x = 1000 / "Apple";
isNaN(x); // returns true
var y = 100 / "1000";
isNaN(y); // returns false

尝试一下 »

除以0是无穷大,无穷大是一个数字:

实例

var x = 1000 / 0;
isNaN(x); // returns false

尝试一下 »

提示:在 JavaScript 中,如果参数无法被转换为数字,则返回 NaN。



数字可以是数字或者对象

数字可以私有数据进行初始化,就像 x = 123;

JavaScript 数字对象初始化数据, var y = new Number(123);

实例

var x = 123;
var y = new Number(123);
typeof(x) // returns Number
typeof(y) // returns Object

尝试一下 »

实例

var x = 123;             
var y = new Number(123);
(x === y) // is false because x is a number and y is an object.

尝试一下 »


数字属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY
  • NaN
  • prototype
  • constructor

数字方法

  • toExponential()
  • toFixed()
  • toPrecision()
  • toString()
  • valueOf()

相关文章

JavaScript 和 HTML DOM 参考手册:JavaScript Number 对象


 String 对象用于处理已有的字符块。


JavaScript 字符串

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号:

实例

var carname="Volvo XC60";
var carname='Volvo XC60';

你使用位置(索引)可以访问字符串中任何的字符:

实例

var character=carname[7];

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

你可以在字符串中使用引号,如下实例:

实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

或者你可以在字符串中使用转义字符()使用引号:

实例

var answer='It's alright';
var answer="He is called "Johnny"";

尝试一下 »


字符串(String)

字符串(String)使用长度属性length来计算字符串的长度:

实例

var txt="Hello World!";
document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);

尝试一下 »

JavaScript 获取字符串的长度:通过在字符串变量或字符串后面写上 .length 来获得变量中string (字符串)值的长度。


在字符串中查找字符串

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:

实例

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");

尝试一下 »

如果没找到对应的字符函数返回-1

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。



内容匹配

match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

实例

var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));

尝试一下 »


替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

实例

str="Please visit Microsoft!"
var n=str.replace("Microsoft","51coolma");

尝试一下 »


字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

实例

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 is txt converted to upper
var txt2=txt.toLowerCase();   // txt2 is txt converted to lower

尝试一下 »


字符串转为数组

字符串使用string>split()函数转为数组:

实例

txt="a,b,c,d,e"   // String
txt.split(",");   // Split on commas
txt.split(" ");   // Split on spaces
txt.split("|");   // Split on pipe 

尝试一下 »


特殊字符

Javascript 中可以使用反斜线()插入特殊符号,如:撇号,引号等其他特殊符号。

查看如下 JavaScript 代码:

var txt="We are the so-called "Vikings" from the north.";document.write(txt);

在JavaScript中,字符串的开始和停止使用单引号或双引号。这意味着,上面的字符串将被切成: We are the so-called

解决以上的问题可以使用反斜线来转义引号:

var txt="We are the so-called "Vikings" from the north.";document.write(txt);

JavaScript将输出正确的文本字符串:We are the so-called "Vikings" from the north.

下表列出其他特殊字符,可以使用反斜线转义特殊字符:

代码输出
'单引号
"双引号
斜杆
换行
回车
tab
空格
f换页


字符串属性和方法

属性:

  • length
  • prototype
  • constructor

方法:

  • charAt()
  • charCodeAt()
  • concat()
  • fromCharCode()
  • indexOf()
  • lastIndexOf()
  • match()
  • replace()
  • search()
  • slice()
  • split()
  • substr()
  • substring()
  • toLowerCase()
  • toUpperCase()
  • valueOf()

相关文章

JavaScript 和 HTML DOM 参考手册:JavaScript String 对象



JavaScript 字符串函数学习脑图


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


Examples

在线实例

返回当日的日期和时间
如何使用 Date() 方法获得当日的日期。

getFullYear()
使用 getFullYear() 获取年份。

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

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

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

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

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


完整的 Date 对象参考手册

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

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


创建日期

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

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

有四种方式初始化日期:

new Date() // 当前日期和时间        new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数        new Date(dateString)        new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。

从 1970 年 1 月 1 日通用一天计算为86,400,000毫秒

实例化一个日期的一些例子:

var today = new Date()        var d1 = new Date("October 13, 1975 11:13:00")        var d2 = new Date(79,5,24)        var d3 = new Date(79,5,24,11,33,0)

设置日期

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

在下面的例子中,我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日):

var myDate=new Date();        myDate.setFullYear(2010,0,14);

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

var myDate=new Date();        myDate.setDate(myDate.getDate()+5);

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


两个日期比较

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

下面的代码将当前日期与 2100 年 1 月 14 日做了比较:

var x=new Date();        x.setFullYear(2100,0,4);        var today = new Date();                if (x>today){          alert("Today is before 14th January 2100");        }        else{          alert("Today is after 14th January 2100");        }


相关阅读

轻松学习 JavaScript:JavaScript 日期对象


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

参数

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

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

返回值

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

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

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

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

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


Array 对象属性

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

Examples

在线实例

创建数组, 为其赋值:

实例

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

尝试一下 »

页面底部你可以找到更多的实例。

提示:在JavaScript数组中,第一个数组元素的索引值为 0,第二个索引值为 1,依次类推。


什么是数组?

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

如果你有一组数据(例如:车名字),存在单独变量如下所示:

var car1="Saab";var car2="Volvo";var car3="BMW";

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!

最好的方法就是用数组。

数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。


创建一个数组

创建一个数组,有三种方法。

下面的代码定义了一个名为 myCars的数组对象:

1: 常规方式:

var myCars=new Array();myCars[0]="Saab";      myCars[1]="Volvo";     myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

提示:你可以通过本站的JavaScript编程实战来练习如何创建JavaScript数组


访问数组

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

以下实例可以访问myCars数组的第一个值:

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";
lamp[0] 是数组的第一个元素。[1] 是数组的第二个元素。


在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此,你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;      myArray[1]=myFunction;myArray[2]=myCars;

数组方法和属性

使用数组对象预定义属性和方法:

var x=myCars.length             // the number of elements in myCars var y=myCars.indexOf("Volvo")   // the index position of "Volvo"

完整的数组对象参考手册

你可以参考本站关于数组的所有属性和方法的完整参考手册。

参考手册包含了所有属性和方法的描述(和更多的例子)。

完整数组对象参考手册


创建新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

实例:创建一个新的方法。

Array.prototype.ucase=function(){
   for (i=0;i<this.length;i++){
      this[i]=this[i].toUpperCase();
   }
}

尝试一下 »

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。


Examples

更多实例

合并两个数组 - concat()

合并三个数组 - concat()

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

删除数组的最后一个元素 - pop()

数组的末尾添加新的元素 - push()

将一个数组中的元素的顺序反转排序 - reverse()

删除数组的第一个元素 - shift()

从一个数组中选择元素 - slice()

数组排序(按字母顺序升序)- sort()

数字排序(按数字顺序升序)- sort()

数字排序(按数字顺序降序)- sort()

在数组的第2位置添加一个元素 - splice()

转换数组到字符串 -toString()

在数组的开头添加新元素 - unshift()


JavaScript 数组知识图



Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false),是三种包装对象:Number、String和Boolean中最简单的一种,它没有大量的实例属性和方法。


Examples

在线实例

检查布尔值
检查布尔对象是 true 还是 false。


完整的 Boolean(布尔) 对象参考手册

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

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


创建 Boolean 对象

Boolean 对象代表两个值:"true" 或者 "false"

下面的代码定义了一个名为 myBoolean 的布尔对象:

 var myBoolean=new Boolean();

如果布尔对象无初始值或者其值为:

  • 0
  • -0
  • null
  • ""
  • false
  • undefined
  • NaN

那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

相关练习

你可以在本站的JavaScript编程实战中练习使用JavaScript布尔boolean数据类型


Math(算数)对象的作用是:执行常见的算数任务。


Examples

在线实例

round()
如何使用 round()。

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

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

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


完整的 Math 对象参考手册

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

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


Math 对象

Math(算数)对象的作用是:执行普通的算数任务。

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

使用Math的属性/方法的语法:

var x=Math.PI;var y=Math.sqrt(16);

注意: Math对象无需在使用这个对象之前对它进行定义。

提示: Math 对象不能使用 new 关键字创建对象实例。直接用 “对象名.成员”的格式来访问其属性或者方法。


算数值

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

你可以参考如下Javascript常量使用方法:

Math.EMath.PIMath.SQRT2Math.SQRT1_2Math.LN2Math.LN10Math.LOG2EMath.LOG10E

算数方法

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

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

document.write(Math.round(4.7));

上面的代码输出为:

5

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

document.write(Math.random());

上面的代码输出为:

0.6581708136621066

你也可以在JavaScript编程实战中练习使用random()生成随机小数

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

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

上面的代码输出为:

8


RegExp:是正则表达式(regular expression)的简写。

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


完整 RegExp 对象参考手册

请查看我们的 JavaScript RegExp 对象的参考手册,其中提供了可以与字符串对象一同使用的所有的属性和方法。

这个手册包含的关于每个属性和方法的用法的详细描述和实例。


什么是 RegExp?

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

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

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

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

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

语法

var patt=new RegExp(pattern,modifiers);        

另一种更简单的方式:

var patt=/pattern/modifiers;
  • 模式描述了一个表达式模型。
  • 修饰符描述了检索是否是全局,区分大小写等。

RegExp 修饰符

修饰符用于执行不区分大小写和全文的搜索。

i - 修饰符是用来执行不区分大小写的匹配。

g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。

实例 1

在字符串中不区分大小写找"W3CSchool"

var str="Visit W3CSchool";
var patt1=/51coolma/i;

以下标记的文本是获得的匹配的表达式:

W3CSchool

尝试一下 »

实例 2

全文查找 "is"

var str="Is this all there is?";
var patt1=/is/g;

以下标记的文本是获得的匹配的表达式:

Is this all there is?

尝试一下 »

实例 3

全文查找和不区分大小写搜索 "is"

var str="Is this all there is?";
var patt1=/is/gi;

以下 标记的文本是获得的匹配的表达式:

Is this all there is?

尝试一下 »


test()

The test()方法搜索字符串指定的值,根据结果并返回真或假。

下面的示例是从字符串中搜索字符 "e" :

实例

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

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

true

尝试一下 »


exec()

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

下面的示例是从字符串中搜索字符 "e" :

实例 1

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

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

e

尝试一下 »

RegExp 实战练习

JavaScript使用正则表达式操作字符串

Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。

JavaScript 使用正则表达式选取数值

我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。

JavaScript 使用正则表达式反转匹配

你可以用正则表达式选择器的大写版本来反转任何匹配(相反意思)。


Window 对象表示浏览器中打开的窗口。


Window 对象描述

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。


完整 Window 对象参考手册

请查看我们的 JavaScript Window 对象的参考手册,其中提供了可以与 Window 对象一同使用的所有的属性和方法。

这个手册包含的关于每个属性和方法的用法的详细描述和实例。


Window 子对象

Window的子对象主要有如下几个:

  1. JavaScript document 对象
  2. JavaScript frames 对象
  3. JavaScript history 对象
  4. JavaScript location 对象
  5. JavaScript navigator 对象
  6. JavaScript screen 对象

JavaScript Window对象学习脑图

 


execCommand函数命令

execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令。处理Html数据时常用
如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可用值或属性值(如下例中的”true”)。

document.execCommand("2D-Position","false","true");下面列出的是指令参数及意义2D-Position 允许通过拖曳移动绝对定位的对象。AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。BackColor 设置或获取当前选中区的背景颜色。BlockDirLTR 目前尚未支持。BlockDirRTL 目前尚未支持。Bold 切换当前选中区的粗体显示与否。BrowseMode 目前尚未支持。Copy 将当前选中区复制到剪贴板。CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。Cut 将当前选中区复制到剪贴板并删除之。Delete 删除当前选中区。DirLTR 目前尚未支持。DirRTL 目前尚未支持。EditMode 目前尚未支持。FontName 设置或获取当前选中区的字体。FontSize 设置或获取当前选中区的字体大小。ForeColor 设置或获取当前选中区的前景(文本)颜色。FormatBlock 设置当前块格式化标签。Indent 增加选中文本的缩进。InlineDirLTR 目前尚未支持。InlineDirRTL 目前尚未支持。InsertButton 用按钮控件覆盖当前选中区。InsertFieldset 用方框覆盖当前选中区。InsertHorizontalRule 用水平线覆盖当前选中区。InsertIFrame 用内嵌框架覆盖当前选中区。InsertImage 用图像覆盖当前选中区。InsertInputButton 用按钮控件覆盖当前选中区。InsertInputCheckbox 用复选框控件覆盖当前选中区。InsertInputFileUpload 用文件上载控件覆盖当前选中区。InsertInputHidden 插入隐藏控件覆盖当前选中区。InsertInputImage 用图像控件覆盖当前选中区。InsertInputPassword 用密码控件覆盖当前选中区。InsertInputRadio 用单选钮控件覆盖当前选中区。InsertInputReset 用重置控件覆盖当前选中区。InsertInputSubmit 用提交控件覆盖当前选中区。InsertInputText 用文本控件覆盖当前选中区。InsertMarquee 用空字幕覆盖当前选中区。InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。InsertParagraph 用换行覆盖当前选中区。InsertSelectDropdown 用下拉框控件覆盖当前选中区。InsertSelectListbox 用列表框控件覆盖当前选中区。InsertTextArea 用多行文本输入控件覆盖当前选中区。InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。Italic 切换当前选中区斜体显示与否。JustifyCenter 将当前选中区在所在格式化块置中。JustifyFull 目前尚未支持。JustifyLeft 将当前选中区所在格式化块左对齐。JustifyNone 目前尚未支持。JustifyRight 将当前选中区所在格式化块右对齐。LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。Open 目前尚未支持。Outdent 减少选中区所在格式化块的缩进。OverWrite 切换文本状态的插入和覆盖。Paste 用剪贴板内容覆盖当前选中区。PlayImage 目前尚未支持。Print 打开打印对话框以便用户可以打印当前页。Redo 目前尚未支持。Refresh 刷新当前文档。RemoveFormat 从当前选中区中删除格式化标签。RemoveParaFormat 目前尚未支持。SaveAs 将当前 Web 页面保存为文件。SelectAll 选中整个文档。SizeToControl 目前尚未支持。SizeToControlHeight 目前尚未支持。SizeToControlWidth 目前尚未支持。Stop 目前尚未支持。StopImage 目前尚未支持。StrikeThrough 目前尚未支持。Subscript 目前尚未支持。Superscript 目前尚未支持。UnBookmark 从当前选中区中删除全部书签。Underline 切换当前选中区的下划线显示与否。Undo 目前尚未支持。Unlink 从当前选中区中删除全部超级链接。Unselect 清除当前选中区的选中状态。

document.ExecCommand() – html实例

<HTML>     <HEAD>         <TITLE>JavaScript--execCommand指令集</TITLE><SCRIPT LANGUAGE="javascript">//该function执行copy指令function fn_doufucopy(){    edit.select();    document.execCommand('Copy');}//该function执行paste指令function fn_doufupaste() {     tt.focus();    document.execCommand('paste');} //该function用来创建一个超链接function fn_creatlink(){    document.execCommand('CreateLink',true,'true');//弹出一个对话框输入URL    //document.execCommand('CreateLink',false,'http://www.51coolma.cn');}//该function用来将选中的区块设为指定的背景色function fn_change_backcolor(){    document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以}//该function用来将选中的区块设为指定的前景色,改变选中区块的字体大小,改变字体,字体变粗变斜function fn_change_forecolor(){    //指定前景色    document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以    //指定背景色    document.execCommand('FontSize',false,7);   //true或false都可以    //字体必须是系统支持的字体    document.execCommand('FontName',false,'标楷体');   //true或false都可以    //字体变粗    document.execCommand('Bold');    //变斜体    document.execCommand('Italic');}//该function用来将选中的区块加上不同的线条function fn_change_selection(){    //将选中的文字加下划线    document.execCommand('Underline');    //在选中的文字上划粗线    document.execCommand('StrikeThrough');    //将选中的部分文字变细    document.execCommand('SuperScript');    //将选中区块的下划线取消掉    document.execCommand('Underline'); }//该function用来将选中的区块排成不同的格式function fn_format(){    //有序列表    document.execCommand('InsertOrderedList');    //实心无序列表    document.execCommand('InsertUnorderedList');    //空心无序列表    document.execCommand('Indent');}//该function用来将选中的区块剪下或是删除掉function fn_CutOrDel(){    //删除选中的区块    //document.execCommand('Delete');    //剪下选中的区块    document.execCommand('Cut');}//该function用来将选中的区块重设为一个相应的物件function fn_InsObj(){/*  ******************************************  * 以下指令都是为选中的区块重设一个object;  * 如没有特殊说明,第二个参数true或false是一样的;  * 参数三表示为该object的id;  * 可以用在javascript中通过其指定的id来控制它  *******************************************//*重设为一个button(InsertButton和InsertInputButtong一样,只不前者是button,后者是input)*/    /*document.execCommand('InsertButton',false,"aa"); //true或false无效    document.all.aa.value="风舞九天";*/    //重设为一个fieldset    /*document.execCommand('InsertFieldSet',true,"aa");    document.all.aa.innerText="刀剑如梦";*/    //插入一个水平线    //document.execCommand('InsertHorizontalRule',true,"aa");    //插入一个iframe    //document.execCommand('InsertIFrame',true,"aa");    //插入一个InsertImage,设为true时需要图片,false时不需图片    //document.execCommand('InsertImage',false,"aa");    //插入一个checkbox    //document.execCommand('InsertInputCheckbox',true,"aa");    //插入一个file类型的object    //document.execCommand('InsertInputFileUpload',false,"aa");    //插入一个hidden    /*document.execCommand('InsertInputHidden',false,"aa");    alert(document.all.aa.id);*/    //插入一个InputImage    /*document.execCommand('InsertInputImage',false,"aa");    document.all.aa.src="F-a10.gif";*/    //插入一个Password    //document.execCommand('InsertInputPassword',true,"aa");    //插入一个Radio    //document.execCommand('InsertInputRadio',false,"aa");    //插入一个Reset    //document.execCommand('InsertInputReset',true,"aa");    //插入一个Submit    //document.execCommand('InsertInputSubmit',false,"aa");    //插入一个input text    //document.execCommand('InsertInputText',false,"aa");    //插入一个textarea    //document.execCommand('InsertTextArea',true,"aa");    //插入一个 select list box    //document.execCommand('InsertSelectListbox',false,"aa");    //插入一个single select    document.execCommand('InsertSelectDropdown',true,"aa");    //插入一个line break(硬回车??)    //document.execCommand('InsertParagraph');    //插入一个marquee    /*document.execCommand('InsertMarquee',true,"aa");    document.all.aa.innerText="bbbbb";*/    //用于取消选中的阴影部分    //document.execCommand('Unselect');    //选中页面上的所有元素    //document.execCommand('SelectAll');}//该function用来将页面保存为一个文件function fn_save(){    //第二个参数为欲保存的文件名    document.execCommand('SaveAs','mycodes.txt');    //打印整个页面    //document.execCommand('print');}</SCRIPT>     </HEAD>     <body>         <input id="edit" value="范例" NAME="edit"><br>         <button onclick="fn_doufucopy()" ID="Button1">Copy</button> <button onclick="fn_doufupaste()" ID="Button2">paste</button><br>         <textarea id="tt" rows="10" cols="50" NAME="tt"></textarea>         <hr>         <br>         浮沉聚散变化又再,但是总可卷土重来.<br>         天若有情天亦老,人间正道是沧桑.<br>         都怪我,太执着,却也等不到花开叶落.<br>         <br>         Please select above letters, then click following buttons:<br>         <hr>         <input type="button" value="创建CreateLink" onclick="fn_creatlink()" ID="Button3" NAME="Button3"><br>         <input type="button" value="改变文字背景色" onclick="fn_change_backcolor()" ID="Button4" NAME="Button4"><br>         <input type="button" value="改变文字前景色" onclick="fn_change_forecolor()" ID="Button5" NAME="Button5"><br>         <input type="button" value="给文字加线条" onclick="fn_change_selection()" ID="Button6" NAME="Button6"><br>         <input type="button" value="改变文字的排列" onclick="fn_format()" ID="Button7" NAME="Button7"><br>         <input type="button" value="删除或剪下选中的部分" onclick="fn_CutOrDel()" ID="Button8" NAME="Button8"><br>         <input type="button" value="插入Object" onclick="fn_InsObj()" ID="Button9" NAME="Button9"><br>         <input type="button" value="保存或打印文件" onclick="fn_save()" ID="Button10" NAME="Button10"><br>         <input type="button" value="测试Refresh属性" onclick="document.execCommand('Refresh')" ID="Button11" NAME="Button11">     </body></HTML>


JavaScript Window - 浏览器对象模型


浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

Window 对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。


浏览器对象模型 (BOM)

浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。


Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

 window.document.getElementById("header"); 

与此相同:

document.getElementById("header");  

Window 子对象

Window的子对象主要有如下几个:

  1. JavaScript document 对象
  2. JavaScript frames 对象
  3. JavaScript history 对象
  4. JavaScript location 对象
  5. JavaScript navigator 对象
  6. JavaScript screen 对象

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的窗口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

尝试一下 »

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)


其他 Window 方法

一些其他方法:


window.screen 对象包含有关用户屏幕的信息。

这些信息可以用来了解客户端硬件的基本配置。


Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性:

  • screen.availWidth - 可用的屏幕宽度

  • screen.availHeight - 可用的屏幕高度


Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。

实例

返回您的屏幕的可用宽度:

<script>
    document.write("可用宽度: " + screen.availWidth);
</script>

以上代码输出为:

可用宽度: 1920

尝试一下 »



Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

实例

返回您的屏幕的可用高度:

<script>
    document.write("可用高度: " + screen.availHeight);
</script>

以上代码将输出:

可用高度: 1040

尝试一下 »



相关文章

请查看我们的 JavaScript Screen 对象的参考手册,其中提供了可以与 Screen 对象一同使用的所有的属性。 


window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

这种方法既可以用于具有onclick事件的标签,也可以用于满足某些条件进行跳转,特点是方便且灵活。


Window Location

window.location 对象在编写时可不使用 window 这个前缀。 一些例子:

一些实例:


Window Location Href

location.href 属性返回当前页面的 URL。

实例

返回(当前页面的)整个 URL:

<script>
    document.write(location.href);
</script>

以上代码输出为:

//www.51coolma.cn/javascript/js-window-location.html


Window Location Pathname

location.pathname 属性返回 URL 的路径名。

实例

返回当前 URL 的路径名:

<script>
    document.write(location.pathname);
</script>

以上代码输出为:

/javascript/js-window-location.html


Window Location Assign

location.assign() 方法加载新的文档。

实例

加载一个新的文档:

<html>
  <head>
    <script>
      function newDoc(){
          window.location.assign("https://www.51coolma.cn")
      }
    </script>
  </head>
  <body>
    <input type="button" value="Load new document" onclick="newDoc()">
  </body>
</html>

尝试一下 »

相关阅读

JavaScript百科大全:JavaScript重定向跳转


window.history 对象包含浏览器的历史。


Window History

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

一些方法:


Window History Back

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的:

实例

在页面上创建后退按钮:

<html>
  <head>
    <script>
    function goBack(){
      window.history.back()
    }
    </script>
  </head>
  <body>
    <input type="button" value="Back" onclick="goBack()">
  </body>
</html>

以上代码输出为:



Window History Forward

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的:

实例

在页面上创建一个向前的按钮:

<html>
  <head>
    <script>
    function goForward(){
        window.history.forward()
  }
</script>
</head>
<body>
  <input type="button" value="Forward" onclick="goForward()">
</body>
</html>

以上代码输出为:



相关文章

JavaScript标准参考教程:JavaScript History 对象


window.navigator 对象包含有关访问者浏览器的信息。


Window Navigator

window.navigator 对象在编写时可不使用 window 这个前缀。

实例

<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

尝试一下 »


警告!!!

来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。

例子:if (window.opera) {...some action...}


相关阅读

请查看我们的 JavaScript Navigator 对象的参考手册,其中提供了Navigator对象的所有的属性和方法。

这个手册包含的关于每个属性和方法的用法的详细描述和实例。


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


警告框

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

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

语法

window.alert("sometext");

window.alert() 方法可以不带上window对象,直接使用alert()方法。

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
  alert("你好,我是一个警告框!");
}
</script>
</head>
<body>
  <input type="button" onclick="myFunction()" value="显示警告框">
</body>
</html>

尝试一下 »


确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带上window对象,直接使用confirm()方法。

实例

var r=confirm("按下按钮");
if (r==true){
    x="你按下了"确定"按钮!";
}
else{
    x="你按下了"取消"按钮!";
}

尝试一下 »


提示框

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

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

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

语法

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不带上window对象,直接使用prompt()方法。

实例

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
  x="你好 " + person + "!今天感觉如何?";
}

尝试一下 »

提示:在本站中你可以获得有关 Window prompt() 方法的更多知识!


换行

弹窗使用 反斜杠 + "n"( ) 来设置换行。

实例

alert("Hello How are you?");

尝试一下 »

相关文章

JavaScript 对话框


1
2
3
4
5
6
7
8
9
10
11
12

JavaScript 一个设定的时间间隔之后来执行代码

我们称之为计时事件


JavaScript 计时事件

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

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

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。


setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()

setInterval() 第一个参数是函数(function)。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

实例

每三秒弹出 "hello" :

setInterval(function(){alert("Hello")},3000);

尝试一下 »

实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是和手表一样。

实例

显示当前时间

var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

尝试一下 »


如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:

myVar=setInterval("javascript function",milliseconds);

然后你可以使用clearInterval() 方法来停止执行。

实例

以下例子,我们添加了 "Stop time" 按钮:

<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

尝试一下 »


setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

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

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

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

提示:1000 毫秒等于一秒。

实例

等待3秒,然后弹出 "Hello":

setTimeout(function(){alert("Hello")},3000);

尝试一下 »


如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。

实例

以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

var myVar;
function myFunction(){
    myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
    clearTimeout(myVar);
}

尝试一下 »


Examples

更多实例

另一个简单的计时


JavaScript Cookies


Cookies 用于存储 web 页面的用户信息。

由于 JavaScript 是运行在客户端的脚本,所以可以使用JavaScript来设置运行在客户端的Cookies。


什么是 Cookies?

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

  • 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储,如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。


使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

JavaScript 中,创建 cookie 如下所示:

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookies:

var x = document.cookie;
Notedocument.cookie 将以字符串的方式返回所有的 cookies,类型格式: cookie1=value; cookie2=value; cookie3=value;


使用 JavaScript 修改 Cookie

在 JavaScript 中,修改 cookies 类似于创建 cookies,如下所示:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。


使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当您删除时不必指定 cookie 的值。


Cookie 字符串

document.cookie 属性看起来像一个普通的文本字符串,其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:

cookie1=value; cookie2=value;

     

如果您需要查找一个指定 cookie 值,您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。


JavaScript Cookie 实例

在以下实例中,我们将创建 cookie 来存储访问者名称。

首先,访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时,他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检测 cookie 值的函数

设置 cookie 值的函数

首先,我们创建一个函数用于存储访问者的名字:

function setCookie(cname,cvalue,exdays){            var d = new Date();            d.setTime(d.getTime()+(exdays*24*60*60*1000));            var expires = "expires="+d.toGMTString();            document.cookie = cname + "=" + cvalue + "; " + expires;        }

函数解析:

以上的函数参数中,cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。


获取 cookie 值的函数

然后,我们创建一个函数用户返回指定 cookie 的值:

function getCookie(cname){            var name = cname + "=";            var ca = document.cookie.split(';');            for(var i=0; i<ca.length; i++){                var c = ca[i].trim();                if(c.indexOf(name)==0) return c.substring(name.length,c.length);            }            return "";        }

函数解析:

cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + "="。

使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。

循环 ca 数组 (i=0;i<ca.length;i++),然后读取数组中的每个值,并去除前后空格 (c=ca[i].trim())。

如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 ""。


检测 cookie 值的函数

最后,我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie,将显示一个问候信息。

如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

function checkCookie(){    var username=getCookie("username");            if (username!=""){                alert("Welcome again " + username);            }            else{                username = prompt("Please enter your name:","");                if (username!="" && username!=null){            setCookie("username",username,365);                }            }        }

完整实例

实例

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++){
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}

function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("Welcome again " + user);
    }
    else{
        user = prompt("Please enter your name:","");
        if (user!="" && user!=null){
            setCookie("username",user,365);
        }
    }
}

尝试一下 »

以下实例在页面载入时执行 checkCookie() 函数。


相关文章

JavaScript笔记:JavaScript操作Cookies


JavaScript 库 - jQuery、Prototype、MooTools。


JavaScript 框架(库)

JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。

为了应对这些调整,许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架

在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:

  • jQuery
  • Prototype
  • MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。

在本教程中,您将学习到如何开始使用它们,来使得 JavaScript 编程更容易、更安全且更有乐趣。


jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。

jQuery 同时提供 companion UI(用户界面)和插件。

许多大公司在网站上使用 jQuery:

  • Google
  • Microsoft
  • IBM
  • Netflix

如需更深入地学习 jQuery,请访问我们的 jQuery 教程


Prototype

Prototype 是一种库,提供用于执行常见 web 任务的简单 API。

API 是应用程序编程接口(Application Programming Interface)的缩写。它是包含属性和方法的库,用于操作 HTML DOM。

Prototype 通过提供类和继承,实现了对 JavaScript 的增强。

提示:Prototype 框架最大的部分就是对DOM的扩展。通过Prototype框架里的$()函数能够返回一个网页DOM元素,框架给这个元素添加了很多方便的方法。


MooTools

MooTools 也是一个框架,提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。

提示:虽然Mootools跟Prototype几乎拥有一样的语法,但是它提供了比Prototype多的功能,而且更强大,拥有实用而清晰的文档和示例帮助你轻松入门。


其他框架

下面是其他一些在上面未涉及的框架:

YUI - Yahoo! User Interface Framework,涵盖大量函数的大型库,从简单的 JavaScript 功能到完整的 internet widget。

Ext JS - 可定制的 widget,用于构建富因特网应用程序(rich Internet applications)。

Dojo - 用于 DOM 操作、事件、widget 等的工具包。

script.aculo.us - 开源的 JavaScript 框架,针对可视效果和界面行为。

UIZE - Widget、AJAX、DOM、模板等等。


CDN -内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小,同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN,包括:

  • jQuery
  • Prototype
  • MooTools
  • Dojo
  • Yahoo! YUI

但是由于 Google 在中国经常被GFW(防火长城,英文名称Great Firewall of China,简写为Great Firewall,缩写GFW)屏蔽,造成访问不稳定,所以建议使用百度静态资源公共库:http://cdn.code.baidu.com/

如需在您的网页中使用 JavaScript 框架库,只需在 <script> 标签中引用该库即可:

引用 jQuery

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" >
</script>

使用框架

在您决定为网页使用 JavaScript 框架之前,首先对框架进行测试是明智的。

JavaScript 框架很容易进行测试。您无需在计算机上安装它们,同时也没有安装程序。

通常您只需从网页中引用一个库文件。

在本教程的下一章,我们会为您完整地讲解 jQuery 的测试过程。


相关教程

HTML DOM教程


测试 JavaScript 框架库 - jQuery


引用 jQuery

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 jQuery

<!DOCTYPE html>
<html>
    <head>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
    </head>
    <body>
    </body>
</html>


jQuery 描述

主要的 jQuery 函数是 $() 函数(jQuery 函数)。如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction(){
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价的 jQuery 是不同的:

jQuery 方式:

function myFunction(){
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最后一行,HTML DOM 文档对象被传递到 jQuery :$(document)。

当您向 jQuery 传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。

由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

lamp jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
jQuery 对象拥有的属性和方法,与 DOM 对象的不同。
您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。


测试 jQuery

请试一下下面这个例子:

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

尝试一下 »

请再试一下这个例子:

实例

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

尝试一下 »

正如您在上面的例子中看到的,jQuery 允许链接(链式语法)。

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。

需要学习更多内容吗?W3Cschool 为您提供了非常棒的 jQuery 教程


测试 JavaScript 框架库 - Prototype


引用 Prototype

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 Prototype

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
</body>
</html>

Prototype 描述

Prototype 提供的函数可使 HTML DOM 编程更容易。

与 jQuery 类似,Prototype 也有自己的 $() 函数。

$() 函数接受 HTML DOM 元素的 id 值(或 DOM 元素),并会向 DOM 对象添加新的功能。

与 jQuery 不同,Prototype 没有用以取代 window.onload() 的 ready() 方法。相反,Prototype 会向浏览器及 HTML DOM 添加扩展。

在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction(){
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;

等价的 Prototype 是不同的:

Prototype 方式:

function myFunction(){
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数:

  • 您希望处理的 HTML DOM 或 BOM(浏览器对象模型)对象
  • 您希望处理的事件
  • 您希望调用的函数

测试 Prototype

请试一下下面这个例子:

Example

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

尝试一下 »

请再试一下这个例子:

Example

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script>
function myFunction(){
    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
    <h1 id="h01"></h1>
</body>
</html>

测试一下 »

正如您在上面的例子中看到的,与 jQuery 相同,Prototype 允许链式语法。

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。


相关文章

JavaScript prototype 对象


使用内置的JavaScript对象实例。

String(字符串)对象

Date(日期)对象

Array(数组)对象

Boolean(布尔)对象

Math(算数)对象

一般


使用JavaScript来访问和控制浏览器对象实例。

Window 对象

Navigator 对象

Screen 对象

History 对象

Location 对象


使用内置JavaScript的对象实例。

Document 对象

Anchor 对象

Area 对象

Base 对象

Button 对象

Form 对象

Frame/IFrame 对象

Image 对象

Event 对象

Option and Select 对象

Table, TableHeader, TableRow, TableData 对象


本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强。

你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本。

你也学到了如何创建和使用对象,以及如何使用 JavaScript 的内置对象。

如需更多关于 JavaScript 的信息和知识,请参阅我们的 JavaScript 实例JavaScript 参考手册

提示:向网页中添加 JavaScript的三种方式为:1)使用<script></script>标签内部样式;2)使用外部js文件;3)直接在HTML标签中的行内样式。


现在已经你已经学习了 JavaScript,接下来该学习什么呢?

下一步应该学习 HTML DOM 和 DHTML。

如果你希望学习关于服务器端脚本的知识,那么下一步应该学习 ASP,PHP, .Net。

HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。 HTML DOM 独立于平台和语言,可被任何编程语言使用,比如 Java、JavaScript 和 VBscript。 假如希望了解更多关于 DOM 的知识,请访问我们的

HTML DOM 教程

jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

假如希望了解更多关于 jQuery 的知识,请访问我们的 jQuery 教程

AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。

通过与服务器进行数据交换,AJAX 可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

假如您希望学习更多关于 AJAX 的知识,请访问我们的 AJAX 教程

Vue/React/Angular

Vue/React/Angular是目前前端最火的三大框架,在国内Angular的应用比较少,React和Vue是当前国内比较火的前端框架。

通过前端框架的学习,我们能比较省时省力的快速构建出一个优秀的高性能的前端页面,组件的可复用性也可以提高工作效率。

如果您想要学习Vue的相关知识,可以访问我们的Vue3教程Vue2教程

如果您想要学习React的相关知识,可以访问我们的React教程

如果您想要学习Angular的相关知识,可以访问我们的Angular教程

ASP / PHP / .NET

和 HTML 文档中的脚本运行于客户端(浏览器)不同,ASP/PHP 文件中的脚本在服务器上运行。

使用 ASP,你可以动态地编辑、改变或者添加网站内容,对由 HTML 表单提交而来的数据进行响应,访问数据或者数据库并向浏览器返回结果,或者定制对不同的用户来说更有帮助的网页。

由于 ASP/PHP 文件返回的是纯粹的 HTML,因此可显示在任何浏览器中。

如果希望学习更多关于 ASP 的知识,请访问我们的 ASP 教程

如果希望学习更多关于 PHP 的知识,请访问我们的 PHP 教程

如果希望学习更多关于 .NET 的知识,请访问我们的.NET 实例/教程


您可以通过 W3Cschool 的测验程序来测试您的 JavaScript 技能。

关于本测验

本测验包含 20 道题,每道题的最长答题时间是 20 分钟(这是由于每个 session 的默认有效时间是 20 钟)。

本测验是非官方的测试,它仅仅提供了一个了解您对 JavaScript 的掌握程度的工具。

测验会被记分

每道题的分值是 1 分。在您完成全部的 20 道题之后,系统会为您的测验打分,并提供您做错的题目的正确答案。其中,绿色为正确答案,而红色为错误答案。

现在就开始测验!祝您好运。


为了帮助广大学习者,做到学以致用,我们为大家准备了大量的JavaScript编程实战题,通过这些实战题,您可以一边学习一边操作,来达到巩固学习的作用。

请选择你喜欢的实战提,开始进行编程闯关。

JavaScript课程列表

数组对于程序语言的重要性自不必多说,而在使用javascript的时候难免也会需要用到数组操作,主要用于封装多个任意类型的数据,并对它们进行管理,在js中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法。js中的数组和其他语言的数组也有着比较大的区别,下面我们来一起重点讨论下js中的数组操作的一些常见方法和技巧。

数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改。

创建数组

在JavaScript多种方式创建数组

构造函数

1.无参构造函数,创建一空数组

var a1=new Array();

2.一个数字参数构造函数,指定数组长度(由于数组长度可以动态调整,作用并不大),创建指定长度的数组

var a2=new Array(5);

3.带有初始化数据的构造函数,创建数组并初始化参数数据

var a3=new Array(4,'hello',new Date());

字面量

1.使用方括号,创建空数组,等同于调用无参构造函数

var a4=[];

2.使用中括号,并传入初始化数据,等同于调用调用带有初始化数据的构造函数

var a5=[10];

注意点

1.在使用构造函数创建数组时如果传入一个数字参数,则会创建一个长度为参数的数组,如果传入多个,则创建一个数组,参数作为初始化数据加到数组中

var a1=new Array(5);console.log(a1.length);//5console.log(a1); //[] ,数组是空的var a2=new Array(5,6);console.log(a2.length);//2console.log(a2); //[5,6]

但是使用字面量方式,无论传入几个参数,都会把参数当作初始化内容

var a1=[5];console.log(a1.length);//1console.log(a1); //[5]var a2=[5,6];console.log(a2.length);//2console.log(a2); //[5,6]

2.使用带初始化参数的方式创建数组的时候,最好最后不要带多余的”,”,在不同的浏览器下对此处理方式不一样

var a1=[1,2,3,];console.log(a1.length);console.log(a1);

这段脚本在现代浏览器上运行结果和我们设想一样,长度是3,但是在低版本IE下却是长度为4的数组,最后一条数据是undefined

数组的索引与长度

数组的值可以通过自然数索引访问进行读写操作,下标也可以是一个得出非负整数的变量或表达式

var a1=[1,2,3,4];console.log(a1[0]); //1var i=1;console.log(a1[i]); //2console.log(a1[++i]); //3

数组也是对象,我们可以使用索引的奥秘在于,数组会把索引值转换为对应字符串(1=>”1”)作为对象属性名

console.log(1 in a1);//true,确实是一个属性

索引特殊性在于数组会自动更新length属性,当然因为JavaScript语法规定数字不能作为变量名,所以我们不能显示使用array.1这样的格式。由此可见其实负数,甚至非数字”索引“都是允许的,只不过这些会变成数组的属性,而不是索引

var a=new Array(1,2,3);a[-10]="a[-10]";a["sss"]="sss";
js数组代码

这样我们可以看出所有的索引都是属性名,但只有自然数(有最大值)才是索引,一般我们在使用数组的时候不会出现数组越界错误也正是因为此,数组的索引可以不是连续的,访问index不存在的元素的时候返回undefined

var a=new Array(1,2,3);a[100]=100;console.log(a.length); //101console.log(a[3]); //undefinedconsole.log(a[99]); //undefinedconsole.log(a[100]); 100

js数组代码片段

上面的例子中,虽然直接对a[100]赋值不会影响a[4]或a[99],但数组的长度却受到影响,数组length属性等于数组中最大的index+1,我们知道数组的length属性同样是个可写的属性,当强制把数组的length属性值设置为小于等于最大index值时,数组会自动删除indexd大于等于length的数据,在刚才代码中追加几句

a.length=2;console.log(a);//[1,2]
这时候会发现a[2]和a[100]被自动删除了,同理,如果把length设置为大于最大index+1的值的时候,数组也会自动扩张,但是不会为数组添加新元素,只是在尾部追加空空间
a.length=5;console.log(a); //[1,2] //后面没有3个undefined

元素添加/删除

基本方法

上面例子已经用到向数组内添加元素方法,直接使用索引就可以(index没必要连续)

var a=new Array(1,2,3);a[3]=4;console.log(a);//[1, 2, 3, 4]

前面提到数组也是对象,索引只是特殊的属性,所以我们可以使用删除对象属性的方法,使用delete 删除数组元素

delete a[2];console.log(a[2]); //undefined

这样和直接把a[2]赋值为undefined类似,不会改变数组长度,也不会改变其他数据的index和value对应关系



元素添加/删除

栈方法

上面例子总有同学就发现了,尤其是其删除方法,并不是我们希望的表现形式,我们很多时候希望删除中间一个元素后,后面元素的index都自动减一,数组length同时减一,就好像在一个堆栈中拿去的一个,数组已经帮我们做好了这种操作方式,pop和push能够让我们使用堆栈那样先入后出使用数组

var a=new Array(1,2,3);a.push(4);console.log(a);//[1, 2, 3, 4] console.log(a.length);//4console.log(a.pop(a));//4console.log(a); //[1, 2, 3] console.log(a.length);//3

队列方法

既然栈方法都实现了,先入先出的队列怎么能少,shift方法可以删除数组index最小元素,并使后面元素index都减一,length也减一,这样使用shift/push就可以模拟队列了,当然与shift方法对应的有一个unshift方法,用于向数组头部添加一个元素

var a=new Array(1,2,3);a.unshift(4);console.log(a);//[4, 1, 2, 3] console.log(a.length);//4console.log(a.shift(a));//4console.log(a); //[1, 2, 3] console.log(a.length);//3

终极神器

JavaScript提供了一个splice方法用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数
1.开始索引
2.删除元素的位移
3.插入的新元素,当然也可以写多个
splice方法返回一个由删除元素组成的新数组,没有删除则返回空数组

var a=new Array(1,2,3,4,5);

删除

指定前两个参数,可以使用splice删除数组元素,同样会带来索引调整及length调整

var a=new Array(1,2,3,4,5);console.log(a.splice(1,3));//[2, 3, 4] console.log(a.length);//2console.log(a);//[1,5]
如果数组索引不是从0开始的,那么结果会很有意思,有一这样数组
var a=new Array();a[2]=2;a[3]=3;a[7]=4;a[8]=5;
数组
console.log(a.splice(3,4)); //[3] console.log(a.length); //5console.log(a); //[2: 2, 3: 4, 4: 5]
插入与替换

上面例子可以看到,splice的第一个参数是绝对索引值,而不是相对于数组索引,第二个参数并不是删除元素的个数,而是删除动作执行多少次,并不是按数组实际索引移动,而是连续移动。同时调整后面元素索引,前面索引不理会

插入与替换

只要方法第二个参数,也就是删除动作执行的次数设为0,第三个参数及以后填写要插入内容就splice就能执行插入操作,而如果第二个参数不为0则变成了先在该位置删除再插入,也就是替换效果

var a=new Array(1,2,3,4,5);a.splice(1,0,9,99,999);console.log(a.length); //8console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5] a.splice(1,3,8,88,888);console.log(a.length);//8console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

常用方法

join(char)

这个方法在C#等语言中也有,作用是把数组元素(对象调用其toString()方法)使用参数作为连接符连接成一字符串

var a=new Array(1,2,3,4,5);console.log(a.join(',')); //1,2,3,4,5 console.log(a.join(' ')); //1 2 3 4 5

slice(start,end)

var a=new Array(1,2,3,4,5);console.log(a); //[1, 2, 3, 4, 5] console.log(a.slice(1,2));//2console.log(a.slice(1,-1));//[2, 3, 4] console.log(a.slice(3,2));//[]console.log(a); //[1, 2, 3, 4, 5]

不要和splice方法混淆,slice方法用于返回数组中一个片段或子数组,如果只写一个参数返回参数到数组结束部分,如果参数出现负数,则从数组尾部计数(-3意思是数组倒第三个,一般人不会这么干,但是在不知道数组长度,想舍弃后n个的时候有些用,不过数组长度很好知道。。。。,好纠结的用法),如果start大于end返回空数组,值得注意的一点是slice不会改变原数组,而是返回一个新的数组。

concat(array)

看起来像是剪切,但这个真不是形声字,concat方法用于拼接数组,a.concat(b)返回一个a和b共同组成的新数组,同样不会修改任何一个原始数组,也不会递归连接数组内部数组。

var a=new Array(1,2,3,4,5);var b=new Array(6,7,8,9);console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a); //[1, 2, 3, 4, 5] console.log(b); //[6, 7, 8, 9]

reverse()

方法用于将数组逆序,与之前不同的是它会修改原数组

var a=new Array(1,2,3,4,5);a.reverse();console.log(a); //[5, 4, 3, 2, 1]
同样,当数组索引不是连续或以0开始,结果需要注意
var a=new Array();a[2]=2;a[3]=3;a[7]=4;a[8]=5;
reverse()
a.reverse();
sort

sort

sort方法用于对数组进行排序,当没有参数的时候会按字母表升序排序,如果含有undefined会被排到最后面,对象元素则会调用其toString方法,如果想按照自己定义方式排序,可以传一个排序方法进去,很典型的策略模式,同样sort会改变原数组。
var a=new Array(5,4,3,2,1);a.sort();console.log(a);//[1, 2, 3, 4, 5]

不过······

var a=new Array(7,8,9,10,11);a.sort();console.log(a);//[10, 11, 7, 8, 9]
因为按照字母表排序,7就比10大了,这时候我们需要传入自定义排序函数
var a=new Array(7,8,9,10,11);a.sort(function(v1,v2){    return v1-v2;});console.log(a);//[7, 8, 9, 10, 11]

原理和C#中的sort类似,只不过可以直接传递方法进去,以下内容仅供参考:

sort内部使用快速排序,每次比较两个元素大小的时候如果没有参数,则直接判断字母表,如果有参数,则把正在比较的两个参数传入自定义方法并调用(正在比较的两个数会传给自定义方法的v1、v2),如果返回值大于0表示v1>v2,如果等于0,表示v1=v2,如果小于0,表示v1<v2,其实我们传入的方法就是告诉sort怎么比较两个元素谁大谁小,至于排序移动元素过程人家写好了。

js数组循环遍历数组内所有元素的方法

在js中数组遍历最简单的办法就是使用for然后再利用arr.length长度作为for最大限度值即可解决了,下面我们来看看一些有用的实例。

for(){}遍历数组

var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){    arr[i] = arr[i]/2.0;}alert(arr);

for in循环遍历数组

var xvar mycars = new Array()mycars[0] = "Saab"mycars[1] = "Volvo"mycars[2] = "BMW"for (x in mycars){    document.write(mycars[x] + "<br />")}

js数组与字符串的相互转换方法

1、数组转字符串

需要将数组元素用某个字符连接成字符串,示例代码如下:

var a, b;a = new Array(0,1,2,3,4);b = a.join("-");

2、字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下:

var s = "abc,abcd,aaa";ss = s.split(",");// 在每个逗号(,)处进行分解。

JavaScript 数组练习

如果你已经掌握了上面介绍的JavaScript数组的常用方法,那么你可以通过以下的练习来加深对JavaScript数组的使用!

Javascript 数组操作

通过JavaScript数组,我们可以将多个数据存储于同一个变量中。

Javascript 多维数组操作

这个练习让你可以在数组中包含其他数组

JavaScript 使用索引查找数组中的数据

你可以像操作字符串一样通过数组索引[index]来访问数组中的数据。

提示:如果你需要更多关于JavaScript数组的练习,请移步本站的JavaScript编程实战


使用过ajax的朋友经常会见到这样的代码:here,这里面的void是一个操作符,该操作符指定要计算一个表达式但是不返回值。javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。

提示:在学习一下内容之前,你可以先通过javascript:void(0) 含义一节的内容来了解或者复习什么是javascript:void(0) !

void 操作符用法格式如下:

1. javascript:void (expression)
2. javascript:void expression
expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0)
你可以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。
下面的代码创建了一个超级链接,当用户以后不会发生任何事。当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

<a herf="javascript:void(0)">点击此处什么也不会发生</a> 

下面的代码创建了一个超级链接,用户单时会提交表单。

<a href="javascript:void(document.form.submit())"> 

单此处提交表单</a>

下面代码则执行了subgo()函数,

<a href="javascript:void(0)"onclick="subgo()">点我</a>

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

<a href="#" onclick="subgo()">点我</a>与<ahref="javascript:void(0)" onclick="subgo()">点我</a>区别。
<a href="javascript:void(0)"onclick="javascript:history.back();">返回 </a>

href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢甚至崩溃。而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)

href="#"与javascript:void(0)的区别
href="#"方法其实也是空连接的意思,但是点击之后会自动跳转到页面的最上面,因为用了这个方法就相当于点击了一个锚记,但是这个锚记又没写ID,所以就默认跳转到页面顶部。从上面的例子也可以看出,当要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。
其实我们可以这样用,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。
说白了,href="#"这种形式会整体刷新页面,而href="javascript:void(0)" 则不会。所以如果是空连接的话,还是推荐javascript:void(0)。
href = "#"当页面有滚动条时,点击后会返回到页面顶端的解决办法
目前有如下几种解决办法:
1、点击链接后不做任何事情

<a href="javascript:void(0);" >test</a> 

<a href="javascript:;" >test</a> 

<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的 

2、点击链接后,响应用户自定义的点击事件

<a href="javascript:void(0)" onclick="doSomething()">test</a> 

<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href="" 

<a href="#" onclick="alert();event.returnValue=false;">test</a> 

使用javascript:void(0)会引起什么问题?
链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。 如果仅仅是想鼠标移过,变成手形,则可以使用。
我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说的效果同的效果是一样的。
既然容易引起问题,为何新浪微博,淘宝等大站的首页JS操作的href都是javascript:void(0);呢?

新浪微博
淘宝网首页

<a href=”void(0);” rel=”nofollow”>

Click here to do nothing

</a>

<a href=”void(document.body.style.backgroundColor=’green’);” rel=”nofollow”>

Click here for green background

</a>

有可能是 javascript:void(0); 既保证了返回值是undefined,又保证如果连接点击需要处理一些代码,随时将0替换掉就可以。
href上加js是为了防止连接跳转,以前用#但是在部分浏览器下回跳转到页面顶部。这样就不好了,于是有人想到了添加onclick=“return false”但是这样问题又来了,这样做会阻止绑定的时间,比如我们用jquery。于是就有了用href=”javascript:void(0);”的写法,这种做法开始确实是由一些写c的人,因为编写习惯而写的。后来有人讲void函数去掉了。就有了比较简洁的写法,其实在a在没有连接的时候完全可以去掉href属性或改用其他元素,只要加个指向时的鼠标样式就可以了。根据个人习惯而定。
解决IE下使用javascript:void(0)方法会跳转的方法
一般情况下,在IE下的A标签使用onclick的方法,在href属性下都加上javascript:void(0)或者javascript:;
原代码如下:

<a href="javascript:void(0)" title="关闭" onclick="delbook();">关闭</a>

或者:

<a href="javascript:;" title="关闭" onclick="delbook();">关闭</a>

以上两种方法都可能会出现跳转。

但是你会发现:在执行完clidk事件后会执行javascript:void(0),或者javascript:;

解决办法:

<a href="javascript:void(0)" title="关闭" onclick="delbook();return false;">关闭</a>

或者

<a href="javascript:void(0)" target="_self" title="关闭" onclick="delbook();">关闭</a>

使用return false;可以阻止javascript:void(0)去执行。

使用target="_self"可以阻止会跳转到其他页面,因其是空函数,则不会发生页面刷新。

当然,在使用target="_self"的情况下,你可以直接这样写。

<a href="javascript:delbook()" target="_self" title="关闭">关闭</a>
只要是页面中有刷新或者跳转动作就要用上面的解决方法。

JS的几种跳转方式:
1.

window.open(”url“) 

2.用自定义函数

<script> function openWin(tag,obj) {     obj.target="_blank";     obj.href = "Web/Substation/Substation.aspx?stationno="+tag;     obj.click(); } </script> <a href="javascript:void(0)"onclick="openWin(3,this)">点我</a>
3.
window.location.href='';


在网页制作中,总是需要用到各种JavaScript特效,有页面特效,时间日期特效、Cookie脚本特效、按钮特效等,不胜枚举,而目前会写原生代码的人才稀缺,因此本文搜集多例针对的各个应用方向的JavaScript网页经典特效代码,供初学者参考练习。


先给大家推荐一本书《JavaScript网页特效经典300例》,这本书分为3篇26章,一共收集了300个典型实例,不仅涉及的基础语法、开发技巧、对象支持等基础知识,还涵盖了各类常见的网页开发特效,包括图层、表单控件、表格、层等各类网页元素的特效应用,以及的HTML5、CSS3技术。最后,《网页特效经典300例》还用实例演示了流行框架的应用,如Prototype、Dojo、YUI、jQuery等。本书的实例非常具有代表性,能直接应用于真实的开发实践中。可作为自学语言和大、中专院校师生提高编程实践能力的指导教材,也可作为在职开发人员的参考用书。


下载地址:点此下载电子书(注:书中案例需右键查看源代码)


JavaScript网页特效经典300例

再来一个JavaScript的100多个犀利效果打包下载


JavaScript的100多个犀利效果

下载地址:点此下载


1500个JS网页特效打包下载 CHM版

这是一个非常经典的CHM教程,共收集了1500个JS网页特效,由于制作成CHM版本,因此有些图片可能无法显示,请自动修改图片路径吧,对于学习js的朋友来说是非常有帮助的。

1500个JS网页特效


下载地址1:点此下载
下载地址2:点此下载


最新炫目JavaScript动态网页特效实战精讲 (孙军) pdf扫描版
讲述javascript的所有知识以及详细的应用效果,展现这门技术给网站建设带来的丰富的体验。本书通俗易懂,按照循序渐进的方法详细介绍javascript的基本概念、html基本知识、javascript的基本语法及其内置对象和浏览器对象。全书通过动态网页特效的200多个经典案例应用,展现javascript在网页应用中的独特魅力。书中每章都有关于本章的经典提示,每个经典提示都是作者多年工作经验的总结。书中对每个知识点都配备相应的实例,每个案例中都有学习的难点提示、代码解释和最终的案例效果,使读者全面理解javascript和体验其应用效果。

最新炫目JavaScript动态网页特效实战精讲

下载地址:点击下载

以上就是51coolma精选的一些可下载的Javascript特效代码资源,希望对你的编程学习和工作带来帮助。

当然,本站也为您准备了一些JavaScript特效代码,欢迎查看!


在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛。在web应用项目中,需要大量JavaScript的代码,将来也会越来越多。但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题,因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导致浏览器负荷过重。 Javascript性能优化绝不是一种书面的技能,那么应该如何正确的加载和执行 JavaScript代码,从而提高其在浏览器中的性能呢?下面就给大家做一些优化小窍门的知识汇总。


无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或JavaScript的命名空间,它们会对后面页面内容造成影响。一个典型的例子就是在页面中使用:

document.write()
示例:
<html><head>    <title>Source Example</title></head><body>    <p>    <script type="text/javascript">        document.write("Today is " + (new Date()).toDateString());    </script>    </p></body></html>
当浏览器遇到<script>标签时,当前 HTML 页面无从获知 JavaScript 是否会向<p> 标签添加内容,或引入其他元素,或甚至移除该标签。因此,这时浏览器会停止处理页面,先执行 JavaScript代码,然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中,浏览器必须先花时间下载外链文件中的代码,然后解析并执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。

不要使用 with() 语句

这是因为 with() 语句将会在作用域链的开始添加额外的变量。额外的变量意味着,当任何变量需要被访问的时候,JavaScript引擎都需要先扫描with()语句产生的变量,然后才是局部变量,最后是全局变量。  因此with()语句同时给局部变量和全局变量的性能带来负面影响,最终使我们优化JavaScript性能的计划破产。

对象属性和数组元素的速度都比变量慢

谈到JavaScript的数据,一般来说有4种访问方式:数值、变量、对象属性和数组元素。在考虑优化时,数值和变量的性能差不多,并且速度显著优于对象属性和数组元素。

因此当你多次引用一个对象属性或者数组元素的时候,你可以通过定义一个变量来获得性能提升。(这一条在读、写数据时都有效)虽然这条规则在绝大多数情况下是正确的,但是Firefox在优化数组索引上做了一些有意思的工作,能够让它的实际性能优于变量。但是考虑到数组元素在其他浏览器上的性能弊端,还是应该尽量避免数组查找,除非你真的只针对于火狐浏览器的性能而进行开发。

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些
function search() {    //当我要使用当前页面地址和主机域名    alert(window.location.href + window.location.host);}    //最好的方式是如下这样  先用一个简单变量保存起来function search() {    var location = window.location;    alert(location.href + location.host);}

避免with语句

和函数类似 ,with语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度,由于额外的作用域链的查找,在with语句中执行的代码肯定会比外面执行的代码要慢,在能不使用with语句的时候尽量不要使用with语句。
with (a.b.c.d) {    property1 = 1;    property2 = 2;}//可以替换为:var obj = a.b.c.d;obj.property1 = 1;obj.property2 = 2;

数字转换成字符串

般最好用”" + 1来将数字转换成字符串,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:
(“” +) > String() > .toString() > new String()

通过模板元素clone,替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写HTML来创建节点,其实这样做,1:无法保证代码的有效性,2:字符串操作效率低,所以应该是用document.createElement()方法,而如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,应该先准备一个样板节点。
var frag = document.createDocumentFragment();for (var i = 0; i < 1000; i++) {    var el = document.createElement('p');    el.innerHTML = i;    frag.appendChild(el);}document.body.appendChild(frag);//替换为:var frag = document.createDocumentFragment();var pEl = document.getElementsByTagName('p')[0];for (var i = 0; i < 1000; i++) {    var el = pEl.cloneNode(false);    el.innerHTML = i;    frag.appendChild(el);}document.body.appendChild(frag);

避免低效率的脚本位置

HTML 4 规范指出 <script> 标签可以放在 HTML 文档的<head>或<body>中,并允许出现多次。Web 开发人员一般习惯在 <head> 中加载外链的 JavaScript,接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。
低效率脚本位置示例:
<html><head>    <title>Source Example</title>    <script type="text/javascript" src="script1.js"></script>    <script type="text/javascript" src="script2.js"></script>    <script type="text/javascript" src="script3.js"></script>    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>    <p>Hello world!</p></body></html>
然而这种常规的做法却隐藏着严重的性能问题。在清单 2 的示例中,当浏览器解析到 <script> 标签(第 4 行)时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,这意味着,其后的 styles.css 样式文件和<body>标签都无法被加载,由于<body>标签无法被加载,那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前,页面都是一片空白。下图描述了页面加载过程中脚本和样式文件的下载过程。

脚本位置
我们可以发现一个有趣的现象:第一个 JavaScript 文件开始下载,与此同时阻塞了页面其他文件的下载。此外,从 script1.js 下载完成到 script2.js 开始下载前存在一个延时,这段时间正好是 script1.js 文件的执行过程。每个文件必须等到前一个文件下载并执行完成才会开始下载。在这些文件逐个下载过程中,用户看到的是一片空白的页面。
从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。这是个好消息,因为<script>标签在下载外部资源时不会阻塞其他<script>标签。遗憾的是,JavaScript 下载过程仍然会阻塞其他资源的下载,比如样式文件和图片。尽管脚本的下载过程不会互相影响,但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。因此,尽管最新的浏览器通过允许并行下载提高了性能,但问题尚未完全解决,脚本阻塞仍然是一个问题。
由于脚本会阻塞页面其他资源的下载,因此推荐将所有<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
推荐的代码放置位置示例:
<head>    <title>Source Example</title>    <link rel="stylesheet" type="text/css" href="styles.css"></head><body>    <p>Hello world!</p>    <!-- Example of efficient script positioning -->    <script type="text/javascript" src="script1.js"></script>    <script type="text/javascript" src="script2.js"></script>    <script type="text/javascript" src="script3.js"></script></body></html>
这段代码展示了在 HTML 文档中放置<script>标签的推荐位置。尽管脚本下载会阻塞另一个脚本,但是页面的大部分内容都已经下载完成并显示给了用户,因此页面下载不会显得太慢。这是优化 JavaScript 的首要规则:将脚本放在底部。

小心使用闭包

虽然你可能还不知道“闭包”,但你可能在不经意间经常使用这项技术。闭包基本上被认为是JavaScript中的new,当我们定义一个即时函数的时候,我们就使用了闭包,比如:
document.getElementById('foo').onclick = function(ev) { };

闭包的问题在于:根据定义,在它们的作用域链中至少有三个对象:闭包变量、局部变量和全局变量。这些额外的对象将会导致其他的性能问题。但是Nicholas并不是要我们因噎废食,闭包对于提高代码可读性等方面还是非常有用的,只是不要滥用它们(尤其在循环中)。

提示:如果您对JavaScript闭包掌握得还不是很透彻,请参考本站的JavaScript闭包一节!

在循环时将控制条件和控制变量合并起来

提到性能,在循环中需要避免的工作一直是个热门话题,因为循环会被重复执行很多次。所以如果有性能优化的需求,先对循环开刀有可能会获得最明显的性能提升。

一种优化循环的方法是在定义循环的时候,将控制条件和控制变量合并起来,下面是一个没有将他们合并起来的例子:

for ( var x = 0; x < 10; x++ ) {};
当我们要添加什么东西到这个循环之前,我们发现有几个操作在每次迭代都会出现。JavaScript引擎需要:
#1:检查 x 是否存在#2:检查 x 是否小于 0 <span style="color: #888888;">(这里可能有笔误)</span>#3:使 x 增加 1
然而如果你只是迭代元素中的一些元素,那么你可以使用while循环进行轮转来替代上面这种操作:
var x = 9;do { } while( x-- );

使用 XMLHttpRequest(XHR)对象

此技术首先创建一个 XHR 对象,然后下载 JavaScript 文件,接着用一个动态<script>元素将 JavaScript 代码注入页面。
通过 XHR 对象加载 JavaScript 脚本:
var xhr = new XMLHttpRequest();xhr.open("get", "script1.js", true);xhr.onreadystatechange = function(){    if (xhr.readyState == 4){        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){            var script = document.createElement ("script");            script.type = "text/javascript";            script.text = xhr.responseText;            document.body.appendChild(script);        }    }};xhr.send(null);
此代码向服务器发送一个获取 script1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查readyState 是不是 4,然后检查 HTTP 状态码是不是有效(2XX 表示有效的回应,304 表示一个缓存响应)。如果收到了一个有效的响应,那么就创建一个新的<script>元素,将它的文本属性设置为从服务器接收到的 responseText 字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档,代码将被执行,并准备使用。
这种方法的主要优点是,您可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外(换句话说不受<script>标签约束),它下载后不会自动执行,这使得您可以推迟执行,直到一切都准备好了。另一个优点是,同样的代码在所有现代浏览器中都不会引发异常。
此方法最主要的限制是:JavaScript 文件必须与页面放置在同一个域内,不能从 CDN 下载(CDN 指”内容投递网络(Content Delivery Network)”,所以大型网页通常不采用 XHR 脚本注入技术。

提示:在本站的《AJAX教程》的 XHR 创建对象一节中你也可以学习如何创建 XHR 对象!

注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能
 var images = document.getElementsByTagName('img');        for (var i = 0, len = images.length; i < len; i++) {}
编写JavaScript的时候一定要知道何时返回NodeList对象,这样可以最小化对它们的访问
1、进行了对getElementsByTagName()的调用
2、获取了元素的childNodes属性
3、获取了元素的attributes属性
4、访问了特殊的集合,如document.forms、document.images等等
要了解了当使用NodeList对象时,合理使用会极大的提升代码执行速度

避免与null进行比较

由于JavaScript是弱类型的,所以它不会做任何的自动类型检查,所以如果看到与null进行比较的代码,尝试使用以下技术替换:

1、如果值应为一个引用类型,使用instanceof操作符检查其构造函数

2、如果值应为一个基本类型,作用typeof检查其类型

3、如果是希望对象包含某个特定的方法名,则使用typeof操作符确保指定名字的方法存在于对象上

尊重对象的所有权

因为JavaScript可以在任何时候修改任意对象,这样就可以以不可预计的方式覆写默认的行为,所以如果你不负责维护某个对象,它的对象或者它的方法,那么你就不要对它进行修改,具体一点就是说:
1、不要为实例或原型添加属性
2、不要为实例或者原型添加方法
3、不要重定义已经存在的方法
4、不要重复定义其它团队成员已经实现的方法,永远不要修改不是由你所有的对象,你可以通过以下方式为对象创建新的功能:
1、创建包含所需功能的新对象,并用它与相关对象进行交互
2、创建自定义类型,继承需要进行修改的类型,然后可以为自定义类型添加额外功能

循环引用

如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。
简单的循环引用:
 var el = document.getElementById('MyElement'); var func = function () { //… } el.func = func; func.element = el;
但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。
function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }}init();

init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用:

1、置空dom对象

function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }}init();//可以替换为:function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }    el = null;}init();

将el置空,context中不包含对dom对象的引用,从而打断循环应用。

如果我们需要将dom对象返回,可以用如下方法:

function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }    return el;}init();//可以替换为:function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }    try {        return el;    }    finally {        el = null;    }}init();
2、构造新的context
function init() {    var el = document.getElementById('MyElement');    el.onclick = function () {    //……    }}init();//可以替换为:function elClickHandler() {//……}function init() {    var el = document.getElementById('MyElement');    el.onclick = elClickHandler;}init();

把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。

通过javascript创建的dom对象,必须append到页面中

IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!

function create() {    var gc = document.getElementById('GC');    for (var i = 0; i < 5000; i++) {        var el = document.createElement('div');        el.innerHTML = "test";        //下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化        gc.appendChild(el);    }}

字符串连接

如果要连接多个字符串,应该少使用+=,如

s+=a;

s+=b;

s+=c;

应该写成s+=a + b + c;

而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存,使用JavaScript数组来收集,最后使用join方法连接起来

var buf = [];for (var i = 0; i < 100; i++) {    buf.push(i.toString());}var all = buf.join("");

JavaScript编程实战:JavaScript字符串连接方式

各种类型转换

var myVar = "3.14159",str = "" + myVar, //转成string类型i_int = ~ ~myVar,  //转成int类型  f_float = 1 * myVar,  //转成浮点型  b_bool = !!myVar,  /*  转成布尔类型,任何长度不为0的字符串和除0以外的任何数字都为真*/
array = [myVar]; // 转成数组
如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高

多个类型声明

在JavaScript中所有变量都可以使用单个var语句来声明,这样就是组合在一起的语句,以减少整个脚本的执行时间,就如上面代码一样,上面代码格式也挺规范,让人一看就明了。

插入迭代器

如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

使用直接量

var aTest = new Array(); //替换为var aTest = [];var aTest = new Object; //替换为var aTest = {};var reg = new RegExp(); //替换为var reg = /../;//如果要创建具有一些特性的一般对象,也可以使用字面量,如下:var oFruit = new O;oFruit.color = "red";oFruit.name = "apple";//前面的代码可用对象字面量来改写成这样:var oFruit = { color: "red", name: "apple" };

避免双重解释

如果要提高代码性能,尽可能避免出现需要按照JavaScript解释的字符串,也就是
1、尽量少使用eval函数
使用eval相当于在运行时再次调用解释引擎对内容进行运行,需要消耗大量时间,而且使用Eval带来的安全性问题也是不容忽视的。
2、不要使用Function构造器
不要给setTimeout或者setInterval传递字符串参数
 var num = 0; setTimeout('num++', 10); //可以替换为:var num = 0;function addNum() {    num++;}setTimeout(addNum, 10);

缩短否定检测

if(oTest != '#ff0000'){    //do something}if(oTest != null){//do something}if(oTest != false){  //do something}//虽然这些都正确,但用逻辑非操作符来操作也有同样的效果:if(!oTest){//do something}

释放javascript对象

在rich应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。

对象:obj = null

对象属性:delete obj.myproperty

数组item:使用数组的splice方法释放数组中不用的item

性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快

通过将case语句按照最可能到最不可能的顺序进行组织

3、位运算较快

当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快

4、巧用||和&&布尔运算符

function eventHandler(e) {    if (!e) e = window.event;}//可以替换为:function eventHandler(e) {    e = e || window.event;}
if(myobj){    doSomething(myobj);}//可以替换为:myobj && doSomething(myobj);

避免错误应注意的地方

1、每条语句末尾须加分号

在if语句中,即使条件表达式只有一条语句也要用{}把它括起来,以免后续如果添加了语句之后造成逻辑错误

2、使用+号时需谨慎

JavaScript 和其他编程语言不同的是,在 JavaScript 中,’+'除了表示数字值相加,字符串相连接以外,还可以作一元运算符用,把字符串转换为数字。因而如果使用不当,则可能与自增符’++’混淆而引起计算错误

var valueA = 20;var valueB = "10";alert(valueA + valueB);     //ouput: 2010 alert(valueA + (+valueB));  //output: 30 alert(valueA + +valueB);    //output:30 alert(valueA ++ valueB);     //Compile error

3、使用return语句需要注意

一条有返回值的return语句不要用()括号来括住返回值,如果返回表达式,则表达式应与return关键字在同一行,以避免压缩时,压缩工具自动加分号而造成返回与开发人员不一致的结果

function F1(){    var valueA = 1;    var valueB = 2;    return valueA + valueB;}function F2() {    var valueA = 1;    var valueB = 2;    return valueA + valueB;}alert(F1());  //输出: 3 alert(F2());  //输出: undefined

==和===的区别

避免在if和while语句的条件部分进行赋值,如if (a = b),应该写成if (a == b),但是在比较是否相等的情况下,最好使用全等运行符,也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换
var valueA = "1";var valueB = 1;if(valueA == valueB) {    alert("Equal");}else{    alert("Not equal");}//输出: "Equal"if(valueA === valueB){    alert("Equal");}else{    alert("Not equal");}//输出: "Not equal"

不要使用生偏语法

不要使用生偏语法,写让人迷惑的代码,虽然计算机能够正确识别并运行,但是晦涩难懂的代码不方便以后维护

函数返回统一类型

虽然JavaScript是弱类型的,对于函数来说,前面返回整数型数据,后面返回布尔值在编译和运行都可以正常通过,但为了规范和以后维护时容易理解,应保证函数应返回统一的数据类型

总是检查数据类型

要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢,而是因为他们很忙,并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

何时用单引号,何时用双引号

虽然在JavaScript当中,双引号和单引号都可以表示字符串, 为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号,但为了兼容各个浏览器,也为了解析时不会出错,定义JSON对象时,最好使用双引号

部署

1、用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问题。
2、部署之前推荐使用压缩工具将JS文件压缩。
3、文件编码统一用UTF-8。
4、JavaScript 程序应该尽量放在 .js 的文件中,需要调用的时候在 HTML 中以 <script src=”filename.js”> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的,则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小,无益于代码的压缩和缓存的使用。另外,<script src=”filename.js”> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。
永远不要忽略代码优化工作,重构是一项从项目开始到结束需要持续的工作,只有不断的优化代码才能让代码的执行效率越来越好。


JavaScript的正则表达式是前端中比较重要的部分,正则表达式主要用于字符串处理,表单验证等场合,实用高效。JavaScript中的正则表达式比起C#中的正则表达式要弱很多,但基本够用了。在js中定义正则表达式很简单,有两种方式,一种是通过构造函数,一种是通过//,也就是两个斜杠:

var re =new RegExp("?(w{1,}=w{1,}&){1,}w{1,}=w{1,}");

使用构造函数定义正则表达式,注意大小写,否则就会不起作用。由于构造函数的参数是一个字符串,也可以是两个斜杠的方式定义,遇到一些特殊字符就需要使用进行转义通过双斜杠的方式定义同样的正则表达式。

var re =/?(w{1,}=w{1,}&){1,}w{1,}=w{1,}/;
var re =new RegExp( /^?(w{1,}=w{1,}&){1,}w{1,}=w{1,}/);
可以和构造函数达到同样的效果,但仔细分析,发现,通过构造函数需要更多的转义字符

如何在javascript中真正使用正则表达式呢?在JavaScript中RegExp和String对象都有处理正则表达式的方法。

  • test -- RegExp的test方法用来测试字符串是否匹配给出的匹配模式,返回布尔值;
  • exec -- RegExp的exec方法返回包含第一个匹配的的数组或null;
  • match -- String的match方法返回包含所有匹配子字符串的数组;
  • replace -- String的replace方法完成string的替换操作,支持正则表达式;
  • search -- 与String的indexof方法类似,不同的是search支持正则表达式,而不仅仅是字符串;
  • split -- 按照一定规则拆分字符串并将子字符串存储到数组中的String方法。

关于这些函数的具体使用方法,可以参阅JS的相关函数手册。

一个实例对象除了方法当然还有属性,一个正则表达式有以下属性:

  • global -- 布尔值,若全局选项g已设置则返回true,否则返回false;
  • ignoreCase -- 布尔值,若忽略大小写选项i已设置则返回true,否则返回false;
  • lastIndex -- 整数,使用exec或test方法时被填入,表示下次匹配将会从哪个字符位置开始;
  • multiline -- 布尔值,表示多行模式选项m是否设置,若设置则返回true,否则返回false;
  • source -- 正则表达式的元字符串形式。//的source将返回”“。
javascript

常用的经典Javascript正则表达式

匹配中文字符的正则表达式:
[u4e00-u9fa5]
匹配双字节字符(包括汉字在内):
[^x00-xff]
应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
String.prototype.len=function(){ return this.replace([^x00-xff]/g,"aa").length; }
匹配空行的正则表达式:

[s|]*

匹配HTML标记的正则表达式:

/<(.*)>.*</1>|<(.*) />/

匹配首尾空格的正则表达式:
(^s*)|(s*$)
应用:JavaScript中没有像VBScript那样的trim函数,我们就可以利用这个表达式来实现,如下:
String.prototype.trim = function(){    return this.replace(/(^s*)|(s*$)/g, "");}
利用正则表达式分解和转换IP地址:
下面是利用正则表达式匹配IP地址,并将IP地址转换成对应数值的Javascript程序:
function IP2V(ip){    re=/(d+).(d+).(d+).(d+)/g  //匹配IP地址的正则表达式    if(re.test(ip)){        return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1    }    else{        throw new Error("Not a valid IP address!")    }}
不过上面的程序如果不用正则表达式,而直接用split函数来分解可能更简单,程序如下:
var ip="10.100.20.168"ip=ip.split(".")alert("IP值是:"+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))
匹配Email地址的正则表达式:
w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式:
http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
利用正则表达式去除字串中重复的字符的算法程序:[*注:此程序不正确]
var s="abacabefgeeii"var s1=s.replace(/(.).*1/g,"$1")var re=new RegExp("["+s1+"]","g")var s2=s.replace(re,"")alert(s1+s2)  //结果为:abcefgi
*注
===============================
如果var s = “abacabefggeeii”
结果就不对了,结果为:abeicfgg
正则表达式的能力有限
===============================
表达式来实现去除重复字符的方法:
使用后向引用取出包括重复的字符,再以重复的字符建立第二个表达式,取到不重复的字符,两者串连。这个方法对于字符顺序有要求的字符串可能不适用,得用正则表达式从URL地址中提取文件名的javascript程序,如下结果为page1
s="http://blog.penner.cn/page1.htm"s=s.replace(/(.*/){ 0, }([^.]+).*/ig,"$2")alert(s)

利用正则表达式限制网页表单里的文本框输入内容:

用正则表达式限制只能输入中文:

onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用正则表达式限制只能输入全角字符:
onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正则表达式限制只能输入数字:
onkeyup="value=value.replace(/[^d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用正则表达式限制只能输入数字和英文:
onkeyup="value=value.replace(/[W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
匹配非负整数(正整数 + 0)
^d+$
匹配正整数
^[0-9]*[1-9][0-9]*$
匹配非正整数(负整数 + 0)
^((-d+)|(0+))$
匹配负整数
^-[0-9]*[1-9][0-9]*$
匹配整数
^-?d+$
匹配非负浮点数(正浮点数 + 0)
^d+(.d+)?$
匹配正浮点数
^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
匹配非正浮点数(负浮点数 + 0)
^((-d+(.d+)?)|(0+(.0+)?))$
匹配负浮点数
^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
匹配浮点数
^(-?d+)(.d+)?$
匹配由26个英文字母组成的字符串
^[A-Za-z]+$
匹配由26个英文字母的大写组成的字符串
^[A-Z]+$
匹配由26个英文字母的小写组成的字符串
^[a-z]+$
匹配由数字和26个英文字母组成的字符串
^[A-Za-z0-9]+$
匹配由数字、26个英文字母或者下划线组成的字符串
^w+$
匹配email地址
^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$
匹配url
^[a-zA-z]+://匹配(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
匹配html tag
<s*(S+)(s[^>]*)?>(.*?)<s*/1s*>

js

javascript常用的正则表达式实例

// 取得字符串的字节长度function strlen(str){    var i;       var len;       len = 0;       for (i=0;i<str.length;i++){

        if (str.charCodeAt(i)>255) len+=2;        else len++;   

    }  

return len; } // 判断是否为数字,是则返回true,否则返回falsefunction f_check_number(obj){ if(/^d+$/.test(obj.value)){ return true; } else{ f_alert(obj,"请输入数字"); return false; } } // 判断是否为自然数,是则返回true,否则返回false function f_check_naturalnumber(obj){ var s = obj.value; if(/^[0-9]+$/.test( s ) && (s > 0)){ return true; } else{ f_alert(obj,"请输入自然数"); return false; } } // 判断是否为整数,是则返回true,否则返回falsefunction f_check_integer(obj){ if(/^(+|-)?d+$/.test( obj.value)){ return true; } else{ f_alert(obj,"请输入整数"); return false; } } // 判断是否为实数,是则返回true,否则返回falsefunction f_check_float(obj){ if(/^(+|-)?d+($|.d+$)/.test( obj.value)){ return true; } else{ f_alert(obj,"请输入实数"); return false; }} // 校验数字的长度和精度function f_check_double(obj){ var numReg; var value = obj.value; var strValueTemp, strInt, strDec; var dtype = obj.eos_datatype; var pos_dtype = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")).split(","); var len = pos_dtype[0], prec = pos_dtype[1]; try{ numReg =/[-]/; strValueTemp = value.replace(numReg, ""); numReg =/[+]/; strValueTemp = strValueTemp.replace(numReg, ""); //整数 if(prec==0){ numReg =/[.]/; if(numReg.test(value) == true){ f_alert(obj, "输入必须为整数类型"); return false; } } if(strValueTemp.indexOf(".") < 0 ){   

            if(strValueTemp.length >( len - prec)){   

                f_alert(obj, "整数位不能超过"+ (len - prec) +"位");   

                return false;   

            }  }        else{ strInt = strValueTemp.substr( 0, strValueTemp.indexOf(".") ); if(strInt.length >( len - prec)){ f_alert(obj, "整数位不能超过"+ (len - prec) +"位"); return false; } strDec = strValueTemp.substr( (strValueTemp.indexOf(".")+1), strValueTemp.length ); if(strDec.length > prec){ f_alert(obj, "小数位不能超过"+ prec +"位"); return false; } } return true; }    catch(e){ alert("in f_check_double = " + e); return false; } } // 校验数字的最小最大值,返回boolfunction f_check_interval(obj){ var value = parseFloat(obj.value); var dtype = obj.eos_datatype; var pos_dtype = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")).split(","); var minLimit = pos_dtype[0]; var maxLimit = pos_dtype[1]; var minVal = parseFloat(pos_dtype[0]); var maxVal = parseFloat(pos_dtype[1]); if(isNaN(value)){ f_alert(obj, "值必须为数字"); return false; } if((isNaN(minVal) && (minLimit != "-")) || (isNaN(maxVal) && (maxLimit != "+"))){ f_alert(obj, "边界值必须为数字或-、+"); return false; } if(minLimit == "-" && !isNaN(maxVal)){ if(value > maxVal){ f_alert(obj, "值不能超过" + maxVal); return false; } } if(!isNaN(minVal) && maxLimit == "+"){ if(value < minVal){

            f_alert(obj, "值不能小于" + minVal);   

            return false;   

        }

    }   

    if(!isNaN(minVal) && !isNaN(maxVal)){

        if(minVal > maxVal){

            f_alert(obj, "起始值" + minVal + "不能大于终止值" + maxVal);   

        }        else{   

            if(!(value <= maxVal && value >= minVal)){

                f_alert(obj, "值应该在" + minVal + "和" + maxVal + "之间");   

                return false;   

            }   

       }   

    } return true; } //用途:检查输入字符串是否只由汉字组成,如果通过验证返回true,否则返回falsefunction f_check_zh(obj){ if(/^[u4e00-u9fa5]+$/.test(obj.value)) { return true; } f_alert(obj,"请输入汉字"); return false; } // 判断是否为小写英文字母,是则返回true,否则返回falsefunction f_check_lowercase(obj){ if(/^[a-z]+$/.test( obj.value )){ return true; } f_alert(obj,"请输入小写英文字母"); return false; } // 判断是否为大写英文字母,是则返回true,否则返回falsefunction f_check_uppercase(obj){ if (/^[A-Z]+$/.test( obj.value )){ return true; } f_alert(obj,"请输入大写英文字母"); return false; } // 判断是否为英文字母,是则返回true,否则返回falsefunction f_check_letter(obj){ if(/^[A-Za-z]+$/.test( obj.value )){ return true; } f_alert(obj,"请输入英文字母"); return false; } /**用途:检查输入字符串是否只由汉字、字母、数字组成输入:value:字符串返回:如果通过验证返回true,否则返回false*/function f_check_ZhOrNumOrLett(obj){ //判断是否是汉字、字母、数字组成 var regu = "^[0-9a-zA-Zu4e00-u9fa5]+$"; var re = new RegExp(regu); if(re.test( obj.value )) { return true; } f_alert(obj,"请输入汉字、字母或数字"); return false; } /*用途:校验ip地址的格式输入:strIP:ip地址返回:如果通过验证返回true,否则返回false;*/function f_check_IP(obj){ var re=/^(d+).(d+).(d+).(d+)$/; //匹配IP地址的正则表达式 if(re.test( obj.value )){

        if(RegExp.$1<=255 && RegExp.$1>=0          &&RegExp.$2<=255 && RegExp.$2>=0 

         &&RegExp.$3<=255 && RegExp.$3>=0  

         &&RegExp.$4<=255 && RegExp.$4>=0 ){

        return true;     } } f_alert(obj,"请输入合法的计算机IP地址"); return false; } /*用途:检查输入对象的值是否符合端口号格式输入:str 输入的字符串返回:如果通过验证返回true,否则返回false*/function f_check_port(obj){ if(!f_check_number(obj)) return false;   

    if(obj.value < 65536) return true;   

    f_alert(obj,"请输入合法的计算机IP地址端口号");   

    return false;    

}   

       

/*

用途:检查输入对象的值是否符合网址格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function f_check_URL(obj){     

    var myReg = /^((http:[/][/])?w+([.]w+|[/]w*)*)?$/;    

    if(myReg.test( obj.value )) return true;    

    f_alert(obj,"请输入合法的网页地址");   

    return false;    

}   

/*

用途:检查输入对象的值是否符合E-Mail格式

输入:str 输入的字符串

返回:如果通过验证返回true,否则返回false

*/

function f_check_email(obj){     

    var myReg = /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/;    

    if(myReg.test( obj.value )) return true;    

    f_alert(obj,"请输入合法的电子邮件地址");   

    return false;    

}   

   

/*

要求:一、移动电话号码为11或12位,如果为12位,那么第一位为0

二、11位移动电话号码的第一位和第二位为"13"

三、12位移动电话号码的第二位和第三位为"13"

用途:检查输入手机号码是否正确

输入:

s:字符串

返回:

如果通过验证返回true,否则返回false

*/function f_check_mobile(obj){      

    var regu =/(^[1][3][0-9]{9}$)|(^0[1][3][0-9]{9}$)/;   

    var re = new RegExp(regu);   

    if (re.test( obj.value )) return true; 

    f_alert(obj,"请输入正确的手机号码");   

    return false;      

}  

       

/*

要求:一、电话号码由数字、"("、")"和"-"构成

二、电话号码为3到8位

三、如果电话号码中包含有区号,那么区号为三位或四位

四、区号用"("、")"或"-"和其他部分隔开

用途:检查输入的电话号码格式是否正确

输入:

strPhone:字符串

返回:

如果通过验证返回true,否则返回false

*/       

function f_check_phone(obj){

    var regu =/(^([0][1-9]{2,3}[-])?d{3,8}(-d{1,6})?$)|(^([0][1-9]{2,3})d{3,8}((d{1,6}))?$)|(^d{3,8}$)/;    

    var re = new RegExp(regu);   

    if(re.test(obj.value)){   

        return true;   

    }   

    f_alert(obj,"请输入正确的电话号码");   

    return false;   

}          

/* 判断是否为邮政编码 */ 

function f_check_zipcode(obj){

    if(!f_check_number(obj)) return false;   

    if(obj.value.length!=6){

        f_alert(obj,"邮政编码长度必须是6位");   

        return false;   

    }   

    return true;   

}       

/*

用户ID,可以为数字、字母、下划线的组合,

第一个字符不能为数字,且总长度不能超过20。

*/

function f_check_userID(obj){

    var userID = obj.value;   

    if(userID.length > 20){

        f_alert(obj,"ID长度不能大于20");   

        return false;   

    }   

    if(!isNaN(userID.charAt(0))){

        f_alert(obj,"ID第一个字符不能为数字");   

        return false;   

    }   

    if(!/^w{1,20}$/.test(userID)){

        f_alert(obj,"ID只能由数字、字母、下划线组合而成");   

        return false;   

    }   

    return true;   

}   

       

/*

功能:验证身份证号码是否有效

提示信息:未输入或输入身份证号不正确!

使用:f_check_IDno(obj)

返回:bool

*/

function f_check_IDno(obj){ var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; var iSum = 0; var info = ""; var strIDno = obj.value; var idCardLength = strIDno.length; if(!/^d{17}(d|x)$/i.test(strIDno)&&!/^d{15}$/i.test(strIDno)){ f_alert(obj,"非法身份证号"); return false; } //在后面的运算中x相当于数字10,所以转换成a strIDno = strIDno.replace(/x$/i,"a"); if(aCity[parseInt(strIDno.substr(0,2))]==null){ f_alert(obj,"非法地区"); return false; }     //18位身份证验算 if (idCardLength==18){ sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2)); var d = new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())){ f_alert(obj,"非法生日"); return false; } //验证身份正好是否合法(最后一位校验码验算)     for(var i = 17;i>=0;i --){            iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11);        } if(iSum%11!=1){ f_alert(obj,"非法身份证号"); return false; } }    //15位身份证验算 else if (idCardLength==15){ sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2)); var d = new Date(sBirthday.replace(/-/g,"/")) var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate(); if(sBirthday != dd){ f_alert(obj,"非法生日"); return false; } } return true; } /** 判断字符串是否符合指定的正则表达式*/function f_check_formatStr(obj){ var str = obj.value; var dtype = obj.eos_datatype; var regu = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")); //指定的正则表达式 var re = new RegExp(regu); if(re.test(str)) return true; f_alert(obj , "不符合指定的正则表达式要求"); return false; } /*功能:判断是否为日期(格式:yyyy年MM月dd日,yyyy-MM-dd,yyyy/MM/dd,yyyyMMdd)提示信息:未输入或输入的日期格式错误!使用:f_check_date(obj)返回:bool*/function f_check_date(obj){ var date = Trim(obj.value); var dtype = obj.eos_datatype; var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")); //日期格式 var year,month,day,datePat,matchArray; if(/^(y{4})(-|/)(M{1,2})2(d{1,2})$/.test(format)) datePat = /^(d{4})(-|/)(d{1,2})2(d{1,2})$/; else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)$/.test(format)) datePat = /^(d{4})年(d{1,2})月(d{1,2})日$/; else if(format=="yyyyMMdd") datePat = /^(d{4})(d{2})(d{2})$/; else{ f_alert(obj,"日期格式不对"); return false; } matchArray = date.match(datePat); if(matchArray == null){ f_alert(obj,"日期长度不对,或日期中有非数字符号"); return false; } if(/^(y{4})(-|/)(M{1,2})2(d{1,2})$/.test(format)){ year = matchArray[1]; month = matchArray[3]; day = matchArray[4]; }    else{ year = matchArray[1]; month = matchArray[2]; day = matchArray[3]; } if (month < 1 || month > 12){

        f_alert(obj,"月份应该为1到12的整数");   

        return false;   

    }   

    if (day < 1 || day > 31){

        f_alert(obj,"每个月的天数应该为1到31的整数");   

        return false;   

    }        

    if ((month==4 || month==6 || month==9 || month==11) && day==31){

        f_alert(obj,"该月不存在31号");   

        return false;   

    }        

    if(month==2){

        var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));   

        if(day>29){                  

            f_alert(obj,"2月最多有29天");   

            return false;   

        }   

        if((day==29) && (!isleap)){

            f_alert(obj,"闰年2月才有29天");   

            return false;   

        }   

    }   

    return true;   

}   

       

/*

功能:校验的格式为yyyy年MM月dd日HH时mm分ss秒,yyyy-MM-dd HH:mm:ss,yyyy/MM/dd HH:mm:ss,yyyyMMddHHmmss

提示信息:未输入或输入的时间格式错误

使用:f_check_time(obj)

返回:bool

*/

function f_check_time(obj){ var time = Trim(obj.value); var dtype = obj.eos_datatype; var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")); //日期格式 var datePat,matchArray,year,month,day,hour,minute,second; if(/^(y{4})(-|/)(M{1,2})2(d{1,2}) (HH:mm:ss)$/.test(format)) datePat = /^(d{4})(-|/)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/; else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)(HH时mm分ss秒)$/.test(format)) datePat = /^(d{4})年(d{1,2})月(d{1,2})日(d{1,2})时(d{1,2})分(d{1,2})秒$/; else if(format == "yyyyMMddHHmmss") datePat = /^(d{4})(d{2})(d{2})(d{2})(d{2})(d{2})$/; else{ f_alert(obj,"日期格式不对"); return false; } matchArray = time.match(datePat); if(matchArray == null){ f_alert(obj,"日期长度不对,或日期中有非数字符号"); return false; } if(/^(y{4})(-|/)(M{1,2})2(d{1,2}) (HH:mm:ss)$/.test(format)){ year = matchArray[1]; month = matchArray[3]; day = matchArray[4]; hour = matchArray[5]; minute = matchArray[6]; second = matchArray[7]; }    else{ year = matchArray[1]; month = matchArray[2]; day = matchArray[3]; hour = matchArray[4]; minute = matchArray[5]; second = matchArray[6]; } if(month < 1 || month > 12){

        f_alert(obj,"月份应该为1到12的整数");   

        return false;   

    }   

    if(day < 1 || day > 31){              

        f_alert(obj,"每个月的天数应该为1到31的整数");   

        return false;   

    }        

    if((month==4 || month==6 || month==9 || month==11) && day==31){            

        f_alert(obj,"该月不存在31号");   

        return false;   

    }        

    if(month==2){   

        var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));   

        if(day>29){                  

            f_alert(obj,"2月最多有29天");   

            return false;   

        }   

        if((day==29) && (!isleap)){                  

            f_alert(obj,"闰年2月才有29天");   

            return false;   

        }   

    }   

    if(hour<0 || hour>23){   

        f_alert(obj,"小时应该是0到23的整数");   

        return false;   

    }   

    if(minute<0 || minute>59){   

        f_alert(obj,"分应该是0到59的整数");   

        return false;   

    }   

    if(second<0 || second>59){   

        f_alert(obj,"秒应该是0到59的整数");   

        return false;   

    }   

    return true;   }   

// 判断当前对象是否可见function isVisible(obj){ var visAtt,disAtt; try{ disAtt=obj.style.display; visAtt=obj.style.visibility; }    catch(e){} if(disAtt=="none" || visAtt=="hidden") return false; return true; } // 判断当前对象及其父对象是否可见function checkPrVis(obj){ var pr=obj.parentNode; do{ if(pr == undefined || pr == "undefined") return true; else{ if(!isVisible(pr)) return false; } }while(pr=pr.parentNode); return true; } // 弹出警告对话框,用户点确定后将光标置于出错文本框上, 并且将原来输入内容选中。function f_alert(obj,alertInfo){ var caption = obj.getAttribute("eos_displayname"); if(caption == null) caption = ""; alert(caption + ":" + alertInfo + "!"); obj.select(); if(isVisible(obj) && checkPrVis(obj)) obj.focus(); }

// 检测字符串是否为空

function isnull(str){   

    var i;   

    if(str.length == 0)   

        return true;   

    for(i=0;i<str.length;i++){   

        if(str.charAt(i)!=' ')    

            return false;   

    }   

    return true;   

}   

       

/**

* 检测指定文本框输入是否合法。

* 如果用户输入的内容有错,则弹出提示对话框,

* 同时将焦点置于该文本框上,并且该文本框前面

* 会出现一个警告图标(输入正确后会自动去掉)。

*/

function checkInput(object){   

    var image;   

    var i;   

    var length;   

    if(object.eos_maxsize + "" != "undefined") length = object.eos_maxsize;   

    else length = 0;   

    if (object.eos_isnull=="true" && isnull(object.value))  return true;   

    /* 长度校验 */  

    if(length != 0 && strlen(object.value) > parseInt(length)){   

        f_alert(object, "超出最大长度" + length);   

        return false;   

    }    

    /* 数据类型校验 */  

    else{   

        if(object.eos_datatype + "" != "undefined"){          

            var dtype = object.eos_datatype;   

            var objName = object.name;   

            //如果类型名后面带有括号,则视括号前面的字符串为校验类型   

            if(dtype.indexOf("(") != -1)   

                dtype = dtype.substring(0,dtype.indexOf("("));   

                //根据页面元素的校验类型进行校验   

            try{   

                if(eval("f_check_" + dtype + "(object)") != true)   

                    return false;   

            }            catch(e){return true;}   

            /*  如果form中存在name前半部分相同,并且同时存在以"min"和"max"结尾的表单域,  

                那么视为按区间查询。即"min"结尾的表单域的值要小于等于"max"结尾的表单域的值。 */ 

            if(objName.substring((objName.length-3),objName.length)=="min"){   

                var objMaxName = objName.substring(0, (objName.length-3)) + "max";   

                if(document.getElementById(objMaxName) != undefined && document.getElementById(objMaxName) != "undefined" ){   

                    if(checkIntervalObjs(object, document.getElementById(objMaxName)) != true)   

                        return false;                      

                }   

            }              

        }   

    }   

    return true;   

}   

       

/* 检测表单中所有输入项的正确性,一般用于表单的onsubmit事件 */

function checkForm(myform){   

    var i;   

    for (i=0;i<myform.elements.length;i++){   

        /* 非自定义属性的元素不予理睬 */        

        if(myform.elements[i].eos_displayname + "" == "undefined") continue;   

        /* 非空校验 */  

        if(myform.elements[i].eos_isnull=="false" && isnull(myform.elements[i].value)){   

            f_alert(myform.elements[i],"不能为空");   

            return false;   

        }          

        /* 数据类型校验 */  

        if(checkInput(myform.elements[i])==false)   

            return false;                  

    }   

    return true;   

}   

       

/**

* 校验两个表单域数据的大小,目前只允许比较日期和数字。

* @param obj1 小值表单域

* @param obj2 大值表单域

*/

function checkIntervalObjs(obj1 , obj2){      

    var caption1 = obj1.getAttribute("eos_displayname");   

    var caption2 = obj2.getAttribute("eos_displayname");   

    var val1 = parseFloat(obj1.value);   

    var val2 = parseFloat(obj2.value);   

    // 非自定义属性的元素不予理睬   

    if(obj1.eos_displayname + "" == "undefined" || obj2.eos_displayname + "" == "undefined") {   

        return false;   

    }   

    // 日期类型的比较   

    if(f_check_date(obj1) == true && f_check_date(obj2) == true){   

        var dtype = obj1.eos_datatype;   

        var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")"));  //日期格式   

        val1 = getDateByFormat(obj1.value, format);   

        dtype = obj2.eos_datatype;   

        format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")"));  //日期格式   

        val2 = getDateByFormat(obj2.value, format);   

        if(val1 > val2){   

            obj2.select();   

        if(isVisible(obj) && checkPrVis(obj))   

            obj2.focus();   

        alert(caption1 + "的起始日期不能大于其终止日期!");   

        return false;    

    }     

    // 数字类型的比较   

    if((isNaN(val1) && !isnull(val1)) || (isNaN(val2) && !isnull(val2))){   

        alert(caption1 + "的值不全为数字则不能比较!");   

        return false;   

    }   

    if(val1 > val2){   

        obj2.select();   

        if(isVisible(obj) && checkPrVis(obj))   

            obj2.focus();   

        alert(caption1 + "的起始值不能大于其终止值!");   

        return false;   

    }   

    return true;   

}   

       

/*根据日期格式,将字符串转换成Date对象。

格式:yyyy-年,MM-月,dd-日,HH-时,mm-分,ss-秒。

(格式必须写全,例如:yy-M-d,是不允许的,否则返回null;格式与实际数据不符也返回null。)

默认格式:yyyy-MM-dd HH:mm:ss,yyyy-MM-dd。*/ 

function getDateByFormat(str){   

    var dateReg,format;   

    var y,M,d,H,m,s,yi,Mi,di,Hi,mi,si;   

    if((arguments[1] + "") == "undefined")        format = "yyyy-MM-dd HH:mm:ss";   

    else         format = arguments[1];   

    yi = format.indexOf("yyyy");   

    Mi = format.indexOf("MM");   

    di = format.indexOf("dd");   

    Hi = format.indexOf("HH");   

    mi = format.indexOf("mm");   

    si = format.indexOf("ss");   

    if(yi == -1 || Mi == -1 || di == -1)        return null;   

    else{   

        y = parseInt(str.substring(yi, yi+4));   

        M = parseInt(str.substring(Mi, Mi+2));   

        d = parseInt(str.substring(di, di+2));   

    }   

    if(isNaN(y) || isNaN(M) || isNaN(d))         return null;   

    if(Hi == -1 || mi == -1 || si == -1)         return new Date(y, M-1, d);   

    else{   

        H = str.substring(Hi, Hi+4);   

        m = str.substring(mi, mi+2);   

        s = str.substring(si, si+2);   

    }   

    if(isNaN(parseInt(y)) || isNaN(parseInt(M)) || isNaN(parseInt(d)))         return new Date(y, M-1, d);   

    else        return new Date(y, M-1, d,H, m, s);   

}   

       

/*LTrim(string):去除左边的空格*/

function LTrim(str){   

    var whitespace = new String("  ");   

    var s = new String(str);      

    if(whitespace.indexOf(s.charAt(0)) != -1){   

        var j=0, i = s.length;   

        while(j < i && whitespace.indexOf(s.charAt(j)) != -1){   

            j++;   

        }   

        s = s.substring(j, i);   

    }   

    return s;   

}   

       

/*RTrim(string):去除右边的空格*/

function RTrim(str){   

    var whitespace = new String("  ");   

    var s = new String(str);   

    if (whitespace.indexOf(s.charAt(s.length-1)) != -1){   

        var i = s.length - 1;   

        while (i >= 0 && whitespace.indexOf(s.charAt(i)) != -1){   

            i--;   

        }   

        s = s.substring(0, i+1);   

    }   

    return s;   

}   

       

/*Trim(string):去除字符串两边的空格*/

function Trim(str){   

    return RTrim(LTrim(str));   

}

js正则表达式

正则表达式在JavaScript中的高级应用


子模式
子模式了。用来指定重复次数的元字符只能作用于紧挨着它的字符或元字符,而在实际应用中我们需要进行重复匹配的字符往往不一定就只是一个字符或元字符,就如reUrl中所要匹配的“http”和“net”就是多个字符,这时候就可以使用(和)将多个字符括起来作为一个独立的元素来使用。

比如验证email地址的正则表达式var reMail = /w+@w+.w+/i;并不完善,一个有效的用户名除了可以是字母、数字、下划线外,还可以是点号,同时域名部分也不能保证是mail.com这行的形式,也完全有可能是mail.mymail.com这样的形式,所以一个更为完善的匹配有效email地址的正则表达式是这样的:
var reEmail = /(w+.)*w+@(w+.)+w+/i;

回溯引用
在web开发中,我们经常需要去匹配HTML标签,大多数的HTML标签都有一个开始标记和结束标记如<h1></h1>,<div></div>,如果只需单纯的匹配H1和DIV我们可以很容易的构造出该正则表达式:

var reH1 = /<h1>.*?</h1>/gi;

var reDiv = /<div>.*?</div>/gi;

但是我们所要匹配的并不是某个或某几个HTML标签,事实上HTML具体是什么样的形式我们完全是未知的,比如XML的标记我们是完全无法预计的,所以分组匹配在这里完全排不上用场。幸运的是,在正则表达式中回溯引用允许正则表达式模式引用前面的匹配结果。具体应用可以参考下面匹配HTML标签的正则表达式。

var html = "<h1>nowamagic</h1>";

var reTag = /<(w+d?)>.*?</1>/gi;

document.write(html.match(reTag));//<h1>nowamagic</h1>

reTag最后部分的1便是一个回溯引用,引用的前面的第一个子模式(w+d?),当然如果前面还存在第二个子模式我们也可以使用2引用、。注意:回溯引用只能引用前面已经匹配过的结果,而下面这样的写法就是错误的。

var reTag = /<1>.*?</(w+d?)>/gi;

回溯引用在替换操作中有着十分广泛的应用。比如我们要将一段文本中的所有网址自动添加上其对应的超链接,即是将“http://nowamagic.net”的字符串替换成nowamagic的形式。我们就可以这样处理:

var url = "http://nowamagic.net";

var reUrl = /(http[s]*:/{2}(w+.)+w+)/gi;

//<a href="http://nowamagic.net" rel="external nofollow" target="_blank" >http://nowamagic.net</a>

document.write(url.replace(reUrl,'<a href="$1">$1</a>'));

$1引用了前面的子模式(http[s]*:/{2}(w+.)+w+)。注意:javascript中进行替换操作时回溯引用使用”$”而不是””。

前后查找
如果我们需要获取h1标签中的文本(包含在h1标签中的文本,不包括h1本身),这个正则表达式应该如何写?比如”<h1>front-end</h1>”,在所有介绍过的方法中,似乎都还没有提及过要匹配某个字符串,但却只返回某些字符前或后的字符串的情况,正则表达式中确实是存在这样的语法。

var fe = "<h1>front-end</h1>";

var reInnerText = /(?<=<h1>).*?(?=</h1>))/i;

在reInnerText和/<h1>.*?</h1>/i的匹配模式是相同的,唯一不同的返回结果,/<h1>.*?</h1>/i会返回整个fe字符串,而reInnerText只返回”front-end”,比较这两个正则表达式可以发现两处不同的写法:(?<=<h1>),(?=</h1>)。(?<=<h1>)定义了一个向后查找模式,即匹配结果只包括”<h1>”后面的部分;(?=</h1>)则定义的是一个向前查找模式,匹配结果只返回”</h1>”前的结果;所以reInnerText的匹配结果只返回”<h1>”和”</h1>”之间的内容!前后查找的语法很简单,向前查找是一个以”?=”开头的字表达式,而向后查找确实一个以”?<=”开头的字表达式。

遗憾的是javascript并不支持正则表达式的向后查找,所以事实上reInnerText的写法在javascript是有语法错误的。有条件可以使用其他支持前后查找的语言进行验证,比如PHP。

$title = '<h1>front-end</h1>';

if(preg_match('/(?<=<h1>).*?(?=</h1>)/i',$title,$rst)){

   echo $rst[0];//front-end

}

提示:如果您想要进一步巩固对于JavaScript正则表达式的使用,请参考本站的JavaScript编程实战部分


在讲原型之前我们先来了解一下函数。

在JS中,函数的本质就是对象,它与其他对象不同的是,创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢?是一个叫做Function的特殊函数,通过new Function 产生的对象就是一个函数。

function f1() {}//上面的函数等同于:var f1 = new Function();function sum(a, b) {    return a + b;}//上面的函数等同于:var sum = new Function("a", "b", "return a + b");//前面的是函数形参名,最后一个参数是函数体

也就是说:只要通过Function创建的对象就是函数,函数都是通过Function创建的。

看下面这张图片:

以上我们可以看到普通对象是由函数创建的,函数是由Function创建的。那我们会有一个疑问Function是从哪里来的?其实Function是不通过其他函数得到,它是JS执行引擎初始化就直接通过本地代码直接放置到内存中的。

当一个函数被创建后,这个函数就会自动附带一个属性prototype,它就是一个Object对象,代表着函数的原型。也就是说prototype就是原型对象

原型对象中包含两个属性:constructor和__proto__。constructor这个属性是指创建原型的函数,它指向函数本身。所以有以下关系:

看这样一段代码:

var Person = function () { };var p = new Person();    

我们来看看这个 new 究竟做了什么?

我们把 new 的过程拆分成以下三步:

1. var p={}; 也就是说,初始化一个对象p。

2. p.__proto__=Person.prototype;

3. Person.call(p);也就是说构造p,也可以称之为初始化p。

我们来证明一下:

var Person = function () { };var p = new Person();alert(p.__proto__ === Person.prototype); // true

这段代码会返回 true。说明我们步骤2是正确的。


那么__proto__是什么?

每个对象都会在其内部初始化一个属性,就是 __proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是 Firefox 的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

我们看一下下面这些代码:

var Person = function () { };    Person.prototype.Say = function () {    alert("Person say");}var p = new Person();p.Say();

我们看下为什么 p 可以访问 Person 的 Say。

首先var p=new Person();

可以得出 p.__proto__=Person.prototype。那么当我们调用 p.Say() 时,首先 p 中没有 Say 这个属性, 于是,他就需要到他的 __proto__ 中去找,也就是 Person.prototype,而我们在上面定义了 Person.prototype.Say = function(){}; 于是,就找到了这个方法。

好,接下来,让我们看个更复杂的。


我们来做这样的推导:

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!


包含最重要的概念、函数​​、方法等的 JavaScript 备忘单。初学者的完整快速参考。

开始

介绍

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

console.log()

alert('Hello world!');console.log('Hello world!');// => Hello world!

数值

let amount = 6;let price = 4.99;

变量

let x = null;let name = "Tammy";const found = false;// => Tammy, false, nullconsole.log(name, found, x);var a;console.log(a); // => undefined

字符串

let single = 'Wheres my bandit hat?';let double = "Wheres my bandit hat?";// => 21console.log(single.length);

算术运算符

5 + 5 = 10     // Addition10 - 5 = 5     // Subtraction5 * 10 = 50    // Multiplication10 / 5 = 2     // Division10 % 5 = 0     // Modulo

注释

// This line will denote a comment/*  The below configuration must be changed before deployment. */

赋值运算符

let number = 100;// Both statements will add 10number = number + 10;number += 10;console.log(number); // => 120

字符串插值

let age = 7;// String concatenation'Tommy is ' + age + ' years old.';// String interpolation`Tommy is ${age} years old.`;

let 关键字

let count; console.log(count); // => undefinedcount = 10;console.log(count); // => 10

const 关键字

const numberOfColumns = 4;// TypeError: Assignment to constant...numberOfColumns = 8;

JavaScript 条件

if 语句

const isMailSent = true;if (isMailSent) {  console.log('Mail sent to recipient');}

三元运算符

var x=1;// => trueresult = (x == 1) ? true : false;

运算符

true || false;       // true10 > 5 || 10 > 20;   // truefalse || false;      // false10 > 100 || 10 > 20; // false

逻辑运算符 &&

true && true;        // true1 > 2 && 2 > 1;      // falsetrue && false;       // false4 === 4 && 3 > 1;    // true

比较运算符

1 > 3                // false3 > 1                // true250 >= 250           // true1 === 1              // true1 === 2              // false1 === '1'            // false

逻辑运算符!

let lateToWork = true;let oppositeValue = !lateToWork;// => falseconsole.log(oppositeValue); 

否则如果

const size = 10;if (size > 100) {  console.log('Big');} else if (size > 20) {  console.log('Medium');} else if (size > 4) {  console.log('Small');} else {  console.log('Tiny');}// Print: Small

switch 语句

const food = 'salad';switch (food) {  case 'oyster':    console.log('The taste of the sea');    break;  case 'pizza':    console.log('A delicious pie');    break;  default:    console.log('Enjoy your meal');}

JavaScript 函数

函数

// Defining the function:function sum(num1, num2) {  return num1 + num2;}// Calling the function:sum(3, 6); // 9

匿名函数

// Named functionfunction rocketToMars() {  return 'BOOM!';}// Anonymous functionconst rocketToMars = function() {  return 'BOOM!';}

箭头函数 (ES6)

两个参数

const sum = (param1, param2) => {   return param1 + param2; }; console.log(sum(2,5)); // => 7 

没有参数

const printHello = () => {   console.log('hello'); }; printHello(); // => hello

一个参数

const checkWeight = weight => {   console.log(`Weight : ${weight}`); }; checkWeight(25); // => Weight : 25 

简洁的箭头函数

const multiply = (a, b) => a * b; // => 60 console.log(multiply(2, 30)); 

返回关键字

// With returnfunction sum(num1, num2) {  return num1 + num2;}// The function doesn't output the sumfunction sum(num1, num2) {  num1 + num2;}

调用函数

// Defining the functionfunction sum(num1, num2) {  return num1 + num2;}// Calling the functionsum(2, 4); // 6

函数表达式

const dog = function() {  return 'Woof!';}

功能参数

// The parameter is namefunction sayHello(name) {  return `Hello, ${name}!`;}

函数声明

function add(num1, num2) {  return num1 + num2;}

JavaScript 范围

范围

function myFunction() {    var pizzaName = "Volvo";  // Code here can use pizzaName  }// Code here can't use pizzaName

块作用域变量

const isLoggedIn = true;if (isLoggedIn == true) {  const statusMessage = 'Logged in.';}// Uncaught ReferenceError...console.log(statusMessage);

全局变量

// Variable declared globallyconst color = 'blue';function printColor() {  console.log(color);}printColor(); // => blue

JavaScript 数组

数组

const a1 = [0, 1, 2, 3];// Different data typesconst a2 = [1, 'chicken', false];

属性 .length

const numbers = [1, 2, 3, 4];numbers.length // 4

指数

// Accessing an array elementconst myArray = [100, 200, 300];console.log(myArray[0]); // 100console.log(myArray[1]); // 200

方法 .push()

// Adding a single element:const cart = ['apple', 'orange'];cart.push('pear'); // Adding multiple elements:const numbers = [1, 2];numbers.push(3, 4, 5);

方法 .pop()

const a= ['eggs', 'flour', 'chocolate'];const p = a.pop(); // 'chocolate'console.log(a); // ['eggs', 'flour']

可变的

const names = ['Alice', 'Bob'];names.push('Carl');// ['Alice', 'Bob', 'Carl']

JavaScript 循环

While 循环

while (condition) {  // code block to be executed}let i = 0;while (i < 5) {          console.log(i);  i++;}

反向循环

const a = ['banana', 'cherry'];for (let i = a.length - 1; i >= 0; i--){  console.log(`${i}. ${items[i]}`);}// => 2. cherry// => 1. banana

Do...while 语句

x = 0i = 0do {  x = x + i;  console.log(x)  i++;} while (i < 5);// => 0 1 3 6 10

For循环

for (let i = 0; i < 4; i += 1) {  console.log(i);};// => 0, 1, 2, 3

循环遍历数组

for (let i = 0; i < array.length; i++){  console.log(array[i]);}// => Every item in the array

Break

for (let i = 0; i < 99; i += 1) {  if (i > 5) {     break;  }  console.log(i)}// => 0 1 2 3 4 5

Continue

for (i = 0; i < 10; i++) {  if (i === 3) { continue; }  text += "The number is " + i + "<br>";}

嵌套循环

for (let i = 0; i < 2; i += 1) {  for (let j = 0; j < 3; j += 1) {    console.log(`${i}-${j}`);  }}

for...in 循环

let dic = {brand: 'Apple', model: ''};for (let key in mobile) {  console.log(`${key}: ${mobile[key]}`);}

JavaScript 迭代器

分配给变量的函数

let plusFive = (number) => {  return number + 5;  };// f is assigned the value of plusFivelet f = plusFive;plusFive(3); // 8// Since f has a function value, it can be invoked. f(9); // 14

回调函数

const isEven = (n) => {  return n % 2 == 0;}let printMsg = (evenFunc, num) => {  const isNumEven = evenFunc(num);  console.log(`${num} is an even number: ${isNumEven}.`)}// Pass in isEven as the callback functionprintMsg(isEven, 4); // => The number 4 is an even number: True.

数组方法 .reduce()

const arrayOfNumbers = [1, 2, 3, 4];const sum = arrayOfNumbers.reduce((accumulator, curVal) => {    return accumulator + curVal;});console.log(sum); // 10

数组方法 .map()

const a = ['Taylor', 'Donald', 'Don', 'Natasha', 'Bobby'];const announcements = a.map(member => {  return member + ' joined the contest.';})console.log(announcements);

数组方法 .forEach()

const numbers = [28, 77, 45, 99, 27];numbers.forEach(number => {    console.log(number);}); 

数组方法 .filter()

const randomNumbers = [4, 11, 42, 14, 39];const filteredArray = randomNumbers.filter(n => {    return n > 5;});

JavaScript 对象

访问属性

const apple = {   color: 'Green',  price: { bulk: '$3/kg', smallQty: '$4/kg' }};console.log(apple.color); // => Greenconsole.log(apple.price.bulk); // => $3/kg

命名属性

// Example of invalid key namesconst trainSchedule = {  // Invalid because of the space between words.  platform num: 10,   // Expressions cannot be keys.  40 - 10 + 2: 30,  // A + sign is invalid unless it is enclosed in quotations.  +compartment: 'C'}

不存在的属性

const classElection = {  date: 'January 12'};console.log(classElection.place); // undefined

可变的

const student = {  name: 'Sheldon',  score: 100,  grade: 'A',}console.log(student)// { name: 'Sheldon', score: 100, grade: 'A' }delete student.scorestudent.grade = 'F'console.log(student)// { name: 'Sheldon', grade: 'F' }student = {}// TypeError: Assignment to constant variable.

赋值速记语法

const person = {  name: 'Tom',  age: '22',};const {name, age} = person;console.log(name); // 'Tom'console.log(age);  // '22'

删除运算符

const person = {  firstName: "Matilda",  age: 27,  hobby: "knitting",  goal: "learning JavaScript"};delete person.hobby; // or delete person[hobby];console.log(person);/*{  firstName: "Matilda"  age: 27  goal: "learning JavaScript"}*/	

对象作为参数

const origNum = 8;const origObj = {color: 'blue'};const changeItUp = (num, obj) => {  num = 7;  obj.color = 'red';};changeItUp(origNum, origObj);// Will output 8 since integers are passed by value.console.log(origNum);// Will output 'red' since objects are passed // by reference and are therefore mutable.console.log(origObj.color);

速记对象创建

const activity = 'Surfing';const beach = { activity };console.log(beach); // { activity: 'Surfing' }

this 关键字

const cat = {  name: 'Pipey',  age: 8,  whatName() {    return this.name    }};console.log(cat.whatName()); // => Pipey

工厂函数

// A factory function that accepts 'name', // 'age', and 'breed' parameters to return // a customized dog object. const dogFactory = (name, age, breed) => {  return {    name: name,    age: age,    breed: breed,    bark() {      console.log('Woof!');      }  };};

方法

const engine = {  // method shorthand, with one argument  start(adverb) {    console.log(`The engine starts up ${adverb}...`);  },    // anonymous arrow function expression with no arguments  sputter: () => {    console.log('The engine sputters...');  },};engine.start('noisily');engine.sputter();

Getters and setters

const myCat = {  _name: 'Dottie',  get name() {    return this._name;    },  set name(newName) {    this._name = newName;    }};// Reference invokes the getterconsole.log(myCat.name);// Assignment invokes the settermyCat.name = 'Yankee';

JavaScript 类

静态方法

class Dog {  constructor(name) {    this._name = name;    }    introduce() {     console.log('This is ' + this._name + ' !');    }    // A static method  static bark() {    console.log('Woof!');    }}const myDog = new Dog('Buster');myDog.introduce();// Calling the static methodDog.bark();

Class

class Song {  constructor() {    this.title;    this.author;  }    play() {    console.log('Song playing!');  }}const mySong = new Song();mySong.play();

类构造函数

class Song {  constructor(title, artist) {    this.title = title;    this.artist = artist;  }}const mySong = new Song('Bohemian Rhapsody', 'Queen');console.log(mySong.title);

类方法

class Song {  play() {    console.log('Playing!');  }    stop() {    console.log('Stopping!');  }}

延伸

// Parent classclass Media {  constructor(info) {    this.publishDate = info.publishDate;    this.name = info.name;  }}// Child classclass Song extends Media {  constructor(songData) {    super(songData);    this.artist = songData.artist;  }}const mySong = new Song({   artist: 'Queen',   name: 'Bohemian Rhapsody',   publishDate: 1975});

JavaScript 模块

Require

var moduleA = require( "./module-a.js" );// The .js extension is optionalvar moduleA = require( "./module-a" );// Both ways will produce the same result.// Now the functionality of moduleA can be usedconsole.log(moduleA.someFunctionality)

Export

// module "moduleA.js"export default function cube(x) {  return x * x * x;}// In main.jsimport cube from './moduleA.js';// Now the `cube` function can be used straightforwardly.console.log(cube(3)); // 27

导出模块

let Course = {};Course.name = "Javascript Node.js"module.exports = Course;

导入关键字

// add.jsexport const add = (x, y) => {    return x + y}// main.jsimport { add } from './add';console.log(add(2, 3)); // 5

JavaScript 承诺

承诺状态

const promise = new Promise((resolve, reject) => {  const res = true;  // An asynchronous operation.  if (res) {    resolve('Resolved!');  }  else {    reject(Error('Error'));  }});promise.then((res) => console.log(res), (err) => alert(err));

执行器函数

const executorFn = (resolve, reject) => {  resolve('Resolved!');};const promise = new Promise(executorFn);

setTimeout()

const loginAlert = () =>{  alert('Login');};setTimeout(loginAlert, 6000); 

.then() 方法

const promise = new Promise((resolve, reject) => {      setTimeout(() => {    resolve('Result');  }, 200);});promise.then((res) => {  console.log(res);}, (err) => {  alert(err);}); 

.catch() 方法

const promise = new Promise((resolve, reject) => {    setTimeout(() => {    reject(Error('Promise Rejected Unconditionally.'));  }, 1000);});promise.then((res) => {  console.log(value);});promise.catch((err) => {  alert(err);});

Promise.all()

const promise1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve(3);  }, 300);});const promise2 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve(2);  }, 200);});Promise.all([promise1, promise2]).then((res) => {  console.log(res[0]);  console.log(res[1]);});

避免嵌套 Promise 和 .then()

const promise = new Promise((resolve, reject) => {    setTimeout(() => {    resolve('*');  }, 1000);});const twoStars = (star) => {    return (star + star);};const oneDot = (star) => {    return (star + '.');};const print = (val) => {  console.log(val);};// Chaining them all togetherpromise.then(twoStars).then(oneDot).then(print);

创建

const executorFn = (resolve, reject) => {  console.log('The executor function of the promise!');};const promise = new Promise(executorFn);

链接多个 .then()

const promise = new Promise(resolve => setTimeout(() => resolve('dAlan'), 100));promise.then(res => {  return res === 'Alan' ? Promise.resolve('Hey Alan!') : Promise.reject('Who are you?')}).then((res) => {  console.log(res)}, (err) => {  alert(err)});

JavaScript 异步等待

异步

function helloWorld() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Hello World!');    }, 2000);  });}const msg = async function() { //Async Function Expression  const msg = await helloWorld();  console.log('Message:', msg);}const msg1 = async () => { //Async Arrow Function  const msg = await helloWorld();  console.log('Message:', msg);}msg(); // Message: Hello World! <-- after 2 secondsmsg1(); // Message: Hello World! <-- after 2 seconds

解决承诺

let pro1 = Promise.resolve(5);let pro2 = 44;let pro3 = new Promise(function(resolve, reject) {  setTimeout(resolve, 100, 'foo');});Promise.all([pro1, pro2, pro3]).then(function(values) {  console.log(values);});// expected => Array [5, 44, "foo"]

异步等待承诺

function helloWorld() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Hello World!');    }, 2000);  });}async function msg() {  const msg = await helloWorld();  console.log('Message:', msg);}msg(); // Message: Hello World! <-- after 2 seconds

错误处理

let json = '{ "age": 30 }'; // incomplete datatry {  let user = JSON.parse(json); // <-- no errors  alert( user.name ); // no name!} catch (e) {  alert( "Invalid JSON data!" );}

Aysnc 等待运算符

function helloWorld() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Hello World!');    }, 2000);  });}async function msg() {  const msg = await helloWorld();  console.log('Message:', msg);}msg(); // Message: Hello World! <-- after 2 seconds

JavaScript 请求

JSON

const jsonObj = {  "name": "Rick",  "id": "11A",  "level": 4  };

XMLHttpRequest

const xhr = new XMLHttpRequest();xhr.open('GET', 'mysite.com/getjson');

GET

const req = new XMLHttpRequest();req.responseType = 'json';req.open('GET', '/getdata?id=65');req.onload = () => {  console.log(xhr.response);};req.send();

POST

const data = {  fish: 'Salmon',  weight: '1.5 KG',  units: 5};const xhr = new XMLHttpRequest();xhr.open('POST', '/inventory/add');xhr.responseType = 'json';xhr.send(JSON.stringify(data));xhr.onload = () => {  console.log(xhr.response);};

获取 API

fetch(url, {    method: 'POST',    headers: {      'Content-type': 'application/json',      'apikey': apiKey    },    body: data  }).then(response => {    if (response.ok) {      return response.json();    }    throw new Error('Request failed!');  }, networkError => {    console.log(networkError.message)  })}

JSON 格式

fetch('url-that-returns-JSON').then(response => response.json()).then(jsonResponse => {  console.log(jsonResponse);});

承诺url参数获取api

fetch('url').then(  response  => {    console.log(response);  }, rejection => {    console.error(rejection.message););

获取 API 函数

fetch('https://api-xxx.com/endpoint', {  method: 'POST', body: JSON.stringify({id: "200"})}).then(response => {  if(response.ok){	  return response.json();    }	throw new Error('Request failed!');}, networkError => {  console.log(networkError.message);}).then(jsonResponse => {  console.log(jsonResponse);})

异步等待语法

const getSuggestions = async () => {  const wordQuery = inputField.value;  const endpoint = `${url}${queryParams}${wordQuery}`;  try{const response = await fetch(endpoint, {cache: 'no-cache'});    if(response.ok){      const jsonResponse = await response.json()    }  }  catch(error){    console.log(error)  }}