导图社区 JavaScript

JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

编辑于2021-04-26 10:44:51

js学习

MMQ60BH8

他的近期作品查看更多>>

JavaScript
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript

社区模板帮助中心，点此进入>>

MMQ60BH8

他的近期作品查看更多>>

JavaScript
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

相似推荐
大纲

互联网9大思维
- 34.6k
- 942
- 2.4k
- 397
- 0
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 14.8k
- 3
- 185
- 9
- 0
Kacyun
域控上线
- 1.6k
- 165
- 11
- 4
- 0
jackrao
python思维导图
- 5.4k
- 537
- 242
- 7
- 0
(*^▽^*)
css
- 1.2k
- 1
- 43
- 3
- 0
A张舫
CSS
- 3.3k
- 268
- 189
- 33
- 0
journey
计算机操作系统思维导图
- 4.3k
- 342
- 204
- 18
- 0
journey
计算机组成原理
- 1.5k
- 98
- 70
- 8
- 0
journey
IMX6UL(A7)
- 528
- 41
- 5
- 0
- 0
Handler XU
考试学情分析系统
- 705
- 51
- 10
- 1
- 0
蒋龙

JavaScript

1. 功能

改变HTML的内容，属性，样式

2. 使用

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

书写位置

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。

提示：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

外部脚本：可以在 <head> 或 <body> 中放置外部脚本引用。该脚本的表现与它被置于 <script> 标签中是一样的。注释：外部脚本不能包含 <script> 标签。

<body> <h2>外部 JavaScript</h2> <button type="button" onclick="myFunction()">试一试</button> <script src="/demo/myScript.js"></script> </body>

外部引用：可通过完整的 URL 或相对于当前网页的路径引用外部脚本

输出

使用 window.alert() 写入警告框

使用 document.write() 写入 HTML 输出

使用 innerHTML 写入 HTML 元素

使用 console.log() 写入浏览器控制台

语句

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。

变量作用域

全局：函数之外声明的变量，会成为全局变量。网页的所有脚本和函数都能够访问它

var carName = " porsche"; // 此处的代码能够使用 carName 变量 function myFunction() { // 此处的代码也能够使用 carName 变量 }

局部：函数中声明的变量，会成为函数的局部变量。只能在函数内部访问它们

// 此处的代码不能使用 carName 变量 function myFunction() { var carName = "porsche"; // 此处的代码能使用 carName 变量 }

自动全局：为尚未声明的变量赋值，此变量会自动成为全局变量。

myFunction(); // 此处的代码能够使用 carName 变量 function myFunction() { carName = "porsche"; }

在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象

var carName = "porsche"; // 此处的代码能够使用 window.carName

其它

严格模式：通过在脚本或函数的开头添加 "use strict"; 来声明严格模式，严格模式把之前可接受的“坏语法”转变为真实的错误。

提升（Hoisting）：是 JavaScript 将声明移至顶部的默认行为；用 let 或 const 声明的变量和常量不会被提升

x = 5; // 把 5 赋值给 x elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中显示 x var x; // 声明 x 等同于 var x; // 声明 x x = 5; // 把 5 赋值给 x elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中显示 x

关键字

Let:块作用域（Block Scope）变量，var声明没有块作用域

{ var x = 10; } // 此处可以使用 x ===================== { let x = 10; } // 此处不可以使用 x

Const:块作用域（Block Scope）常量，const 变量必须在声明时赋值

const PI = 3.141592653589793; PI = 3.14; // 会出错 PI = PI + 10; // 也会出错

3. JS数据类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型： var x; // 现在 x 是 undefined var x = 7; // 现在 x 是数值 var x = "Bill"; // 现在 x 是字符串值

数值

JavaScript 只有一种数值类型。写数值时用不用小数点均可。

var x1 = 34.00; // 带小数点 var x2 = 34; // 不带小数点

定义

精度

整数：（不使用指数或科学计数法）会被精确到 15 位

var x = 999999999999999; // x 将是 999999999999999 var y = 9999999999999999; // y 将是 10000000000000000

小数：小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准

var x = 0.2 + 0.1; // x 将是 0.30000000000000004 可用乘除法解决以上的问题 var x = (0.2 * 10 + 0.1 * 10) / 10; // x 将是 0.3

数字和字符串相加：从左到右相加，如为数字则求和，如为字符串则连接，则剩余的数字也会转换为字符串。

var x = 10; var y = "20"; var z = x + y; // z 将是 1020（一个字符串） var x = "10"; var y = 20; var z = x + y; // z 将是 1020（字符串） var x = 10; var y = 20; var z = "30"; var result = x + y + z; // result是3030（字符串）

数字字符串：如字符串为数字内容，则使用“*”，“/”，“-”，“%”(减号)运算符时会将字符串转换成数字进行运算。“+”运算符会拼接字符串

var x = "100"; var y = "10"; var z = x / y; // z 将是 10 var x = "100"; var y = "10"; var z = x * y; // z 将是 1000 var x = "100"; var y = "10"; var z = x - y; // z 将是 90 var x = "100"; var y = "10"; var z = x - y; // z 将是 90

NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

var x = 100 / "Apple"; // x 将是 NaN（Not a Number）

isNaN()：某个值是否是数

var x = 100 / "Apple"; isNaN(x); // 返回 true，因为 x 不是数

在数学运算中使用了 NaN，则结果也将是 NaN

var x = NaN; var y = 5; var z = x + y; // z 将是 NaN

NaN 是数，typeof NaN 返回 number

typeof NaN; // 返回 "number"

