js基础篇（3）— js的一些基础定义及知识（ES5及以前）JavaScript简介 JavaScript是一种基于对象

1. JavaScript简介

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。
一种计算机客户端脚本语言，主要在Web浏览器解释执行

2. JavaScript特点

动态类型
- 不需要变量指定数据类型
弱类型
- 一个变量可以赋不同类型的值
简单性
- 解释性语言，不需要编译，方便调试
跨平台性
- 依赖浏览器本身，与操作环境无关
必要性
- 主要浏览器统一支持的语言
兼容性差
- 因为依赖于浏览器执行，所以受各浏览器影响，兼容性较差

3. JavaScript基本用法

HTML文件内部JavaScript代码
引入外部JavaScript文件

4. JavaScript语法基础

JavaScript输出内容的3种方式

document.write() 页面输出内容
console.log() 控制台输出
alert() 弹框输出

变量的命名方式（或者说命名规则）

区分大小写
以字母或‘_’或‘$’开头
不能是关键字，保留字

原始数据类型

Number
String
Boolean
Undefined
Null（不是NaN，没有NaN）

比较运算符

== 值相等则为true
=== 类型和值都需相同则为true

数据类型的转换

隐式转换
- 转换成String类型：用 + 连接
- 转换成Boolean类型：变量前面加!!
强制转换
- 全局函数：parseInt()、String()、parsefloat()、Boolean()等

for循环语句

如何终止循环：break（终止），continue（跳出本次循环）

5. 常用的事件类型

页面加载事件

onload 页面加载完成后触发
onunload 页面关闭时触发

表单事件

onblur 失去焦点时触发
onchange 元素内容发生改变时触发
onfocus 获得焦点时触发
onreset 表单重置时触发
onselect 被选中时触发
onsubmit 表单提交时触发

鼠标事件

onmousedown 按下鼠标时触发
onmousemove 鼠标移动时触发
onmouseout 鼠标移出时触发
onmouseover 鼠标移动到元素上时触发
onmouseup 释放鼠标按钮时触发
onclick 鼠标点击事件

键盘事件

onkeydown 按下键盘按键时触发
onkeypress 按下键盘按键并释放时触发
onkeyup 松开键盘按键时触发

6. 字符串的基本操作

获取指定位置的字符

charAt(n) str.charAt(n), 但是一般使用str[n]来进行获取

获取指定子串首次出现的位置

indexOf() 返回值为首次出现的位置下标，下标从0开始
若没有检索到对应的字符串，则返回 -1

根据位置提取一段子串

slice(start, end) 表示从strat开始截取，知道end结束，但是不包括end
返回值为所提取的字符串

把字符串分割成数组

split(separator, howmany)
- sparator 必填以该参数为分割（也可以填正则表达式，之后会学到）
- howmany 可选规定返回的数组的长度，不填则长度不限
split 返回被切割后的数组，不改变原字符串

把字符串转换成大写

toUpperCase()

把字符串转换成小写

toLowerCase()

7. 数组的基本操作

获取指定值出现的位置

indexOf(item, start)
- item 必填查找的指定元素
- start 选填从哪个下标开始查找，不填则默认从0开始查询

数组元素排序

sort(sortfunction(a, b))
- sortfunction 选填规定排序方式的函数，不填则默认从小到大
- sortfunction函数接收两个参数: a代表的是数组中当前的这一项，b代表的当前这一项的后一项
- 故sortfunction
```
  当return a-b 时（a大于b时，a与b交换位置，a小于b时，不变），表示从小到大排序
  当return b-a 时（b大于a时，a与b交换位置，b小于a时，不变），表示从大到小排序
```
会改变原数组, 返回改变后的原数组

颠倒数组中元素的顺序

reverse() 没有参数
会改变原数组，返回改变后的原数组

数组转换成字符串

join(separator)
- separator 可选指定使用的连接符，不填则默认使用逗号（,）连接

删除元素的方法

shift() 删除并返回数组的第一个元素
- 会改变原数组
- 返回数组的第一个元素
pop() 删除并返回数组的最后一个元素
- 会改变原数组
- 返回数组的最后一个元素
slice(start, end) 截取对应的数组并返回
- 从start开始截取，直到end，不包括end
  - start 表示起始下标，可以为负数，表示从数组的末尾进行选择，不填则默认从头开始
  - end 表示结束下标（不包括end）,不填则默认到最后
- 不会改变原数组
- 返回所截取的部分
splice(index, howmany, item1, ..., itemX) 添加替换或删除数组中的元素
- index 必填规定添加替换或删除的起始下标
- howmany 选填
  
  当用作删除时，表示删除元素的长度
  
  当为 0 时表示，从index的位置添加
  
  当用作替换时，表示被替换元素的长度，多了则在被替换元素的最后添加，少了则替换对应长度，剩余删除
