Web | JavaScript学习笔记

JavaScript 是一种通用的网络脚本语言，常用来为网页改进设计、验证表单、添加动态功能等，实现用户交互。
JavaScript 是一门轻量级，解释型，基于原型，面向对象，弱类型的网络脚本语言。

解释型：无需编译，在程序运行中逐行进行解释执行。
弱类型：对使用的数据类型不严格要求。
面向对象：JS 基本对象，DOM 对象，BOM 对象。
跨平台：不依赖于操作系统，仅需要浏览器的支持。

1. JS基础

1.1 JS使用方式

1.行内js：

<input type="button" value="js" onclick="javascript:alert('hello')" />

2.内部js：

<script>
	js代码
</script>

3.外部js：外部js文件

4.引入外部js文件：

<!--引入外部js-->
<script type="text/javascript" src="js/index.js"></script>

1.2 JS注释

1.单行注释：

// 单行注释

2.多行注释：

/*
 多行注释
 */

1.3 JS输出语句

alert();           //弹出框输出
console.log();     //在console显示
document.write();  //写入HTML文件中

1.4 JS标识符

JS标识符命名规则：
①见名知意
②驼峰命名法：首个单词全小写，之后的单词首字母大写。
③abc123_$
④不能以数字开头
⑤不能使用关键字
⑥严格区分大小写

1.5 JS变量

1.5.1 变量声明

JS是弱类型的，无需明确的变量声明，同一个变量可以存放不同类型的值。

1.JS使用var声明变量：

var a = 3;  //JS使用var声明变量

2.JS直接使用标识符声明变量：

x = 4;  //JS直接使用标识符声明变量，全局变量；

1.5.2 变量作用域

变量类型	描述
全局变量	定义在函数外的var变量 & 无var变量
局部变量	定义在函数内的var变量

1.5.3 变量提升★

变量提升（Hoisting）：JS函数及变量的声明都将被提升到函数的最顶部。

1.6 JS数据类型

JS是一种弱类型语言（动态类型），同一个变量可存放不同类型的值。

typeof操作符：检测变量数据类型；

typeof 3.14       //number 数字
typeof NaN        //number 数字
typeof '123'      //string 字符串
typeof true       //boolean 布尔值
typeof undefined  //undefined 未赋值变量
typeof null       //object 空对象引用
typeof {}         //object 对象
typeof []         //object 数组对象
typeof alert()    //function 函数

1.6.1 原始类型

1.Number | 数字：

3;      // 整数
3.4;    // 浮点数
123e5;  // 科学计数法
0xFFFF; // 十六进制数
NaN;    // 非数字，任何涉及NaN的计算，都返回NaN。

2.String | 字符串：

"abc";  // 双引号字符串
'abc';  // 单引号字符串
"\r\n"; // 转义字符