Infinity：无穷数

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

var myNumber = 2; while (myNumber != Infinity) { // 执行直到 Infinity myNumber = myNumber * myNumber; // 循环相乘 } 执行结果： 4 16 256 65536 4294967296 18446744073709552000 3.402823669209385e+38 1.157920892373162e+77 1.3407807929942597e+154 Infinity

除以 0（零）也会生成 Infinity

var x = 2 / 0; // x 将是 Infinity var y = -2 / 0; // y 将是 -Infinity

Infinity 是数：typeOf Infinity 返回 number

typeof Infinity; // 返回 "number"

数值可以为对象

通过关键词 new 定义为对象：var y = new Number(123)

var x = 123; var y = new Number(123); // typeof x 返回 number // typeof y 返回 object

请不要创建数值对象。这样会拖慢执行速度。 new 关键词使代码复杂化，并产生某些无法预料的结果

数值和对象的比较。对象与对象的比较

var x = 500; var y = new Number(500); // (x == y) 为 true，因为 x 和 y 有相等的值 // (x === y) 为 false，因为 x 和 y 的类型不同 var x = new Number(500); var y = new Number(500); // (x == y) 为 false，因为对象无法比较

方法

toString() 以字符串返回数值

var x = 123; x.toString(); // 从变量 x 返回 123 (123).toString(); // 从文本 123 返回 123 (100 + 23).toString(); // 从表达式 100 + 23 返回 123

toFixed() 返回字符串值，它包含了指定位数小数的数字

var x = 9.656; x.toFixed(0); // 返回 10 x.toFixed(2); // 返回 9.66 x.toFixed(4); // 返回 9.6560 x.toFixed(6); // 返回 9.656000

toPrecision() 返回字符串值，它包含了指定长度的数字

var x = 9.656; x.toPrecision(); // 返回 9.656 x.toPrecision(2); // 返回 9.7 x.toPrecision(4); // 返回 9.656 x.toPrecision(6); // 返回 9.65600

valueOf() 以数值返回数值，在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值

var x = 123; x.valueOf(); // 从变量 x 返回 123 (123).valueOf(); // 从文本 123 返回 123 (100 + 23).valueOf(); // 从表达式 100 + 23 返回 123

Number()：返回数字，由其参数转换而来。如果无法转换数字，则返回 NaN

x = true; Number(x); // 返回 1 x = false; Number(x); // 返回 0 x = new Date(); Number(x); // 返回 1404568027739 x = "10" Number(x); // 返回 10 x = "10 20" Number(x); // 返回 NaN

parseInt()：解析其参数并返回浮点数。允许空格。只返回首个数字

parseInt("10"); // 返回 10 parseInt("10.33"); // 返回 10 parseInt("10 20 30"); // 返回 10 parseInt("10 years"); // 返回 10 parseInt("years 10"); // 返回 NaN

parseFloat()：解析其参数并返回整数。允许空格。只返回首个数字

parseFloat("10"); // 返回 10 parseFloat("10.33"); // 返回 10.33 parseFloat("10 20 30"); // 返回 10 parseFloat("10 years"); // 返回 10 parseFloat("years 10"); // 返回 NaN

全局方法可用于所有 JavaScript 数据类型：用于将变量转换为数字

字符串

字符串被引号包围。您可使用单引号或双引号

var carName = "Porsche 911"; // 使用双引号 var carName = 'Porsche 911'; // 使用单引号

字符串长度：length

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

转义字符：\

// 字符串显示特许字符需要使用转义符：\ var x = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。"; 中国是瓷器的故乡，因此 china 与"China（中国）"同名。

字符串可以是对象：var a = new String("abc")

请不要把字符串创建为对象。它会拖慢执行速度。 new 关键字使代码复杂化。也可能产生一些意想不到的结果：当使用 == 相等运算符时，相等字符串是相等的： var x = "Bill"; var y = new String("Bill"); // typeof x 将返回 string // typeof y 将返回 object // (x == y) 为 true，因为 x 和 y 的值相等 // (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

字符串方法

length:获取字符串的长度

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

indexOf()：返回字符串中指定文本首次出现的索引

var str = "The full name of China is the People's Republic of China."; var pos = str.indexOf("China"); // 17 var str = "abcdea"; var pos = str.indexOf("a"); // 0 var str = "abcdea"; // 1 表示从第几个索引开始查找 var pos = str.indexOf("a",1); //5

lastIndexOf():返回指定文本在字符串中最后一次出现的索引

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1

search()：搜索特定值的字符串，并返回匹配的位置。与indexOf方法作用相同。不同点：search方法可使用正则表达式

slice(start,end):start起始索引，end为终止索引。参数可为负数

var str = "abcdefg"; var res = str.slice(3,6); // cde 如参数使用负数，从字符串结尾开始计数 var str = "abcdefg"; var res = str.slice(-6,-1); //bcdef 如省略第二个参数，则该方法将裁剪字符串的剩余部分 var str = "abcdefg"; var res = str.slice(2);

substring(start,end):参数不能是负数，其它与slice方法一致

substr(start,length):与slice方法类似。length为被截取的长度。第一个参数可为负数

var str = "abcdefg"; var res = str.substr(2,2); //cd

提取部分字符串的方法

replace() 方法用另一个值替换在字符串中指定的值,只替换收个匹配

str = "Please visit Microsoft!"; var n = str.replace("MICROSOFT", "W3School");

toUpperCase():将字符串转成大写

var text1 = "Hello World!"; // 字符串 var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1

toLowerCase() 把字符串转换为小写

大小写转换

concat():连接字符串，可代替加号“+”运算符。

这两个方法是等效的 var text = "Hello" + " " + "World!"; var text = "Hello".concat(" ","World!");

trim():删除字符串两端的空白符。

var str = " Hello World! "; alert(str.trim());

charAt(index):

var str = "HELLO WORLD"; str.charAt(0); // 返回 H

charCodeAt(index):获取字符的unicode编码

var str = "HELLO WORLD"; str.charCodeAt(0); // 返回 72

根据索引获取字符串的字符

split() 将字符串转换为数组

var txt = "a,b,c,d,e"; // 字符串 txt.split(","); // 用逗号分隔 var txt = "Hello"; // 字符串 txt.split(""); // 分隔为字符

数组

JavaScript 数组用方括号书写。数组的项目由逗号分隔。

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

typeof 运算符把数组返回为 "object"，因为在 JavaScript 中数组即对象。

定义

创建数组：var array-name = [item1, item2, ...];

var cars = ["Saab", "Volvo", "BMW"]; //推荐 var cars = new Array("Saab", "Volvo", "BMW"); // 不推荐

访问数组元素：通过引用索引号（下标号）来引用某个数组元素

var name = cars[0];

改变数组元素

cars[0] = "Opel";

属性：length返回元素的数量

var x = cars.length; // length 属性返回元素的数量

访问最后一个数组元素

fruits = ["Banana", "Orange", "Apple", "Mango"]; var last = fruits[fruits.length - 1];

添加数组元素：push()

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Lemon"); // 向 fruits 添加一个新元素 (Lemon)

如何识别数组

Array.isArray(fruits); // 返回 true

自定义isArray()方法

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

instanceof

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits instanceof Array // 返回 true

方法

toString() 把数组转换为数组值（逗号分隔）的字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.toString(); // Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

var fruits = ["Banana", "Orange","Apple", "Mango"]; fruits.join(" * "); // Banana * Orange * Apple * Mango

pop() 方法从数组中删除最后一个元素，返回被删除的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // x 的值是 "Mango"

push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); // 向 fruits 添加一个新元素

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift(); // 从 fruits 删除第一个元素 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素，返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); // 向 fruits 添加新元素 "Lemon"