- 会改变原数组
- 返回一个数组，数组内的值为所操作的部分
delete 关键字用法：delete arr[1]
- 这种方式删除数组中的元素，数组长度不变，但是对应位置的元素值，变成了undefined

添加元素的方法

unshift(item1, ..., itemX) 向数组开头添加元素，并返回新的长度
- 参数可选表示要添加的元素
- 会改变原数组
- 返回添加后数组的总长度
push(item1, ..., itemX) 向数组末尾添加元素，并返回新的长度
- 参数可选
- 会改变原数组
- 返回添加后的数组的总长度
concat(arr2, arr3, ..., arrX) 连接数组，并返回新数组
- 参数必填至少一个，表示需要连接的数组
- 不会改变原数组
- 返回连接后的新数组
splice(index, howmany, item1, ..., itemX) 添加替换或删除数组中的元素
- 用法参数同删除中所写

forEach遍历数组

arr.forEach(function(currentValue，index，arr){})
- currentValue 必填表示当前元素
- index 选填索引值
- arr 选填当前的数组对象（将回调函数封装后，需写上，要不不知道遍历的是哪个数组）
forEach 与 for 的区别
- forEach 可以说是for循环的简化版
- 在使用forEach时，不能对数组进行添加或删除操作
- for循环使用continue跳出本次循环，而forEach只能在回调函数中使用return提前结束本次循环
- for循环使用break终止循环，而forEach要想终结循环，只能使用 try catch 捕捉报错，才能跳出循环（在es6中forEach可以使用some()或every()代替）
forEach与for 的总结
- forEach 其实就是for循环的简化版，不能使用forEach对数组进行添加或删除的操作，而且只能使用return 提前结束本次循环，而且在正常情况下是如法终止整个循环的。

8. 对象的基本概述

JavaScript是一门基于对象的语言
具有面向对象的部分特征（在ES6引入class类之后，基本可以说js是一门面向对象的语言了）

9. 对象的相关操作

访问对象的属性和方法

对象名.属性名或对象名.方法名() ： obj.name 或 obj.sayHello()
对象名["属性名"] : obj["name"]

添加或修改对象属性

obj.name = "张三"
obj["name"] = "张三"

删除对象属性

delete： delete obj.name
使用delete删除数组元素与删除对象属性的区别
- 使用delete删除数组元素，对应位置的元素值会变成undefined
- 使用delete删除对象属性，对应属性和值直接消失

遍历对象属性

for in 语句：遍历对象的属性即遍历对象的key

对象中的this关键字

在对象的属性上使用this时，this指向当前对象
在对象的方法中使用this，且不使用箭头函数（ES6语法）时
- 当直接通过对象调用此方法时，this指向当前对象
  - obj.sayHello() 此时saylHello里的this指向obj对象
- 而当把对象的方法赋值给一个变量时，this指向分情况（具体关于this指向的问题，请阅读 js基础篇（1）— this指向问题分析）

10. 构造函数

能够创建出对象的特殊函数
使用function关键字声明（不可以用箭头函数，原因请查阅 js面试总结（4）— ES6新特性）
构造函数中的this指向由构造函数创建出的对象（实例对象）
通过new关键字调用构造函数来创建对象

// 创造电影对象的构造函数
function Movie(title, type, showtime) {
    this.title = title;
    this.type = type;
    this.showtime = showtime;
    this.getNextShowing = function () { ... };
}

var movie1 = new Movie("007", "谍战", ["8:00", "13:00", "16:00"]);

11. 常见的内置对象

String 创建字符串对象
Array 创建数组对象
Math Math对象不需要创建，直接使用，包含了一系列的数学运算功能
Date 包含了一系列的日期时间处理的功能
Boolean 创建布尔值对象或将传入值转换为布尔值对象
Number 创建number对象，并提供一些操作number对象的方法
RegExp 创建正则表达式对象，并提供一些方法
JSON 创建JSON对象，并提供一些方法

12. BOM模型

JavaScript的组成

ECMAscript JavaScript的语法规范
DOM对象（Document Object Model）文档对象模型
BOM对象（Browser Object Model）浏览器对象模型
- Browser Object ：浏览器提供的用于用户与浏览器窗口之间交互的对象及操作的接口
- Model ：对象模型，对象域对象之间存在层次结构，对象模型的作用就是描述这些层次结构
- BOM体系结构：
  
  浏览器对象模型（BOM）由window身上的history，location，navigator，screen以及document对象组成。