转义字符	描述
`\n`	换行
`\r`	回车
`\t`	制表
`\b`	退格
`\'`	`'`
`\"`	`"`
`\\`	`\`

3.Boolean | 布尔型：

true;  // true值
false; // false值

4.Undefined | 未赋值变量：

undefined; // 意为"缺少值"，未赋值的变量;（用于变量类型）

5.Null | 空指针：

null; // 空对象指针，（用于对象类型）
/* typeof null，类型为Object; */

-区分undefined和null★：

number(null)==0
number(undefined)==NaN;
/* 目前null与undefined基本同义 */

1.6.2 类型转换

1.转换成字符串：

.toString(); // null,undefined没有toString()

2.转换成数字：

.parseInt("123red",10);   // 返回123，逐个字符判断
.parseFloat("1.2.3",10);  // 返回1.2，逐个字符判断

强制类型转换：

1.Number()：

Number(1.2)   // 1.2
Number(1.2.3) // NaN
Number(false) // 0
Number(true)  // 1 
Number(undefined) // NaN
Number(null)  // 0
Number(new object()) // NaN

2.String()：

String();   // 转换任意数据类型
String(null); // "null"
String(undefined); // "undefined"

3.Boolean()：

/* false：空字符串，0，undefined，null */
Boolean("");        //false：空字符串
Boolean(0);	        //false：0
Boolean(undefined); //false：undefined
Boolean(null);      //false：null
Boolean(new object()); //true - 对象

1.6.3 引用类型

引用类型：对象，一组属性和方法的集合。

1.Object | 对象：{}

var obj = {
	var name = "张三";
	var age = 20;
	var eat = function(){
        alert(this.name + "正在吃饭~");
	}
};

var obj = new Object();  // Object对象

2.Array | 数组：[]

var arr = [1,2,3];  // 字面量

var arr = new Array(1,2,3);  //数组对象

3.Function | 函数：

function f(){}  // 一般函数声明

var f = function(){}  // 函数表达式

var f = new Function(arg1, arg2, ..., argN, function_body) // 函数对象

更多引用类型：String，Boolean，Number，Math，Date，RegExp，Error，EvalError，RangeError，ReferenceError，SyntaxError，TypeError，URIError。

1.7 JS运算符

1.算术运算符：+，-，*，/，%，++，--
2.关系运算符：>，<，>=，<=，==，!=
3.逻辑运算符：&，|，~，^，!，&&，||
4.位运算符：<<，>>，>>>，~，&，|，^
5.赋值运算符：=，+=，-=，*=，/=，%=
6.条件运算符：a?b:c

双等与三等★：
==&!=：只比较值，不比较类型。
===&!==：既比较值，也比较类型。

1.8 JS语句

1.8.1 选择语句

if语句：

if(条件表达式){
    条件为true执行语句;
}else{
    条件为false执行语句;
}

switch语句：

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  与以上case值不同时执行的代码
}

1.8.2 循环语句

while循环：

var i = 0;
while(i<10){
	循环体;
	i++;
}

do while循环：

// 先执行一次后判断
var i = 0;
do{
	循环体;
    i++;
}while(i<10);

for循环：

for(var i = 0;i<10;i++){
	循环体;
}

for-in循环：

for(var i in 对象){
    循环体;
}

1.8.3 跳转语句

跳转语句	描述
break	跳出当前循环，跳出一层循环；
continue	跳出本次循环，进行下次循环；
return	结束整个方法；

2. JS高级

2.1 JS字符串

JS字符串本质是一个不可变的字符数组。

2.1.1 创建字符串

1.使用字面量创建字符串：

var str = "abc";  // 字面量

2.使用String对象创建字符串：

var str = new String("abc"); // String对象

2.1.2 字符串拼接

var str = "abc"+"def";  // 使用“+”拼接字符串

2.1.3 String对象

string属性&方法	描述
length	返回字符串长度
charAt(number)	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接字符串
substring()	提取字符串中两个指定的索引号之间的字符
substr()	从起始索引号提取字符串中指定数目的字符
slice()	提取字符串片断，并在新字符串中返回被提取部分
indexOf()	返回字符串中检索指定字符第一次出现的位置如果没有返回-1
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置如果没有返回-1
trim()	移除字符串首尾空格
toUpperCase() toLowerCase()	大小写转换
localeCompare()	比较两个字符串大小
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的值，返回位置
replace()	替换与正则表达式匹配的子串
split()	把字符串分割为子字符串数组

2.2 JS数组

JS数组是动态数组，无需指定长度。JS又是弱类型的，数组中可以有不同的变量类型。

2.2.1 创建数组

1.使用字面量创建：

var arr=["a","b","c"];  // 字面量

2.使用Array创建：

var arr=new Array("a","b","c");  // Array对象

2.2.2 遍历数组

1.使用普通for循环遍历：

for(var i = 0 ; i < arr.length ; i++){
    console.log(arr[i]);
}

2.使用for-each遍历：

for(var i in arr){
    console.log(arr[i]);
}

2.2.3 Array对象

Array方法	描述
length	返回数组长度
isArray()	判断是否为数组
valueOf()	返回数组对象的原始值
toString()	将数组以字符串的形式返回
push()	向数组末尾追加元素，返回新的长度
pop()	删除并返回数组的最后一个元素
join()	将数组转换为字符串，默认按逗号隔开
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头追加元素，返回新的长度
reverse()	数组反转
slice()	从某个已有的数组返回选定的元素
splice()	删除元素，并向数组添加新元素
sort()	排序；数字按大小排，字母按字典顺序排，汉字按Unicode排
indexOf()	返回元素索引
lastIndexOf()	返回元素反序索引

2.3 JS函数

JS函数是一种数据类型[function]，JS函数也是对象。

2.3.1 函数定义

1.使用函数声明定义：

function 函数名(arg0, arg1, ... argN){}  // 函数声明

2.使用函数表达式定义：

var 函数名 = function(arg0, arg1, ... argN){}  // 函数表达式 | 匿名函数

3.使用构造函数定义：

var function_name = new Function(arg1, arg2, ..., argN, function_body)

4.自执行函数：自己调用自己

(function 函数名([形参]){
    函数体;
})([实参]);

2.3.2 函数提升★

一等公民：JS函数与JS变量处于同等地位，可作为一个值使用。
①可将函数赋值给变量
②可将函数赋值给对象的属性
③可将函数作为参数出入其他函数
④可将函数作为返回结果

函数提升（Hoisting）：JS函数及变量的声明都将被提升到函数的最顶部。

2.3.3 Function对象

1.JS函数实际上是功能完整的对象。

function属性&方法	描述
eval("JS代码")	执行JS代码
escape()	对字符串进行编码
unescape()	对字符串进行解码
encodeURI()	把字符串编码为 URI
decodeURI()	解码某个编码的 URI
isNaN()	判断是否是非数字
Number()	把对象转换为数字
String()	把对象转换为字符串
parseInt()	解析一个字符串并返回一个整数
parseFloat()	解析一个字符串并返回一个浮点数

2.JS函数不会重载，只会执行最后一个函数。

var doAdd = new Function("num", "alert(num + 20)");
var doAdd = new Function("num", "alert(num + 10)");
doAdd(1);  // 返回11

2.3.4 arguments对象

JS函数内置对象：arguments对象，表示函数调用的参数数组。

1.检测参数个数：

arguments.length  // 参数数组长度，参数个数

2.模拟函数重载：使用arguments.length判断传递给函数的参数个数，即可模拟重载。

function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 1);
  } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}
doAdd(10);    // 返回11
doAdd(10,20); // 返回30

2.3.5 JS闭包★

闭包（closure）指的是词法表示包括不被计算的变量的函数，即函数可以使用函数之外定义的变量。

// 闭包实例
var iBaseNum = 10;
function addNum(iNum1, iNum2) {
	function doAdd() {
		return iNum1 + iNum2 + iBaseNum;
		// 内部函数作为闭包，获取外部函数的参数iNum1、iNum2，以及全局变量iBaseNum。
  	}	// doAdd()函数根本不接受参数，它使用的值是从执行环境中获取的。
  return doAdd(); 
}

2.4 JS对象

2.4.1 Object对象

Object属性&方法	描述
constructor	指向对象构造器
prototype	指向对象原型
Object.assign({}, obj)	对象复制
Object.assign(obj1, obj2, obj3)	对象合并
Object.create(proto, [prop_Object])	模拟类（class）
Object.is(obj1, obj2)	判断两个值是否严格相同
Object.keys(obj)	返回对象所有属性的数组
Object.delete(obj.prop)	删除对象某个属性

in操作符：判断属性是否属于对象。

prop in obj  // 判断prop是否属于obj

2.4.2 内置对象

JS内置对象（本地对象/全局对象）：由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现。

JS内置对象：Object，String，Array，Function，Boolean，Number，Math，Date，RegExp，Error等。

其中Object，String，Array，Function请参考上文。

Number对象：

Number属性&方法	描述
NaN	非数字值
MAX_VALUE	最大值
MIN_VALUE	最小值
toFixed(n)	返回指定n位小数的数字的字符串
toExponential()	返回指数为n的科学计数法的数字的字符串
toPrecision()	把数字四舍五入格式化为指定的长度

Math对象：静态调用方法；Math没有构造方法，不能生成实例。

Math属性&方法	描述
Math.random()	随机数
Math.round()	四舍五入
Math.ceil()	向上取整
Math.floor()	向下取整

Date对象：

var date = new Date();    // 当前日期和时间
var time = date.getTime();     // 返回从 1970 年 1 月 1 日至今的毫秒数
var year = date.getFullYear(); // 获取年份
date.setFullYear(yyyy, mm, dd); // 设置具体的日期

详细了解JS内置对象请参考：JavaScript 对象参考手册；

2.4.3 创建对象

1.原始方式一：

var obj = new Object();
obj.name = "张三";
obj.age = 22;
obj.eat=function(){
	alert(this.name+"吃馒头");
}

2.原始方式二：

var obj = {
	var name = "张三";
	var age = 20;
	var eat = function(){
		alert(this.name + "正在吃饭~");
	}
};

3.工厂方式：

function objectFactory(name,age){
	return {
		name:name,
		age:age,
		eat:function(){
			alert(this.name+"吃馒头");
		}
	}
}

4.构造函数★：

function Person(name,age){
	this.name=name,
	this.age=age,
	this.eat=function(){
		console.log(this.name+"吃馒头");
	}
}

this关键字：指向调用该方法的对象。

instanceof操作符：判断对象是否为类（构造方法）的一个实例。

var obj = new Object();
obj instanceof Object;  // true  判断obj是否为Object的一个实例。

在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

2.5 JS原型

JavaScript是一门面向对象的编程语言，Brendan Eich为JavaScript设计了继承机制，但为了简化继承，并未引入“类”的概念，而是采用构造函数直接生成实例，采用**原型 (prototype) **共享通用数据。

2.5.1 构造函数

Brendan Eich为JavaScript设计了继承机制，采用构造函数直接生成实例。

// 构造函数
function Person(name,age){
	this.name=name,
	this.age=age,
}
// 使用[构造函数]生成实例
var p1 = new Person("Tom",20);

2.5.2 原型对象

引入prototype属性：
使用构造函数直接生成实例，存在一个问题：无法共享通用数据。
为了共享的通用属性和方法，Brendan Eich为构造函数设置了一个prototype属性，指向构造函数的原型对象。
原型对象用于存放所有实例共享的通用属性和方法。构造函数每生成一个实例对象，将自动引用prototype对象中共享的属性和方法。

// 构造函数
function Person(name,age){
	this.name=name,
	this.age=age,
}
// 原型对象：添加共享属性&方法
Person.prototype = {species: '人类'}
// 使用[构造函数]生成一个实例
var p1 = new Person("Tom",20);
// 可调用共享属性
alert(p1.species); // 人类

原型对象的属性：
①__proto__：指向创建它的函数对象的原型对象；
②constructor：指向构造函数；

Obj.prototype.constructor = Obj

2.5.3 原型链

原型链：JS对象（不论是普通对象还是函数对象）都有__proto__属性，指向创建它的函数对象的原型对象。通过__proto__向上遍历直到Object.prototype.__proto__ = null构成原型链。

注意：使用__proto__可使实例（子）获取构造器（父）的原型对象，容易造成不必要的麻烦。所以__proto__仅是为了实现原型链继承机制而存在的一个属性，不推荐在编程中使用。

2.5.4 原型继承

原型继承：当查找一个对象的属性时，JavaScript会向上遍历原型链，直到找到相应的属性为止。
原型继承的本质：由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。

原型继承：设置[子类的原型]是[父类的实例]。

son.prototype = new Father()

2.6 JS事件机制

事件一般与函数配合使用，这样就可以使事件驱动函数执行。

2.6.1 事件类型

事件三要素：事件源，事件名称，事件处理程序；

事件句柄	描述
onclick	鼠标单击
onfocus	元素获得焦点
onblur	元素失去焦点
onmouseover	鼠标覆盖
onmouseout	鼠标移开
onmouseup	鼠标点击
onmousedown	鼠标松开
onscroll	窗口滚动
onchange	发生改变
onload	加载完成
onunload	退出页面
onerror	加载错误
onsubmit	点击提交
onreset	点击重置
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开

2.6.2 事件传播

事件传播方式：
①事件捕获：Window->Document -> Element -> Attribute -> Text；
②事件冒泡：Window<-Document <- Element <- Attribute <- Text；
注意：focus blur scroll事件除外其它的大部分事件都会冒泡

阻止事件传播：

event.stopPropagation()

2.6.3 事件注册

注册/移除事件的三种方式：
①on事件：

事件源.onclick = function(){}

②addEventListener()：

事件源.addEventListener('click',function(){},[useCapture])
// 捕获阶段：useCapture=true; 默认值为false；（IE9+）

③attachEvent()：

事件源.attachEvent(eventName,function(){},[useCapture])
// 捕获阶段：useCapture=true; 默认值为false；（IE8-）

取消事件默认行为：

①阻止独享属性（on+event）绑定的事件的默认事件：

return false;

②阻止通过addEventListener()添加的事件的默认事件：

event.preventDefault();

③阻止通过attachEvent()添加的事件的默认事件：

event.returnValue = false;

3. JS DOM

DOM文档对象模型

DOM树

3.1 DOM获取页面元素

1.根据id获取元素：

document.getElementById("id"); // 返回单个元素

2.根据标签名获取元素数组：

document.getElementByTagName("标签名"); // 返回数组

3.根据name获取元素数组：

document.getElementByName("name"); // 返回数组

4.根据类名获取元素数组：

document.getElememtByClassName("类名"); // 返回数组

5.根据选择器获取元素数组：

document.querySelectorAll("选择器"); // 返回数组

3.2 DOM操作

1.改变HTML输出流：

document.write();  // 直接向HTML输出流写内容。

2.改变HTML内容：

元素.innerText;  // 获取/设置文本值（对代码转义为文本）
元素.innerHTML;  // 获取/设置HTML代码

3.改变HTML属性：

元素.HTML属性 = 新属性值 // 改变HTML属性

4.自定义HTML属性

元素.getAttribute("属性");      // 获取属性
元素.setAttribute("属性","值")  // 设置属性
元素.removeAttribute("属性");   // 移除属性

5.改变CSS样式：

元素.style.CSS样式 = 新样式 // 改变CSS样式

CSS属性名多个单词以-分隔s，JS调用CSS属性名多个单词采用驼峰命名；
即在JS中使用fontSize来表示CSS中的font-size。

3.3 DOM节点

DOM节点：文档Document->元素Element->属性Attribute->文本Text；

1.当前节点属性：

当前节点属性	描述
nodeName	文档节点：#document 元素节点：标签名属性节点：属性名文本节点：#text
nodeValue	元素节点：undefined / null 属性节点：属性值文本节点：文本
nodeType	元素：1 属性：2 文本：3 注释：8 文档：9
innerHTML	读取：当前节点及后代节点的HTML代码写入：HTML代码，新的DOM树
innerText	读取：当前节点的文本内容写入：文本值（对html转义）
textContent	当前节点及后代节点的文本内容

2.当前节点的相关节点：

当前节点的相关节点	描述
ownerDocument	所属文档
previousSibling	前一个同级节点
nextSibling	下一个同级节点
parentNode	父节点
parentElement	父元素
firstChild	子节点
children	子元素

3.针对父节点的操作：

针对父节点的DOM方法	描述
appendChild()	追加一个子节点
removeChild()	移除子节点
replaceChild()	替换子节点
insertBefore(new,old)	在旧节点前插入新节点
isEqualNode()	判断节点是否相同

4.创建节点：

创建节点	描述
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点

5.自定义属性：

自定义属性	描述
getAttribute("attr")	获取属性
setAttribute("attr", "value")	设置属性及属性值
removeAttribute("attr")	移除属性

4. JS BOM

BOM浏览器对象模型，其中window对象是BOM顶级对象，document，location，history，navigator都是windows的子对象。

4.1 window-浏览器窗口

window对象：浏览器窗口；

window属性&方法	描述
window.name	window对象名称
window.innerHeight	浏览器窗口的内部高度
window.innerWidth	浏览器窗口的内部宽度

4.1.1 原生JS入口函数

// 原生JS入口函数：等待加载完页面元素后再执行JS代码
window.onload = function(){ JS代码 }  // 原生JS入口函数

4.1.2 JS弹出框

1.警告框：

window.alert("警告");  // 警告框；

2.确认框：

var flag = window.confirm("确定要删除？"); // 确认框；
// 确定：返回true | 取消：返回false

3.提问框：

var input = window.prompt("你的年龄？");  //提问框；
// 确定：返回输入值 | 取消：返回null

可省略windows对象，直接使用。

4.1.3 JS定时器

1.单次定时器：

// 设置单次定时器
var timerId = window.setTimerout(function(){定时任务},timeout);  // 只执行一次
// 清除单次定时器
window.clearTimeout(timerId);

2.循环定时器：

// 设置循环定时器
var timerId = window.setInterval(function(){定时任务},timeout);  // 循环执行
// 清除循环定时器
window.clearInterval(timerId);