前言
终于来到了 web的核心JavaScript部分
本篇博客重点不在于这个js的基础语法
感觉大部分编程语言的语法都大差不差的，给我的整体感觉确实有点像是c语言，有一门编程语言基础的人上手难度会很小。
自己想讲述的重点是给这个网页写出一点动态的效果的代码
首先呢JavaScript分js语法，DOM和BOM
DOM是页面文档对象操作
是可以处理扩展标记语言的标准编程接口，通过这个DOM提供的接口可以对页面上的各种元素进行操作（大小位置颜色等一些属性值得改变）
BOM是浏览器对象操作
它提供了独立于内容，可以与浏览器窗口进行互动的对象结构，通过BOM可以实现操作浏览器窗口，比如说弹出框，控制浏览器翻转跳转，获取分辨率等一些操作。
JavaScript基本语法
- JavaScript的书写位置
对应这三种书写位置
1.内部JavaScript
可以写在body里面中HTML的下面（即末尾的位置）
2.外部JavaScript
可以在head中title下面，在script标签中用src属性值来引入外部的js
（这一步在之后引入js各种各样的插件是常用的）
3.内联式JavaScript
写在标签里面，后面学习vue会用到 - 定义变量
我们C语言java定义一个变量的时候会有很多int double float什么的，但是在js里面可以全部只有var代替
在后续js代码展示一些变量的时候我们通常会使用console.log(一个变量) 这样在浏览器控制台中，会打印出这个变量的值
在后续学习js中，还有有一些变量命名规范，尽量使用驼峰命名法来定义一些我们常用的变量，使用英文而不是拼音
众所周知：我们中文博大精深写个拼音可能读出来会有很多其他的意思，所以我们使用英文，当然了英文不好的同学，看别人的代码或者是自己之前写的代码建议在浏览器里面打开一个谷歌翻译哈哈哈哈哈哈哈哈哈 - JavaScript中的数据类型
主要是分2大类
一个是基础数据类型
number数字型
string字符串型
boolean布尔型
undefined未定义型
null空类型
第二个是引用数据类型
object对象
function函数
array数组
当我们不确定这变量是什么类型的时候
使用typeof检测数据类型就可以了
其他语言有的隐式类型转换和显示类型转换JavaScript也有，我们就不多说了哈
当然了算术运算符，赋值运算符，逻辑运算符，运算符优先级都是和C语言差不多的，这里就不多说了 - JavaScript里面的输入输出语句
输入prompt(‘这里是要输入的内容’);
通常我们使用一个变量来保存用户输入的内容，使其内容可以被接下来的逻辑所使用。
输出语句
1.向网页中输出语句
document.write(‘这里填写输出内容文本’);
2.以警示框的形式去输出
alert(‘这里填写输出内容文本’)；
3.控制台输出语法，一般我们作为测试会使用到
console.log(‘这里填写输出内容文本’); - 函数定义
function 函数名（参数列表） {
函数体
返回值
}
函数调用
函数名（参数列表） - 对象
对象就是一个可以自定义数据和方法的数据类型
访问对象的属性(方法)的形式是
对象.属性 对象.方法
当然了JavaScript也有内置的一些对象
比如说Math，它是一个算数高手对象
var dog = {
name: '可可',
age: 5,
type: '中华田园犬',
color: '棕红色',
get: function () {
console.log('摇头晃脑');
}
}
DOM和BOM的区别
DOM是文档对象模型，DOM是文档当做一个对象来看待，DOM的顶级对象是document，DOM主要学习的是操作页面元素。DOM是W3C标准规范。
BOM是浏览器对象模型，把浏览器当做一个对象来看待，BOM的顶级对象是window，BOM学习的是浏览器窗口交互的一些对象，没标准，都是各大浏览器厂家自己定义的标准。
BOM 比 DOM 更大，它包含 DOM。
DOM
1.获取页面元素
根据ID获取document.getElementById(‘id’);
根据标签名获取document.getElementsByTagName(‘标签名’);（这个方法也可以获取到这个元素的所有子元素）
2.事件
事件源（谁）
事件类型（什么事件）
事件处理程序（做啥）
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};
常用的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
操作元素
element.innerText或者element.innerHTML是改变元素内容
其他可改变内容 src href type value checked selected disabled style className等等
获取属性值
element.属性 获取属性值。元素本身自带的属性值
element.getAttribute(‘属性’); 自定义的属性值
移除属性值
element.removeAttribute(‘属性’);
现在引入JavaScript里面一个重要的概念就是节点，
站在js的角度出发，看HTML里面的所有标签其实都可以看作一个节点，所有的标签都可以是一个节点。按照学习一门语言的常规顺序
我应该是要讲父节点，子节点，兄弟节点了
我们使用一个输入密码框的HTML代码来帮助理解这三个概念
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6到16位的密码</p>
</div>
类名为register的标签（也称节点）这个节点有2个子节点，这2个子节点互为对方的兄弟节点，对于这2个子节点，类名为register的节点为父节点
那么我们如何在js中获取这些节点呢
父节点node.parentNode
子节点parentNode.childNodes
兄弟节点node.nextSibling（返回当前元素的下一个兄弟元素的节点）
node.previousSibling （返回当前元素的上一个兄弟元素的节点）
动态创建一个节点
什么叫动态创建一个节点呢？
我们在微博评论，只有有人去发表了评论才会出现评论那一堆东西，评论就是被动态创建的网页元素，之前是没有的
document.createElement(‘tagName’)
（下面2个就有点类似于css里面的伪元素）
node.appendChild(child)
将一个节点添加到指定node的子节点列表的末尾
node.insertBefore(child, 指定元素)
将一个节点添加到指定node的子节点列表的前面
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
三种动态创建元素的区别
第一种，document.write()会导致网页重载，所以一般是不用的
第二种，element.innerHTML是将一个内容写入一个节点，不会导致网页重载，采取数组形式拼接，写的时候可能会比较复杂
第三种，document.createElement()创建多个元素效率会差一点点，但是结构会更加清楚一些
DOM操作主要是创建，增加，删除，修改，查询，属性操作，事件操作
创建：
document.write
innerHTML
createElement
增加：
appendChild
insertBefore
删除：
removeChild
修改：
主要是修改元素的属性（src、href、title等），内容（innerHTML 、innerText），表单的值（value、type、disabled等），修改元素样式（style、className）
查询：
getElementById（不提倡）
H5提供的新方法： querySelectorquerySelectorAll （提倡）
利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) （提倡）
属性操作
setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性
DOM事件高级
主要是有注册事件（绑定事件）,删除事件（解绑事件），DOM事件流，事件对象，阻止事件冒泡，事件委托，常见的鼠标，键盘事件，这些内容
首先是注册事件（绑定事件）
eventTarget.addEventListener(type, listener[, useCapture])
事件监听方式，这个方法三个参数：
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。
eventTarget.attachEvent(eventNameWithOn, callback)
另外一种事件监听方式，这个方法的两个参数：
eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback： 事件处理函数，当目标触发事件时回调函数被调用
删除事件（解绑事件）
传统方式eventTarget.onclick = null;
方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);
DOM事件流
这个事件流说的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，即DOM事件流
分为3个阶段
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
这三个阶段就可以用一个事情来作比方
我们向水里面扔一个石头，首先石头会下降，这个过程及时捕获过程，会在最低点（最具体的元素）之后漂浮在水面上面
注意事项：
JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。
阻止事件冒泡
标准写法e.stopPropagation()
非标准写法e.cancelBubble = true;
事件对象：
eventTarget.onclick = function(event) {}
eventTarget.addEventListener(‘click’, function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
这个e很重要，跟事件一系列的信息数据的集合都会放到这个对象里面，就是多个属性和多个方法的集合的一个对象，这个e是一个形参，是被系统自动创建的，我们只需要自己去调用
this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。
事件委托
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
这么写简洁代码，只操作一次DOM，提高程序的性能
常用的鼠标事件
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener(‘contextmenu’, function(e) {
e.preventDefault();
})
2.禁止鼠标选中（selectstart 开始选中）
document.addEventListener(‘selectstart’, function(e) {
e.preventDefault();
})
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的×坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pagex | 返回鼠标相对于文档页面的×坐标IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的×坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发（不识别功能键） |
如果使用addEventListener 不需要加 on
三个事件的执行顺序是： keydown – keypress — keyup
键盘中keyCode，会放回该键的ASCII值
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
BOM
BOM浏览器对象模型
内容主要包括
window对象常见事件，定时器，js执行机制，location 对象，navigator 对象，history 对象
BOM是浏览器对象模型，他提供了独立于内容与浏览器窗口进行交互的对象，其核心对象是window，BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
窗口加载事件
window.onload = function(){}
或者
window.addEventListener(“load”,function(){});
window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
自己感觉像是一个全局的回调函数
调整窗口大小事件
window.onresize = function(){}
window.addEventListener(“resize”,function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度，只要窗口大小发生像素变化，就会触发这个事件。
setTimeout() 定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
etTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。（回调函数）
- window 可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
5. window 可以省略。
6. 里面的参数就是定时器的标识符 。
setInterval() 定时器
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
7. window 可以省略。
8. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
9. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
10. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
停止 setInterval() 定时器
window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
11. window 可以省略。
12. 里面的参数就是定时器的标识符
this指向问题
13. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
14. 方法调用中谁调用this指向谁
15. 构造函数中this指向构造函数的实例
js执行机制
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
location 对象
统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
navigator 对象
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
history 对象
window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。
PC端网页特效制作
主要有：元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
元素偏移量 offset 系列
offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意： 返回的数值都不带单位
| offset系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding .边框、内容区的宽度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
元素可视区 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding 、内容区的宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding 、内容区的高度，不含边框，返回数值不带单位 |
元素 scroll 系列属性
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
| scroll系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
| 三大系列大小对比 | 作用 |
|---|---|
| element.offsetWidth | 返回自身包括padding 、边框、内容区的宽度，返回数值不带单位 |
| element.clientWidth | 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
移动端的网页特效
触屏事件
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
触摸事件对象（TouchEvent）
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
拖动元素三步曲：
（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
（3） 离开手指 touchend:
手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加，移除及切换 CSS 类。有以下方法
添加类：
element.classList.add（’类名’）；
移除类：
element.classList.remove（’类名’）;
切换类：
element.classList.toggle（’类名’）；
本地存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用
存储数据
sessionStorage.setItem(key, value)
获取数据
sessionStorage.getItem(key)
删除数据
sessionStorage.removeItem(key)
删除所有数据
sessionStorage.clear()
window.localStorage
1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用
存储数据
localStorage.setItem(key, value)
获取数据
localStorage.getItem(key
删除数据
localStorage.removeItem(key)
删除所有数据
localStorage.clear()
这些是js的基本属性和操作了，当然了之后的jQuery，ajax，node等等一些内容不是很多的小技术，都是在js这部分上面发展出来的，所以学好js还是很重要的
1827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
