一、资料
二、简介
1、完整的 JavaScript 实现是由以下 3 个不同部分组成的：
JavaScript
ECMAScript 描述了该语言的语法和基本对象；
DOM （文档对象模型）描述了处理网页内容的方法和接口；
BOM （浏览器对象模型）描述了与浏览器进行交互的方法和接口。
三、使用
1、HTML 中的脚本必须位于 <script> 与 </script> 标签之间
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript";
</script>
2、脚本可被放置在 HTML 页面的 <body> 或 <head> 部分中，但是把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示
3、脚本也可放置于外部文件中，便于相同的脚本被不同的网页使用
<script src="myScript.js"></script>
4、JavaScript 对大小写敏感
5、JavaScript 一般使用以小写字母开头的驼峰大小写：
6、输出语句
// 操作 HTML 元素内容
innerHTML
// 弹出警告
window.alert()
// 写入到浏览器的控制台
console.log()
// 将内容写到 HTML 文档中
document.write()
四、语法
1、var
1、变量提升：JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
2、作用域：对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）。
四、数据类型
1、简介
原始类型（primitive type）： Undefined、Null、Boolean、Number 和 String。
请注意：
1、数组的数据类型是对象
2、日期的数据类型是对象
2、typeof运算符
JavaScript 有三种方法，可以确定一个值到底是什么类型：
typeof运算符
instanceof运算符
Object.prototype.toString方法
// undefined
typeof undefined
// "undefined"
typeof v
// "undefined"
// null
typeof null // "object"
// boolean
typeof false // "boolean"
// number
typeof 123 // "number"
typeof NaN // 'number'
// string
typeof '123' // "string"
// 对象类型
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
// 函数
function f() {}
typeof f
// "function"
3、Undefined
1、undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。
2、未定义变量的数据类型是 undefined，尚未赋值的变量的数据类型也是 undefined。
// 变量声明了，但没有赋值
var i;
i // undefined
// 调用函数时，应该提供的参数没有提供，该参数等于 undefined
function f(x) {
return x;
}
f() // undefined
// 对象没有赋值的属性
var o = new Object();
o.p // undefined
// 函数没有返回值时，默认返回 undefined
function f() {}
f() // undefined
4、Null
1、null是一个表示“空”的对象，转为数值时为0。
2、null的数据类型是object，这是由于历史原因造成的。1995年的 JavaScript 语言第一版，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑null，只把它当作object的一种特殊值。后来null独立出来，作为一种单独的数据类型，为了兼容以前的代码，typeof null返回object就没法改变了。
5、布尔值
如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。
undefined
null
false
0
NaN
""或''（空字符串）
6、数值
1、JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。
1 === 1.0 // true
0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false
2、JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性，返回可以表示的具体的最大值和最小值。
Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324
3、NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。需要注意的是，NaN不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于Number，使用typeof运算符可以看得很清楚。NaN不等于任何值，包括它本身。
5 - 'x' // NaN
0 / 0 // NaN
typeof NaN // 'number'
NaN === NaN // false
4、Infinity表示“无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非0数值除以0，得到Infinity。Infinity与NaN比较，总是返回false。
Math.pow(2, 1024) // Infinity
0 / 0 // NaN
1 / 0 // Infinity
5、与数值相关的全局方法
// parseInt方法用于将字符串转为整数
parseInt('123') // 123
// parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数
parseInt('1000') // 1000
parseInt('1000', 10) // 1000
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
// parseFloat方法用于将一个字符串转为浮点数
parseFloat('3.14') // 3.14
// isNaN方法可以用来判断一个值是否为NaN
isNaN(NaN) // true
isNaN(123) // false
// isNaN只对数值有效，如果传入其他值，会被先转成数值。比如，传入字符串的时候，字符串会被先转成NaN，所以最后返回true，这一点要特别引起注意。也就是说，isNaN为true的值，有可能不是NaN，而是一个字符串，因此，使用isNaN之前，最好判断一下数据类型。
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true
function myIsNaN(value) {
return typeof value === 'number' && isNaN(value);
}
// isFinite方法返回一个布尔值，表示某个值是否为正常的数值，除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true
7、字符串
5.1、字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。
5.2、不要把字符串创建为对象，它会拖慢执行速度。
5.3、字符串是不可变的：字符串不能更改，只能替换。所有字符串方法都会返回新字符串。它们不会修改原始字符串。
5.4、字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符，但是字符串内部的单个字符无法改变和增删，这些操作会默默地失败。
// length属性返回字符串的长度
length
// 把字符串转换为大写，返回新字符串
toUpperCase()
// 把字符串转换为小写，返回新字符串
toLowerCase()
// 返回字符串中指定文本首次出现的索引，如果未找到文本，返回 -1
indexOf()
// 返回指定文本在字符串中最后一次出现的索引，如果未找到文本，返回 -1
// 与search() 方法相比，可以设置第二个开始位置参数
lastIndexOf()
// 搜索特定值的字符串，并返回匹配的位置，可设置正则表达式
// 与indexOf() 方法相比，可以设置更强大的搜索值（正则表达式）
search()
// 提取字符串的某个部分并在新字符串中返回被提取的部分
slice()
// 类似于 slice() ，不同之处在于 substring() 无法接受负的索引
substring()
// 类似于 slice()，不同之处在于第二个参数规定被提取部分的长度
substr()
// 用另一个值替换在字符串中指定的值
// 只替换首个匹配
// 不会改变调用它的字符串，它返回的是新字符串
// 可使用正则表达式作参数
replace()
// 连接两个或多个字符串，可用于代替加运算符
concat()
// 删除字符串两端的空白符
trim()
// 返回字符串中指定下标（位置）的字符串
charAt()
// 返回字符串中指定索引的字符 unicode 编码
charCodeAt()
// 将字符串转换为数组
split()
8、对象
1、对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
var obj = {
foo: 'Hello',
bar: 'World'
};
2、对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。
var obj = {
p: function (x) {
return 2 * x;
}
};
obj.p(1) // 2
3、
// 查看一个对象本身的所有属性，可以使用Object.keys和Object.getOwnPropertyNames
var obj = {
key1: 1,
key2: 2
};
Object.keys(obj); // ['key1', 'key2']
Object.getOwnPropertyNames(obj) // ['key1', 'key2']
// in运算符用于检查对象是否包含某个属性
// in运算符不能识别哪些属性是对象自身的，哪些属性是继承的
var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true
// hasOwnProperty方法判断是否为对象自身的属性
var obj = {};
if ('toString' in obj) {
console.log(obj.hasOwnProperty('toString')) // false
}
// for...in循环用来遍历一个对象的全部属性，不仅遍历对象自身的属性，还遍历继承的属性
var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
console.log('键名：', i);
console.log('键值：', obj[i]);
}
var person = { name: '老张' };
for (var key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
9、数组
1、数组属于一种特殊的对象，在 JavaScript 中对数组使用 typeof 运算符会返回 "object"。
2、数组使用数字索引，对象使用命名索引。数组是特殊类型的对象，具有数字索引。
3、数组是一种动态的数据结构，可以随时增减数组的成员。
4、没有必要使用 JavaScript 的内建数组构造器 new Array()，请使用[] 取而代之！
// typeof运算符会返回数组的类型是object。
typeof [1, 2, 3] // "object"
// length属性返回数组的长度（数组元素的数目）
// length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员数量会自动减少到length设置的值。清空数组的一个有效方法，就是将length属性设为0。
var arr = [ 'a', 'b', 'c' ];
arr.length = 0;
arr // []
// 向数组末尾添加新元素，返回新数组的长度
push()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");
// x 的值是 5 ， fruits 的值是 Banana,Orange,Apple,Mango,Kiwi
// 从数组中删除最后一个元素
pop()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();
// x 的值是 "Mango" ， fruits 的值是 Banana,Orange,Apple
// 删除首个数组元素，并把所有其他元素“位移”到更低的索引，返回被“位移出”的元素
shift()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();
// x 的值是 "Banana" ， fruits 的值是 Orange,Apple, Mango
// 在开头向数组添加新元素，并“反向位移”旧元素，返回新数组的长度
unshift()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.unshift("Lemon");
// x 的值是 5 ， fruits 的值是 Lemon,Banana,Orange,Apple,Mango
// 删除元素，不过使用 delete 会在数组留下未定义的空洞，请使用 pop() 或 shift() 取而代之
delete()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
// 把 fruits 中的首个元素改为 undefined
// 向数组添加新项，第一个参数定义了应添加新元素的位置，第二个参数定义应删除多少元素，其余参数定义要添加的新元素
// 返回一个包含已删除项的数组
splice()
// 用数组的某个片段切出新数组。创建新数组，不从源数组中删除任何元素
// 可接受两个参数，该方法会从开始参数选取元素，直到结束参数（不包括）为止
slice()
// 合并现有数组来创建一个新数组，不会更改现有数组，返回一个新数组
concat()
// 判断是否是数组
isArray()
// 把数组转换为数组值（逗号分隔）的字符串
toString()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString(); // Banana,Orange,Apple,Mango
// 将所有数组元素结合为一个字符串还可以规定分隔符
join()
eg
var fruits = ["Banana", "Orange","Apple", "Mango"];
fruits.join(" * "); // Banana * Orange * Apple * Mango
// 以字母顺序对数组进行排序
sort()
// 反转数组中的元素
reverse()
// 查找数组中的最高值
Math.max.apply
// 查找数组中的最低值
Math.min.apply
// 为每个数组元素调用一次函数
forEach()
// 对每个数组元素执行函数来创建新数组
map()
// 创建一个包含通过测试的数组元素的新数组
filter()
// 检查所有数组值是否通过测试
every()
10、函数
1、函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数可以返回不同的值。
2、函数可以调用自身，就是递归（recursion）
3、作用域（scope）指的是变量存在的范围。在 ES5 的规范中，JavaScript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。
4、函数外部声明的变量就是全局变量（global variable），它可以在函数内部读取。在函数内部定义的变量，外部无法读取，称为“局部变量”（local variable）。对于var命令来说，局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量。
5、函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。
6、函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value），在函数体内修改参数值，不会影响到函数外部。函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference），传入函数的原始值的地址，因此在函数内部修改参数，将会影响到原始值。注意，如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。
五、DOM
1、DOM属性
// 获取或修改元素内容
element.innerHTML
// 改变图像来源
element.src
// 改变元素的样式
element.style.property
// 隐藏元素
element.style.display="none"（block）
2、DOM方法
// 写到HTML文档中
document.write()
// 通过id访问元素
document.getElementById()
document.getElementsByTagName()
document.createElement()
document.createTextNode()
appendChild()
removeChild()
3、DOM事件
// 浏览器已完成页面的加载
onload
onunload
// 用户点击 HTML 元素
onclick
// HTML 元素改变
onchange
// 用户在一个HTML元素上移动鼠标
onmouseover
// 用户从一个HTML元素上移开鼠标
onmouseout
onmousedown
onmouseup
onfocus
网友评论