一、JavaScript是由三部分组成
1.ECMAScript--核心语法，以后JS不管做什么操作都离不开它。
2.DOM(Document Object Model)文档对象模型，可以用于js操作HTML和css。
3.BOM(Bowser Object Model)浏览器对象模型，可以用来操作浏览器。
二、概述
概念：javascript简称JS，是一个运行在客户端浏览器的“解释型”、“弱类型”、“面向对象”脚本语言。
1.编译型：在执行之前需要先检查语法是否正确，如果不正确是直接不允许执行的，语法严格。
例如：Java、C语言、C++
解释型：在运行之前不需要先检查语法是否正确，直接执行，但是碰到错误救护立刻停止执行，相对比较自由。
例如：javascript、PHP、Node.js
2.弱类型：变量保存的数据是可以随意的，数据类型是有数据决定的。
强类型：变量保存的数据是由数据类型来决定的。
3.面向对象：对象名.属性名 对象名(方法名)()
4.特点：
a.可以使用一切编辑工具编写代码
b.解释型
c.弱类型
d.面向对象
e.可以做一切css不能完成的效果（轮播、选项卡.....）
三、js的使用
1.使用方式：
a.直接在HTMLl页面写上<script></script>标签，里面就可以直接书写js代码。
b.在HTML页面中引入<script scr="js文件路径"></script>
注意：一旦有了src属性，script标签里面就不可以再写代码；一般放在body里面，body的最后一行。
2.js输出的方式：3种
a.打桩输出；在控制台输出日志，在控制台console里面显示日志；
console.log(想要查看的内容)
b.在页面上输出日志；显示在浏览器页面上，支持识别标签，如果绑定了点击事件，会把原页面的html和css覆盖掉。
document.write(想要查看的内容)
c.在弹出框输出日志；在一个浏览器自带的弹出框中输出日志，但是会卡住页面，用户不进行操作只能看到白板。
alert(想要查看的内容)
3.变量和常量
a.变量，创建之后，值可以再更改。
使用：以后反复使用到的数据，都是提前将它保存再一个变量中，以后使用只需要写变量名即可，就相当于在使用这个数据。
语法：var 变量名=值；
特殊：
1.变量名其实不是随意的
a.不能以关键字命名
b.不能以数字开头
c.建议使用下划线和小驼峰命名法命名
2.如果变量名是name
不管里面保存的数据是什么数据类型，都会悄悄转成“字符串”
3.多个变量创建时可以简写
var 变量名1=值1，变量名2=值2；
b. 创建之后，值不可以再修改，只能设置1次
语法：const 常量名=值；
4.算术运算符
“+ - * / %”
注意：%读作取余，两个数相除不取商取除不尽的余数。
作用：
a.判断奇偶性：num%2==0;说明这个数是偶数，结果为1代表这个数为奇数。
b.获取一个数字的倒数第n位
例如：1234%10------4
特殊：其实运算符具有隐式转换，默认转为数字运算
a.+运算：如果左右两边但凡出现了一个字符串，那么就会自动转换为字符串，+运算变成了拼接。
b.-*/%:字符串也可以变成一个数字，但是前提是必须为“纯数字”组成的字符串才可以，如果包含南非数字字符串，结果直接转为一个Nat A Number（NaN）。
注意：NaN不是一个有效数字，但确实是一个数字类型。
a.参与任何的算术运算结果都是NaN
b.参与任何比较运算结构都是false
5.数据的类型：分两类
a.原始类型、基本、值类型
1.Number--数字，取值有无数个。
2.String--字符串，取值无数个，必须写单引号或者双引号。
3.Boolean--布尔，取值2个true/false,往往用于判断比较的条件处使用。
4.Undefined--未定义，取值1个Undefined，创建了变量没赋值，做大部分操作会报错。
5.Null--空，取值1个Null，释放内存，节约存储空间。
b.引用、对象类型：11个
6.数据类型的转换：不同的数据类型做操作可能出来的结果是不一样的。
Number+String=String Number+Number=Number
注意：js获取页面上的一切数据，数据类型都是“字符串”。
查看数据类型：typeof(想要查看内容)
1.算数运算符的隐式转换：不需要输出看也知道最后的结果是什么。
默认悄悄地将左右两边的东西，转为一个数字在运算。
特殊：
a.+运算，碰上一个字符串左右两边都会转为字符串，+运算就不再是+运算，而是字符串拼接。
b.别的数据类型也可以转为数字。
例如：ture-1 false-0 undefined-NaN null-0
c.其实-*/%,字符串也可以转为1个数字，前提是一个“纯数字”组成的字符串，但凡包括一个非数字字符就会变成一个NaN。
d.注意：NaN不是一个有效数字，但确实是一个数字类型。
1.参与任何的算术运算结果都是NaN
2.参与任何比较运算结构都是false
判断一个数据的类型是否为NaN
！isNaN(x) ture---是一个数字 false---是NaN
2.显示、强制转换：隐式转换出来的结果不是我们想要拿到的，需要用一些方法强制转换为我们需要的类型再进行操作。
a.转字符串：页面上的一切数据都是字符串
var str=x.toString();
X不能是undefined或者null，它们不能做任何·操作
b.转数字:2种
1.paeseInt(Str/Num);整数型
执行原理：专门为字符串和小数转为整型的数字准备的，从左往右一次读取每个字符，碰到非数字字符就停止转换；如果一来就碰到非数字字符，则结果是NaN。
2.parseFloat(Str);浮点型
执行原理：专门为字符串和小数转为浮点型的数字准备的，从左往右一次读取每个字符，认识第一个小数点，碰到非数字字符就停止转换；如果一来就碰到非数字字符，则结果是NaN。
3.Number(x);此方法是万能的，任何人都可以转为数字。
执行原理：此方法完全等效于隐式转换，还不如隐式转换方便，需要多记一个方法，直接x-0;*1;/1;%1;
四、function的基础
概念：函数，称之为方法；需要提前“预定义”，以后可以发“反复使用”的“代码段”，所有的方法都需要提前学习的，是不会忘记的所有可以反复使用。
例如：rotate(360deg)
1.如何使用函数：
a.定义、声明、创建函数
function 函数名(){
若干代码
}
b.使用、调用函数
1.要么再js种程序员直接写死，需要执行的次数；
函数名();
2.交给用户绑定再某个元素上，写上点击事件让用户触发。
<button onclick="函数名()">内容</button>
2.何时使用
a.不希望打开页面立刻执行，需要时在使用或者由用户触发；
b.希望能够反复执行，不用刷新页面；
c.以后任何一个独立的功能体都需要单独封装为一个函数；
d.函数的地位非常高，随时随地考虑是否能封装为一个函数，尤其是重复的代码；
e.函数内的一起内存，函数调用完毕之后会自动释放；
3.带参数的函数
a.创建：形参，形式参数；其实就是一个变量，但不需要写var,而且默认也没有保存任何值，默认值为undefined。
b.语法：function 函数名(形参1，形参2...){
函数体
}
c.使用：实参，实际参数，真正的值，需要调用时再传入实际的参数。
语法：函数名(实参1，实参2...)
d.特殊：
1.传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应；
2.不一定要带参数的函数才是好函数，具体情况需要具体分析：
a.如果函数体是固定的-----普通函数
b.函数体希望根据传入的实参不同，做的略微不同-----带参数的函数
五、分枝结构
1.程序的流程控制语句：3种
a.顺序执行
b.分枝结构
c.循环结构
2.比较运算符：6种
> < == <= >= !=
一般用于做判断或者比较的
结果：一定是一个布尔值；true/false
强调：如果需要判断多个条件，绝不能写18<age<65
解决：逻辑运算符
3.逻辑运算符：3种
&&:与、且；要求全部条件都满足，最后的结果才是true，只要一个条件不满足则为false。
||：或；要求全部条件都不满足，最后结果为false，有一个满足则为true。
！：颠倒布尔值。
4.分枝语法：
a.一个条件一件事；不满足不做； if(条件){ }
b.一个条件两件事；满足做第一件，不满足做第二件； if(条件){ }else{ }
c.多个条件多件事；满足谁就做谁 if(条件){ }else if(条件){ }
六、循环结构
概念：反复执行“相同或相似”的操作
循环三要素：
1.循环条件：开始--结束，循环的次数；
2.循环体：做的操作时什么；
3.循环变量：记录这当前再那一次执行，而且他不断的变化，往往都会向着不满足条件进行。
1.while循环
a.语法：var 循环变量=几；
while（循环条件）{
循环体；循环变量变化；
}
b.执行原理：首先创建了循环变量然后判断条件，如果满足条件就满足，则做1次循环体操作；并不会退出循环，回头继续判断条件是否满足，满足则再做1次操作。循环是一次次执行的。
c.特殊：
a.有时候不知道从何时开始，判断何处结束，是一个死循环，永远不会停下来的循环。
使用：不确定循环次数的时候。
while(true){
循环体；
}
b.退出循环语句：break；只能在循环中使用，多半搭配死循环使用。
d.随机数公式：parseInt(Math.random()*(max-min+1)+min)
2.for循环
a.语法
for (条件1；条件2；变量变化){
循环体；
}
b.死循环
for (；；){
循环体；
}
3.while和for循环的区别*****
a.语法上有区别，但是两者都能做到相同操作。
b.一般来说我们不确定循环次数的时候使用while循环死循环。
c.一般能确定循环次数的时候就使用for循环，更简洁大部分情况下都会使用它。
4.函数和循环的的区别******
a.函数；程序员或用户触发几次就执行几次，调用几次用几次；
b.循环：几乎是一瞬间就做完了，都可以反复执行。
七、数组基础
概念：数组是创建一个变量可以保存多个数据的集合。
数组都是线性排列的，除了第一个元素，每个元素都有唯一的前驱元素；除了最后一个元素，每个元素都有唯一的后继元素；每个元素都有一个自己位置，称之为下标，下标是从0开始的，到长度最大值-1。
1.创建数组的方式：2种
a.直接量方式：
var arr[];空数组
var arr[数据1，数据2...]；
b.构造函数方式：
var arr=New Array();空数组
var arr=New Array(数据1，数据2...)；
2.获取数组中的数据
数组名[下标]；
3.添加、替换
数组名[下标]=新值；
下标处没有元素是添加新元素，有元素就是“替换”。
4.数组具有三大不限制
a.不限制元素个数；
b.不限制元素类型；
c.不限制元素的下标越界；
如果获取元素下标越界了，返回的是undefined；
如果添加元素，下标越界了，会得到一个稀疏的数组，导致下表不连续，如果搭配上循环去遍历每一个元素，会得到很多的undefined。
5.数组的长度：数组中唯一的属性，数字名.length，获取当前数组的长度，等于最大下标+1。
三个固定套路：
a.获取倒数第N个元素：arr [arr.length-n];
b.始终向末尾添加元素：arr [arr.length]=新值；
c.缩容删除倒数N个数:arr.length-=n;
6.往往很多情况我们不会拿出某个元素来使用，而是拿出所有的元素俩进行“相同或相似”的操作。
遍历数组：把数据中的每个元素拿出来执行相同相似的操作。
公式：for (var i=0；i<数组名.length；i++){
console.log(数组名[i]);
}
八、DOM操作
概念：DOM(Documnet Object Model)文档对象模型，专门用于操作HTML文档的，提供了一些属性和方法。
1.DOM树概念：是将HTML看作了一个倒转的树状结构，但是树根不是HTML标签而是Document对象。
document对象：不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document
DOM会将页面上的每个水元素、属性、文本、注释都当作一个DOM节点、元素、对象
2.查找元素：4种方式
a.通过ID查找元素
语法：var elem=documnet.getElementById("id名")；
特殊：
1.返回值，找到了返回的是一个当前找到的DOM元素，没有找到返回一个null，做了别的操作就可以会报错。
2.找到了多个相同的id，那么只会返回第一个
3.一次只能获取一个元素，也只能操作一个元素
4.直接写id也可以找到元素
b.通过标签名查找元素
语法：var elems=document.getElementsByTagName("标签名")；
特殊：
1.返回值，找到了返回的是一个"类数组"集合，只能操作DOM元素，（和数组相似，都能使用下标length,都能遍历）没找到就会返回一个空集合。
2.js不能直接操作DOM集合，只能操作DOM元素。
解决：要么拿到某一个元素，要么就使用遍历拿到每一个元素。
3.不要一定要从document开始找，从document开始找会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个都元素下面的元素。
c.通过class名查找元素
语法：var elems=document.getElementsByClassName("class名")；
特殊：
1.返回值，找到了返回的是一个"类数组"集合，只能操作DOM元素，（和数组相似，都能使用下标length,都能遍历）没找到就会返回一个空集合。
d.通过关系查找元素，前提是必须先找到一个元素才可以调用关系网
父元素：elem.parentNode;
子元素：elem.children; 找到之后是一个集合
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟:elem.previousElementSibling;
后一个兄弟：elem.nextElementSibling;
3.操作元素：前提是找到元素才能操作。3种方式
元素：<标签 属性名="属性值" style="样式">内容</标签>
a.内容
1.innerHTML:获取和设置开始标签到结束标签之间的内容，支持识别标签。
获取：elem.innerHTML；
设置：elem.innerHTML="新内容"；---字符串，页面上所有都是字符串。
2.innerText:获取和设置开始标签到结束标签之间的内容，不支持识别标签。
获取：elem.innerText;
设置：elem.innerText="新文本"；
3.Value：专门为input的value值设置的
获取：input.Value；
设置：input.Value=“新值”；
b.属性
1.旧版本
获取属性值：elem.getAttribute(“属性名”)；
设置属性值：elem.setAttribute("属性名"，"属性值")；
2.简化版
获取属性值：elem.属性名；
设置属性值：elem.属性名=“属性新值”；
c.样式：内联、内部、外部
js是操作内联样式的，不会牵一发东全身，内联样式优先级别最高。
获取：elem.style.css属性名；
设置：elem.style.css属性名=“css新属性值”；
特殊：
1.css属性名，有横线的地方需要变为小驼峰命名法；例如：border-radius borderRadius
2.只能获取内联样式
d.绑定事件
elem.on事件名=function(){
操作；
this关键字；
}
注意：
1.this关键字只能用于事件内；
2.如果单个元素绑定事件：this代表当前的这个元素；
3.如果多个元素绑定事件：this代表当前触发事件的元素；
4.总结：
获取：往往是用于判断和比较；
设置：就是增加或者修改元素；
5.eval("8*8");计算字符串，目的是脱掉字符串的外套，进行数字算术运算。