splice() 方法可用于向数组添加新项或者删除元素

添加：arr.splice(index1,index2,item1,item2,.....)

第一个参数（2）定义了应添加新元素的位置（拼接）。第二个参数（0）定义应删除多少元素。其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); 原数组： Banana,Orange,Apple,Mango 新数组： Banana,Orange,Lemon,Kiwi,Apple,Mango

删除:arr.splice(index1,index2)

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); // 删除 fruits 中的第一个元素旧数组： Banana,Orange,Apple,Mango 新数组： Orange,Apple,Mango

concat() 方法通过合并（连接）现有数组来创建一个新数组

var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias", "Linus"]; var myChildren = myGirls.concat(myBoys); // 连接 myGirls 和 myBoys 结果：Cecilie,Lone,Emil,Tobias,Linus

slice(start,end)用数组的某个片段切出新数组

// slice使用两个参数 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1,3); // Orange,Lemon // slice使用一个参数 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(2); // Lemon,Apple,Mango

数组排序

sort() 方法以字母顺序对数组进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // 对 fruits 中的元素进行排序 Banana,Orange,Apple,Mango

reverse() 方法反转数组中的元素，可结合使用sort方法对数组进行降序

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // 对 fruits 中的元素进行排序 fruits.reverse(); // 反转元素顺序 Orange,Mango,Banana,Apple

数字排序：使用比值函数function(a, b){return a-b}

升序

var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a - b}); // 现在 points[0] 包含最低值 // 而 points[points.length-1] 包含最高值

降序

var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return b - a}); // 现在 points[0] 包含最高值 // 而 points[points.length-1] 包含最低值

查找数组中的最大最小值：Math.max.apply(null, arr); Math.min.apply(null, arr);

var points = [40, 100, 1, 5, 25, 10]; myArrayMax(points); function myArrayMax(arr) { return Math.max.apply(null, arr); } // Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)

排序对象数组

根据时间排序 var cars = [ {type:"Volvo", year:2016}, {type:"Saab", year:2001}, {type:"BMW", year:2010} ]; cars.sort(function(a, b){return a.year - b.year}); 结果 BMW 2017 porsche 2018 Audi 2019 根据字符串排序 cars.sort(function(a, b){ var x = a.type.toLowerCase(); var y = b.type.toLowerCase(); if (x < y) {return -1;} if (x > y) {return 1;} return 0; }); 结果 Audi 2019 BMW 2017 porsche 2018

数组迭代

Array.forEach()为每个数组元素调用一次函数（回调函数）

var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) { txt = txt + value + "<br>"; } 该函数接受 3 个参数：项目值项目索引数组本身

Array.map()对每个数组元素执行函数来创建新数组

var numbers1 = [45, 4, 9, 16, 25]; var numbers2 = numbers1.map(myFunction); // 90,8,18,32,50 function myFunction(value, index, array) { return value * 2; }

Array.filter()创建一个包含通过测试的数组元素的新数组

var numbers = [45, 4, 9, 16, 25]; var over18 = numbers.filter(myFunction); // 45,25 function myFunction(value, index, array) { return value > 18; }

Array.reduce()在每个数组元素上运行函数，以生成（减少它）单个值

这个例子确定数组中所有数字的总和 var numbers1 = [45, 4, 9, 16, 25]; var sum = numbers1.reduce(myFunction); // 99 function myFunction(total, value, index, array) { return total + value; } 请注意此函数接受 4 个参数：总数（初始值/先前返回的值）项目值项目索引数组本身

