文章简介
本文是我在 Runoob.com 菜鸟教程上的总结与学习笔记。
除了引用 菜鸟教程上的内容之外，我添加了许多它没有介绍，但是也很重要的内容。
另外，我对 JavaScript 的内容进行了重新排版，排版后的内容更适合阅读。
如果你想直接访问菜鸟教程，请点击上方的超链接。
强烈建议，当遇到不能理解的知识点，去菜鸟教程上运行实例观察。
或者你也可以在你的电脑上运行。
JavaScript
简介
官方说明
JavaScript 是互联网上最流行的客户端脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
# 脚本语言：不需要编译，直接可被浏览器解析执行。
JavaScript 是可插入 HTML 页面的编程代码，由浏览器执行。每一个浏览器都有 JavaScript 的解析引擎。
我的解释
JavaScript 使得用户在客户端进行操作时，可以不需要与服务器端产生交互。由此来避免一些对用户极其不友好的体验。
比如，填写了半个小时表单，提交给服务器后，服务器响应结果为“密码格式错误，请重新填写！”，用户又需要重新填写表单。而像格式校验这样的工作，我们其实就可以交给 JavaScript 来解决，这样是最为合理的方式。
发展史
1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C– ，后来更名为 ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，并该名为 JavaScript
1996年，微软抄袭 JavaScript 开发出 JScript
于是，”客户端脚本语言界的三足鼎立“开始了。当然这对程序员非常不友好，因为此时程序员需要编写三份不用的代码以适配所有浏览器。
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript
最终，ECMAScript 成为了所有脚本语言的标准化规范，终止了客户端脚本语言界混乱不堪的现象。
我们可以将 ECMAScript 理解为“标准”，将ScriptEase、JavaScript、JScript理解为“标准的实现和扩展”。
所以，其实如今的 JavaScript 其实是由：公共的ECMAScript 和 独有的JavaScript(DOM,BOM) 这两个部分组成。
ECMAScript
注释
单行注释：//注释内容
多行注释：/*注释内容*/
// 注释
/* 注释 */
验证js支持
如果用户不能确定浏览器是否支持JavaScript脚本，那么可以应用HTML提供的注释符号进行验证。
对于不支持 JavaScript 的浏览器，将会把编写的 JavaScript 脚本作为注释处理。
<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>
<script>标签
- <script>可以定义在html页面的任何位置。
- <script>可以定义多个。
- <script>定义的位置会影响执行顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><script>document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");</script></body>
</html>
内部样式
在 html文件中的 <script>标签中，直接编写 JavaScript代码。
<script>document.write("我在html文件中，我是内部js语句！");
</script><script>alert("我在html文件中，我是内部js语句！");
</script>
外部样式
在 html文件中的 <script>标签中，使用 “src”属性 来引入 外部js文件。
document.write("我在js文件中，我是外部js语句！");
alert("我在js文件中，我是外部js语句！");
<script src="style01.js">
</script><script src="style02.js">
</script>
如果<script>标签中，既有 JavaScript代码，又引用了 外部js文件，那么依然会执行 外部js代码。
<script src="style01.js">/* 内部js语句不会执行 */document.write("我在html文件中，我是内部js语句！");
</script><script src="style02.js">/* 内部js语句不会执行 */alert("我在html文件中，我是内部js语句！");
</script>
函数
我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分，该函数会在点击按钮时被调用。
<!DOCTYPE html>
<html>
<head>
<script>function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}
</script>
</head>
<body><p id="demo">一个段落</p><button type="button" onclick="myFunction()">点我</button>
</body>
</html>
输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 console.log() 写入到浏览器的控制台。
window.alert()
在浏览器中弹出警告框：
<script>window.alert(5 + 6);
</script>
innerHTML
获取元素后，修改元素的内容：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
<p id="demo">我的第一个段落</p><script>document.getElementById("demo").innerHTML = "段落已修改。";
</script>
document.write()
直接写在HTML 文档中：
<p>我的第一个段落。</p><script>
document.write(Date());
</script>
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
<p>我的第一个段落。</p><button onclick="myFunction()">点我</button><script>
function myFunction() {document.write(Date());
}
</script>
onsole.log()
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。
<script>console.log("喜欢");
</script>
变量
Java 是强类型语言。
在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。
变量只能存储固定类型的数据。
语法：数据类型 变量名 = 初始化值;
int i = 1;
float f = 1.11f;
String s = "ABC"
JavaScript 是弱类型语言。
在开辟变量存储空间时，不定义空间将来的存储的数据的数据类型。
变量可以存放任意类型的数据。
语法：var 变量名 = 初始化值;
var i = 1;
var f = 1.11f;
var c = "ABC"
命名规则
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
声明
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";
声明也可横跨多行：
var lastname="Doe",
age=30,
job="carpenter";
一条语句中声明的多个不可以赋同一个值:
var x,y,z=1; // x,y=undefined z=1
如果重新声明 JavaScript 变量，该变量的值不会丢失。
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：
var carname="Volvo";
var carname;
局部变量
"let"关键字 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。
function varTest() {var x = 1;if (true) {var x = 2; // 同样的变量!console.log(x); // 2}console.log(x); // 2
}function letTest() {let x = 1;if (true) {let x = 2; // 不同的变量! console.log(x); // 2 }console.log(x); // 1
}
常量
"const"关键字 用来声明 JavaScript中的常量。
//定义常量a并赋值为0
const a = 0;//报错（不能重新赋值）
a = 1;//报错（不能重新声明）
const a = 2;//输出0
console.log("a is: " + a);
全局变量
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句，将声明 window 的一个属性 carname：
carname = "Volvo";
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除：
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(this.var2); // 2
console.log(window.var2); // 2delete var1; // false 无法删除
console.log(var1); // 1delete var2; // true 可以删除
console.log(var2); // 报错变量未定义
数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
字符串
字符串可以是引号中的任意文本。
您可以使用单引号或双引号：
var an = "cat";
var an = 'cat';
你可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
你也可以在字符串添加转义字符来使用引号：
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
字符串可以是对象：
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
数字
JavaScript 只有一种数字类型。
数字可以带小数点，也可以不带：
var x1 = 34.00; //使用小数点来写
var x2 = 34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔值
布尔（逻辑）只能有两个值：true 或 false。
var x = true;
var y = false;
数组
下面的代码创建名为 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"];
对象
对象由 花括号{} 分隔，属性由 逗号, 分隔。
在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。
下面的例子中，对象 (person) 有三个属性：firstname、lastname 以及 id：
var person = {firstname:"John", lastname:"Doe", id:5566};
空格和折行无关紧要。声明可横跨多行：
var person = {firstname : "John",lastname : "Doe",id : 5566
};
对象属性有两种寻址方式：
name = person.lastname;
name = person["lastname"];
在对象中定义一个方法：
var person = {firstname : "John",lastname : "Doe",id : 5566 ,talk : funciton(){document.write("HelloWorld！")}
};
Undefined / Null / NaN
- undefined
- 一个没有设置值的变量。
- 当一个变量没有给定初始化值时，自动赋值。
- 可以通过将变量的值设置为 undefined 来清空变量。值为 undefined, 类型为 undefined。
- Null
- 主动释放。
- 可以通过将变量的值设置为 null 来清空变量。值为 null(空), 但类型为对象。
- NaN
- 一个不是数字的数字类型。 (Not A Number)
- NaN参加运算，任何运算结果都为NaN。
注意：null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
判断变量的数据类型
typeof 方法
你可以使用 typeof 操作符来检测变量的数据类型，括号可加可不加。
typeof(1) // number
typeof(1.11) // number
typeof(NaN) // numbertypeof "ABC" // string
typeof 'ABC' // stringtypeof true // boolean
typeof false // booleantypeof undefined // undefinedtypeof null // object
typeof [1,2,3,4]; // object
typeof {name:'John', age:34} // object
typeof new Date() // objecttypeof function () {} // function
isArray 方法
注意：isArray 只能用来判断 Array！
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";// 判断是否支持该方法
if (Array.isArray) { // 检验该对象是否为数组if(Array.isArray(cars)) {document.write("true") ;}
}
instanceof 操作符
注意：instanceof 只能用来判断 Object ！
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";if (cars instanceof Array) {document.write("该对象是一个数组。") ;
}
作用域
局部作用域
在局部作用域：只能在函数内部访问。
变量在函数内声明，即为局部变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
// 此处不能调用 carName 变量
function myFunction() {var carName = "Volvo";// 函数内可调用 carName 变量
}
全局作用域
全局作用域：网页中所有脚本和函数均可使用。
变量在函数外定义，即为全局变量。
全局变量在页面关闭后销毁。
var carName = " Volvo";// 此处可调用 carName 变量
function myFunction() {// 函数内可调用 carName 变量
}
如果变量没有声明（没有使用 var 关键字），该变量也为全局变量，不论这个变量在哪被使用。
// 函数myFunction被调用后，此处可调用 carName 变量function myFunction() {carName = "Volvo";// 此处可调用 carName 变量
}
运算符
类型转换
如果变量不是运算符所要求的类型，变量将自动进行类型转换。
其他类型转number：
// string -> number
var num1 = +"123"; // 123
var num2 = +"abc"; // NaN// boolean -> number
var num3 = +true; // 1
var num4 = +false; // 0// null -> number
var num5 = +null; // 0// undefined -> number
var num6 = +undefined; // NaN
其他类型转boolean：
// number：0或NaN为假，其他为真
document.write( !!3 + "<br>"); //true
document.write( !!0 + "<br>");
document.write( !!NaN + "<br><br>");// string：除了空字符串("")，其他为真
document.write( !!"a" + "<br>"); //true
document.write( !!"" + "<br><br>");// null：假
document.write( !!null + "<br><br>");// undefined：假
document.write( !!undefined + "<br><br>");// object：真
document.write( !!new Date() + "<br><br>"); //true
所以 Java的条件语句为：if(obj != null)，而 JavaScript的条件语句为：if(obj)。
比较方式
类型相同，直接比较
字符串按照字典顺序，逐位比较ASCII码大小。
document.write("a" > "z"); // false
document.write("azzzz" > "zaaaa"); // false
类型不同，先转换类型，再比较
document.write("123" == 123); // true
=== 绝对等于：值和类型均相等。
document.write("123" === 123); // false
条件运算符
条件运算符可以基于某些条件对变量进行赋值。
三元运算符
- age<18 成立，返回"年龄太小"
- age<18 不成立，返回"年龄已达到"
voteable = ( age < 18 ) ? "年龄太小" : "年龄已达到";
多元运算符
- p>1 成立：
- p<12 成立，返回 p>12（false）。
- p<12 不成立，返回 p=6。
- p>1 不成立：
- 返回 p=3。
function test(p,b){return p>1 ? p<12 ? p>12 : p=6 : p=3; // p>1 ? 整体 : p=3 和 p<12 ? p>12 : p=6
}
流程控制语句
if…else…
只有当指定条件为 true 时，该语句才会执行代码。
if (condition) {当条件为 true 时执行的代码
}
在条件为 true 时执行代码，在条件为 false 时执行其他代码。
if (condition) { 当条件为 true 时执行的代码}
else {当条件不为 true 时执行的代码
}
选择多个代码块之一来执行。
if (condition1) {当条件 1 为 true 时执行的代码
} else if (condition2) {当条件 2 为 true 时执行的代码
} else {当条件 1 和 条件 2 都不为 true 时执行的代码
}
switch
在 Java 中，switch语句可以接受的数据类型：byte int short char 枚举(1.5) String(1.7)。
在 JavaScript 中，switch语句可以接受任意的原始数据类型。
switch(n) {case 1:执行代码块 1break;case 2:执行代码块 2break;default:匹配不存在时做的事情
}
for
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
for (语句1 ; 语句2 ; 语句3) {循环体
}
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值：
var i=2,len=cars.length;
for (; i<len; i++){ document.write(cars[i] + "<br>");
}
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的（比如当循环内部有相应的代码时）：
var i=0,len=cars.length;
for (; i<len; ){ document.write(cars[i] + "<br>");i++;
}
for In
遍历数组，则变量为索引：
var nums = [1, 3, 5];for (var x in nums) {document.write(nums[x]+ "<br />");
}
for of
遍历数组，则变量为元素：
var nums = [1, 3, 5];for (var x of nums) {document.write( x + "<br />");
}
while
while 循环会在指定条件为真时循环执行代码块。
while (条件)
{需要执行的代码
}
do/while
do/while 循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
do
{需要执行的代码
}
while (条件);
break & continue
break 语句可用于跳出循环。
for (i=0;i<10;i++)
{if (i==3){break; }x = x + "The number is " + i + "<br>";
}
// 该数字为 0
// 该数字为 1
// 该数字为 2
continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。
for (i=0;i<6;i++)
{if (i==3){countinue; }x = x + "The number is " + i + "<br>";
}
// 该数字为 0
// 该数字为 1
// 该数字为 2
// 该数字为 4
// 该数字为 5
标记
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
statements
break 和 continue 语句仅仅是能够跳出代码块的语句。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
var nums = [1, 2, 3];// 标签
label:
for (var x of nums) {for (var y of nums) {document.write( (x*y) + " ");if (y == 2 && x == 2 ) {// 跳出两个循环break label; }}document.write("<br />");
}
- 练习：99乘法表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>99乘法表</title><style>td{border: 1px solid;}</style><script>document.write("<table align='center'>");//1.完成基本的for循环嵌套，展示乘法表for (var i = 1; i <= 9 ; i++) {document.write("<tr>");for (var j = 1; j <=i ; j++) {document.write("<td>");//输出 1 * 1 = 1document.write(i + " * " + j + " = " + ( i*document.write("</td>");}/*//输出换行document.write("<br>");*/document.write("</tr>");}//2.完成表格嵌套document.write("</table>");</script>
</head>
<body>
</body>
</html>
类型转换
字符串
全局方法 String() 可以将变量转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
String(123)
String(false)
String(new Date())
toString() 也是有同样的效果：
(123).toString()
false.toString()
new Date().toString()
数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaNNumber(false) // 返回 0
Number(true) // 返回 1Number(new Date()) // 返回 1404568027739"111".valueOf() // 111parseInt("111") // 111
正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
/正则表达式主体/修饰符(可选)
例如：var patt = /runoob/i
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
String对象的方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
search 方法可使用字符串作为参数，字符串参数会转换为正则表达式：
var str = "Visit Runoob!";
var n = str.search("Runoob");
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "Visit microsoft!";
var txt = str.replace(/microsoft/i,"Runoob");
replace() 方法将接收字符串作为参数，字符串参数会转换为正则表达式：
var txt = str.replace("microsoft","Runoob");
修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） |
| m | 执行多行匹配 |
表达式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
元字符
元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NULL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 1 或 n。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。 |
| n* | 0 或 n。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。 |
| n? | 0 或 1。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。 |
| n{X} | x。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。 |
| n{X,} | 至少 x 个。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。 |
| n{X,Y} | x 至 y。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。 |
| n$ | 结尾为字符串 n 。 |
| ^n | 开头为字符串 n 。 |
| ?=n | 其后紧接字符串 n 。 |
| ?!n | 其后没有紧接字符串 n 。 |
对象
Function对象
- 特点
- length：代表形参的个数
- 函数不用写形参类型和返回值类型。
- 函数是一个对象，如果定义名称相同的函数，原本的函数会被覆盖。
- 函数的调用，仅与其名称有关，和参数列表无关。
- 函数仅能调用一次。
- length：代表形参的个数
创建Function对象的方法，有以下三种方式：
var fun1 = new Function("a" , "b" , "document.write( a + '<br>'); document.write( b + '<br>'); document.write(fun1.length + '<br>' + '<br>');");
function fun2(a,b,c) {document.write(a + "<br>");document.write(b+'<br>');document.write(c+'<br>');document.write(fun2.length+'<br>'+'<br>');
}
var fun3 = function(a,b,c,d){document.write(a+'<br>');document.write(b+'<br>');document.write(c+'<br>');document.write(d+'<br>');document.write(fun3.length+'<br>'+'<br>');
}
在函数声明中有一个隐藏的内置对象（数组），arguments封装了所有的实际参数。
function add(){var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}var sum = add(1,2,3,4,5,6,7,8,9,10);document.write(sum); // 55
Array对象
- 特点
- 元素类型可变。
- 数组长度可变。
创建对象
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"];
对象方法
indexOf() 方法可返回数组中某个指定的元素位置。
var y = myCars.indexOf("Volvo")
join() 方法用于把数组中的所有元素转换一个字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();// 输出为 Banana,Orange,Apple,Mango
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")// 输出为 Banana,Orange,Apple,Mango,Kiwi
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();// 输出为 Banana,Orange,Apple
Date对象
创建对象
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。
有四种方式初始化日期:
new Date() // 当前日期和时间 Fri Feb 07 2020 18:03:29 GMT+0800 (中国标准时间)new Date(1581069604154) //返回从 1970 年 1 月 1 日至今的毫秒数new Date("October 13, 1975 11:13:00") // 指定日期和时间的字符串new Date(9,5,24,11,33,0) // year month day hours minutes seconds milliseconds
设置日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：
var myDate = new Date();
myDate.setFullYear(2010,0,14);
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate = new Date();
myDate.setDate(myDate.getDate() + 5);
对象方法
getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
var d = new Date();
var n = d.getTime();// 输出为 1581069604154
toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
var d=new Date();
var n=d.toLocaleTimeString();// 输出为 2020/2/7 下午6:04:45
Math对象
创建对象
Math对象不用创建，直接使用。
var x = Math.PI;
var y = Math.sqrt(16);
对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| ceil(x) | 对 x 进行上舍入。 |
| floor(x) | 对 x 进行下舍入。 |
| max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
| min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 四舍五入，底层为 floor(x+0.5)。 |
| sqrt(x) | 返回数的平方根。 |
如下所示：
Math.abs(1) // 1
Math.abs(-1) // 1Math.ceil(1.1) // 2
Math.ceil(1.9) // 2Math.floor(1.1) // 1
Math.floor(1.9) // 1Math.max(1,2,3,4,5) // 5
Math.min(1,2,3,4,5) // 1pow(2,10) // 1024Math.round(-1) // floor(-0.5) = -1
Math.round(1) // floor(1.5) = 1Math.round(-1.5) // floor(-1) = -1
Math.round(1.5) // floor(2) = 2Math.sprt(1024) // 32
RegExp对象
RegExp：是正则表达式（regular expression）的简写。
正则表达式描述了字符的模式对象。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
创建对象
- 模式(parttern) 描述了一个表达式模型。
- 修饰符(modifiers) 描述了检索是否是全局，区分大小写等。
var patt=new RegExp(pattern,modifiers);或更简单的方法var patt=/pattern/modifiers;
例如：
var re = new RegExp("\\w+");
var re = /\w+/;
在字符串中不区分大小写找"is"：
var patt1 = /is/i;
全文查找 “is”：
var patt1=/is/g;
全文查找和不区分大小写搜索 “is”：
var patt1=/is/gi;
对象方法
test()方法搜索字符串指定的值，根据结果并返回真或假。
var str = 'runoob';var patt1 = new RegExp('\\w', 'g'); // 有转义,作为正则表达式处理
var patt2 = new RegExp('\w', 'g'); // 无转义,作为字符串处理document.write( patt1.test(str) ) //输出 true
document.write( patt2.test(str) ) //输出 false
Global对象
创建对象
Global全局对象，其方法不需要对象就可以直接调用。
对象方法
encodeURI() 方法可把字符串作为 URI 进行编码。
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： , / ? : @ & = + $ #
encodeURI("123") // 123encodeURI("abcABC") // abcABCencodeURI("@") // @encodeURI("￥") // %EF%BF%A5encodeURI("笑") // %E7%AC%91encodeURI("http://www.baidu.com?username=李白")
// http://www.baidu.com?username=%E6%9D%8E%E7%99%BD
decodeURI() 方法可对 encodeURI() 方法编码过的 URI 进行解码。
var str = "恭喜发财";var uri = encodeURI(str); // ％E6％81％AD％E5％96％9C％E5％8F％91％E8％B4％A2var str = decodeURI(uri); // 恭喜发财
encodeURIComponent() 方法可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： – _ . ! ~ * ’ ( ) 。
decodeURIComponent() 方法可对 encodeURIComponent() 方法编码的 URI 进行解码。
encodeURIComponent("123") // 123encodeURIComponent("abcABC") // abcABCencodeURIComponent("@") // %40encodeURIComponent("￥") // %EF%BF%A5encodeURIComponent("笑") // %E7%AC%91encodeURI("http://www.baiducom?username=李白")
// http%3A%2F%2Fwww.baidu.com%3Fusername%3D%E6%9D%8E%E7%99%BD
parseInt() 方法可解析一个字符串，并返回一个整数。
parseInt("11") // 11
parseInt("11.11") // 11
parseInt("11 12 13") // 11
parseInt(" 11 ") // 11parseInt("11 years") // 11
parseInt("He was 11") // NaNparseInt("10",16) // 16
parseInt("10",10) // 10
parseInt("10",8) // 8parseInt("0x10") // 16
parseInt("010") // 10
isNaN() 方法用于检查其参数是否是非数字值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
isNaN(123) // false
isNaN(-1.23) // false
isNaN(5-2) // false
isNaN(0) // falseisNaN("Hello") // true
isNaN("2005/12/12") // true
eval() 方法计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));// 输出为 200 4 27
编码
URL
URL 统一资源定位符（Uniform Resource Locator），其实就是我们访问web页面时需要输入的”网页地址“”网址“，比如：https://www.google.com/ 就是URL。
完整定义如下：
协议类型 😕/ 登录信息（认证） @ 服务器地址 : 端口号 / 带层次的文件路径 ? 查询字符串 # 片段标识符
htttp 😕/ user:pass @ www.example.jp : 80 / dir/index.html ? uid=1 # ch
URI
URI 统一资源标识符（Uniform Resource Identifier），就是某个网络协议方案表示的资源的定位标识符，比如：https://www.google.com/ 也同样可以说是，在https网络协议下的一个URI。
如果想要了解 URI统一资源标识符，那么我们必须理清它和 URL统一资源定位符 之间的关系。
第一，URL统一资源定位符 是一个具体的概念，而 URI统一资源标识符 是一个抽象的概念。
第二，URL统一资源定位符 是 URI统一资源标识符 的子集。
它是 URL，而 URL 属于 URI。：
htttp 😕/ user:pass @ www.example.jp : 80 /dir/index.html ? uid=1#ch
它是 URI：
联系地址 😕/ 访客:央视记者 @ 央视 : 直播 / 中国/湖北/武汉/红十字会的仓库 ? 物品=捐款物资
- utf-8：每个汉字3个字节；gbk：每个汉字2个字节；
- 在转码时，将1个字节转化成8个二进制，每4个二进制转化成1个十进制，每2个十进制分为1个组，在每组前头加上%。
- 传智播客 = %E4%BC%A0 %E6%99%BA %E6%92%AD %E5%AE%A2
- 在转码时，将1个字节转化成8个二进制，每4个二进制转化成1个十进制，每2个十进制分为1个组，在每组前头加上%。
DOM
当网页被加载时，浏览器会创建页面的 DOM 文档对象模型（Document Object Model）。通过这种可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
也就是说，DOM将标记语言文档的各个组成部分封装为对象，然后我们可以使用这些对象，并对标记语言文档进行CRUD的动态操作。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
DOM 虽然属于 BOM，但由于DOM功能强大，所以单独算一类。
根据 W3C 标准，DOM 被分为3个不同的部分：
- 核心 DOM：针对任何结构化文档的标准模型
- Node：节点对象，其他5个的父对象
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- XML DOM：针对 XML 文档的标准模型
- HTML DOM：针对 HTML 文档的标准模型
Document对象
获取HTML元素
通过 id 查找 id=“intro” 元素：
<p id="intro"> Hello World!!! </p><script>x = document.getElementById("intro");document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
通过 标签名 查找 id=“main” 元素中的所有 <p> 元素：
<div id="main"><p> Hello World!!! </p><p> Hello JavaScript!!! </p>
</div><script>var x = document.getElementById("main");var y = x.getElementsByTagName("p");document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
通过 class 查找 class=“intro” 的元素：
<p class="intro"> Hello World!!! </p><script>x = document.getElementsByClassName("intro");document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
改变HTML内容
document.write() 可用于直接向 HTML 输出流写内容。
<script>document.write(Date());
</script>
使用 innerHTML 属性 修改 HTML 内容。
<p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="新文本!";
</script>
改变HTML属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute = 新属性值
本例改变了 <img> 元素的 src 属性：
<img id="image" src="smiley.gif"><script>document.getElementById("image").src = "landscape.jpg";
</script>
改变HTML样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property = 新样式
下面的例子会改变 <p> 元素的样式：
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p><script>document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger";
</script>
还可以 通过 HTML 元素的方法，改变和删除元素的属性：
<body><h1>恭喜发财</h1><input id="set" type="button" value="setAttribute"><input id="remove" type="button" value="removeAttribute">
</body><script>var h = document.getElementsByTagName("h1")[0];document.getElementById("set").onclick = function () {h.setAttribute("style","color: lightblue");}document.getElementById("remove").onclick = function () {h.removeAttribute("style");}
</script>
事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
事件可以描述为，特定组件被执行了特定的操作后，触发特定代码的执行。
我们可以将这个过程比喻为：
- 我方水晶被摧毁后，我就责备对友。
- 敌方水晶被摧毁后，我就夸奖自己。
具体事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
分配事件
使用 HTML事件属性 向 button 元素分配 onclick 事件：
<p id="demo"></p>
<button onclick="displayDate()">点这里</button><script>function displayDate(){document.getElementById("demo").innerHTML = Date();}
</script>
使用 HTML DOM 向 button 元素分配 onclick 事件：
<p id="demo"></p>
<button id="myBtn">点这里</button><script>document.getElementById("myBtn").onclick = function(){displayDate()};function displayDate(){document.getElementById("demo").innerHTML = Date();}
</script>
onload/onunload事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled == true){alert("Cookies 可用")}else{alert("Cookies 不可用")}}
</script></body>
onchange事件
onchange 事件 会在输入字段改变时被触发。
本例当用户改变输入字段的内容时，会调用 upperCase() 函数。
<head>
<script>function myFunction(){var x = document.getElementById("fname");x.value = x.value.toUpperCase();}
</script>
</head><body>输入你的名字: <input type="text" id="fname" onchange="myFunction()"><p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
鼠标事件
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
框架/对象事件
| 属性 | 描述 |
|---|---|
| onabort | 图像的加载被中断。 ( <object>) |
| onbeforeunload | 该事件在即将离开页面（刷新或关闭）时触发 |
| onerror | 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) |
| onhashchange | 该事件在当前 URL 的锚部分发生修改时触发。 |
| onload | 一张页面或一幅图像完成加载。 |
| onpageshow | 该事件在用户访问页面时触发 |
| onpagehide | 该事件在用户离开当前网页跳转到另外一个页面时触发 |
| onresize | 窗口或框架被重新调整大小。 |
| onscroll | 当文档被滚动时发生的事件。 |
| onunload | 用户退出页面。 ( <body> 和 <frameset>) |
表单事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input><keygen><select><textarea>) |
| onfocus | 元素获取焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本时触发 ( <input=“search”>) |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
剪贴板事件
| 属性 | 描述 | DOM |
|---|---|---|
| oncopy | 该事件在用户拷贝元素内容时触发 | |
| oncut | 该事件在用户剪切元素内容时触发 | |
| onpaste | 该事件在用户粘贴元素内容时触发 |
Element对象
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :
- 文档本身就是一个文档对象
- 所有 HTML 元素都是元素节点
- 所有 HTML 属性都是属性节点
- 插入到 HTML 元素文本是文本节点
- 注释是注释节点
属性
| 属性 | 描述 |
|---|---|
| element.attributes | 返回一个元素的属性数组 |
| element.childNodes | 返回元素的一个子节点的数组 |
| element.className | 设置或返回元素的class属性 |
| element.firstChild | 返回元素的第一个子节点 |
| element.id | 设置或者返回元素的 id。 |
| element.innerHTML | 设置或者返回元素的内容。 |
| element.lang | 设置或者返回一个元素的语言。 |
| element.lastChild | 返回的最后一个子节点 |
| element.nextSibling | 返回该元素紧跟的一个节点 |
| element.nodeName | 返回元素的标记名（大写） |
| element.nodeType | 返回元素的节点类型 |
| element.nodeValue | 返回元素的节点值 |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回某个元素紧接之前元素 |
| element.style | 设置或返回元素的样式属性 |
方法
| 方法 | 描述 |
|---|---|
| element.appendChild() | 为元素添加一个新的子元素 |
| element.focus() | 设置文档或元素获取焦点 |
| element.getAttribute() | 返回指定元素的属性值 |
| element.getAttributeNode() | 返回指定属性节点 |
| element.hasFocus() | 返回布尔值，检测文档或元素是否获取焦点 |
| element.removeAttribute() | 从元素中删除指定的属性 |
| element.removeAttributeNode() | 删除指定属性节点并返回移除后的节点。 |
| element.removeChild() | 删除一个子元素 |
| element.replaceChild() | 替换一个子元素 |
| element.setAttribute() | 设置或者改变指定属性并指定值。 |
| element.setAttributeNode() | 设置或者改变指定属性节点。 |
BOM
BOM 浏览器对象模型（Browser Object Model）将浏览器的各个组成部分封装成对象。
Window对象
所有浏览器都支持 window 对象，它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
Window对象不需要创建可以直接使用 window使用。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同，window引用可以省略：
document.getElementById("header");
尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于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 方案（涵盖所有浏览器）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><p id="demo"></p><script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;x=document.getElementById("demo");x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script></body>
</html>
弹窗
我们可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法
window.alert("*sometext*");
window.alert() 方法可以不带上window对象，直接使用**alert()**方法。
alert("你好，我是一个警告框！");
确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。
语法
window.confirm("*sometext*");
window.confirm() 方法可以不带上window对象，直接使用**confirm()**方法。
<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p><script>
function myFunction(){var x;var r = confirm("按下按钮!");if (r == true){x="你按下了\"确定\"按钮!";}else{x="你按下了\"取消\"按钮!";}document.getElementById("demo").innerHTML=x;
}
</script>
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法
window.prompt("*sometext*","*defaultvalue*");
window.prompt() 方法可以不带上window对象，直接使用**prompt()**方法。
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p><script>
function myFunction(){var x;var person=prompt("请输入你的名字","Harry Potter");if (person!=null && person!=""){x = "你好 " + person + "! 今天感觉如何?";document.getElementById("demo").innerHTML = x;}
}
</script>
定时器
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
- setInterval()：间隔指定的毫秒数不停地执行指定的代码。
- setTimeout()：在指定的毫秒数后执行指定代码。
setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码，
语法
window.setInterval("*javascript function*",*milliseconds*);
window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。
setInterval() 第一个参数是函数（function），第二个参数是间隔的毫秒数
注意: 1000 毫秒是一秒。
setInterval(function(){alert("Hello")},3000);
本例显示当前时间：
<p id="demo"></p><script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer(){var d = new Date();var t = d.toLocaleTimeString();document.getElementById("demo").innerHTML = t;
}
</script>
clearInterval() 方法
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法
window.clearInterval(*intervalVariable*)
window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
myVar = setInterval("*javascript function*",*milliseconds*);
然后你可以使用 clearInterval() 方法来停止执行。
以下例子，我们添加了 “停止” 按钮：
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</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() 方法
语法
myVar = window.setTimeout("*javascript function*", *milliseconds*);
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”，或者对函数的调用，诸如 alertMsg，第二个参数是指示从当前起多少毫秒后执行第一个参数。
提示：1000 毫秒等于一秒。
等待3秒，然后弹出 “Hello”:
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button><script>
function myFunction(){setTimeout(function(){alert("Hello")},3000);
}
</script>
clearTimeout() 方法
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
语法
window.clearTimeout(*timeoutVariable*)
window.clearTimeout() 方法可以不使用window 前缀。
要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量：
myVar = setTimeout("*javascript function*",*milliseconds*);
如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。
以下是同一个实例, 但是添加了 “Stop the alert” 按钮：
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button><script>
var myVar;
function myFunction(){myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){clearTimeout(myVar);
}
</script>
其他
一些其他方法：
- window.open() – 打开新窗口，返回Window对象
- window.close() – 关闭当前窗口
- window.moveTo() – 移动当前窗口
- window.resizeTo() – 调整当前窗口的尺寸
<body>
<input id="open" value="open" type="button">
<input id="close" value="close" type="button"><br><br>
</body><script>
// open()：打开一个新的浏览器窗口，并返回一个新的Window对象
var openObj = document.getElementById("open");
var newWindow;
openObj.onclick = function () {newWindow = open("https://www.zhuye.kim");
}// close()：关闭浏览器窗口。谁调用，谁关闭。
var closeObj = document.getElementById("close");
closeObj.onclick = function () {newWindow.close();
}
</script>
Window Location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
- location.hostname：返回 web 主机的域名
- location.pathname：返回当前页面的路径和文件名
- location.port：返回 web 主机的端口 （80 或 443）
- location.protocol：返回所使用的 web 协议（http: 或 https:）
href 属性用于设置或返回完整的URL：
<body>
<input type="button" id="href" value="获取当前路径">
<input type="button" id="goto" value="跳转页面">
</body>
<script>var hr = document.getElementById("href");hr.onclick = function () {alert(location.href);}var goto = document.getElementById("goto");goto.onclick = function () {location.href = "https://www.zhuye.kim";}
</script>
reload() 方法用于重新加载当前文档：
<body>
<input type="button" id="reload" value="刷新">
</body><script>var rel = document.getElementById("reload");rel.onclick = function () {location.reload();}
</script>
Window History对象
window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
history.back()
history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的。
本例在页面上创建后退按钮：
<head>
<script>
function goBack(){window.history.back()
}
</script>
</head><body>
<input type="button" value="Back" onclick="goBack()">
</body>
history.forward()
history forward() 方法加载历史列表中的下一个 URL。
这与在浏览器中点击前进按钮是相同的：
<head>
<script>
function goForward(){window.history.forward()
}
</script>
</head><body>
<input type="button" value="Forward" onclick="goForward()">
</body>
history.go()
history.go() 方法 加载 history 列表中的某个具体页面。
如果参数是正数，则前进几个历史记录；负数则后退。
history.go(-1); // history.back(); history.go(0); // location.reload();history.go(1); // history.foward();