day 01
一、 javaScript简介
1.浏览器端：环境
2.编译型
3.强攻型
4.面向对象
5.特点
二、如何使用JS
1.使用方法(两种)
2.输出方式
三、变量(创建后可以修改)
1.变量名其实不是随意的
2.如果你的变量名是name，不管保存的数据类型是什么，都会悄悄转化成字符串
3.变量名不能是关键字
4.变量名可以只创建，不赋值，默认值是undefind
5.如果多个变量连续创建。简写：var 变量名=值，变量名=值
四、常量
创建后不允许更改
比如：pi
语法：const 常量名=值
五、数据类型(分两大类)
1.原始/基本/值类型(5个)
(1).number
数字：取值有无数个，而且数字就是直接写，不用加任何东西，颜色是蓝色。
(2).string
字符串：取值有无数个。
(3).boolean
布尔类型：取值只有两个，分别是true和false
(4).null
空，用来释放变量，释放内存。
(5).undefind
取值只有undefind,查看数据类型：typeof(变量).
2.引用/对象(有11个，可以理解为有11个对象)
六、运算符
1.算数运算符
(1).%
取余。俗称模，两个数相除不取商，而是取除不尽的余数。
作用：
1.任意数/2，判断奇偶
2.取出某个数的后n位:
1234%10
1234%100
(2).带有隐式转换
悄悄地会将数据类型转换，发生变化，
默认：都是左右转为数字在运算：
true:1;
false: o;
underfind: NAN;
null: o;
NAN: not a number,不是一个数字，但确实是数字类型，不是一个有效数字，没有优点，有两个缺点：
1.参与任何算数运算结果仍然是NAN；
2.参与任何比较运算结果都为false;
(3) + 运算符：如果碰上一个字符串，左右都会转变为字符串
2.比较/关系运算符：> < >= <= ==
结果：是一个布尔值
带有隐式转换：默认左右两边都会悄悄转变成数字再比较大小。
(1)如果左右都是字符串，则会按位pk
每个字符的十六进制的unicode号(十进制ASCII码)。数字0-9< 大写A-Z<小写a-z<汉字。
常识：汉字的第一个字
(2)NAN参与的任何比较运算结果都为false
所以判断是不是NAN采用 !isNAN(x)，结果是true则是有效数字，false则是NAN。
(3)underfind == null
解决:不带隐式转换的等值比较
3.赋值运算符：= += -= /= %=
(1)==赋值
(2)后面5个是升级写法
把运算后再保存回变量本身：i=i+1 --> i+=1.
4.逻辑运算符
5.自增自减运算符：++ --
自增: 固定的每次只能+1
累加：+= 每次加多少由程序员决定。
6.位运算
左移：m<<n,读m左移了n位:翻译m2的n次方。
右移：m>>n,读作m右移了n位，翻译m/2的n次方.
day 02
一、分支结构
1.流程的控制语句(3种)：
(1)分支结构
通过条件判断，选择部分代码
(2)顺序结构
从上向下执行
(3)循环结构
通过条件判断选择是否执行
2.if...else 如何使用
(1)一个条件一个事，满足就做，不满足不做。
if(条件){操作}
(2)一个条件两件事，满足做第一件，不满足做第二件。
if(条件){
操作
}else{
默认操作
}
(3)多个条件，多个事，满足谁做谁。
if(条件1){
操作
}else if(条件2){
操作
}else{
默认操作
}
注意：
（1）else...if这句话想写多少就多少
（2）else可以不写，但是不推荐
（3）分支走了一条件就不会走其他条件
3.switch...case 分支如何使用
语法：switch(变量/表达){
case值1;
操作1;
break;
case值2;
操作2;
break;
default:默认操作
}
特殊：
(1)问题：
默认只要一个case满足后，会将后续所有操作全部做完。
解决：break。
建议：每个case后都跟上一个break。
有的地方也可不加：
1.最后一个操作defult，可以省break
2.如果中间多个条件，做的操作时一样的，可以省略中间。
(2)case在做比较的时候是不带有隐式转换的
(3)defult可省略不写，但是不推荐。
如果不写，条件都不满足的情况，则不会发生
面试题：if和switch的区别
1.switch...case:
优点：执行效率高，速度快：他比较时，case做的不是范围查找，而是等值比较。
缺点：必须要知道最后的结果才可以使用。
2.if...else:
优点：可以做范围判断
缺点：执行效率较慢，速度慢(做范围查找);
建议：
代码开发完后，要做代码优化,要尽量少用if...else，多用switch...case和三目运算。
4.三目如何使用
语法：条件1？操作：条件2？操作2：条件3？操作3；
注意：
（1）默认操作不能省略，省略了会报错。
（2）如果操作复杂，不能使用三目运算。
缺点：只能右一句话，如果操作有多句话，还是推荐使用switch或者if。
二、强制(显性)数据类型转换
1.转字符串(2种方法)
(1)var str=x.tostring()
(2)var str=sting(x),万能的，任何人都可以转成字符串，但绝对不要手动使用，完全等效于隐式转换，还不是 +""
2.转数字(3种方法)
(1)parseInt(str/num)
翻译： parseInt：解析，int:整型
专门用于**将字符串转为整数**。
执行原理：从左向右依次读取转换每个字符，碰到非数字字符就会停止转换，如果一来就不认识，则是NAN，不认识小数点。
（2）parsefloat(str)
翻译： parseInt：解析，ifloat:浮点型
专门用于**将字符串转为小数**。
执行原理：跟parseInt一样，但是认识第一个小数点。
（3）number(x)
万能的，任何人都可以转为数字，但是绝对不要手动使用，完全等效于隐式转换，还不如
3.转布尔
boolean(x)
万能的，任何人都可以转布尔，但是绝对不要手动使用，完全等效于隐式转换，还不如!!x。
重点：只有6个为false:0,"",underfind,NAN,null,false，其余的全是true.
我们绝对不能手动使用，但是再分支或循环条件中，不管以后写什么，都会是一个布尔值。
day 03
一、循环结构
反复执行相同或者相似的操作。
三要素：1.循环条件：开始-结束 循环次数
2.循环体：做的操作是什么
3.循环变量：记录我们当前在哪一次，而且他会不断变化
二、三种循环
1.while语句循环：
语法：
var 循环变量=xx；
while(循环条件){
循环体；
循环变量变化；
}
执行原理：首先创建出循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，而会回头再次判断循环条件满不满足。如果满足，则做一次循环操作，直到条件不满足，才会退出循环。
宏观上感觉循环好像一下就结束了，但是在微观上其实是一次一次执行的。
特殊：
1.有的时候可能真的需要使用死循环：
默认永远不会停下来的循环；
何时使用：不确定循环次数的时候。
while(true){
是一个死循环
}
2.死循环
其实也会有一天停下来，如何停下来呢？
break:退出整个循环，多半都是来搭配死循循环。
continue:退出本次循环，下次依旧会执行。
2.for语句循环：
和while一样的，但它比while更加简洁，更加舒服。
语法：
for(var 循环变量=几；循环条件，循环变量的变化){
循环体；
}
特殊：
死循环，for(;;){
}
面试题：while和for的区别
while和for原理上几乎没区别。
一般来说我们不能确定循环次数时候，用while，确定次数时候用for。
2.do...while语句循环：
语法；
var 循环变量=几；
do{
循环体；
循环变量的变化；
}while(循环条件)
面试题：while和do...while的区别
区别只看第一次，如果第一次条件都满足，那么没有任何区别。但是如果第一次条件都不满足，那么while一次不会执行，那么do...while至少会执行一次。
三、function的基础
1.概念
function也叫函数/方法。先**预定义**好，以后可以**反复使用的代码段**
2.如何使用函数(2步)：
(1)定义/创建/声明：
function 函数名(){
函数体，代码段
}
注意：函数创建后，不会立刻执行，需要我们去调用函数。
(1)调用函数(2种):
1.在js内部写函数名
程序员写几次就调用几次
2.在html上绑定事件
<elem oncleck="函数名"></elem>什么元素都可以绑定
3.何时使用函数
1.不希望打开页面就执行的时候
2.希望用户来触发，提升用户的体验感
3.函数在js的地位极高，函数是js的第一公民
4.带参函数和不带参函数
rotate(120edg) url(2.jpg)
(1)创建出带有参的函数
形参：
其实就是一个变量，只不过不需要加var,而且不需要辅助，所以称之为形式参数。
function 函数行(形参){
函数体/代码段
}
(2)使用带有形参的函数时
必须传入实参
函数名(实参...)。
注意：
传参的时候顺序不能乱，必须和形参意义对应，数量不多也不能少。
5.总结
(1)不带参数的函数
用于执行一些固定操作。
(2)带参数的函数
可以根据我们传入的实参不同，做的略微不同。
day 04
一、自定义函数function
1.什么是函数
需要先定义好，以后可以反复使用的一个代码段。
2.何时使用
不希望打开页面立刻执行，以后可以反复使用，希望用户来触发。
3.如何使用
(1)创建(2种)
1.声明方式 创建函数
function函数名(形参列表）{
操作；
return返回值/结果；
}
2.直接量方式 创建函数(不推荐)
var 函数名=function(形参列表){
操作；
return返回值/结果
}
注意
函数名其实就是一个变量名
(2)调用
var 接住返回的结果=函数名(实参列表)
其实retrun的本意是退出函数，但是如果return函数后面跟着数据，顺便将数据返回到函数作用域外部，但是return只负责返回，不负责保存，所以调用函数时要自己拿个变量接住它，
就算省略return，默认也会有，会return一个undefind.
具体需不需要得到函数的结果，看你自己；如果有一天你在全局希望拿着函数的结果去做别的操作，那么记得加return。
4.作用域(2种)
(1)全局作用域
全局变量和全局函数，在页面的任何一个位置都可以使用
(2)函数的作用域
局部变量和局部函数，在当前函数调用时，内部可用。
带来了变量的使用规则，优先使用局部的，局部没有找全局要，全局也没那么会报错。
特殊(缺点)：
(1)千万不要在函数中对着未声明的变量之节赋值--全局污染：全局 本身没有这个东西，但是函数作用域污染加上了。
(2)局部可以使用全局的，但是全局不能使用局部的，
解决方法：使用return.
5.声明提前
只会出现在笔试题中。
(1)规则
在程序正式执行之前，将var声明的变量（轻）和function声明的函数(重)，都会悄悄的集中定义在当前域的顶部，但是赋值会留在原地。
(2)强调
声明方式的创建的函数会完整的提前
直接量方式创建的函数不会完整提前，只会变量名部分提前
何时使用：永远不会自己使用，干扰我们判断，只会在笔试中遇见。
遵守
1.变量名和函数名尽量不重复
2.先创建后使用
6.重载
相同的函数名，根据传入的实参的不同，自动选择对应的函数去执行，但是js不支持，函数名如果重复了，后面的肯定会覆盖掉前面的。
(1)目的：
减轻我们程序员的压力，记住一个方法就可以执行很多操作，
(2)解决：
在**函数内部**自带argments的对象，**类似数组对象**：不需要我们去创建，哪怕没有任何形参，他也可以接受住所有实参，所以默认他的长度为lenght=0.
(3)固定套路
1:通过下标去获取某一个实参数
arguments[i] i从0开始
2:通过length去获取到底传入了几个实参
arguments.lenghth通过判断传入的实参不同，在内部去写判断，从而变相实现重载。
二、数组的基础
数组：创建一个变量可以保存【多个数据】。
数组都是线性排列，除了对个元素，每个元素都有唯一前驱元素。
除了最后一个元素，每个元素都有唯一一个后继元素。
***每个元素都有一个自己的位置，称之为下标，下标都是从0开始，到最大程度-1结束。
1.创建数组（2种）
（1）直接量方式：
var arr=[]
var arr=[数据1；...]
（2）构造函数方式
var arr = new Array()
2.获取数组之间的元素
数组名【i】
3.后续添加/替换元素：
数组名【i】=新数据
如果下标处没有则添加，如果有数据则为替换。
4.数组具有三大不限制
(1)不限制元素的类型
(2)不限制元素的长度
(3)不限制下标越界----不是一个好东西
如果获取元素时，下标越界，返回的是undefind
如果添加元素时，下标越界，会得到一个稀疏数组，如果我们搭配上我们学过循环去遍历获取每个元素，那么你会得到很多undefinde
问题：自己数下表，难免会数错，导致越界
5.解决：数组中有一个唯一的属性，length.
语法：数组名.length
作用：获取列数组的长度，从1开始。
三个固定套路：
1.向末尾添加元素：arr[arr.length]=新数据；
2.获取数组倒数第n个元素：arr.[length-n]
3.缩容：删除倒数第n个元素：arr.length-=n
6.遍历数组
往往很多情况，我们不会拿出某个元素来使用，而是拿出每个元素来进行相同的或者不相同的操作---搭配上循环
固定公式：for(var i =0;i<arr.length;i++){
arr[i];//当前次元素
}
day 05
一、DOM
document object model:文档对象模型：专门用于操作HTL文档的，提供一些方法给你.
二、DOM树概念：
DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象
document对象：
不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根
作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象
三、查找元素：
1.直接通过HTML去查找
（1）通过ID查找元素
var get = document.getElementByID(“id值");
特殊：
1.返回值，找到了返回当前找到DOM元素，没找到返回的一个null
2、如果出现多个相同id，只会找到第一个
3、记住控制台输出的样子，这个样子才叫做一个DOM元素/节点/对象，才可以下午去做操作
4、忘记此方法，不允许使用，id不好用，一次只能找一个元素。id留给后端用
5、其实根本不用查找，id直接可用
（2）*通过 标签名 查找元素：
var elems=document/已经找到的父元素.getElementsByTagName("标签名")
特殊：
1、返回值，找到了返回一个类数组DOM集合，没找到得到空集合
2、js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
3、不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素。
3、*通过 class 查找元素：
var elems=document/已经找到的父元素.getElementsByClassName("class名")
特殊：
1、返回值，找到了返回一个类数组DOM集合，没找到得到空集合
2、js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
3、不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素
2、*通过关系去获取元素：前提条件：必须先找到一个元素才可以使用关系
父元素：elem.parentNode
子元素：elem.children
第一个子元素：elem.firstElementChild
最后一个子元素：elem.lastElementChild
前一个兄弟：elem.previousElementSibling
后一个兄弟：elem.nextElementSibling
为什么要通过关系去找元素呢？不希望影响到别人，只希望影响到自己的关系网
四、操作元素：
前提：先找到元素，才能操作元素，3方面
1、内容：
（1）、*elem.innerHTML
获取和设置开始标签到结束标签之间的内容，支持识别标签的
获取：elem.innerHTML
设置：elem.innerHTML="新内容"
（2）、elem.innerText
获取和设置开始标签到结束标签之间的纯文本，不识别标签的
获取：elem.innerText
设置：elem.innerText="新内容"
以上两个属性都是专门为双标签准备，而有一个单标签也是可以写内容，叫做<input />，我们如何获取？
（3）、input.value - 专门获取/设置input里的内容
获取：input.value
设置：input.value="新内容"
2、属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名; 例如：div.className
设置属性值：elem.属性名="属性值"; div.className="box"
简化版的缺点：
1、class必须写为className - ES6(2015年)class变成了一个关键字
2、不能操作自定义属性
3、样式：
使用样式的方式：3种
1、*内联样式
2、内部样式表
3、外部样式表 - 一阶段做开发用的都是外部样式表
二阶段我们就要用js来操作【内联样式】
1、不会牵一发动全身
2、优先级最高
获取样式：elem.style.css属性名
设置样式：elem.style.css属性名="css属性值"
特殊点：
1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法
border-radius ----- borderRadius
2、小缺陷：获取时，我们只能获取到内联样式，因为我们目前学的就是内联样式的操作
4、绑定事件：
elem.on事件名=function(){
操作;
*****关键字this - 这个
如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件元素
}
一切的获取，往往都是为了判断
一切的设置，可以说是添加也可以说是修改