Array.every()检查所有数组值是否通过测试，返回布尔值

这个例子检查所有数组值是否大于 18 var numbers = [45, 4, 9, 16, 25]; var allOver18 = numbers.every(myFunction); // false function myFunction(value, index, array) { return value > 18; }

Array.some()检查某些数组值是否通过了测试，返回布尔值

这个例子检查某些数组值是否大于 18 var numbers = [45, 4, 9, 16, 25]; var someOver18 = numbers.some(myFunction); // true function myFunction(value, index, array) { return value > 18; }

区别：every()数组中只要一个为假即为假。some()只要数组中一个为真即为真

Array.indexOf()在数组中搜索元素值并返回第一个元素其位置

var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple"); // 0

Array.lastIndexOf()在数组中搜索元素值并返回最后一个位置

var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple"); // 2

array.indexOf()/lastIndexOf(item, start) item必需。要检索的项目。start可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

Array.find()返回通过测试函数的第一个数组元素的值

var numbers = [4, 9, 16, 25, 29]; var first = numbers.find(myFunction); // 25 function myFunction(value, index, array) { return value > 18; }

Array.findIndex()返回通过测试函数的第一个数组元素的索引

var numbers = [4, 9, 16, 25, 29]; var first = numbers.findIndex(myFunction); // 3 function myFunction(value, index, array) { return value > 18; }

对象

JavaScript 对象用花括号来书写。对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

类型运算符

typeof：返回变量的类型。可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型

typeof "Bill" // 返回 "string" typeof 314 // 返回 "number" typeof (7 + 8) // 返回 "number"

typeof 运算符对数组返回 "object"，因为在 JavaScript 中数组属于对象。

instanceof：返回 true，如果对象是对象类型的实例

Undefined

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined

var person; // 值是 undefined，类型是 undefined

空值

空值与 undefined 不是一回事。空的字符串变量既有值也有类型。

var car = ""; // 值是 ""，类型是 "string"

Null

null 是 "nothing"。它被看做不存在的事物。在 JavaScript 中，null 的数据类型是对象。

var person = null; // 值是 null，但是类型仍然是对象

Undefined 与 Null 的区别: Undefined 与 null 的值相等，但类型不相等

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

原始数据：原始数据值是一种没有额外属性和方法的单一简单数据值

string

number

boolean

undefined

typeof 运算符可返回这几种原始类型之一

typeof "Bill" // 返回 "string" typeof 3.14 // 返回 "number" typeof true // 返回 "boolean" typeof false // 返回 "boolean" typeof x // 返回 "undefined" (假如 x 没有值)

复杂数据：typeof 运算符可返回这两种类型之一

function

typeof 运算符把函数返回 function

object

typeof 运算符把对象、数组或 null 返回 object。

4. JS函数

概念：JavaScript 函数是通过 function 关键词定义的。可以使用函数声明或函数表达式。

函数定义

函数表达式

匿名函数（没有名称的函数）：var x = function (a, b) {return a * b};

var x = function (a, b) {return a * b}; var z = x(4, 3);

函数声明

function functionName(parameters) { 要执行的代码 }

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

Function（）构造器

var myFunction = new Function("a", "b", "return a * b"); 等同于 var myFunction = function("a","b"){return a * b};

函数提升

在声明函数之前调用函数，表达式定义的函数不会被提升

myFunction(5); function myFunction(y) { return y * y; }

自调用函数（匿名的自调用函数，没有名称的函数）

语法：(function(){})();把函数放到括号里，以表达是一个函数表达式；

