XunPeng_

JS阶段总结

简介

JavaScript是一种轻量级的编程软件
是互联网上最流行的脚本语言，可用于HTML和web
主要用来向HTML页面添加交互行为

输入

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.getElementById(id) 用来访问某个HTML元素：用id属性标识

文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

命名规范

项目命名：全部采用小写，以下滑线分割
JS文件命名：

变量：必须采用小驼峰命名法
常量：必须全部采用大写
函数：小驼峰命名法
类&构造函数：大驼峰命名法

数据类型

基本数据类型

字符串（String）
数字（Math）
对空（Null）
布尔（Boolean）
未被定义（Undefined）
Symbol

引用数据类型

对象（Object）
数组（Array）
函数（Function）

对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔.
对象也是一个变量，但对象可以包含多个值（多个变量）。
JavaScript对象是变量的容器，键值对通常写法为name:value（对象属性）
对象方法通过添加（）调用

name = person.fullName()；
创建对象方法

methodName : function() {
     
    // 代码 
}

访问对象的方法

objectName.methodName()

函数（Function）

定义

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

声明

function *functionname*()
{
*// 执行代码*
}

操作符*

用算数运算符来计算值
用赋值运算符给变量赋值

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数

带有返回值的函数

将值返回调用它的地方

在使用 return 语句时，函数会停止执行，并返回指定的值。

JavaScript使用Unicode字符集

作用域

定义

可访问变量的集合

对象和函数也是变量

局部变量是在函数内部声明的变量，会在函数运行以后被删除。

*函数参数只在函数内起作用，*是局部变量

全局变量是在函数外声明的变量，会在页面关闭后被删除。如果对象没有声明则为全局变量

你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数

事件

定义

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

事件三大要素

事件源
事件类型
事件处理程序

执行事件步骤

获取事件源
注册事件
添加事件处理程序

typeof, null, 和undefined

typeof操作符

检测变量的数据类型

constructor属性

返回所有JavaScript变量的构造函数

null

只有一个值的特殊类型，表示一个空对象引用

undefined

一个没有设置值的变量
typeof一个没有值的变量会返回undefined
任何变量可以通过设置值为undefined来清空

null和undefined的区别

null和undefined的值相等，类型不同

类型转换

通过**Number（）**转换为数字
通过**String（）**转换为字符串
通过**Boolean（）**转换为布尔值
自动转换类型：当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

正则表达式

定义

由一个字符序列形成的搜索模式

语法

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

JavaScript中使用字符串的方法

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

修饰符可以在全局搜索中不区分大小写

test（）方法用于检测一个字符串是否匹配某个模式。如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec（）方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

JavaScript错误- throw、try和catch