window对象上的方法

对话框
- alert() 警告框
- confirm() 确认窗口（有确定和取消按钮）
- prompt() 输入框
setTimeout(code, interval) 延迟执行
- code 必填需要执行的js代码块
- interval 必填在代码执行前需要等待的毫秒数（当延迟秒数设为0时，则在当前代码文件的最后执行）
clearTimeout(id) 取消延迟执行
- id 是 setTimeout()方法返回的数字（一般通过变量接收，然后在取消延迟时传入）
setInterval(code, interval) 周期执行
- code 必填需要执行的js代码块
- interval 必填代码块执行的时间间隔，毫秒计数（当延迟秒数为0时，会循环执行，但是需要等待上一次执行完，才能执行下一次，所以每两次执行之间其实也是有一定的时间间隔的）
open(url, name, features, replace) 打开浏览器窗口
close() 关闭浏览器窗口

history对象

history 对象可以访问浏览器窗口的浏览历史
- back() 回退
- forward() 前进
- go(n) 回退到第n个(n为负数)，前进到第n个(n为整数)

location 对象

location 对象包含当前窗口的URL信息，可以通过修改location对象的属性来加载另一个文档
- host 主机名和端口
- hostname 主机名
- href 当前网页的url
- port 端口号
- reload 重新加载当前页面
- hash 设置或返回URL的锚部分（从#号开始的部分）
- search 设置或返回当前URL的查询部分（问号？之后的部分）

navigator 对象

包含浏览器的信息，浏览器的类型，版本信息等
- appName 浏览器名称
- appVersion 浏览器版本和运行平台
- onLine 是否在线
- platform 浏览器运行平台
- userAgent HTTP用户代理请求头的字符串

screen 对象

包含客户顿显示器屏幕的相关信息
- height 屏幕垂直分辨率单位：px
- width 屏幕水平分辨率单位：px
- availHeight 可用屏幕高度
- availWidth 可用屏幕宽度

document 对象

指向当前窗口内的文档节点
- document.write() : 将一串文本写入文档流

13. DOM 模型

DOM（Document Object Model）：文档对象模型

DOM分类

核心 DOM：用于任何结构化文档的标准模型
HTML DOM：用于HTML文档的标准模型
XML DOM：用于XML文档的标准模型

DON树

DOM将HTML文档抽象成为树形结构，这棵树成为DOM树
HTML中每一项内容都可以在DOM树中找到
对文档内容的操作即对DOM树的操作
节点：
- 整个文档是一个文档节点
- 每个HTML元素是元素节点
- HTML元素内的文本是文本节点（换行空格也属于文本节点）
- 每个HTML属性是属性节点
- 注释是注释节点

访问DOM节点

通过使用document对象，访问节点
通过id属性获取节点
- document.getElementById()
通过class类名获取所有类名相同的节点
- document.getElementsByClassName()
通过标签名获取所有同名节点
- document.getElementsByTagName()
特殊节点：
- document.documentElement
  - 属于属性，不加括号直接使用，返回HTML文档中的<html>元素
- document.head
  - 属于属性，直接使用，返回<head>元素
- document.body
  - 属于属性，直接使用，返回<body>元素

节点树 & 元素树

	节点树	元素树	用法
获取父节点	parentNode	parentElement	document.getElementById("test").prentNode
获取子节点	childNodes	children	document.getElementById("test")..childNodes
获取第一个子节点	firstChild	firstElementChild	document.getElementById("a").firstChild
获取最后一个子节点	lastChild	lastElementChild	document.getElementById("a").lastChild
获取前一个兄弟节点	previousSibling	previousElementSibling	document.getElementById("a").previousSibling
获取后一个兄弟节点	nextSibling	nextElementSibling	document.getElementById("a").nextSibling

innerHTML属性及相似属性

innerHTML 属性
- 获取或可以改变元素节点的内容，获取到的是该节点内的所有内容，包括子节点
```
var p = document.getElementById("test");
p.innerHTML = "123";
```
innerText 属性
- 获取或改变元素节点的文本内容（只限于文本内容）
textContent 属性
- 基本上和innerText 属性一样，具体区别请查阅官方文档

元素节点属性

获取节点的属性
- node.getAttribute(attrName)
添加或修改节点属性
- node.setAttribute(attrName, value)
  - 当节点属性存在时，为修改
  - 当节点属性不存在时，为添加
删除节点属性
- node.removeAttribute(attrName)
判断节点属性是否含有某属性
- node.hasAttribute(attrName) 含有返回true，不含有为false

元素节点的操作