(function () { var x = "Hello!!"; //我会调用我自己 })();

函数是对象，有属性和方法

arguments.length：返回函数收到的参数的数量

function myFunction(a, b) { return arguments.length; } var x = myFunction(1 , 2 ){ return arguments.length; // 2 }

toString():以字符串返回函数

function myFunction(a, b) { return a * b; } var txt = myFunction.toString(); // function muFunction(a,b){ return a * b ; }

箭头函数

// ES5 var x = function(x, y) { return x * y; } // ES6 const x = (x, y) => x * y; // 单个语句的情况下可以省略大括号和return关键字或者 const x = (x,y) => { return x * y }

函数参数

函数不会对参数值进行任何检查。函数参数（parameter）指的是在函数定义中列出的名称；函数参数（argument）指的是传递到函数或由函数接收到的真实的值

调用函数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined

function myFunction(x, y) { if (y === undefined) { y = 0; } return x * y; } var x = myFunction(4); // 0

调用函数时如参数多于被声明的数量，可使用argument对象获取

x = findMax(1, 123, 500, 115, 44, 88); // 500 function findMax() { // 函数未定义参数 var i; var max = -Infinity; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; // 获取参数的最大值 } } return max; }

函数调用

以函数形式调用函数

function myFunction(a, b) { return a * b; } myFunction(10, 2); // 将返回 20

对象方法调用函数

var myObject = { firstName:"Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 将返回 "Bill Gates"

函数构造器调用函数

// 这是函数构造器： function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // 创建了一个新对象： var x = new myFunction("Bill", "Gates"); x.firstName; // 会返回 "Bill"

函数 Call

call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。

var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName:"Bill", // person1 中的属性名firstName要与person中的this.firstName一致 lastName: "Gates", } var person2 = { firstName:"Steve", lastName: "Jobs", } person.fullName.call(person1); // 将返回 "Bill Gates"

带参数的call()方法

var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"Bill", lastName: "Gates" } person.fullName.call(person1, "Seattle", "USA");

函数 Apply

apply() 方法与 call() 方法类似

var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName: "Bill", lastName: "Gates", } person.fullName.apply(person1); // 将返回 "Bill Gates"

带参数的apply（）方法

var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"John", lastName: "Doe" } person.fullName.apply(person1, ["Oslo", "Norway"]);

模拟max方法：Math.max(1,2,3); // 会返回 3 Math.max.apply(null, [1,2,3]); // 也会返回 3

区别： call() 方法分别接受参数。 apply() 方法接受数组形式的参数。

闭包

全局变量能够通过闭包实现局部

一个全局计数器的困境

使用全局变量和函数递增计数器。问题：不用通过函数，可直接修改变量

// 初始化计数器 var counter = 0; // 递增计数器的函数 function add() { counter += 1; } // 调用三次 add() add(); add(); add(); // 此时计数器应该是 3

使用局部变量和函数。问题：每次调用会重置局部变量

// 递增计数器的函数 function add() { var counter = 0; counter += 1; return counter; } // 调用三次 add() add(); add(); add(); //此时计数器应该是 3。但它是 1。

闭包：使用自调用函数

var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add(); // 计数器目前是 3 例子解释变量 add 的赋值是自调用函数的返回值。这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

5. JS对象

所有 JavaScript 值，除了原始值，都是对象。

在 JavaScript 中，几乎“所有事物”都是对象。布尔是对象（如果用 new 关键词定义）数字是对象（如果用 new 关键词定义）字符串是对象（如果用 new 关键词定义）日期永远都是对象算术永远都是对象正则表达式永远都是对象数组永远都是对象函数永远都是对象对象永远都是对象

定义：对象也是变量。但是对象能够包含很多值。值按照名称 : 值对的形式编写（名称和值以冒号分隔）。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象属性

属性指的是与 JavaScript 对象相关的值。JavaScript 对象是无序属性的集合。属性通常可以被修改、添加和删除，但是某些属性是只读的。

访问属性

objectName.property // person.age

objectName["property"] // person["age"]

objectName[expression] // x = "age"; person[x]

遍历属性值

JavaScript for...in 语句遍历对象的属性。

for (variable in object) { 要执行的代码 }

var person = {fname:"Bill", lname:"Gates", age:62}; for (x in person) { txt += person[x]; }

添加属性

对象名.对象属性 = 对象值

person.nationality = "English";

删除属性

delete 对象名.属性

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}; delete person.age; // 或 delete person["age"];

对象方法

对象中的属性值为函数

var person = { firstName: "Bill", lastName : "Gates", id : 648, fullName : function() { return this.firstName + " " + this.lastName; } };

var person = { fullName : function() { return this.firstName + " " + this.lastName; } };

this关键字

指person对象

访问对象方法

obejectName.methodName();注意，方法名称后面需要加（）

name = person.fullName();

属性时没有使用 ()，则将返回函数定义

// 创建对象： var person = { firstName: "Bill", lastName : "Gates", id : 12345, fullName : function() { return this.firstName + " " + this.lastName; } }; // 显示对象中的数据： document.getElementById("demo").innerHTML = person.fullName; // 输出结果： function() { return this.firstName + " " + this.lastName; }

添加新的方法

方式一： function person(firstName, lastName, age, eyeColor) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.eyeColor = eyeColor; this.changeName = function (name) { this.lastName = name; }; } 方式二： var person = { firstName: "Bill", lastName : "Gates", id : 678, }; person.name = function() { return this.firstName + " " + this.lastName; };

对象访问器

ECMAScript 5 (2009) 引入了 Getter 和 Setter。 Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

Getter

// 创建对象： var person = { firstName: "Bill", lastName : "Gates", language : "en", get lang() { return this.language; } }; // 使用 getter 来显示来自对象的数据： document.getElementById("demo").innerHTML = person.lang;

Setter

var person = { firstName: "Bill", lastName : "Gates", language : "", set lang(lang) { this.language = lang; } }; // 使用 setter 来设置对象属性： person.lang = "en"; // 显示来自对象的数据： document.getElementById("demo").innerHTML = person.language;

对象方法和对象访问器的区别

对象方法： var person = { firstName: "Bill", lastName : "Gates", fullName : function() { return this.firstName + " " + this.lastName; } }; // 使用方法来显示来自对象的数据： document.getElementById("demo").innerHTML = person.fullName(); 对象访问器 var person = { firstName: "Bill", lastName : "Gates", get fullName() { return this.firstName + " " + this.lastName; } }; // 使用 getter 来显示来自对象的数据： document.getElementById("demo").innerHTML = person.fullName; 例子 1 以函数形式访问 fullName：person.fullName()。例子 2 以属性形式访问 fullName：person.fullName。更简洁的语法

为什么使用Getter和Setter?

它提供了更简洁的语法

它允许属性和方法的语法相同

它可以确保更好的数据质量

有利于后台工作

一个计算器实例

对象构造器

function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; }

通过 new 关键词调用构造器函数可以创建相同类型的对象

var myFather = new Person("Bill", "Gates", 62, "blue"); var myMother = new Person("Steve", "Jobs", 56, "green");

建议

JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！

请使用对象字面量 {} 代替 new Object()。请使用字符串字面量 "" 代替 new String()。请使用数值字面量代替 Number()。请使用布尔字面量代替 new Boolean()。请使用数组字面量 [] 代替 new Array()。请使用模式字面量代替 new RexExp()。请使用函数表达式 () {} 代替 new Function()。

