JavaScript 概述

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

JavaScript 在1995年由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。

JavaScript 的标准是 ECMAScript 。截至 2012 年，所有浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA 国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES2015。

JavaScript 目前是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

简介

JavaScript 是什么

• JavaScript 是脚本语言。
• JavaScript 是一种轻量级的编程语言。
• JavaScript 是可插入到 HTML 页面的编程代码。
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• JavaScript 很容易学习，语法简单，弱语法规则语言。
• JavaScript 区分大小写。

JavaScript 能做什么

• 能够动态生成 HTML 页面。
• 能够对事件进行处理。
• 能够动态改变 HTML 内容。
• 能够动态改变 HTML 样式。
• 能够进行数据校验。

JavaScript 的用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。<script> 标签可以书写到 HTML 的任意位置。相互之间不能嵌套。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript：

<script>
    alert("Hello,JavaScript!");
</script>

JavaScript 变量

JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

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

语法

let 变量名 [= 值];

let 用来声明变量。它的用法类似于 var ，ES6 新增的命令，但是所声明的变量，只在 let 命令所在的代码块内有效。

var 和 let 的区别：

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. let 不允许在相同作用域内，重复声明同一个变量。

{
  let a = 1;
  var b = 1;
}
a // Uncaught ReferenceError: a is not defined
b // 1

变量的命名规范

• 由字母（ A - Za - z )、数字（0-9)、下划线（_)、美元符号（$）组成，如： usrAge ，num01，_ name。
• 严格区分大小写。 var app ；和 var App ；是两个变量。
• 不能以数字开头。18age是错误的。
• 不能是关键字、保留字。例如: var 、 for 、 while
• 变量名必须有意义。
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

JavaScript 数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

JavaScript 包括九种数据类型：

• Undefined；
• Null；
• Boolean；
• Number；
• String；
• Symbol类型；
• Object；
• Array；
• Function。

其中，Undefined 类型只有一个值，即特殊值 undefined。在使用 let|var 声明变量，但未对其加以初始化时，这个变量值就是 undefined。

symbol 是一种基本数据类型 （primitive data type）。Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。

const symbol1 = Symbol();
const symbol2 = Symbol('foo');

运算符

运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。例如：2+3，其操作数是2和3，而运算符则是“+”。运算符大致可以分为4种类型：算术运算符、关系运算符、赋值运算符和逻辑运算符。

赋值运算符

赋值运算符用于给 JavaScript 变量赋值。
运算符例子等同于运算结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0

算术运算符

算术运算符用于变量之间的数学运算。
运算符描述例子x 运算结果y 运算结果+加法x=y+275-减法x=y-235乘法x=y2105/除法x=y/22.55%取模（余数）x=y%215++自增x=++y66x=y++56--自减x=--y44x=y--54

关系运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。
运算符描述比较返回值==等于x==8falsex==5true===绝对等于（值和类型均相等）x==="5"falsex===5true!= 不等于x!=8true!== 不绝对等于（值和类型有一个不相等，或两个都不相等）x!=="5"truex!==5false> 大于x>8false< 小于x<8true*>= 大于或等于x>=8false*<= 小于或等于x<=8true

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true

函数

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

函数语法

function 函数名(形式参数列表){
    // 执行代码
    [return 返回结果;]
}

• JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
• 函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
• 圆括号可包括由逗号分隔的参数：(参数 1, 参数 2, ...)。
• 由函数执行的代码被放置在花括号中：{}。
• 函数可以有返回结果，如果有返回结果，必须在逻辑体的最后一行。

函数调用

函数中的代码将在其他代码调用该函数时执行：

• 通过事件调用方式，当某个事件发生时。
• 其他函数的调用，JavaScript 代码调用方式。
• 递归调用方式，自身调用。

局部变量和全局变量

• 局部 JavaScript 变量 - 在 JavaScript 函数内部声明的变量是局部变量，所以只能在函数内部访问它。该变量的作用域是局部的。- 您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。- 只要函数运行完毕，局部变量就会被删除。
• 全局 JavaScript 变量 - 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。- 全局变量会在页面关闭后被删除。

匿名函数

匿名函数就是没有名字的函数，有时候也称为《 拉姆达函数》。