try { ... //异常的抛出 } catch(e) { ... //异常的捕获与处理 } finally { ... //结束处理 }

finall语句

不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

调试工具

**console.log()**在调试窗口上打印JavaScript
设置断点，在每个断点上，都会停止执行JavaScript代码
debugger关键词，停止执行JavaScript，并调试函数。和设置断点效果一样，如果没有调试可用，debugger语句将无法工作

变量提升（hoisting）

JavaScript中，变量先使用后声明，后使用先声明将获得相同的结果

严格模式（strict mode）

use strict指令

通过在脚本或函数的头部添加 ”use strict“; 表达式来声明。

严格模式的限制

不允许使用未声明的变量
不允许删除变量或对象
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 “eval” “arguments” 字符串
禁止this关键字指向全局对象

表单

数据验证

典型的数据验证有：

必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

约束验证

HTML 约束验证基于：

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

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

验证API

约束验证DOM方法

this关键字

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

let和const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

var和let的区别

- 作用域
- var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。
- let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。
let只在 let 命令所在的代码块 {} 内有效。
let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。
- 不能使用 let 关键字来重置 var 关键字声明的变量
- 不能使用 let 关键字来重置 let 关键字声明的变量
- 不能使用 var 关键字来重置 let 关键字声明的变量
- let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的
const关键字和let关键字的相似和区别

const定义常量与使用let 定义的变量相似：
- 二者都是块级作用域
- 都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别：
- const声明的常量必须初始化，而let声明的变量不用
- const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。
const并非真正的常量。使用 const 定义的对象或者数组，其实是可变的。

JSON

用途

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据。

void(0)

该操作符指定要计算一个表达式但是不返回值

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

# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

异步编程

概念

异步与同步是相对概念

同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

Promise

定义

是一个类，目的是更加优雅地书写复杂的异步任务。

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。

函数

函数定义

函数声明

使用关键字function定义函数

函数可以通过声明定义，也可以是一个表达式

分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。

Function() 构造函数

可以通过内置的 JavaScript 函数构造器（Function()）定义。

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

var x = myFunction(4,3);

函数提升

JavaScript默认将当前作用域提升到前面去的行为

函数是对象

JavaScript函数有属性和方法

arguments.length属性返回函数调用过程接受到的参数个数

function myFunction(a, b) { return arguments.length; }

**toString()**方法将函数作为一个字符串返回

箭头函数

箭头函数表达式的语法比普通函数表达式更简洁

(参数1, 参数2, …, 参数N) => {
      函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的，所以需要在使用之前定义。

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

函数参数

函数显性参数(Parameters)与隐形参数(Arguments)

函数显式参数在函数定义时列出

functionName(parameter1,parameter2, parameter3) {

// 要执行的代码……

}

函数隐式参数在函数调用时传递给函数真正的值

默认参数

undefined

arguments对象

JavaScript 函数有个内置的对象 arguments 对象。

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

闭包

私有变量可以用到闭包

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

内嵌函数

在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

HTML DOM

HTML DOM（文档对象模型）

HTML DOM 元素节点
添加和删除节点（HTML 元素）

获取HTML元素

document.getElementById(id)=id
document.getElementsByTagName(‘对象’);
document.getElementsByClassName(‘对象’);
document.querySelector(‘任意’); 指定选择器的第一个对象
**document.querySelectorAll()**返回指定选择器的所有对象

改变CSS

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

对事件做出反应

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

onload和onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange事件

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件

用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

addEventListener()方法

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

向原元素添加事件句柄
向同一个元素中添加多个事件句柄
向Window对象添加事件句柄
传递参数

removeEventListener()方法

移除由addEventListener()方法添加的事件句柄

HTML DOM 元素 (节点)

创建新的 HTML 元素 (节点) - appendChild()与insertBefore()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

*appendChild()*方法，它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

移除已存在的元素removeChild();

要移除一个元素，你需要知道该元素的父元素。

替换已存在的元素 - replaceChild()

JavaScript对象

所有事物都是对象

对象只是一种特殊的数据，对象拥有属性和方法

访问对象的属性

objectName.propertyName

例子

var message="Hello World!";

var x=message.length;

执行得12

访问对象的方法

objectName.methodName()

例子

var message="Hello world!";

var x=message.toUpperCase();

执行得HELLO WORLD!

创建JavaScript对象

使用Object定义并创建对象实例
使用函数来定义对象，然后创建新的对象实例

使用Object

Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

如果给定值是 null 或 undefined，将会创建并返回一个空对象。
如果传进去的是一个基本类型的值，则会构造其包装类型的对象。
如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址。
当以非构造函数形式被调用时，Object 的行为等同于 new Object()。

语法格式

new object([value])

value可以是任何值

大括号里面创建name:value对，然后name:value对之间以逗号，隔开

{ name1 : value1, name2 : value2,...nameN : valueN }

实例

person：{firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造方法

function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }

创建JavaScript对象实例

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

把属性添加到JavaScript对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 person 对象已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

结果得John

把方法添加到JavaScript对象

方法只不过是附加在对象上的函数。

JavaScript不适用类

JavaScript for…in循环

遍历对象的属性

语法

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

for…in 循环中的代码块将针对每个属性执行一次

JavaScript的对象是可变的

JavaScript prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

一个已存在的对象构造器中是不能添加新的属性的，要添加一个新的属性需要在在构造器函数中添加。

prototype继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。

添加属性和方法

使用 prototype 属性就可以给对象的构造函数添加新的属性

例Person.prototype.nationality = "English";

Number 对象

JavaScript数字

JavaScript 数字可以使用也可以不使用小数点来书写
JavaScript 数字可以使用也可以不使用小数点来书写

所有数字都是由浮点型类型

所有 JavaScript 数字均为 64 位

精度

整数（不使用小数点或指数计数法）最多为 15 位

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

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数

如果前缀为 0 和 “x”，则解释为十六进制数

默认情况下，JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法输出16进制、8进制、2进制。

无穷大（Infinity）

当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，

当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以*-Infinity**表示*

NaN - 非数字值

NaN属性是代表非数字值的特殊值

数字可以是数字或者对象

数字可以私有数据进行初始化，就像 x = 123;

字符串（String）对象

JavaScript 字符串

一个字符串可以使用单引号或双引号
使用位置（索引）可以访问字符串中任何的字符
字符串（String）使用长度属性length来计算字符串的长度
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符
replace() 方法在字符串中用某些字符替换另一些字符
字符串大小写转换使用函数 toUpperCase() / toLowerCase()
字符串使用split()函数转为数组

Date（日期）对象

创建日期

Date 对象用于处理日期和时间

有四种方式初始化日期:

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

设置日期

使用针对日期对象的方法，我们可以很容易地对日期进行操作

两个日期比较

if (x>today)
{
    alert("今天是2100年1月14日之前");
}

Array（数组）对象

数组对象的作用是：使用单独的变量名来存储一系列的值

创建一个数组的方法

常规方式：

var myCars=new Array();
myCars[0]="Saab"; myCars[1]="Volvo";
myCars[2]="BMW";

简洁方式：

var myCars=new Array("Saab","Volvo","BMW");

字面:

var myCars=["Saab","Volvo","BMW"];

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素

以下实例可以访问myCars数组的第一个值：

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

在一个数组中你可以有不同的对象

可以在一个数组中包含对象元素、函数、数组

数组方法和属性

使用数组对象预定义属性和方法

var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值

Boolean（布尔）对象

创建 Boolean 对象

var myBoolean=new Boolean();

Math（算数）对象

Math 对象

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

算数方法

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

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

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

document.write(Math.random());

使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数

document.write(Math.floor(Math.random()*11));

RegExp 对象

RegExp：是正则表达式（regular expression）的简写

正则表达式描述了字符的模式对象。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

语法

var patt=new RegExp(pattern,modifiers);

或更简单的方法

var patt=/pattern/modifiers;

模式描述了一个表达式模型。
修饰符(modifiers)描述了检索是否是全局，区分大小写等。

RegExp 修饰符

修饰符用于执行不区分大小写和全文的搜索。

i - 修饰符是用来执行不区分大小写的匹配。

g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）

test()

test()方法搜索字符串指定的值，根据结果并返回真或假

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

JS 浏览器BOM

Window对象

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

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Window 尺寸

确定浏览器窗口的尺寸

其他Window方法

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

Window Screen

window.screen 对象包含有关用户屏幕的信息

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性

Window Location

window.location对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.href 返回当前页面的 URL
**location.assign()**方法加载新的文档

Window History

window.history对象包含浏览器的历史

Window history.back()

**history.back()**方法加载历史列表中的前一个URL

Window history.forward()

**history forward()**方法加载历史列表中的下一个URL

Window Navigator

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

弹窗

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

警告框

语法

window.alert("*sometext*");

确认框

确认框通常用于验证是否接受用户操作

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

语法

window.confirm("*sometext*");

提示框

提示框经常用于提示用户在进入页面前输入某个值

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法

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

换行

弹窗使用反斜杠 + “n”(\n) 来设置换行

alert("Hello\nHow are you?");

计时事件

JavaScript 一个设定的时间间隔之后来执行代码，我们称之为计时事件

setInterval()方法

**setInterval()**间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("*javascript function*",*milliseconds*);

1000毫秒是一秒

实例

setInterval(function(){alert("Hello")},3000);

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码

语法

window.clearInterval(*intervalVariable*)

setTimeout() 方法

语法

myVar= window.setTimeout("*javascript function*", *milliseconds*);

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码

语法

window.clearTimeout(*timeoutVariable*)

Cookie

Cookie 用于存储 web 页面的用户信息

Cookie 以名/值对形式存储，如下所示:

username=John Doe

创建Cookie

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

创建 cookie 如下所示：

document.cookie="username=John Doe";

可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

可以使用以下代码来读取 cookie：

var x = document.cookie;

修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

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

`document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

JavaScript 库

JavaScript库 - jQuery、Prototype、Moo Tools

JavaScript框架（库）

jQuery
Prototype
MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理

测试jQuery

引用jQuery

为了引用某个库，请使用

jQuery 描述

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

测试Prototype

引用Prototype