对象原型

所有 JavaScript 对象都从原型继承属性和方法。

Object.prototype 位于原型继承链的顶端：日期对象、数组对象和 Person 对象都继承自 Object.prototype。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

使用 prototype 属性添加对象属性和方法

添加对象属性

添加对象方法

6. Math对象

概念：Math 对象允许您对数字执行数学任务

Math.PI; // 返回 3.141592653589793

Math.round(x) 的返回值是 x 四舍五入为最接近的整数

Math.round(6.8); // 返回 7 Math.round(2.3); // 返回 2

Math.pow(x, y) 的返回值是 x 的 y 次幂

Math.pow(8, 2); // 返回 64

Math.sqrt(x) 返回 x 的平方根

Math.sqrt(64); // 返回 8

Math.abs(x) 返回 x 的绝对（正）值

Math.abs(-4.7); // 返回 4.7

Math.ceil(x) 的返回值是 x 上舍入最接近的整数

Math.ceil(6.4); // 返回 7

Math.floor(x) 的返回值是 x 下舍入最接近的整数

Math.floor(2.7); // 返回 2

Math.min()用于查找参数列表中的最低值

Math.min(0, 450, 35, 10, -8, -300, -78); // 返回 -300

Math.max() 可用于查找参数列表中的最高值

Math.max(0, 450, 35, 10, -8, -300, -78); // 返回 450

Math.random() 随机数

Math.random(); // 返回随机数 Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数 Math.floor(Math.random() * 11); // 返回 0 至 10 之间的数 Math.floor(Math.random() * 100); // 返回 0 至 99 之间的数 Math.floor(Math.random() * 101); // 返回 0 至 100 之间的数 Math.floor(Math.random() * 10) + 1; // 返回 1 至 10 之间的数 Math.floor(Math.random() * 100) + 1; // 返回 1 至 100 之间的数函数始终返回介于 min（包括）和 max（不包括）之间的随机数 function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min; } 函数始终返回介于 min 和 max（都包括）之间的随机数 function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }

7. HTML DOM

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被结构化为对象树

DOM方法

document.getElementById("demo").innerHTML = "Hello World!"; 在上面的例子中，getElementById 是方法，而 innerHTML 是属性。

属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）

方法是您能够完成的动作（比如添加或删除 HTML 元素）

所有 HTML 元素都被定义为对象

DOM 文档

文档对象代表网页。访问 HTML 页面中的任何元素，总是从访问 document 对象开始。

查找HTML元素

通过id查找，如未找到返回null。document.getElementById（）

<p id="demo"></p> var myElement = document.getElementById("intro");

通过标签名查找：document.getElementsByTagName（）

<div id="main"> <p>DOM 很有用。</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> var x = document.getElementById("main"); var y = x.getElementsByTagName("p");

通过类名查找：getElementsByClassName()

<p class="intro">DOM 很有用。</p> var x = document.getElementsByClassName("intro");

通过CSS选择器查找：querySelectorAll()

<p class="intro">DOM 很有用。</p> <p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p> <p id="demo"></p> <script> var x = document.querySelectorAll("p.intro"); document.getElementById("demo").innerHTML = x[0].innerHTML; // DOM 很有用 </script>

通过HTML对象查找

<form id="frm1" action="/demo/action_page.php"> First name: <input type="text" name="fname" value="Bill"><br> Last name: <input type="text" name="lname" value="Gates"><br><br> <input type="submit" value="提交"> </form> <p>单击“试一试”按钮，显示表单中每个元素的值。</p> <button onclick="myFunction()">试一试</button> <p id="demo"></p> <script> function myFunction() { var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length ;i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text; } </script>

改变HTML元素

添加和删除元素

添加事件处理程序

改变HTML

document.write()：直接写入 HTML 输出流

<body> <script> document.write(Date()); </script> </body>

不要在文档加载后使用 document.write()。这么做会覆盖文档

改变html内容：使用 innerHTML 属性。可获取元素内容或改变元素内容

<body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML = "hello kitty!"; </script>

改变属性的值：语法：document.getElementById(id).attribute = new value

<img id="myImage" src="smiley.gif"> <script> document.getElementById("myImage").src = "landscape.jpg"; </script>

改变CSS样式：语法：document.getElementById(id).style.property = new style

<p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; </script> ============================================ <button type="button" onclick="document.getElementById('id1').style.color = 'red'"> 点击我！ </button> ============================================ <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'"> <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'">

DOM动画

动画是通过对元素样式进行渐进式变化编程完成的。这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的

<html> <style> #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } </style> <body> <p><button onclick="myMove()">单击我</button></p> <div id ="container"> <div id ="animate"></div> </div> <script> function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 1); // 每1毫秒循环执行frame方法 function frame() { if (pos == 350) { clearInterval(id); // 取消循环方法 } else { pos++; elem.style.top = pos + "px"; elem.style.left = pos + "px"; } } } </script>

DOM 事件

使用方法

html元素属性调用事件函数

<h1 onclick="changeText(this)">点击此文本！</h1> <script> function changeText(id) { id.innerHTML = "Hello:)"; } </script>

js将事件函数分配给html元素

<button id="myBtn">试一试</button> <p id="demo"></p> <script> document.getElementById("myBtn").onclick = displayDate; function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script>

事件方法

onclick：鼠标点击事件

onload:用户进入页面事件。

onunload：离开页面事件

可用于处理cookie

onchange：用户改变输入字段内容时触发

onmouseover：鼠标移入事件

onmouseout：鼠标移出事件

onmousedown：按下鼠标事件