function(形式参数列表) {
 
 // 函数体
 
}

上面函数就是匿名函数，但是这个函数却无法调用，因为没有指向这个函数的指针（名称），但是可以将这个函数作为参数传入另外一个函数，或者从一个函数中返回另一个函数时就可以使用这种形式来定义匿名函数。

function funA(){
    let num = function(){
        return 1;
    }
}

事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

往往我们可以通过“事件”来触发我们书写的函数。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

• HTML 页面完成加载。
• HTML input 字段改变时。
• HTML 按钮被点击。
• HTML 鼠标移动到某个图片。

通常情况下，当事件发生时，你可以做哪些事情，这些事情基本都是我们书写的函数。

事件的书写

事件中直接书写代码

<element 事件="alert('当事件发生时弹出一个框')">...</element>

注意：直接书写通常是几行代码。比较常见的是通过函数或 JavaScript 事件方式来调用。

事件中调用函数

<element 事件="funA()">...</element>

JavaScript 事件方式

window.事件= funA;

注意：funA 事件也可以书写成匿名事件方式。

常见的事件

下面是一些常见的HTML事件的列表:
事件描述onblur****当元素失去焦点时发生此事件。onfocus在元素获得焦点时发生此事件。onchangeHTML 元素改变。onclick****用户点击 HTML 元素。ondblclick当用户双击元素时发生此事件。onmouseover鼠标指针移动到指定的元素上时发生。onmouseout用户从一个 HTML 元素上移开鼠标时发生。onkeydown用户按下键盘按键。onload浏览器已完成页面的加载。oninput当元素获得用户输入时，发生此事件。onselect用户选择文本后（对于<input>和<textarea>）发生此事件。onsubmit在提交表单时发生此事件。

事件的作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。
• 等等 ...

分支和循环

JavaScript 的分支和循环同 Java 的比较相似。

条件语句

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

在 JavaScript 中，我们可使用以下条件语句：

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

循环语句

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

和 Java 一样，在 JavaScript 中也有如下循环语句：

• while 循环
• for 循环
• do/while 循环

在循环中也可以书写如下两个关键字来结束循环：

• continue 关键字
• break 关键字

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。字符串可以存储一系列字符，如 "Guan Wei"。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号。

let str = "Guan Wei";

字符串的定义

字符串的定义有如下三种方式：

• 双引号方式
• 单引号方式
• new 对象方式

let str1 = "Guan Wei";
let str2 = 'Guan Wei';
let str3 = new String('Guan Wei');

注意：一般我们推荐使用第二种方式。

字符串也可以看成是字符数组，你可以使用索引位置来访问字符串中的每个字符。
例如：
let str = 'Guan Wei';
let ch = str[2];
字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推，我们这里会获取到 a。

特殊字符

由于字符串必须由引号包围，JavaScript 会误解这段字符串：

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

该字符串将被切为 "中国是瓷器的故乡，因此 china 与"。

避免此问题的解决方法是，使用 \ 转义字符。反斜杠转义字符把特殊字符转换为字符串字符。

常见的转义字符有：
代码输出'单引号"双引号\反斜杠\n换行\r回车\ttab(制表符)\b退格符\f换页符
注意：最后五个个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。

字符串的属性和方法

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

字符串和数字

在 JavaScript 中字符串和数字之间不能通用。

function funA(){
    let a = '10';
    let b = 1;
    // 结果是 101 
    console.log(a + b);
}

从这里可以看到， a + b 是在做拼接，而不是求和。那么这里，我们就会涉及到一个问题，字符串和数字如何类型转换：

字符串转换数字：

let a = '101';
let a1 = parseInt(a,10);
let a2 = parseFloat(a);

数字转换字符串：

let a = 109;
let a1 = a + '';

JavaScript 数组

JavaScript 数组用于在单一变量中存储多个值。

什么是数组

数组是一种特殊的变量，它能够一次存放一个以上的值，并且可以通过引用索引号来访问这些值。

数组的定义

数组的定义主要有两种写法：

• “[]”创建方式

let array = [数组元素,数组元素,...,数组元素];

• 通过“new”关键字创建方式

let array = new Array(数组元素,数组元素,...,数组元素);

