js的组成
ECMAScript（ES） : 负责翻译，为js的核心，解释器。
DOM(Document Object Model 文档对象模型)：赋予js操作HTML的能力，document。
BOM(Browser Object Modal 浏览器对象模型)：赋予js操作浏览器的能力，window，不兼容不建议使用。
1. js引入方式，注释与输出方式
js引入方式
<!-- 行内式 --> <button onclick="alert('helloworld')">点击</button>
<!-- 嵌入式 -->
<script>
// 写js代码
alert("第一个嵌入式")
</script>
<!-- 外联式 --><script src="./test.js"></script>
.js注释
<script>
// 单行注释 ctrl+/
// 多行注释 /* */
</script>
输出方式
窗口输出alert()
控制台输出console.log()
prompt() 方法用于显示可提示用户进行输入的对话框
document.write(“<strong>Hello</strong>”);浏览器输出
2.变量
变量是用来装东西的，它是数据的容器，我们可以通过变量名获取数据，修改数据
1.变量的声明 var关键字 ，variable
2.变量的赋值
3.变量的初始化
例：var age=10;
命名规范
// 变量命名使用规则的 不能随便命名
// 组成：变量名是以字符 数字 下划线 美元符号组成
// 不能以 数字开头
// 不能是关键字和保留字
// 严格区分大小写
// 变量定义最好有意义
驼峰命名法
3.js数据类型
js常用的基本数据类型包括undefined、null、number、boolean、string；
js的引用数据类型也就是对象类型Object，比如：Object、array、function、data等；
4.number与进制之间的转化
// 二进制0b开头
// 八进制0o开头
// 十六进制0x开头
// 十进制
1. 隐式转换 减乘除均可将字符串(只有数值)转换为number
2.parseInt( )-->转换的是字符串 而且转换出来的是一个整数
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN整数
3.parseFloat( ) 可以将字符串类型转数字
4. 利用Number函数Number( ) 布尔类型 string null 转换成数字
区别：
1.Number()和parseInt()
当转换的内容包含**非数字**的时候，Number() 会返回NaN(Not a Number)
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN整数
2.parseInt( )和parseFloat( )
parseInt( )：转换出来的是一个整数
parseFloat( )：可以转换出来浮点数（通俗来说就是小数）
5.字符串类型
字符串的定义
方法1 单引号和双引号没有区别！！
var str = 'helloworld!!!';
方法2 new String()运用构造函数
var str = new String('helloworld!!!')
字符串的长度
lenght
字符串具有不可变性
字符串的提取 由位置求出字符串中的字符
1. str[index] index从零开始
2. str.charAt(index)
字符查找（根据字符返回位置）
obj.indexOf('value1',value2)
value1代表查找的数 value2 代表从索引值为value2的位置开始查找;
由位置求出字符串中的字符
charAt(index)
charCodeAt(index)是将字符转换成Ascii
String.fromCharCode(num) 将Ascii转为字符
字符串的合并concat()
截取 substr（num1，num2）
第一个参数为从索引号为0 开始
第二个参数取几个字符
-1是在最后一个位置 -2表示从倒数第二个位置开始截取
字符串的替换 replace()
字符串里面的字符进行替换 replace(" ", "")
字符串转换为数组 使用split转换成数组
str.split(',')
将变量的类型转换为字符串类型的几种方法
1.隐式转换 只能将数字类型转换为字符类型 +
2.显示转换 变量.tostring() String(变量名) 可将任意类型转换为string类型
字符串的转义字符
\n=换行
\\=\
\"
\'
\t==tab
\b==空格
6.布尔类型
布尔类型分为true false
true 真 false 假
布尔类型与数字相加时 true为1 false为0
与字符串相加时 会变成字符串 进行字符串的相加
转化为布尔类型
boolean(变量名)
在布尔类型转换的时候，如果不是0，'',NaN,null,undefined,其他转换出来的都是true
7.undefined 未被定义的意思，这是一种数据类型
8.null 空的意思 这也是一种数据类型 不占用内存空间
9.没有任何的变量值叫做自变量 console.log(18)
10.js运算符
1.算数运算符 + - * / %
表达式:由数字、运算符、变量等能够求得数值 var num = 1 + 1;
true false 为1 0 null 为 0 undefined为 NAN
当字符串内有非数字时，除了相加+，得到的值均为NAN
记住浮点数超过的位数截取之后不影响它和整型的计算
在编程语言里面进行计算，是要先将十进制的转换为二进制 二进制 + 二进制 = 二进制 => 十进制！！！ 在javascript中最大值的存储位数为53位 需要将多余的位数进行截取，截取之后才能进行二进制相加
2.递增递减运算符
有：num++ num-- ++num --num
num++ ++num 意思均为 num=num+1
区别就是 ++num先进行计算++，然后再赋值。num++，先赋值再进行++
num-- --num 意思均为 num=num-1
区别就是 --num先进行计算--，然后再赋值。num--，先赋值再进行--
3.比较运算符
比较运算符有 > < >= <= ==（等于）!=(不等于) === !==
比较运算符分两种
1.关系运算符 > < >= <=
2.相等运算符== != === !==
===（=== 三个等于号，不仅要判断数值，而且要判断数据类型！！！）
!==(与===相反 )
4.逻辑运算符
逻辑运算符 包括 1.&& 2. || 3. !
1.&& 并且 and(同true为true 有false为false)
如果想要整体打印出true， &&两边都要为true，如果有一边为false，那么打印出来就是false.
2. || 或者 or(有true为true 同false为false)
如果想要整体打印出true,||两边只要有一个为true就打印true,如果两个都为false
3. ! 非 not
5.逻辑运算符（短路）
看数值转化为boolean 为true false
1. 数字 && 数字 数字 && 字符串
2. 数字 || 数字 数字||字符串
1）逻辑与&&(反假不返真)
如果表达式1结果为真，则返回表达式2
如果表达式1结果为假，则返回表达式1
2）逻辑或||的短路运算
如果表达式1为真，则直接返回表达式1
如果表达式1为假，则返回表达式2
6.赋值运算符
+= -= *= /= %=
7.按位运算符
按位运算符：1.左移 << 位数 右移 >> 位数 2. & |
1.左移 << 位数 右移 >> 位数
转换为二进制 然后向左或向右移动 再转换为10进制
例如 1的二进制 0000 0001 向左移动两位 0000 0100 值为4
2.& 的意思就是如果都为1则为1，如果有一个不为1，则为0
第一个数为0000 0001 第二个数为 0000 0101 最终为0000 0001;
| 的意思就是如果都为0则为0，如果有一个不为0，则为1
最终为 0000 0101；
8. 运算符优先级
1.括号();
2.一级运算符 ++ -- ！
3.算数运算符 + - * / %
4.关系运算符 > < <= >=
5.相等运算符== != === !==
6.逻辑运算符 && || 先 && 后 ||
7.赋值运算符 += -= *= /= %=
11.条件判断方法
1.if else条件
2.switch
switch 语法不一样，执行性能更高
switch (key) {
case value:
break;
case value:
break;
default:
break;
}
key和value 后面的数值不仅要一样，而且类型也要一样！！！ ===
break 断开！！！ 每一个分支都要加上break
default 没有匹配的 则执行default
3.for循环语句
4.for与if结合
5.while语句
6.do while 语句
7.关键字 continue 作用：此条件达成，跳出本次循环
8.break 执行break后 跳出包含他的整个循环;不是只跳过此次循环；
12 函数
函数的定义
函数是就是在它的内部定义一些代码，聚和一下代码。
封装了一段可以被重复调用执行的代码块。通过代码块可以实现大量代码的重复使用！！
函数的使用
声明函数
调用函数（函数不能自己调用）
声明函数与调用
声明函数
1:常规写法
//函数的写法
function run{
alert("常规写法") //这里是你函数的内容
}
//调用
run()
2.匿名函数写法
var run = function(){
alert("这是一种声明函数的写法,左边是一个变量,右边是一个函数的表达式。
  意思就是把一个匿名函数的表达式赋值给了一个变量myrun,只是声明了一个变量指向了一个函数对象")//这里是你函数的内容
}
//调用
run()
3:将方法作为一个对象
//作为对象方法,函数写法,这里创建了两个函数外面用{}包裹起来
var Text = {
run1 : function(){
alert("这个必须放在一个对象内部,放在外边会出错")//这里是函数内容
},
run2 : function(){
alert("这个必须放在一个对象内部,放在外边会出错")//这里是函数内容
}
}
Text.run1()//调用第一个函数
Text.run2()//调用第二个函数
4.使用关键词new声明
var demo = new Fuction('')
5.自执行函数
（函数）()
(function() {
console.log("我真的不想上班！！！")
})()
//(函数())
(function() {
console.log("我真的不想上班！！！")
}())
//!函数()
!function() {
console.log("我真的不想上班！！！")
}()
//~函数()
~function() {
console.log("我真的不想上班！！！")
}()
//*函数()
*function() {
console.log("我真的不想上班！！！")
}()
当函数声明时，参数称为形参，而且使用变量的形式！！！两个参数之间用逗号隔开！！！
在函数的调用时，参数称为实参，可以使用变量或者字面量
超出形参数目的实参不传递其值。
如果没有对应的实参（实参数目少于形参数目）传入，其值为undefined。
函数与函数之间可以相互 嵌套 但是 a嵌套b b在嵌套a 则会形成死循环
当函数被当做参数时，函数有参数加括号，无参数不加括号
当函数被调用时，无论有没有参数，都加括号
return 返回的意思
return会终止当前函数的执行，下面的代码不再执行！！！
arguments 不是一个真正的数组 但是他可以 arguments[]取值 arguments.length;
当实参的个数比形参多时 可以通过arguments调用
13 js作用域与预分析
1.分为全局作用域 局部作用域
全局作用域：整个script 标签 或者js文件为全局作用域
局部作用域 被函数包裹 只在函数声明赋值 等 为 局部作用域
js是单线程语言，一旦出错，下面的代码不再执行！！！
js是没有块级作用域的
2作用域链
内部函数查找外部函数的变量，采用的是链式查找的方式
链式查找遵循的基本原则是,向上查找，就近原则
3.预解析
预解析 js引擎会把js内的 var(变量) 和 function(函数)提到作用域的最前面
函数的提升 function demo() {}（把demo函数提升到前面） var demo = function() {}（只会把demo提升到前面）
代码执行 从上到下顺序执行
变量提升是提升到当前的作用域的最前面！！
如果函数中没有使用var定义变量，外部也没有这个变量，则这个变量为全局变量
var a=b=c=9为 c=9; b=c var a=b;
14对象
1.概念
在javascript中，对象是一组无序的相关属性和方法的集合。所有的事物都是对象。对象是由属性和方法构成的！！！
属性: 事物的特征，在对象中用属性来表示 （名词） name sex
方法: 事物的行为，在对象中用方法来表示！！（动词） rum like
数据类型:object对象
2.创建对象方式
方式1： var 对象名 = { key:value, key:value, key: function(){}//方法}
方式2：var 对象名 = {}
var 对象名 = {} //声明对象
对象名.key =value;//添加对象的属性和行为
方式3：new Object();
var 对象名 = new Object(); //声明对象
对象名.key = value;//添加对象的属性和行为
方式4：运用构造函数来创建对象
var obj1 = new Person('zhangsan', 19)//调用函数，创建对象
function Person(name,age){//创建函数
this.name = name;
this.age = age;
this.sayHello =function(){
alert('你好 世界');
}
}
obj1 称为实例对象！！！
3.调用对象
方法1： 属性：对象名.key; 方法： 对象名.key()
方法2； 属性：对象名['key'] 方法： 对象['key']() //执行方法
4.对象的遍历
使用for ( var key in 对象名 ) {}
此时对象的调用为console.log(obj[key]) key无 ''号了
console.log(obj.key)不能够这样写 obj没有 key属性
15.Math 与 Date
Math第一个数学对象，不是一个数学函数
构造函数实例化对象是使用new的方式！！！
Math的属性有 取最大值:max() 取最小值：min() 取圆周率PI
取绝对值 abs() 向下取整数 floor() 向上取整数 ceil() 四舍五入round()
取随机数 random();0<=x<1;
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
Date定义
var date = new Date(2020, 3, 18,10,12);
var date = new Date("2020-03-18 10:12")
//获取当前的年份 getFullYear()
☆☆☆☆☆☆☆☆☆☆☆
//获取当前的月份 getMonth()获取的值从0开始
//获取当前的日getDate()
☆☆☆☆☆☆☆☆☆☆☆
//获取当前周几getDay() 范围 0~6 0代表星期天
//获取当前的小时 getHours()
//获取当前的分钟 getMinutes()
//获取当前的秒 getSeconds()
16.时间戳
是从1970年1月1日0:0:0 到某一点时间点位置的总毫秒数！！！1秒=1000毫秒
//获取时间戳的方式1 valueOf()
//获取时间戳的方法2 getTime()
//获取时间戳的方法3 使用+new Date()获取 这个+相当于调用valueof
//4. Date.now();
17.数组
1.创建数组
var arr1 = []
var arr2 = new Array(2,3,'你好世界')
2.数组包含的方法
1.arr instancof Array, true就是数组，如果不为true就不是数组
2.Array.isArray(arr) true就是数组，如果不为true就不是数组
3.反转数组 reverse(arr)
4.给数组添加新数值 删除数值
// 1.push函数将10推到数组中去，并且返回arr的新长度 ，压到最后面
// 2.pop 函数将10弹出去， 并且返回弹出去的值！！！弹出去最后面的值
// 3.unshift 压入
// unshift压到数组中的最前面，并且返回数组的新长度
// 4.shift 弹出
// shift 函数将100 弹出去， 并且返回弹出去的值！！！ 弹出去最前面的值
5.数组排序
arr.sort(function(a,b){
return a-b;
})
若a-b则为从小到大
若b-a则为从大到小
6.获取数组中元素的索引值
indexOf(value) 获取到数组中第一个为value的索引值！！！
lastIndexOf(value)获取到数组中最后一个为value的索引值！！！
☆☆☆☆☆☆☆☆
indexOf(value) lastIndexOf(value) 获取不到value时 返回-1;
6. 数组转字符串
方法1 arr.toString()
String(arr)
方式二 使用join函数进行自定义分隔符
7.数组的去重
把数组中的每一项都取出来，
每取一个值，就要和新数组中进行对比，看是否有了这个字符，如果没有直接压入，如果有则抛弃
每取一个值，就要和新数组中进行对比 if(newArr.indexOf(arr[i]） === -1)
18.dome元素的获取
id的获取 getElementById('id名')
class的获取 getElementsByClassName('class名')
标签的获取 getElementsByTagName("li")
document.querySelector("标签名如div .类名 #id名")
document.querySelectorAll()
获得elem的父节点
elem.parentNode;
获得elem的子节点
elem.childNodes 使用此方法的话空格和换行也会算作子节点
elem.children 空格和换行不算 开发中经常使用
识别文本的兄弟
elem.nextSibling 识别elem的下一个的兄弟节点
elem.previousSibling 识别elem的上一个兄弟节点
elem.nextSibling 和elem.previousSibling 都会识别 文本（换行 空格）
不识别文本的(如果没用特殊需求 使用这个)
elem.nextElementSibling 识别elem的下一个兄弟节点
elem.previousElementSibling 识别elem的上一个兄弟节点
19 节点的创建 添加 删除
1.创建节点
方法一
document.createElement('elem') 此elem为新创建的节点 可为 li a 等标签
例如这种形式
var nodeName = document.createElement('li') 及创建了一个新的节点
方法二
var inner = '<a herf='javascript:void(0)'>常见元素的第二个方式</a>'
方法三
document.write('<li></li>')
2.添加节点
在原节点里面添加一个新的节点
添加到最后
elem.appendChild(nodeName)这里没有''号
添加到最前面位置 具体添加到elem.children[i]的前面
elem.insertBefore(nodeName,elem.children[i]) 添加到 elem.Children[i]的前面
3.删除节点
elem(父节点).removeChild（elemChlid被删除的子节点）
4.节点的克隆
elem(被克隆).cloneNode()如果cloneNode不加任何的内容，就只会克隆标签
elem.cloneNode(true) 如果加上true参数，就会进行深度克隆！！！
20特殊标签 的提取
body: document.body
html: document.documentElement
elem.innerHTML 能够识别元素标签
elem.innerText 识别不了元素标签 可设置text值
element.readOnly = true ;只可读
element.disabled =true ;不可改变
elem.firstChild 识别第一个子节点的文本
elem.lastChild 识别最后一个子节点的文本
21事件三要素
事件源 事件类型 事件处理函数
事件源elem -- 按钮等
事件类型elem.onclick -- 单击 双击 聚焦 失焦 属性 。。。
事件处理函数 elem.onclik = fuction (){}
点击 onclick
聚焦 onfocus
失焦 onblur
鼠标移到某元素之上 onmouseover
鼠标从某元素移开 onmouseout
22 属性
在标签中增加或删除属性的值
1.获取属性值
element.getAttribute()
2.用script新增属性并且设置属性名
element.setAttribute('value1' ,'value2')
value1代表属性 value2代表设置的属性值
3.删除属性
element.removeAttribute()
4.自定义属性
1.设置：
在标签上写上 data-* = '' ;
*代表自定义的属性名
2.调用
element.dataset.*
其中dateset是自定义属性的集合
elem.nodeType查看属性
elem.nodeName查看名字
elem.nodeValue查看值
23事件流
事件的监听
elem.addEventListener('click事件类型'，事件处理函数，true/false)
第三个参数为true,那么这个事件处理函数就是捕获阶段！！！
时间监听的删除
elem.removeEventListener('click时间类型'，事件处理函数)
冒泡阶段
冒泡事件，当点击，这个事件会一直向上传递，执行每一个事件函数，直到html
事件流
第一阶段 捕获 捕获的过程是从上到下！！！document html body -- 捕获 你点击的谁就捕获谁！！！ (capture)
第二阶段 目标阶段 查到了是谁点击
第三阶段 冒泡阶段！！！ bubbling 再由目标阶段向上执行
执行过程 执行目标的所有带true的父级（捕获阶段）——>（捕获到目标阶段）
当处于目标阶段时。谁先注册了函数，谁先执行！！！看true 和false 那个在前执行那个->在进行冒泡阶段 执行false 向上执行
24目前为止 所学的所有事件类型
鼠标
click 单击
dblclick 双击
contextmenu 右键单击
selectstart 鼠标不可选中
mouseover 进入father的子元素 也会触发
mouseout 离开 father进入子元素 离开子元素进入father都会触发
mouseenter 进入father只会触发一次！！！，对father里面的子元素进出，不会触发
mouseleave 离开father只会触发一次！！！，对father里面的子元素进出，不会触发
mousemove 随着鼠标的移动执行一直触发
键盘
keyup 键盘松开
keydown 键盘按下
press 键盘按下
位置
window类型
load 加载
window.addEventListener('load',function(){}) 加载
document.addEventListener('DOMContentLoaded' , function(){}) 加载
resize : 监听窗口变化 一旦变化就执行函数
window.addEventListener('resize',function(){})
25事件属性
e.target :可返回事件的目标节点（触发该事件的节点）
e.stopPorparation() :取消冒泡
e.cancelBubble ='true' :取消冒泡
e.preventDefaule();阻止默认
e.keyCode: 键盘事件 表示 ascii
e.client
e.page
e.scree
26.window
window类型
load 加载
window.addEventListener('load',function(){}) 加载
document.addEventListener('DOMContentLoaded' , function(){}) 加载
resize : 监听窗口变化 一旦变化就执行函数
window.addEventListener('resize',function(){})
window 属性
window.innerWidth 表示窗口的大小
window函数
window.setTimeout('function(){}','时间/毫秒') 多少毫秒后执行函数
clearTimeout(被取消的setTimeout)取消setTimeout
window.scroll(X,Y) 可设置X Y改变 滚动卷入窗口的大小
setInterval(function(){},1000)
第一个参数为函数 第二个参数为时间 单位为毫秒
表示每隔多少毫秒 执行一次函数
clearInterval(被清除的setInterval)
27.location 跳转
location.assign（） :能够记录浏览器的浏览历史可以实现后退功能！！
location.replace() 不能够记录浏览历史，也不可以回退！！！
location.reload() 刷新页面
28.三大家族
offset家族的属性
offsetTop 距离 定位的父亲的头部距离 没有按body来计算
offsetLesf
offsetWidth 元素的：padding + border + width
offsetHeight
client家族的属性
clientTop 元素上边框
clientLeft
clientWidth padding + width 除去边框
clientHeight
scroll家族 滚动
1.scroll类型
div.addEventListener('scroll',function(){}） 连续触发
2.scroll属性
scrollWidth 滚动宽度
scrollHeight
scrollTop 文本卷到元素里面的高度
29.触摸事件
//touch 移动端事件
//touchstart 移动端触摸事件
//touchmove 移动端移动事件 这是个连续触发的事件
//touchend 移动端离开事件
//e.targetTouches[0].pageX 手指点击的x轴坐标