onmouseup：释放鼠标事件

事件传播

事件传播是一种定义当发生事件时，元素事件执行次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，<div>和<p>都有click事件。应该首先处理哪个元素“click”事件？

冒泡：在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件

捕获：在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

DOM 事件监听器

addEventListener()方法

定义：为指定元素指定事件处理程序。可添加多个事件处理程序。

语法：element.addEventListener(event, function, useCapture); 第一个参数是事件的类型（比如 "click" 或 "mousedown"）。第二个参数是当事件发生时我们需要调用的函数。第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。默认为false，为冒泡事件。

<button id="myBtn">试一试</button> <p id="demo"></p> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> ================================================ <button id="myBtn">试一试</button> <script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); x.addEventListener("mouseover",otherFunction); function myFunction() { alert ("Hello World!"); } function someOtherFunction() { alert ("此函数也被执行了！"); } function otherFunction(){ alert("该函数也再次被执行了") } </script>

向 Window 对象添加事件处理程序

当用户调整窗口大小时触发的事件监听器 window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = “窗口的大小发生了变化”; });

removeEventListener() 方法

删除已通过 addEventListener() 方法附加的事件处理程序

语法：element.removeEventListener("mousemove", myFunction)

DOM 导航

DOM 节点

HTML 文档中的所有事物都是节点：整个文档是文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点所有注释是注释节点

节点关系

节点树中的节点彼此之间有一定的等级关系。

<html> <head> <title>DOM 教程</title> </head> <body> <h1>DOM 第一课</h1> <p>Hello world!</p> </body> </html>

节点导航方法

parentNode：找父节点

document.getElementById("demo").parentNode

childNodes[nodenumber]：找子节点

firstChild：找第一个子节点

lastChild：最后一个子节点

nextSibling：下一个兄弟节点

previousSibling：上一个兄弟节点

子节点和节点值

<title>元素节点不包含文本：<title id="demo">DOM 教程</title>

<title id="demo">DOM 教程</title> 文本节点的值能够通过节点的 innerHTML 属性进行访问 var myTitle = document.getElementById("demo").innerHTML; 或者 var myTitle = document.getElementById("demo").firstChild.nodeValue; 或者 var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

DOM 根节点

document.body - 文档的 body。获取body元素内所有的节点

document.documentElement - 完整文档。获取html元素所有的节点

两个特殊属性允许访问完整文档

节点属性

nodeName 属性

规定节点的名称，nodeName 是只读的元素节点的 nodeName 等同于标签名属性节点的 nodeName 是属性名称文本节点的 nodeName 总是 #text 文档节点的 nodeName 总是 #document

<h1 id="id01">我的第一张网页</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; // H1 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeName; // #test </script>

nodeValue 属性

nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 文本节点的 nodeValue 是文本文本属性节点的 nodeValue 是属性值

nodeType 属性

返回节点的类型。nodeType 是只读的。

<h1 id="id01">我的第一张网页</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; // 1 </script>

操作节点（元素）

添加元素

element.appendChild()：追加新元素作为父的最后一个子元素

<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> // 新元素将在这里添加 </div> <script> var para = document.createElement("p"); // 创建 p 元素 var node = document.createTextNode("这是新文本。"); // 创建 p 元素的文本内容 para.appendChild(node); // 将文本内容添加到 p 元素中 var element = document.getElementById("div1"); // 获取 div 元素 element.appendChild(para); // 将 p 元素添加到 div 元素中 </script>

insertBefore（）：追加新元素到父元素中的某个同级元素前面

<div id="div1"> <p id="p1">这是一个段落。</p> // 新元素将添加到这里 <p id="p2">这是另一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是新文本。"); para.appendChild(node); var element = document.getElementById("div1"); // 获取父元素 var child = document.getElementById("p2"); // 获取同级元素 element.insertBefore(para, child); // 新元素将添加到 p2 元素前面 </script>

删除元素

如需删除某个 HTML 元素，您需要知晓该元素的父元素

removeChild（）：可使用parentNode找到父元素，然后再删除子元素

<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent = document.getElementById("div1"); // 获取父元素 var child = document.getElementById("p1"); // 获取需要删除的元素 parent.removeChild(child); // 删除元素 // 或者使用 child.parentNode.removeChild(child); </script>

替换HTML元素

replaceChild()

var para = document.createElement("p"); var node = document.createTextNode("这是新文本。"); para.appendChild(node); // 创建新元素 var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); // 用新元素替换 p1 元素

DOM 集合

HTMLCollection 对象

HTMLCollection 对象是类数组的 HTML 元素列表（集合）

getElementsByTagName() 方法返回 HTMLCollection 对象

<p>Hello World!</p> <p>Hello China!</p> <p id="demo"></p> <script> var myCollection = document.getElementsByTagName("p"); myCollection[1].innerHTML; // Hello China! </script>

length 属性定义了 HTMLCollection 中元素的数量

<p>Hello World!</p> <p>Hello China!</p> <p id="demo"></p> var myCollection = document.getElementsByTagName("p"); myCollection.length; // 3

HTMLCollection 并非数组！能够遍历列表并通过数字引用元素（就像数组那样）无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()

DOM 节点列表：NodeList 对象

NodeList 对象与 HTMLCollection 对象几乎相同

var myNodeList = document.querySelectorAll("p"); // 获取所有 p 元素 myNodeList[1]; // 获取第二个 p 元素

length 属性定义节点列表中的节点数

var myNodelist = document.querySelectorAll("p"); myNodelist.length;

8. BOM 浏览器对象模型