注意：出于简洁、可读性和执行速度的考虑，请使用第一种方法。

数组的操作

我们通过引用索引号（下标号）来引用某个数组元素。

let array = [21,22,23,24];
array[1] = 29;
let a = array[3];

数组的属性

属性描述constructor返回创建数组对象的原型函数。length****设置或返回数组元素的个数。prototype允许你向数组对象添加属性或方法。

数组的常用方法

方法描述concat()连接两个或更多的数组，并返回结果。includes()判断一个数组是否包含一个指定的值。indexOf()搜索数组中的元素，并返回它所在的位置。isArray()判断对象是否为数组。lastIndexOf()搜索数组中的元素，并返回它最后出现的位置。pop()删除数组的最后一个元素并返回删除的元素。push()向数组的末尾添加一个或更多元素，并返回新的长度。reverse()反转数组的元素顺序。shift()删除并返回数组的第一个元素。slice()选取数组的一部分，并返回一个新数组。sort()对数组的元素进行排序。splice()从数组中添加或删除元素。toString()把数组转换为字符串，并返回结果。unshift()向数组的开头添加一个或更多元素，并返回新的长度。valueOf()返回数组对象的原始值。Array.of()将一组值转换为数组。

let array = ['aa','bb','cc','dd','ee','ff'];
// 数组中添加元素
array[6] = 'gg';
array.push('hh');
array.unshift('ii');
// 删除数组中的元素
array.splice(3,1); // 从第几个开始删除，删除几个
array.pop();
array.shift();
// 数组排序
array.sort();

数组的遍历

JavaScript 中遍历数组的方法：

• 使用 for 循环语句。
• 使用 forEach() 方法调用回调函数。
• 使用 map() 方法调用回调函数。
• 使用“for..in”循环语句。
• 使用“for…of”循环语句。

使用 for 循环语句

let array = ['aa','bb','cc','dd','ee','ff'];
for (let i = 0; i < array.length; i++) {
    console.log(array [i]); 
}

使用 forEach() 方法调用回调函数

<script>
    let array = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff'];
    window.onload = function() {
        /*
        forEach() 这是数组对象的一个方法；其接受一个回调函数为参数。
        回调函数中有三个参数：
            item：数组元素(必选)
            index：数组元素索引值(可选)
            array：数组本身(可选)
        */
        array.forEach((item, index, array) => {
            console.log(item);
            console.log(index);
            console.log(array);
        })
    }
</script>

使用 map() 方法调用回调函数

<script>
    let array = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff'];
    window.onload = function() {
        /*
        map() 和 foreach() 作用一样。
        */
        array.map((item, index, array) => {
            console.log(item);
            console.log(index);
            console.log(array);
        })
    }
</script>

使用“for..in”循环语句

for…in 循环可用于循环对象和数组。推荐用于循环对象，也可以用来遍历 json。

<script>
    let array = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff'];
    window.onload = function() {
        for (i in array) {
            console.log('位置：' + i + ',元素：' + array[i]);
        }
    }
</script>

使用“for…of”循环语句

可循环数组和对象，推荐用于遍历数组。

<script>
    let array = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff'];
    window.onload = function() {
        for (e of array) {
            console.log('元素：' + e);
        }
    }
</script>

数组的排序

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。

注意： 当数字是按字母顺序排列时"40"将排在"5"前面。因为“40”中的"4"小于“5”。使用数字排序，你必须通过一个函数作为参数来调用。

array.sort((a, b) => {
    return a - b;
});

DOM 对象

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点：

• 文档是一个文档节点。
• 所有的 HTML 元素都是元素节点。
• 所有 HTML 属性都是属性节点。
• 文本插入到 HTML 元素是文本节点。
• 注释是注释节点。
• 回车换行等都是空节点。

元素节点

元素节点是 DOM 对象中最常用的一种节点。下边我们主要通过三种方式获取 DOM 元素节点：

1. 通过 ID 获取元素节点。
2. 通过 class 获取一组元素节点。
3. 通过 element 获取一组元素节点。

1. 通过 ID 获取元素节点：

let obj = document.getElementById('s1');

2. 通过 class 获取一组元素节点：

