JS对于大多数学网络编程的人应该都不陌生，他本身也就是当初网景公司开发的一种基于客户端浏览器、面向或说是基于对象、事件驱动式的一种网络脚本语言。
在我们运用过程中有两种在web页面里添加JavaScript的方式：
第一种是嵌入式，意思就是直接把JavaScript直接包含在和HTML当中即可
用法：<script> JavaScript内的代码块</script>
第二种则就是外链式，这个呢，是要把JavaScript代码保存在单独的文件中，然后利用<script>标签的src(源)属性把这个文件包含在页面里
用法：<script src = ''./lib/jquery.min.js></script>
说实话刚开始的JS的内容还是蛮容易掌握的，就比如那些注释(//或/* */)或者是那些弹出框(警示框(alert("内容"))或是输入框(prompt("参数1","参数2")))或者是后台打印日志(console.log())，还有在页面输出内容(document.write)和换行(<br/>)。
日后我们也是用打印日志用的最多，当要去测试一些属性有没有去达到我们想要的效果时，后台打印日志就派上用场了；亦或当我们用打印日志测试成功时，我们就可以用document.write在页面中将它给显示出来。
变量
变量在JavaScript是很常用的，就算你一开始掌握的并不怎么样，但在之后的学习和练习当中，不想熟练掌握都做不到。
—— 变量我们可以声明一个变量也可以声明
通常我们也就用的时候，也就是先声明一个变量，然后再赋值就可以了，但在变量的运用过程中，对于那些刚接触的人来说，很容易出现很多不懂的地方，
就比如：当声明一个变量后，它又被重新赋给了新的值，这个时候。这个变量原有的值就被这个新的值给覆盖住了(切记：变量的值以最后一次赋给的值为准).
------ 当然也有一些其他情况：
1）当只声明不赋值的时候，程序员也不知道里面的究竟是什么，孤儿输出结果就会是underfind.
2) 当不声明不赋值的时候后台程序后直接报错，所以尽量不要这样写.
3) 当不声明就直接赋值使用的时候，倒是也能出效果，但不提倡这样写，因为这样它会变成全局变量
数据类型
比较让我们熟知的数据类型也就是数值类型(number)、字符型(string)、布尔型(Boolean)、空型(mull)和未定义型(underfined).
数值类型(number)
这个类型主要是用来表达整数和浮点数(小数)值
它还有一种特殊数值——NaN(非数值-Not a Number)
字符型(string)
这个类型主要用来表示字符串.
字符串可以用单引号(' ')或者双引号(" ")来表示,只要添加了引号就都是字符型.
布尔型(Boolean)
这个类型是逻辑型，主要是来判断对(true)与错(false)的，常用变量是falg.
空型(mull)
这个类型时表示无或是不存在的，可以通过将变量的设为null来清空变量.
未定义型(underfined)
大家应该都能被未定义吸引，它又是什么意思呢？
--- 未定义就是指我们声明了变量但是并没有给它赋值
接下来当然就是检测数据类型了，
我们通常都是用typeof运算符来检测这个数据类型是属于哪一种.
它的语法是 —— typeof something
注：因为typeof本身就是一个运算符，并不是函数，所以在使用的时候不用添加小括号.
下面就是数据类型中比较重要的数据类型转换了，它可以分为：
1，转换为字符串型；
2，转换为数字型l；
3，转换为布尔型；
4，number(),它可以将任意的数值转换为数值
运算符
运算符可分为l六种，分别是：1，算术运算符； 2，递增运算符；3，逗号运算符；4，比较运算符；5，赋值运算符；6，逻辑运算符
运算符在五种情况下为假:(1)为0时；(2)为‘ ’时；(3)为NaN时；(4)为null时；(5)为underfined时
运算符的优先级也有必要说一说，
| 优先级 | 运算符 | 符号 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- |
| 3 | 算术运算符(乘除取余) | 先 * /,后 + - |
| -4 | 关系运算符 | >>= <<= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 ! ,再 &&,再 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
那第四个就来看看条件语句
首先先说说这里面的流程控制
流程控制呢，其实就是用来控制我们的代码按照什么结构顺序来执行得一种控制方式。
流程控制共分为三种结构，分别是顺序结构，分支结构和循环结构。
流程控制还有的一种方式叫分支流程控制，这里面也就包含着我们要说到的条件语句了，
条件语句要说一共可以分为多少类，这个我自己也不敢确定，只能说是很多吧。今天也就把我所知道的分享给大家。
if / if else语句
if语句的话，其实很容易理解，不过也就是对了你就期执行最后一步，不对就继续执行即可；而if else语句则就不一样了，这个则是当你if里面的条件成立时，就去执行这个里面所包含的代码，否则执行else里面的代码
if条件语句：
if(条件表达式){
条件成立时执行的代码块
}if else条件语句：
if(条件表达式){
[如果]条件成立执行的代码
}else{
[否则]执行的代码
}总结：
1）双分支语句if else中只能有一个语句执行；
2）else后面直接跟大括号；
3）双的分支语句是多选一的过程。
多分支语句(if)
if else语句只能选择两种结果，要么执行真的，要么执行假的。但有时或出现两种以上的选择
if(条件表达式1){
语句段1；
}else if(条件表达式2){
语句段2；
}
......
}else{
语句段n
}总结：
1）多分支语句也是多选一的过程，最后只执行一个语句；
2）else if 理论上可以是任意多个；
3）else if 中间必须间隔一个空格。
三元运算符
就如同它的名字一样，它需要三个操作数才能完成。
i+i ---> 一元运算符
a+b ---> 二元运算符
num?a:b; ---> 三元运算符
它的语法格式是：
表达式1？表达式2：表达式3；
执行的思路是：
如果表达式1为true，则返回表达式2的值；如果表达式1为false，则返回表达式3的值。
多分支判断语句(Switch case语句)
语法为:
swith(n){
case 1:
执行代码块1,
break;
case 2:
执行代码块2,
break;
case 3:
执行代码块3,
break;
......
default:
剩余的代码;
}for循环语句
for循环：重复执行某些代码若干次，也可称为遍历。
语法结构为：
for(初始化变量;条件表达式;操作表达式;){
循环体(需要执行的代码)
}里面的那三者我也不在这一一具体说明了，相信大家接触久了也都会明白的。
还有一些其他遍历：(1) for in (2)for each (3)for of (4)while (5)do while
之后就是---数组(Array)
数组初识
数组被称为一组数据的集合体，并且里面存放的是有序的数据，它是存储在单个变量下的优雅方式。
构造函数
构造函数有两种方式，一是利用NEW来创建数组，二是利用数组字面量来创建数组。
获取数字长度与索引
数组长度的获取方式：数组名.length(从0开始)
我们可以通过获取数组长度的方式来得到数组的索引值，那样对我们做后续程序有很大帮助。
数组遍历
遍历的意思也就是我们要把数组中所包含的元素都访问一次。通常都是使用for循环来遍历。
函数
函数初识
函数是由function,fnName,().{}组成的代码块。
作用就是为了把函数封装起来，哪里使用哪里调用，既节约成本还节约资源。
函数的命名采用驼峰命名法---第一个首字母小写，剩下的首字母大写
函数的使用
函数的使用分为两步：1，声明函数 2，调用函数
1，声明函数
function 函数名(){
代码块
}函数不调用，自己不执行。
2，调用函数
sayHi(); 调用函数时，小括号绝对不能忘记写。
函数的封装
这个意思就是把一个或者多个功能通过函数的方式封装起来，对外只提供一个我简单的函数接口。
函数的参数
1，函数可以重复相同的代码。
2，我们也能用参数实现函数重复不同的代码。
函数的返回值
函数是做某件事或实现某种功能的.
格式：
function 函数名(){
return 需要返回的结果;
}return 终止函数
return后面的代码不会被执行，它只能返回一个值。
函数的重点---arguments
当我们在运用函数时，不确定到底有多少个参数要传递，我们就可以用arguments来获取，在JavaScript当中，arguments实际上是当前函数的一个内置对象，存储了传递的所有实参。在js当中有且只有函数有arguments对象。arguments[ ]数组只在函数体内定义，在全局代码中无定义。arguments本质上是一个局部变量，在每个函数中会被自动声明且初始化。
我们在日常使用中，可以利用arguments实现很多便利，以此用来节省时间和精力。
JavaScript中的作用域
作用域初识
所谓作用域，就是代码名字在某个范围起的作用和效果。
它的作用就是为了提高程序的可靠性，减少命名冲突。
变量的作用域
根据作用域的不同我们将其分为全局变量和局部变量。
1）全局变量：在全局作用域下的变量，在全局作用下都可以使用的。
2）局部变量：在局部作用域下的变量，在函数内部的变量。
全局变量与局部变量的区别
全局变量只有在浏览器关闭的时候才会销毁，比较占内存；局部变量在我们的程序执行的过程完毕时就会销毁，比较省内存。
作用域链
内部函数访问外部函数的变量，采取的是链式查找的方式来决定去哪个值，采用就近原则。
预解析
变量提升：就是把所有变量声明提升到当前的作用域最前面，不提升赋值操作。
函数提升：把所有函数声明提升到作用域最前面，不调用函数。
对象
对象初识
那肯定有人要问了：什么是对象呢？
答：万物皆可是对象。
比如——现实当中的一本书或是一个人;开发中的一个网页，一个数据库等等，都可以被称为对象。
对象的构成
对象是由属性和方法构成的。属性即为事物的特征，在对象中用属性表示出来；方法即为事物的行为，在对象中用方法来表示。
那我们为什么要用对象呢？
那是因为，当我们要保存一个值得时候，可以使用变量来保存；当我们要保存多个值的时候，我们使用的则是数组；但要想保存一个人的完整信息，就要用对象来写。
如何创建对象
- 利用字面量创建对象;
- (1) 利用对象字面量创建对象
- var ojb = { }； 创建一个空对象
- (2)使用对象
- 调用对象的属性——对象名.属性名/对象名.['属性名']
- 调用属性的方法——对象名.方法名
- (1) 利用对象字面量创建对象
- 使用new Object 来创建对象;
- 利用等号 = 赋值的方式，来添加对象的属性和方法。每个属性和方法之间用‘,’隔开。
- 使用构造函数创建对象
function 构造函数名(){
this.属性名 = 值;
this.方法 = function(){}
};我们在书写的时候要注意函数名要大写，还有要想知道那个是对象，我们的属性和方法前面必须加this。
遍历对象
因为对象没有length属性，所以遍历对象时采用的是for in方法.
语法：
for(变量 in 对象){}内置对象
内置对象是指JavaScript语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是基本而必要的功能(属性和方法)。
内置对象最大的优点就是帮助我们快速开发。
Math对象
初识
Math 数学对象，不是一个构造函数，我们不需要new来调用，直接使用里面的的属性和方法即可。
语法: Math.max(value1[,value2,...]);
Math绝对值和三个取整方法
- Math.PI 求n
- Math.max 求最大值
- Math.min 求最小值
求绝对值
- console.log(Math.abs(1));
- console.log(Math.abs(-1));
- console.log(Math.abs("-1"));
取整的三个方法(当有多个参数时，只返回第一个值)
- Math.floor() 向下取整，往小了取
- Math.ceil() 向上取整，往大了取
- Math.round() 四舍五入,其他数字都是四舍五入，但5较特殊，往大了取
Date日期对象
Date() 日期对象，是一个构造函数，必须使用new来调用创建的日期对象。
格式化日期年月日时分秒
var date = new Date();
获取年:console.log(date.getFullYear());
获取月: console.log(date.getMonth()+1);
//getMonth()获取月份，月间返回小一月，所以要加1
获取日：console.log(date.getDate());
获取周数：console.log(date.getDay());
获取小时：console.log(date.getHours());
获取分钟：console.log(date.getMinutes());
获取秒数：console.log(date.getSeconds());时间戳
计算机的起始时间是从1970年1月1号开始的。
1，通过valueof() getTime()
2，最简单的写法：
var date1 = +new Date();
console.log(date1)删除与添加数组元素
1，添加数组元素
1）push() 推，写在数组末尾添加一个或多个数组元素，原数组会发生变化。
2）unshift() 在数组开头添加一个或多个数组元素，原数组会发生变化。
2，删除数组元素
1）pop() 删除数组中最后一个数组元素，原数组会发生变化。
2）shift() 删除数组中的第一个元素，原数组会发生变化。
根据位置查找字符
1，chatAt(index) 根据位置返回字符，如果找不到则返回第一个字符.
2，charCodeAt(index) 返回相应索引号的字符的ASCII值，以达到判断用户按下了哪个键的目的
DOM
DOM初识
文档对象模型(Document Obiect Model，简称DOM)是W3C组织推荐的处理可拓展标记语言(HTML,XML)的编程接口.
DOM树
(1) 文档：一个页面就是一个文档，DOM使用Document表示。
(2) 元素：页面中的所有标签都是元素，DOM中使用element表示
(3) 节点：网页中所有内容都是节点(标签、属性、文本、注释等等)，DOM中使用Node表示。
获取元素
1，获取单个元素
——getElementById()返回一个特定匹配的ID元素，由于元素的ID在大部分情况下是独一无二的，这个方法自然而然你的成为了一个高效查找特定元素的方法。
如果需要查找那些没有ID的元素，可以通过考虑CSS选择器，使用querySelector().
2，获取多个页面元素
1）getElementByTagName()
2）使用添加父级的方式
3，利用类名获取元素
——getElementByClassName()
4，H5提供的方法
1）getSelector() 获取第一个此类元素
2）getSelectorAll() 获取到一个整体的标签元素
5，获取特殊元素
1）获取body元素
var bodyEle = document.body();
console.log(bodyEle);2）获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);6，修改元素内容
1）element.innerText
2）element.innerHTML
7，修改元素样式
1）element.style
2）element.ClassName
节点操作
1，父节点操作——node.parentNode
找父节点的父节点——node.parentNode.parentNode
2， 子节点操作——parentNode.chridNodes
3， 第一个子节点和最后一个子节点
-- 第一个子节点
- parentNode.firstChild
- parentNode.firstElementChild
-- 最后一个子节点
- parentNode.lastChild
- parentNode.lastElementChild
4， 兄弟节点
-- 获取元素节点和文本节点等
- node.nextSibling 获取下一个兄弟节点
- node.nextElementSibling 获取上一个兄弟节点
5， 创建和添加节点
1）创建节点 —— document.creatElement("创建的元素");
var li = document.creatElement("li");2）添加节点 —— node.appendChild("Child");
6， 删除子节点
删除元素——node.removeChild('child');
ul.removeChild(ul.children('li'));7，克隆节点 —— node.cloneNode(); 它只克隆父元素的第一个子节点.
DOM事件流
1，DOM事件流初识
事件流描述的是从页面中接收事件的顺序;事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就叫做DOM事件流.
2，DOM事件流可分为三个阶段
1）事件捕获阶 2）当前目标阶段 3）事件冒泡阶段
3， 事件对象
事件对象发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就叫事件对象event，
返回事件对象
| 事件对象属性/方法 | 说明 |
| e.target | 返回触发事件的对象标准，相当于this |
| e.srcElement | 返回触发事件的对象，非标准 |
| e.type | 返回事件的类型 |
| e.preventDefault() | 该方法阻止默认事件 标准 |
| e.returnValue | 该属性阻止默认事件 非标准 |
| e.stopPropagation() | 阻止冒泡 标准 |
| e.cancelBubble | 阻止冒泡 非标准 |
阻止默认事件—— e.preventDefault
阻止冒泡 —— e,stopPropagation();
鼠标事件
1，鼠标右键菜单—— contextmenu
context 上下文 menu 菜单
2，鼠标事件对象
1）clientX clientY
返回的是鼠标相对于浏览器窗口我们的可视区域的x坐标和y坐标.
2）pageX pageY 页面
返回的是鼠标相对于页面的x坐标和y坐标.
3）screenX screenY
返回的是鼠标相对于屏幕的x坐标和y坐标.
键盘事件
1) onKeyup 当某个键盘按键被抬起时触发.
2）onKeydown 当某个键盘被按下时触发.
3）onKeypress 当某个键盘按键被按下时触发，它不识别功能键.
BOM
1， BOM初识
BOM(Browser Object Model)即浏览器对象，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心是window.
BOM由一系列相关的对象构成，并且对每个对象都提供了很多方法和属性.
BOM比DOM更大，它包含DOM.
2， window对象
window对象是浏览器的顶级对象，它具有双重角色.它不仅是一个浏览器窗口的一个接口，它还是一个全局对象，是一个定义在全局作用域中的变量、函数都会变成window对象的属性和方法.
window常见事件 ------ onload加载事件
load等页面内容全部加载完毕，包括页面dom元素、图片、flash、css等.
三种创建元素的方式
1）document.write() 2)innerHTML 3)creatElement()
禁用/禁止
· 1）禁用鼠标右键
2）禁止打开控制台
3）禁止选中文本
4) 禁用按钮
1) document.addEventListener('contextnenu',function(e){
e.preventDefault()
})
2) window.onKeydown - window.onKeyup - window.onkeypress - function(){
window.event.returnValue - false;
return false;
}
3) document.addEventListener('Selectstart',function(e){
e.preventDefault();
})
4)this.disabled = true;定时器
1，setTimeout()与setInterval()
2， 清除定时器
1）setTimeout()
2) setInterval()
事件循环(event loop)
初识——由于主线程不断地获取任务，执行任务，再获取再执行，这种机制被称为事件循环.
JS执行机制总结：
（1）JS把我们的所有的任务分为同步和异步
（2）同步是先放到主线程执行栈，异步任务首先交给我们异步进程进行处理
（3）异步任务被触发之后放到主线程执行栈里面去执行.
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性称之为location对象。
location常用的属性
- location.href 返回或者设置整个url
- location.host 返回主机或者域名
- location.port 返回端口号
- location.pathname 返回路径
- location.search 返回参数
- location.hash 返回片段
location常见方法
- location.assign()
- location.replace()
- location.reload()
navigator对象——略
history对象
window对象给我们提供了一个history对象，与浏览器的历史记录进行交互，该对象包含用户(在浏览器窗口)访问过的URL.
1）back 作用：可以后退
2）forword 作用：可以前进
3）go(参数) 作用：前进后退功能，前进参数是1，后退参数是-1.
网页特效
1，offset系列属性
1）element.offsetParent
-- 返回作为该元素带有定位的父级元素，如果父级没有，则返回body
2）element.offsetTop
-- 返回元素相对带有定位父级元素上方的偏移
3）element.offsetLeft
-- 返回元素相对带有定位元素左边框的偏移
4）element.offsetWidth
-- 返回自身包括padding、border、content区的宽度，返回数值不带单位
5）element.offsetHeight
-- 返回自身包括padding、border、content区的宽度，返回数值不带单位
2，client系列
1）clientWidth/Height
-- 获取值时，不包括边框的宽度，吃padding的值
2）clientTop/Left
-- 获取值时，只获取边框的值
3，scroll系列 -- 滚动
1）element.scrollTop
-- 返回被卷上去的上侧的位置，返回数值不带单位
2）element.scrollLeft
-- 返回被卷上去的左侧距离，返回数值不带单位
3）element.scrollWidth
-- 返回自身实际的宽度，不包含边框值，返回数值不带单位
4）element.scrollHeigth
-- 返回自身实际的高度，不含边框，返回数值不带单位
动画原理
核心原理：通过定时器(setInterval)来实现
实现原理：先获取到盒子的当前位置，然后让盒子在当前的位置上加上1px的移动距离，同时利用定时器不断重复这个操作，再加上一个定时器结束的条件即可.但要注意的是，被移动的元素必须添加定位，才能使用element.style--left.
缓慢动画
缓慢动画就是让元素的运动速度有所变化，最常见的是让速度慢慢的慢下来.
算法：（目标值 - 现在的位置）/ 10 来作为每次移动的距离步长
假设目标值是100，初始值是0
第一次：(100 - 0) / 10 = 10
第二次：(100 - 10) / 10 = 9
第三次：(100 - 9) / 10 = 8
停止的条件是：让当前盒子位置等于目标位置就停止定时器
移动端网页特效
1，移动端touch触屏事件
1）touchstart
-- 手指触摸到一个DOM元素时触发
2）touchmove
-- 手指在一个DOM元素上滑动时触发
3）touchend
-- 手指从一个DOM元素上移开时触发
2，三个常见对象
1）touches
-- 正在触摸屏幕的所有手指的列表
2）targetTouches
-- 正在触摸当前DOM元素上的手指的一个列表
3）changedTouches
-- 手指状态发生了改变的列表，从无到有、从有到无的变化
正则表达式
初识——正则表达式是用于匹配字符串中字符组合的模式，正则表达式也是对象
正则表达式对象
- RegExp.exec 通用的匹配模式
- RegExp.global 正则表达式是否全局匹配
- RegExp.ignoreCase 正则表达式是否区分大小写
- RegExp.lastIndex 下次匹配的起始位置
- RegExp.source 正则表达式的文本
- RegExp.test 检测一个字符串是否匹配某个模式
- RegExp.toString 把正则表达式转换为字符串
正则表达式中的特殊字符
1.边界符
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结束)
2.字符类 [ ]
表示有系列的字符可以选择，只要匹配其中以就可以了.
3.量词符——用来设定某个模式出现的次数
| 量词 | 说明 |
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n 次或更多次 |
| {n,m} | 重复n到m次 |
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
