用法 | TLWB云开发平台文档(v4.0.0)

# 用法

HTML 中的脚本必须位于 <script> 与 </script>标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:

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

1
2
3

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

提示

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

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TLWB云开发平台文档</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
实例

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

1
2
3
4
5
6

JavaScript输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

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

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

使用 window.alert()

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
	
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写到 HTML 文档

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 语法

JavaScript 是一个程序语言。语法规则定义了语言结构。
JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言。

JavaScript 语句

JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" ：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>我的网页</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "你好 Dolly";
</script>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

分号 ;

分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>我的网页</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
本例向网页输出一个标题和两个段落：

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

1
2
3
4

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 注释可用于提高代码的可读性。

JavaScript 注释

JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头。
本例用单行注释来解释代码：

<script>
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>
<p><b>注释：</b>注释不会被执行。</p>

1
2
3
4
5
6
7

JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。
下面的例子使用多行注释来解释代码：

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

1
2
3
4
5
6
7
8
9

实例

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

1
2
3

在代数中，我们使用字母（比如 x）来保存值（比如 5）。
通过上面的表达式 z=x+y，我们能够计算出 z 的值为 11。
在 JavaScript 中，这些字母被称为变量。

# 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。
在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

<script>
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>

1
2
3
4
5
6
7
8

创建 JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值）。
如需向变量赋值，请使用等号：

carname="Volvo";

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

var carname="Volvo";

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

<body>

<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}
</script>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

JavaScript 拥有动态类型

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

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

1
2
3

JavaScript 字符串

字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：

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

1
2

JavaScript 数字

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

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

1
2

极大或极小的数字可以通过科学（指数）计数法来书写：

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

1
2

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

1
2

JavaScript 数组

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

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

1
2
3
4

或者 (condensed array):

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

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
您将在本教程稍后的章节中学到更多关于数组的知识。

# 对象

JavaScript 对象是拥有属性和方法的数据。

真实生活中的对象，属性和方法

真实生活中，一辆汽车是一个对象。
对象有它的属性，如重量和颜色等，方法有启动停止等。
所有汽车都有这些属性，但是每款车的属性都不尽相同。
所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。

JavaScript 对象

在 JavaScript中，几乎所有的事物都是对象。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:
实例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

你已经学习了 JavaScript 变量的赋值。
以下代码为变量 car 设置值为 "Fiat" :

var car = "Fiat";

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

在以上实例中，3 个值 ("Fiat", 500, "white") 赋予变量 car。

对象属性

可以说 "JavaScript 对象是变量的容器"。
但是，我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
对象键值对的写法类似于：

PHP 中的关联数组
Python 中的字典
C 语言中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希表

访问对象属性

你可以通过两种方式访问对象属性:
实例 1

person.lastName;

实例 2

person["lastName"];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法:
实例

name = person.fullName();

如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：

name = person.fullName;

# 函数

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

JavaScript 函数语法

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

JavaScript 函数语法

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

function *functionname*()
{
// 执行代码
}

1
2
3
4

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

# 作用域

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

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
实例

// 此处不能调用 carName 变量 function myFunction() {    var carName = "Volvo";    // 函数内可调用 carName 变量 }

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
实例

var carName = " Volvo";  // 此处可调用 carName 变量 function myFunction() {    // 函数内可调用 carName 变量 }

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

函数参数

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

HTML 中的全局变量

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

//此处可使用 window.carName

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

1
2
3
4
5

# 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：

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

通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。单引号:

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

双引号:
<some-HTML-element some-event="JavaScript 代码">
在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):
实例

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

# 字符串

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

JavaScript 字符串

字符串可以存储一系列字符，如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：
实例

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

1
2

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

var character = carname[7];

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:
实例

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

1
2
3

你也可以在字符串添加转义字符来使用引号：
** JavaScript 实例 **

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

1
2

JavaScript 字符串长度

可以使用内置属性 length 来计算字符串的长度：
** JavaScript 实例 **

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

1
2

特殊字符

在 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."
反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：

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

字符串属性和方法

原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
字符串方法我们将在下一章节中介绍。

字符串属性

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

字符串方法

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

# 比较和逻辑运算符

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

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。
x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值
==	等于	x==8	false
		x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
		x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
		x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

如何使用

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

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 还包含了基于某些条件对变量进行赋值的条件运算符。
语法

variablename = (condition)? value1:value2;

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