let classArray = document.getElementsByClassName('c1');

3. 通过 element 获取一组元素节点：

let spanArray = document.getElementsByTagName('span');

元素节点的常见操作

对于元素节点而言，主要有五种常见操作：

1. 元素节点的文本内容操作
2. 元素节点的子元素操作
3. 元素节点的属性操作
4. 元素节点的样式操作
5. 元素节点的表单值操作

1. 元素节点的文本内容操作：

let obj = document.getElementById('s1');
obj.innerHTML = '<b>设置编号为s1的标签元素内容</b>';
let content = obj.innerHTML;

2. 元素节点的子元素操作：

let obj = document.getElementById('s1');
obj.innerText= '<b>设置编号为s1的标签文本内容</b>';
let content = obj.innerText;

3. 元素节点的属性操作：

let obj = document.getElementById('a1');
obj.href = 'https://blog.csdn.net/Dailyblue';
let yourHref = obj.href;

4. 元素节点的样式操作：

/*
    element.style.css = '样式内容';
    let 样式内容 = element.style.css;
*/
let obj = document.getElementById('b1');
obj.style.color = 'red';
let yourColor = obj.style.color;

5. 元素节点的表单值操作：

let obj = document.getElementById('content');
obj.value = '文本框的值';
let str = obj.value ;

注意：value 其实就是第三种属性的写法，只不过对 value 属性操作比较多，单独拿出来讲解。只有 form 表单相关标签有 value 属性。

DOM 节点

• 获取父节点
• 获取子节点
• 获取相邻节点
• 添加子节点
• 删除子节点
• 添加节点
• 添加父节点
• 设置新节点的事件
• 设置新节点的文本内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>关为带你学习JavaScript的DOM操作</title>
    </head>
    <body>
        <div id='d1'>
            <p id="p1">111</p>
            <p id="p2">222</p>
            <p id="p3">333</p>
            <p id="p4">444</p>
        </div>
    </body>
</html>
<script>
    window.onload = function() {
        let p2 = document.getElementById('p2');
        // 获取到p2的父节点（d2元素）
        let obj = p2.parentElement;
        obj.style.backgroundColor = 'grey';
        // 获取到obj的所有子节点
        let pArray1 = obj.children;
        for(p of pArray1){
            p.style.color = 'red';
        }
        // 获取到下一个节点
        let p3 = p2.nextElementSibling;
        p3.style.color = 'blue';
        // 获取到上一个节点
        let p1 = p2.previousElementSibling;
        p1.style.color = 'green';
        // 创建一个新元素节点
        let p5 = document.createElement('p');
        p5.setAttribute('id','p5'); // p5.id = 'p5';
        p5.innerHTML = '555';
        // 将p5添加到div中
        obj.appendChild(p5);
        // 删除Obj的p3子元素
        obj.removeChild(p3);
        // 给p5添加一个事件
        p5.onclick = function(){
            console.log('有人点击了p5标签');
        }
    }
</script>

JavaScript 定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定时任务。

• setTimeout()：指定时间后执行一段代码（延迟执行）
• setInterval()：每隔一段时间执行一段代码（间隔执行）

setTimeout() 函数

// 创建定时器
let 定时器名 = setTimeout(()=>{
    回调函数;
},间隔时间);
// 取消定时器
clearTimeout(定时器名);

setInterval() 函数

// 创建定时器
let 定时器名 = setInterval(()=>{
    回调函数;
},间隔时间);
// 取消定时器
clearInterval(定时器名);

JavaScript 浏览器对象

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

主要有如下操作：

• Window 对象
• Navigator 对象
• Screen 对象
• History 对象
• Location 对象
• 存储对象

window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象的完整写法：

window.document.getElementById("p1");

window 的弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、输入框。

警告框：

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

window.alert("消息内容");

确认框：

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

let flag = window.confirm("消息内容");

输入框：

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

let message = window.prompt("标题内容","默认值");

Navigator 对象

Navigator 对象包含有关浏览器的信息。