Window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员

window.document.getElementById("header"); 等同于 document.getElementById("header");

这两个属性都以像素返回尺寸： window.innerHeight - 浏览器窗口的内高度（以像素计） window.innerWidth - 浏览器窗口的内宽度（以像素计）

窗口方法 window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() -移动当前窗口 window.resizeTo() -重新调整当前窗口

Screen

window.screen 对象包含用户屏幕的信息，window前缀可以不写

属性 screen.width ：返回以像素计的访问者屏幕宽度 screen.height ：返回以像素计的访问者屏幕的高度 screen.availWidth：返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征 screen.availHeight：返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征 screen.colorDepth：返回用于显示一种颜色的比特数：返回屏幕的像素深度 screen.pixelDepth

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

Location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。 window.location 对象可不带 window 前缀书写

属性: window.location.href 返回当前页面的 href (URL) window.location.hostname 返回 web 主机的域名 window.location.pathname 返回当前页面的路径或文件名 window.location.protocol 返回使用的 web 协议（http: 或 https:） window.localtion.port 返回当前页面主机端口号，大多数浏览器不会显示默认端口号（http 为 80，https 为 443） window.location.assign 加载新文档

History

window.history 对象包含浏览器历史。可不写window前缀。为了保护用户的隐私，JavaScript 访问此对象存在限制

方法： history.back() - 等同于在浏览器点击后退按钮 history.forward() - 等同于在浏览器中点击前进按钮

Navigator

window.navigator 对象包含有关访问者的信息

属性： navigator.cookieEnabled：检查cookie是否启用，如启用返回true navigator.appName：返回浏览器的应用程序名称 navigator.appCodeName：返回浏览器的应用程序代码名称 navigator.product：返回浏览器引擎的产品名称 navigator.appVersion：返回有关浏览器的版本信息 navigator.userAgent：返回由浏览器发送到服务器的用户代理报头（user-agent header） navigator.platform：返回浏览器平台（操作系统） navigator.language：返回浏览器语言 navigator.onLine：判断浏览器是否在线

方法：javaEnabled()判断java是否启用

弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框

警告框：window.alert("sometext");

确认框：window.confirm("sometext");

var r = confirm("请按按钮"); if (r == true) { x = "您按了确认！"; } else { x = "您按了取消！"; }

提示框：window.prompt("sometext","defaultText");

var person = prompt("请输入您的姓名", "比尔盖茨"); if (person != null) { document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？"; }

Timing（定时事件

window对象允许以指定的时间间隔执行代码，这些时间间隔称为定时时间。

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

window.setTimeout(function, milliseconds) window前缀可不写第一个参数是要执行的函数。第二个参数指示执行之前的毫秒数

// 单击按钮。等待 3 秒，然后页面会提示 "Hello" <button onclick="setTimeout(myFunction, 3000)">试一试</button> <script> function myFunction() { alert('Hello'); } </script>

clearTimeout()

停止执行 setTimeout() 中规定的函数

window.clearTimeout(timeoutVariable) timeoutVariable是从 setTimeout() 返回的变量

myVar = setTimeout(function, milliseconds); clearTimeout(myVar); ============================== <button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button> <button onclick="clearTimeout(myVar)">停止执行</button>

setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数。window前缀可不写

window.setInterval(function, milliseconds) window前缀可不写。用法与setTimeout()一致

clearInterval()

停止执行setInterval（）方法。

用法与clearTimeout一致

储存在用户本地终端上的数据。由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成

document.cookie

可以用 document.cookie 属性创建、读取、删除 cookie。

创建：document.cookie = "username=Bill Gates";

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/"; // expires 为到期时间。 path 为 cookie 所属路径

读取：var x = document.cookie; document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

修改：document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

删除：把 expires 参数设置为过去的日期即可

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

9. AJAX

AJAX 并非编程语言，而是一种技术。用于异步更新网页。工作流程：

XMLHttpRequest对象

用于同后台服务器交换数据。

创建：variable = new XMLHttpRequest();

方法

new XMLHttpRequest():创建新的XMLRequest对象

abort()：取消当前请求

getAllResponseHeaders()：返回头部信息

getResponseHeader()：返回特定的头部信息

open(method,url,async,user,pws)：定义请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码

send()：将请求发送到服务器，用于GET请求

send(string):将请求发送到服务器，用于POST请求

setRequestHeader()：向要发送的报头添加标签/值对

属性

onreadystatechange：定义当 readyState 属性发生变化时被调用的函数

readyState：保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪

responseText：以字符串返回响应数据

responseXML：以 XML 数据返回响应数据

status：返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found"

statusText：返回状态文本（比如 "OK" 或 "Not Found"）

发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法

xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

添加HTTP头部数据：通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据

xhttp.open("POST", "ajax_test.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Bill&lname=Gates");

服务器响应

每当 readyState 发生变化时就会调用 onreadystatechange 函数

onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

10. JSON

JSON: JavaScript Object Notation（JavaScript 对象标记法）,JSON 格式是纯文本的

语法

JSON 语法衍生于 JavaScript 对象标记法语法：数据在名称/值对中数据由逗号分隔花括号容纳对象方括号容纳数组

JSON 名称需要双引号。而 JavaScript 名称不需要

{ "name":"Bill Gates" } // json { name:"Bill Gates" } // javascript

JSON.parse()

把文本转换为 JavaScript 对象/数组

JSON.stringify()

把 JavaScript 对象转换为字符串

var obj = { name:"Bill Gates", age:62, city:"Seattle"}; var myJSON = JSON.stringify(obj);