voteable=(age<18)?"年龄太小":"年龄已达到";

# if...Else 语句

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

条件语句

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

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

if 语句

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

if (*condition*)
{

*当条件为 true 时执行的代码*

}

1
2
3
4
5
6

实例
当时间小于 20:00 时，生成问候 "Good day"：

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

if...else 语句

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

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

1
2
3
4
5
6
7
8

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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


if (time<10) {    document.write("早上好"); } else if (time>=10 && time<20) {    document.write("<b>今天好</b>"); } else {    document.write("<b>晚上好!</b>"); }

1
2

JavaScript switch 语句

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

JavaScript switch

请使用 switch 语句来选择要执行的多个代码块之一。
语法

switch(n) {    

case 1:执行代码块 1        break;  

case 2:        执行代码块 2        break;  

default:        与 case 1 和 case 2 不同时执行的代码 

}

工作原理：首先设置表达式 *n*（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 **break** 来阻止代码自动地向下一个 case 运行。

1
2
3
4
5
6
7
8
9
10
11

语法实例

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

var d=new Date().getDay(); 
switch (d)  
{ 
case 0:x="今天是星期日";   break; 
case 1:x="今天是星期一";   break;  
case 2:x="今天是星期二";   break;  
case 3:x="今天是星期三";   break;  
case 4:x="今天是星期四";   break; 
case 5:x="今天是星期五";   break;  
case 6:x="今天是星期六";   break;  
}

1
2
3
4
5
6
7
8
9
10
11

default 关键词

请使用 default 关键词来规定匹配不存在时做的事情：
实例
如果今天不是星期六或星期日，则会输出默认的消息：

var d=new Date().getDay();
switch (d) { 
case 6:x="今天是星期六";    break;
case 0:x="今天是星期日";    break; 
default:    x="期待周末"; } 
document.getElementById("demo").innerHTML=x;

1
2
3
4
5
6

# for 循环

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

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值：

default 一般写法：

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>");

1
2
3
4

default 使用for循环

for (var i=0;i<cars.length;i++) { 

document.write(cars[i] + "<br>"); 
}

1
2
3
4

不同类型的循环

JavaScript 支持不同类型的循环：

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

For 循环

for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

实例

for (var i=0; i<5; i++) {

x=x + "该数字为 " + i + "<br>";

}

1
2
3
4
5

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：
实例

var person={
fname:"Bill",lname:"Gates",age:56};  
for (x in person)  // x 为属性名
{ 
txt=txt + person[x];
}

1
2
3
4
5
6

# while 循环

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

while 循环

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

while (条件)
{
需要执行的代码
}
实例
本例中的循环将继续运行，只要变量 i 小于 5：
实例

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

}

1
2
3
4
5
6

do/while 循环

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

do
{
*需要执行的代码
*}
while (条件);
实例
下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：
实例

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

1
2
3
4

# break 和 continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

break 语句

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
实例

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

1
2
3
4
5
6

continue 语句

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

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

if (i==3) continue;
x=x + "The number is " + i + "<br>";

}

1
2
3
4
5
6

# typeof, null, 和 undefined

JavaScript typeof, null, undefined, valueOf()。

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。
实例

typeof "John"        // 返回 string
typeof 3.14         // 返回 number
typeof false         // 返回 boolean
typeof [1,2,3,4]       // 返回 object
typeof {name:'John', age:34} // 返回 object

1
2
3
4
5

null

在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
你可以设置为 null 来清空对象:
实例

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

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
实例

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

1
2

undefined 和 null 的区别

实例
null 和 undefined 的值相等，但类型不等：

typeof undefined       // undefined
typeof null         // object
null === undefined      // false
null == undefined      // true

1
2
3
4

# 类型转换

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

数据类型

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

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

null
undefined

typeof 操作符

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

**实例**    

typeof "John"         // 返回 string
typeof 3.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

1
2
3
4
5
6
7
8
9
10
11
12

请注意：

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

1
2
3
4
5
6
7

JavaScript 类型转换

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

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

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
实例

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

1
2
3

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

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

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"

将日期转换为字符串

Date() 返回字符串。
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
全局方法 String() 可以将日期对象转换为字符串。
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
实例

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

1
2

在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()	解析一个字符串，并返回一个整数。

# 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。

语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的。
实例：

var patt = /runoob/i

实例解析：

/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

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

实例
使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：

var str = "Visit Runoob!";  var n = str.search(/Runoob/i);

