[JavaScript知识库]Javascript学习-自理笔记

基础

显示数据

window.alert()：页面弹窗
document.write()：写入HTML内容，在文档加载完成后执行会覆盖页面
innerHTML()：获取或修改HTML元素里的内容
console.log()：浏览器控制台

语法

JavaScript 使用 Unicode 字符集。

语句

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

分号

分号用来分割javascripy语句，且可在一行写入多条语句
如果不在语句末尾写分号，浏览器在解析时会自动加上

代码块

一并的执行语句序列，以 { 开始，以 } 结束

语句标识符

javasript语句通常以一个语句标识符开始，语句标识符都为保留关键字
try:实现错误处理
catch:在try代码块执行出错时执行
return:退出函数并返回值
…

对代码进行折行

使用反斜杠
例：

console.log("这是\
换行")  //这是换行 

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。

数据类型

基本：数值，布尔，字符串，null,undefined,symbol
引用：对象，数组，函数
其中，symbol中每个数据都是唯一的

声明变量类型

使用new关键字

例：

var str= new String

对象

对象是变量的容器，变量是数据的容器
例：

var  Person={
   name:'jack',
   fullname:function(){}
 }
 //fullname()则是调用函数
 //fullname则会返回函数定义

向未声明的 JavaScript 变量分配值

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。
例：

 var var1=1;
 var2=2;
 console.log(this.var1)
 console.log(window.var2)
 delete var1  //false
 delete var2  //true

作用域

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

局部作用域

变量只能在函数内部访问。局部变量在函数执行时创建，在函数执行完成时销毁
例：

//不可访问a
funtion demo(){
  var a=1;  
  //可访问a
}

全局作用域

变量在函数外声明或在函数内部无声明直接定义
例：

//可访问a
//相当于有 var a；
function demo(){
  a=2; //因为有变量提升
}

var a=2;
function demo(){
  //可访问a 
}

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。

例：

for (var i = 0; i < 10; i++) {
    // some code
}
return i; //10

块级作用域

let关键字可以实现块级作用域
let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问
例：

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

HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
在 HTML 中, 全局作用域是针对 window 对象。

例：

//使用 var 关键字声明的全局作用域变量属于 window 对象
var carName = "Volvo";// 可以使用 window.carName 访问变量

//使用 let 关键字声明的全局作用域变量不属于 window 对象
let carName = "Volvo";// 不能使用 window.carName 访问变量

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：
例：

var x = 2;// x 为 2
var x = 3;// 现在 x 为 3

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量:
例：