生成DOM节点
- 生成元素节点： document.createELement("html元素名")
- 生成文本节点： document.createTextNode("文本字符串")
- 添加节点： document.body(父节点).appendChild(新节点对象)
- 插入节点： document.body.insertBefore(新节点对象, 旧节点对象)
删除节点的两种操作
- 通过父节点删除： myParent.removeChild(mySelfNode)
- 通过自己本身删除： mySelfNode.parentNode.removeChild(mySelfNode)
修改节点
- oldNode.parentNode.replaceChild(新节点, 旧节点)

14. JavaScript样式控制

访问/修改行内样式（style对象）

document.getElementById("id名").style.属性名 = "值"
使用js样式属性名规则：
- css样式属性名为单个单词时，使用js样式属性名时相同
- css样式属性名为多个单词时，使用js样式属性名时，第一个单词加上首字母大写的第二个单词，且没有横线，类似于驼峰命名法 | css样式属性名 | JavaScript样式属性名 | | ------------ | ------------------- | | color | style.color | | font-family | style.fontFamily |

获取样式

Window.getComputedStyle(ele, "伪类")
- 获取当前元素所有最终使用的CSS属性值，只读
- ele：指定需要获取样式的元素
- "伪类"：可选，指定一个要匹配的伪元素的字符串。
element.currentStyle （IE使用）返回了元素上的样式表

15. 事件对象（Event）及其身上属性

问题：如何知道事件发生时，那个鼠标按钮被点击？哪个键盘按键被按线下？发生时鼠标的坐标是？
答：由此引出了Event事件对象

事件对象

在触发DOM上的某个事件时，就会产生一个事件对象Event
Event事件对象包含了事件的状态，比如：事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态
事件在浏览器中是以对象的形式存在的。在事件处理函数执行时，事件对象将会由浏览器自动传递给事件处理函数
在事件处理函数中，声明形参接收该参数，例：
```
window.onload = function(e) {
    console.log(e)
}
```

事件对象上的鼠标/键盘属性

属性	作用
altKey	"Alt"键是否被按下
ctrlKey	"Ctrl"键是否被按下
shiftKey	"Shift"键是否被按下
metaKey	"meta"键是否被按下
button	哪个鼠标按钮被按下
clientX	鼠标当时的水平坐标（相对于浏览器内容区）
clientY	鼠标当时的垂直坐标（相对于浏览器内容区）
relatedTarget	返回与事件的目标相关的节点
screenX	"ALT"键是否被按下（相对于电脑屏幕窗口）
screenY	"ALT"键是否被按下（相对于电脑屏幕窗口）
keyCode	被敲击的键的虚拟键盘码

button：0 规定鼠标左键， 1规定鼠标中键，2规定鼠标右键
keyCode： 13 表示回车（Enter）键

事件方法

initEvent()：初始化新创建的Event对象的属性
preventDefault()：阻止浏览器的默认事件的发生
stopPropagation()：阻止事件冒泡
- preventDefault 与 stopPropagation 的区别：
  - 一个是阻止默认事件的发生，例如a标签跳转（preventDefault）
  - 一个是阻止事件冒泡（stopPropagation）

js基础篇（3）— js的一些基础定义及知识（ES5及以前）

1. JavaScript简介

2. JavaScript特点

3. JavaScript基本用法

4. JavaScript语法基础

JavaScript输出内容的3种方式

变量的命名方式（或者说命名规则）

原始数据类型

比较运算符

数据类型的转换

for循环语句

5. 常用的事件类型

页面加载事件

表单事件

鼠标事件

键盘事件

6. 字符串的基本操作

获取指定位置的字符

获取指定子串首次出现的位置

根据位置提取一段子串

把字符串分割成数组

把字符串转换成大写

把字符串转换成小写

7. 数组的基本操作

获取指定值出现的位置

数组元素排序

颠倒数组中元素的顺序

数组转换成字符串

删除元素的方法

添加元素的方法

forEach遍历数组

8. 对象的基本概述

9. 对象的相关操作

访问对象的属性和方法

添加或修改对象属性

删除对象属性

遍历对象属性

对象中的this关键字

10. 构造函数

11. 常见的内置对象

12. BOM模型

JavaScript的组成

window对象上的方法

history对象

location 对象

navigator 对象

screen 对象

document 对象

13. DOM 模型

DOM（Document Object Model）：文档对象模型

DOM分类

DON树

访问DOM节点

节点树 & 元素树

innerHTML属性 及 相似属性

元素节点属性

元素节点的操作

14. JavaScript样式控制

访问/修改行内样式（style对象）

获取样式

15. 事件对象（Event）及其身上属性

事件对象

事件对象上的鼠标/键盘属性

事件方法

innerHTML属性及相似属性