输出结果为：
6

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
实例
检索字符串中 "Runoob" 的子串：

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

1
2

# let 和 const

ECMAScript 2015(ECMAScript 6)

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

search()全局变量

在函数外声明的变量作用域是全局的：

var carName = "Volvo";  // 这里可以使用 carName 变量 
function myFunction() { 

// 这里也可以使用 carName 变量 

}

1
2
3
4
5
6

search()局部变量

在函数内声明的变量作用域是局部的（函数内）：
实例

// 这里不能使用 carName 变量  
function myFunction() { 

var carName = "Volvo";// 这里可以使用 carName 变量 

}  // 这里不能使用 carName 变量

1
2
3
4
5
6

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

1
2
3
4

在 ES6 之前，是没有块级作用域的概念的。
ES6 可以使用 let 关键字来实现块级作用域。
let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

1
2
3
4

重新定义变量

使用 var 关键字重新声明变量可能会带来问题。
在块中重新声明变量也会重新声明块外的变量：
实例

var x = 10; // 这里输出 x 为 10 
{    

var x = 2;    // 这里输出 x 为 2 

} 
// 这里输出 x 为 2

1
2
3
4
5
6
7

# JSON

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。

什么是 JSON?

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解。

实例
以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:

{
"sites":[ 
{"name":"Runoob", "url":"www.runoob.com"},  
{"name":"Google", "url":"www.google.com"},   
{"name":"Taobao", "url":"www.taobao.com"} ]
}

1
2
3
4
5
6

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
JSON 数据 - 一个名称对应一个值

JSON 数据格式为键/值对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

JSON 对象

JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个键/值对：

{
"name":"Runoob",
 "url":"www.runoob.com"
 }

1
2
3
4

JSON 数组

JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：

"sites":[ 
{"name":"Runoob", "url":"www.runoob.com"},  
{"name":"Google", "url":"www.google.com"},  
{"name":"Taobao", "url":"www.taobao.com"}
]

1
2
3
4
5

在以上实例中，对象 "sites" 是一个数组，包含了三个对象。
每个对象为站点的信息（网站名和网站地址）。

JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程 (opens new window)):
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ 

"sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' 

+ '{ "name":"Google" , "url":"www.google.com" },'

 + '{ "name":"Taobao" , "url":"www.taobao.com" } ]
 
}';

1
2
3
4
5
6
7
8
9

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：
实例

var text = '{ 

"sites" : [' +    '{ "name":"Runoob" , "url":"www.runoob.com" },' 
+    '{ "name":"Google" , "url":"www.google.com" },'

+    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';  

     obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
     
}

1
2
3
4
5
6
7
8
9
10

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

# 用法

<script> 标签

<body> 中的 JavaScript

JavaScript 函数和事件

在 <head> 或者 <body> 的JavaScript

<head> 中的 JavaScript 函数

<body> 中的 JavaScript 函数

外部的 JavaScript

JavaScript输出

JavaScript 显示数据

使用 window.alert()

写到 HTML 文档

# 语法

JavaScript 语句

分号 ;

JavaScript 代码

JavaScript 语句标识符

# 注释

JavaScript 注释

JavaScript 多行注释

# 变量

JavaScript 数据类型

创建 JavaScript 变量

# 数据类型

JavaScript 拥有动态类型

JavaScript 字符串

JavaScript 数字

JavaScript 布尔

JavaScript 数组

# 对象

真实生活中的对象，属性和方法

JavaScript 对象

对象定义

对象属性

访问对象属性

对象方法

# 函数

JavaScript 函数语法

JavaScript 函数语法

调用带参数的函数

# 作用域

JavaScript 作用域

JavaScript 局部作用域

JavaScript 全局变量

JavaScript 变量生命周期

函数参数

HTML 中的全局变量

# 事件

HTML 事件

# 字符串

JavaScript 字符串

JavaScript 字符串长度

特殊字符

字符串属性和方法

字符串属性

字符串方法

# 比较 和 逻辑运算符

比较运算符

如何使用

逻辑运算符

条件运算符

# if...Else 语句

条件语句

if 语句

if...else 语句

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

JavaScript switch 语句

JavaScript switch

default 关键词

# for 循环

JavaScript 循环

default 一般写法：

default 使用for循环

不同类型的循环

For 循环

For/In 循环

# while 循环

while 循环

do/while 循环

# break 和 continue 语句

# 比较和逻辑运算符