var x = 2;       // 合法
let x = 3;       // 不合法
{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

在相同的作用域或块级作用域中，不能使用 let关键字来重置 let 关键字声明的变量:
例：

let x = 2;       // 合法
let x = 3;       // 不合法
{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量:
例：

let x = 2;       // 合法
var x = 3;       // 不合法
{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

let x = 2;       // 合法
{
    let x = 3;   // 合法
}
{
    let x = 4;   // 合法
}

变量提升

var定义的变量可以先使用后声明，而let关键字声明的变量不可以

const

const 关键字只有在不同作用域，或不同块级作用域中是可以重新声明赋值的
const关键字定义的常量无变量提升

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量

相似之处：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。（let只是不能重新声明而可以重新赋值）

const并非真正的常量，它定义了一个常量引用一个值。用 const 定义的对象或者数组，其实是可变的。但是不能对常量对象/数组重新赋值，那就指向另外一个对象/数组了。
例：

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

注：‘锁死’常量可以使用Object.freeze()方法来 冻结变量
例：
const obj = {
name:“1024kb”
}
Object.freeze(obj) // 此时对象obj被冻结，返回被冻结的对象
被冻结后的对象不仅仅是不能修改值，同时也：
不能向这个对象添加新的属性
不能修改其已有属性的值
不能删除已有属性
不能修改该对象已有属性的可枚举性、可配置性、可写性

字符串

可使用索引位置来访问字符串中的每个字符，从0开始
可添加转义符来使用引号
例：

var str="hello,\"world 1\" "

字符串可以是对象

使用new关键字

var y = new String("John");
typeof y //object

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

字符串属性和方法

属性

constructor:返回创建字符串属性的函数
length:返回字符串的长度
prototype:可向对象添加属性和方法

方法

常用：
indexOf()： 返回字符串中检索指定字符第一次出现的位置（实现模糊搜索）
replace()：替换与正则表达式匹配的子串
slice()：提取字符串的片断，并在新的字符串中返回被提取的部分
split()：把字符串分割为子字符串数组
substr()：从起始索引号提取字符串中指定数目的字符
toString()：返回字符串对象值
trim()：移除字符串首尾空白
valueOf()：返回某个字符串对象的原始值

循环

forin:遍历对象的属性
例：

var demo={name:'jack',age:28}
for (x in demo){
 console.log(x); // 'name' 'age'
}

break和continue

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签label引用，break可以跳出任意的代码块

默认标签

当 break 和 continue 同时用于循环时，没有加标签，此时默认标签为当前"循环"的代码块。
当 break 用于 switch 时，默认标签为当前的 switch 代码块

有名标签

例：

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

当有多层循环时，可用break控制
例：

outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

typeof

typeof操作符

查看变量类型

例：

 typeof new Date();      //object
 typeof NaN;             //number
 typeof function () {};  // 返回 function
 typeof null;            //object
 typeof undefined;       //  undefined

注：
NaN的类型是number
Date的类型是object

constructor 属性

返回变量的构造函数
例：

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

使用constructor属性查看其类型
例：

var arr=[1,2,3];
function isArray(arr){
return arr.constructor.toString().indexOf("Array") > (-1);
}
console.log(isArray(arr));  // true

转为字符串

String(x)或x.toString()

其中数字转为字符串还有其他方法：

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

日期转为字符串的更多方法：

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(x)、parseInt()、parseFloat()

一元运算符

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

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

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

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

自动转换类型

JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
例：

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

自动转换为字符串

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

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

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

正则表达式

语法

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

使用字符串方法

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

search方法使用正则表达式

例：

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i); //i 不区分大小写
// n为6 从0开始计

search方法使用字符串

使用字符串作为参数，而字符串会被转换为正则表达式
例：

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

replace方法使用正则表达式

例：

var str = "Visit Runoob!"; 
var n = str.replace('/runoob/i','myboo');
//将Runoob替换为myboo

replace使用字符串

例：

var str = "Visit Runoob!"; 
var txt = str.replace("Microsoft","Runoob");

正则表达式修饰符

i:执行对大小写不敏感的匹配
g:查找全局匹配
m：执行多行匹配

正则表达式模式

方括号，圆括号，元字符，量词
元字符：

\s ：查找空白字符
\b ：匹配单词边界
\uxxxx ：查找以十六进制数 xxxx 规定的 Unicode 字符

使用Regexp对象

使用test()

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

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

使用exec()

exec() 方法用于检索字符串中的正则表达式的匹配
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
例：

var patt1=new RegExp("e"); //或者 var patt1=/e/;
patt.test("The best things in life are free!");
//['e']

抛出异常

throw语句允许创建自定义错误
与try 、catch组合使用能够控制程序流，并生成自定义的错误信息

语法： try exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。

在try中throw异常，然后在catch中会捕获到此异常
例：

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + "."; //err为“值是空的”等
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

初始化不会提升

只有声明的变量提升，初始化的不会

//例1
var x=11;
var y=28;
console.log('x为：'+x，'y为：'+y)；//x为：11，y为：28
//例2
var x=11;
console.log('x为：'+x，'y为：'+y)；//x为：11，y为：undefined
var y=28;//var y声明提升了，但是y=28初始化没有提升，所以y是一个未定义的变量

严格模式 use strict

通过在文件头部或者函数内部添加’user strict’表达式
“use strict” 指令只允许出现在脚本或函数的开头

使用严格模式

消除代码运行的一些不安全之处，保证代码运行的安全
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

严格模式的限制

不能使用未声明的变量
不能删除变量或对象
不能删除函数
不允许变量重名
不允许使用八进制
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 “eval” 字符串
变量名不能使用 “arguments” 字符串
不允许使用一下语句，例：with (Math){x = cos(2)};
在作用域 eval() 创建的变量不能被调用
禁止this关键字指向全局对象
例：function x(){ “use strict”; return !this;) //this为undefined true

补充：

eval()函数接收一个字符串作为参数，会将该字符串当作javascript代码进行执行
t它不会创建一个新的作用域，它工作在全局作用域下，而不是局部作用域
例：console.log(eval(‘2+2’)) //4

保留关键字

严格模式新增关键字：

implements
interface
let
package
private
protected
public
static
yield

表单

Javascript表单验证

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

HTML约束验证

约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

约束验证 HTML 输入属性

disabled: 规定输入的元素不可用
max: 规定输入元素的最大值
min: 规定输入元素的最小值
pattern: 规定输入元素值的模式
required: 规定输入元素字段是必需的
type: 规定输入元素的类型

约束验证 CSS 伪类选择器

:disabled: 选取属性为 “disabled” 属性的 input 元素
:invalid: 选取无效的 input 元素
:optional: 选择没有"optional"属性的 input 元素
:required: 选择有"required"属性的 input 元素
:valid: 选取有效值的 input 元素

Javascript验证API

约束验证 DOM 方法

checkValidity() ：如果 input 元素中的数据是合法的返回 true，否则返回 false
setCustomValidity()：设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity(’’)
setCustomValidity(null)
setCustomValidity(undefined)

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>
</body>
</html>

约束验证 DOM 属性

validity ：布尔属性值，返回 input 输入值是否合法
validationMessage：浏览器错误提示信息
willValidate：指定 input 是否需要验证

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性：

customError：设置为 true, 如果设置了自定义的 validity 信息
patternMismatch：设置为 true,如果元素的值不匹配它的模式属性
rangeOverflow： 设置为 true, 如果元素的值大于设置的最大值
rangeUnderflow：设置为 true, 如果元素的值小于它的最小值
stepMismatch：设置为 true,如果元素的值不是按照规定的 step 属性设
tooLong：设置为 true, 如果元素的值超过了 maxLength 属性设置的长度
typeMismatch：设置为 true, 如果元素的值不是预期相匹配的类型
valueMissing：设置为 true，如果元素(required 属性) 没有值
valid ：设置为 true，如果元素的值是合法的

例：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

this关键字

单独使用

this指向全局对象
在浏览器中，this则是window

严格模式下(user strict)，this也指向全局

在对象方法中

this指向调用该方法的对象

let obj= new Object();
function demo2(){
  return this;
}
console.log(obj.demo2()); //obj

在函数中

函数所属者默认为this指向
例：

function demo2(){
   return this;  //window
}

严格模式下,函数默认无绑定，this为undefined

在事件中

在HTML中，this指向接受事件的HTML元素

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

显式函数绑定

call和apply，本质就是改变this指向
例：

 var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // this指向person2 ,返回 "John Doe"

JSON

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

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。

语法规则

数据为 键/值 对
数据由逗号分隔
大括号保存对象
方括号保存数组

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

void

href="#"与href="javascript:void(0)"的区别

#包含了一个位置信息，默认的锚是#top 也就是网页的上端
javascript:void(0), 仅仅表示一个死链接

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id

代码规范

变量名

使用驼峰法

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格

代码缩进

通常使用 4 个空格符号来缩进代码块

不推荐使用TAB键来缩进，因为不同编辑器的TAB键解析不一样

语句规则

一条语句通常以分号作为结束符；
将左花括号放在第一行的结尾；
左花括号前添加一空格；
将右花括号独立放在一行；
不要以分号结束一个复杂的声明；

对象规则

将左花括号与类名放在同一行；
冒号与属性值间有个空格；
字符串使用双引号，数字不需要；
最后一个属性-值对后面不要添加逗号；
将右花括号独立放在一行，并以分号作为结束符号；
短的对象代码可直接携写成一行；

每行代码字符小于80

如果一个javascript语句超过了80，建议在运算符或逗号后换行

命名规则

变量名和函数名用小驼峰；
全局变量用大写；
常量用大写；
HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀；
CSS 使用 - 来连接属性名 (font-size)；
HTML 与 JavaScript 尽量使用相同的命名规则；
大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问；
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问；

变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突
建议统一使用小写的文件名

函数

函数定义

函数声明

分号是用来分隔可执行javascript语句，函数声明不是可执行语句，所以不用分号结束

函数提升

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的行为
函数可以在声明之前调用

函数参数

函数显式参数：在函数定义时列出。
函数隐式参数：在函数调用时传递给函数真正的值。
ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作

arguments 对象

argument 对象包含了函数调用的参数数组

闭包

在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
闭包的嵌套的内部函数或闭包是包含被引用变量（函数）的对象

产生条件:
函数嵌套
内部函数引用了外部函数的变量（函数）

例：
下列例子中add5和add10都是闭包

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

HTML DOM

HTML

改变HTML属性

document.getElementById(id).attribute=新属性值

CSS

改变HTML样式

document.getElementById(id).style.property=新样式

EventListener

addEventListener() 方法

向指定元素添加事件句柄
添加的事件句柄不会覆盖已存在的事件句柄
可向一个元素添加多个事件句柄
可向同个元素添加多个同类型的事件句柄
可向任何 DOM 对象添加事件监听
可以使用 removeEventListener() 方法来移除事件的监听

注： 绑定的匿名函数不可以使用removeEventListener()来移除

语法

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获，该参数可选，默认为false冒泡，true为捕获

注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

向同个元素添加多个事件句柄

例：

//点击时按照顺序执行绑定的相应函数
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组

注：
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join()

NodeList 对象

NodeList 对象是一个从文档中获取的节点列表 (集合)
所有浏览器的 childNodes 属性返回的是 NodeList 对象，大部分浏览器的 querySelectorAll() 返回 NodeList 对象
NodeList中的元素通过索引（以0开始）访问

HTMLCollection 与 NodeList 的区别：

HTMLCollection 是 HTML 元素的集合
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取
只有 NodeList 对象有包含属性节点和文本节点。

进阶

Javascript对象

所有事物都都是对象
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

new 和不 new的区别：

如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。
如果不 new的话函数内的 this 指向的是 window。

Number对象

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型

精度

整数（不使用小数点或指数计数法）最多为 15 位
小数的最大位数是 17，但是浮点运算并不总是 100% 准确

八进制和十六进制

默认情况下，JavaScript 数字为十进制显示。
但是可以使用 toString() 方法 输出16进制、8进制、2进制。
例：

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

属性

Number.MAX_VALUE ：最大值
Number.MIN_VALUE： 最小值
Number.NaN： 非数字
Number.NEGATIVE_INFINITY： 负无穷，在溢出时返回
Number.POSITIVE_INFINITY ：正无穷，在溢出时返回
Number.EPSILON： 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
Number.MIN_SAFE_INTEGER：最小安全整数。
Number.MAX_SAFE_INTEGER： 最大安全整数。

数字方法

Number.parseFloat()：将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。
Number.parseInt()：将字符串转换成整型数字，和全局方法 parseInt() 作用一致。
Number.isFinite() ：判断传递的参数是否为有限数字。
Number.isInteger()：判断传递的参数是否为整数。
Number.isNaN()：判断传递的参数是否为 isNaN()。
Number.isSafeInteger()：判断传递的参数是否为安全整数。

数字类型原型上的一些方法

toExponential()：返回一个数字的指数形式的字符串，如：1.23e+2
toFixed()：返回指定小数位数的表示形式。

var a=123;
b=a.toFixed(2); // b="123.00"

toPrecision()：返回一个指定精度的数字。如下例子中，a=123 中，3会由于精度限制消失:

var a=123;
b=a.toPrecision(2); // b="1.2e+2"

Boolean对象

如果布尔对象无初始值或者其值为:0，-0，null，""，false，undefined，NaN。那么为false

Math对象

Math（算数）对象的作用是：执行常见的算数任务

使用 Math 的属性/方法的语法

例：

var x=Math.PI;
var y=Math.sqrt(16);

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

Math 对象的 round 方法对一个数进行四舍五入:

document.write(Math.round(4.7));//5

Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数:

 document.write(Math.random());//0.8994260745361127

浏览器BOM

Window

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
全局变量是 window 对象的属性
全局函数是 window 对象的方法

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸：

①
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth -浏览器窗口的内部宽度(包括滚动条)
②
document.documentElement.clientHeight
document.documentElement.clientWidth
③
document.body.clientHeight
document.body.clientWidth

其他方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

属性

screen.availWidth 属性：返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
screen.availHeight 属性：返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏

Window Location

属性

location.hostname ：返回 web 主机的域名
location.pathname： 返回当前页面的路径和文件名
location.port ：返回 web 主机的端口 （80 或 443）
location.protocol ：返回所使用的 web 协议（http: 或 https:）
location.href ：返回当前页面的 URL

方法

location.assign() ：加载新的文档
location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

Window History

方法

history.back() 方法加载历史列表中的前一个 URL（与浏览器中后退按钮的一样）
history forward() 方法加载历史列表中的下一个 URL（与浏览器中前进按钮一样）
history.go() 这个方法来实现向前，后退的功能
例：

 history.go(1) //前进
 history.go(-1)//后退
 histoy.go(0)//刷新当前页面

Window Navigator

属性

navigator.appCodeName ：浏览器代号
navigator.appName：浏览器名称
navigator.appVersion ：浏览器版本
navigator.cookieEnabled ：启用Cookies
navigator.platform ：硬件平台
navigator.userAgent ：用户代理
navigator.language ：用户代理语言

注：

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本
这是因为：
navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误 浏览器无法报告晚于浏览器发布的新操作系统

弹窗

JavaScript 中创建三种消息框：警告框、确认框、提示框

警告框

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作

window.alert("sometext");

确认框

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。

window.confirm("sometext");

提示框

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null

window.prompt("sometext","defaultvalue");

换行

弹窗使用反斜杠+n(\n)来换行

Cookie

Cookie 用于存储 web 页面的用户信息
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息

创建Cookie

使用 document.cookie 属性来创建 、读取、及删除 cookie

document.cookie="username=John Doe";

默认情况下，cookie 在浏览器关闭时删除，cookie 属于当前页面。

读取 Cookie

var x = document.cookie;

注：

document.cookie 将以字符串的方式返回所有的 cookie
类型格式： cookie1=value;cookie2=value; cookie3=value;

修改Cookie

修改 cookie 类似于创建 cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//旧的将被覆盖

删除Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，删除时不必指定 cookie 的值。