Navigator 对象属性：
属性说明appCodeName返回浏览器的代码名appName返回浏览器的名称appVersion返回浏览器的平台和版本信息cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值platform返回运行浏览器的操作系统平台userAgent返回由客户机发送服务器的user-agent 头部的值geolocation返回浏览器的地理位置信息language返回浏览器使用的语言onLine返回浏览器是否在线，在线返回 ture，否则返回 falseproduct返回浏览器使用的引擎（产品）
Navigator 对象方法：
方法描述javaEnabled()指定是否在浏览器中启用JavataintEnabled()规定浏览器是否启用数据污点(data tainting)

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

Screen 对象属性：
属性说明availHeight返回屏幕的高度（不包括Windows任务栏）availWidth返回屏幕的宽度（不包括Windows任务栏）colorDepth返回目标设备或缓冲器上的调色板的比特深度height返回屏幕的总高度pixelDepth返回屏幕的颜色分辨率（每象素的位数）width返回屏幕的总宽度

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象属性：
属性说明length返回历史列表中的网址数
History 对象方法：
方法说明back()加载 history 列表中的前一个 URLforward()加载 history 列表中的下一个 URLgo()加载 history 列表中的某个具体页面

Location 对象

Location 对象包含有关当前 URL 的信息。Location 对象是 window 对象的一部分，可通过 window.location.属性名 格式的相关属性对其进行访问。

Location 对象属性：
属性描述hash****返回一个URL的锚部分host返回一个URL的主机名和端口hostname返回URL的主机名href****返回完整的URLpathname返回的URL路径名。port返回一个URL服务器使用的端口号protocol返回一个URL协议search返回一个URL的查询部分
Location 对象方法：
方法说明assign()载入一个新的文档reload()重新载入当前文档replace()用新的文档替换当前文档

存储对象

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
  方法描述getItem(keyname)返回指定键的值setItem(keyname, value)添加键和值，如果对应的值存在，则更新该键对应的值。removeItem(keyname)移除键clear()清除存储对象中所有的键

  JSON 字符串

JSON: JavaScript Object Notation（JavaScript 对象标记法）。它 是一种存储和交换数据的语法。是通过 JavaScript 对象标记法书写的文本。

JSON 概述

JSON 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

JSON 采用完全独立于语言的文本格式，但是也使用了类似于 C 语言家族的习惯（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。 这些特性使 JSON 成为理想的数据交换语言。

JSON 的作用

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

JSON 的定义

在标准的 json 格式中，json 对象由在括号括起来，对象中的属性也就是 json 的 key 是一个字符串，所以一定要使用双引号引起来。每组 key 之间使用逗号进行分隔。

语法规则：

• 数组（Array）用方括号(“[]”)表示。
• 对象（0bject）用大括号(“{}”)表示。
• 名称/值对(name/value）组合成数组和对象。
• 名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
• 并列的数据之间用逗号(“,”）分隔。

// JSON的数组格式
let json1 = ['张三','李四','王五','关为'];
// JSON的对象格式
let json2 = {
    'id':'1',
    'name':'张三',
    'age':'19'
};
// JSON的混合格式
let json3 = [
    {
        'id':'1',
        'name':'张三',
        'age':'19'
    },
    {
        'id':'2',
        'name':'李四',
        'age':'23'
    },
    {
        'id':'3',
        'name':'王五',
        'age':'20'
    }
];

JSON 字符串对象的获取

json 字符串对象，顾名思义，就知道它是一个对象。里面的 key 就是对象的属性。我们要访问一个对象的属性，只需要使 用【对象名.属性名】的方式访问即可。

let json2 = {
    'id':'1',
    'name':'张三',
    'age':'19'
};

let id = json2.id;
let name = json2.name;
let age = json2.age;

JSON 的常见方法

JSON 对象和字符串对象的互转：

• JSON.stringify( json )：此方法可以把一个 json 对象转换成为 json 字符串。
• JSON.parse( jsonString )：此方法可以把一个 json 字符串转换成为 json 对。

<script type="text/javascript">
    // 一个 json 对象
    let json2 = {
        'id':'1',
        'name':'张三',
        'age':'19'
    };
    // 把 json 对象转换成为字符串对象
    var objStr = JSON.stringify(json2);
    console.log(objStr);
    // 把 json 对象的字符串，转换成为 json 对象
    var json3 = JSON.parse(objStr);
    console.log(json3);
</script>