day01
1、JavaScript：是一个运行在浏览器端的解释型弱类型面向对象脚本语言。
1、浏览器端自带JavaScript解释器，能够识别我们的js代码（环境）
2、解释型：直接运行代码，碰到错误就停止允许后续代码
3、弱类型：变量可以保存一切数据类型，由数据决定了数据类型是什么
2、js的两种书写方式：
1、再HTML写入一个script标签，里面写js代码
<script>
//js代码
</script>
2、创建xx.js，使用script标签的src属性外部引入
<script src="xx.js"></script>
3、打桩输出：
1、在控制台输出：console.log();
2、在页面上输出：document.write();
3、在警告框输出：alert();
扩展：用户输入框：var 保存=prompt("提示文字");
4、变量：创建后可以修改
var 变量名=值;
5、常量：创建后不能修改
const 常量名=值;
6、数据类型：
1、原始/基本/值类型：5个
Number/String/Boolean/Undefined/Null
2、引用/对象类型：11个对象有很多很多的属性方法等待我们以后学习。
xx.xx;
xx.xx();
7、运算符：
1、算数：+ - * / %
几乎和小时候学习的一模一样
特殊：1、%：取余，俗称模，5%2 -> 1
2、隐式转换：默认运算符左右两边都转为数字，在运算
true->1
false->0
undefined->NaN
null->0
"1000"->1000
"1000px"->NaN
3、+运算如果碰上一个字符串，两边都会悄悄转为字符串，拼接操作
4、NaN：Not A Number，不是一个数字，他确实是数字类型，不在三界之中，不是一个有效的数字
全是缺点：
1、参与任何算术运算结果仍为NaN
2、参与任何比较运算结果都是false
2、比较/关系：> < >= <= == != === !==
结果：一定是一个布尔值
特殊：
1、隐式转换：默认左右两边转为数字，再比较，如果参与比较的左右两边都是字符串的时候，按位PK每个字符串unicode号（ascii码）
数字<大写<小写<汉字
汉字的第一个字：一 - 4e00（19968）
龥 - 9fa5（40869）
2、参与任何比较运算结果都是false，我们不能使用普通的比较运算去判断x是不是NaN，解决：
var bool=!isNaN(x);
true=>是一个有效数字
false=>是一个NaN
3、undefined==null;//true
解决：undefined===null
===：全等：数值相同并且数据类型也要相同，不在带有隐式转换了
3、赋值运算：
=：赋值符号：会将等号右边的东西保存到等号的左边
+= -= *= /= %=; 一句话完成了两件事，先计算后赋值
i+=1; ===> i=i+1;
4、逻辑运算：
结果：一定也是一个布尔值
&&：全部满足才满足，只要一个不满足，就不满足
||：全部不满足才不满足，只要一个满足，就满足
!：颠倒布尔值
5、自增和自减
++ --
特殊：
单独使用，前++和后++没有区别
但是如果参与了别的表达式，变量中的值都会+1，返回不同
前++，返回的是新值
后++，返回的是旧值
6、位运算：
左移：m<<n，m*2的n次方
右移：m>>n，m/2的n次方
缺点：底数只能是2
day02
1、分支结构：通过条件的判断，条件的不同，选择对应的代码去执行
1、if分支：3种写法
1、一个条件一件事，满足就做，不满足就不做
if(条件){操作}
2、一个条件2件事，满足就做第一件，不满足就做第二件
if(条件){操作}else{默认操作}
3、多个条件多件事，满足谁就做谁
if(条件){操作}else if(条件){操作}else{默认操作}
2、switch分支
switch(变量/表达式){
case 值1:
操作1;
break;
case 值2:
操作2;
break;
default:
默认操作;
}
3、三目运算：简化简单的（操作只能有一句话）分支
条件?操作:默认操作
条件?操作:套娃
2、强制类型转换：隐式转换出来的东西不是我们想要的，先强制转换，再运算
1、转字符串：
x.toString();//x不能是undefined和null，undefined和null不能使用.去做任何操作
String(x);//万能的，完全等效于隐式转换，还不如+""
页面一切东西都是字符串类型
2、转数字：
var num=parseInt/Float(str);
执行原理：从左向右依次读取每个字符，碰到非数字字符则停止转化，如果一来就不认识则为NaN，Int不认识小数点，Float认识第一个小数点
Number(x);//万能的，完全等效于隐式转换，还不如-0 *1 /1
3、转布尔：
Boolean(x);//万能的，完全等效于隐式转换，还不如 !!x
只有6个人会为false：0,"",undefined,null,NaN,false，其余都为true
以后我们不管在分支或循环中的条件怎么写都所谓，只需要判断是不是这6个
day03
1、循环：反复执行 相同 或 相似的操作。从宏观上来看几乎是一瞬间就能完成，微观上看还是一次一次执行的执行原理：先判断条件满不满足，如果满足则做一次循环体操作，继续判断条件满不满足，如果还是满足则再做一次循环体操作.......直到条件不满足才会结束循环去做后续操作
3种：
1、while循环：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
2、for循环：
for(var 循环变量=几;循环条件;循环变量变化){
循环体;
}
3、do...while循环：
var 循环变量=几;
do{
循环体;
循环变量变化;
}while(循环条件);
和while的区别：只看第一次
如果都满足，两者没区别
如果不满足，while一次都不做，do...while至少执行一次
特殊点：
1、死循环：
while(true){操作}
for(;;){操作}
do{操作}while(true)
2、退出循环语句：break(退出整个循环)、continue(退出本次循环)
2、函数的基础：Function - 函数也称之为方法，需要先预定义好的，以后可以反复使用的代码段。何时使用：不希望打开页面立刻执行，而是用户去触发或者程序员调用，函数是第一等公民地位，尽量每个独立的功能都要封装为一个函数
如何使用：2步
1、创建函数
function 函数名(形参列表,...){
操作
}
2、调用函数：
函数名(实参列表,...);
<elem onclick="函数名(实参列表,...);"></elem>
day04
1、Function：函数也叫方法，需要提前预定义好，以后可以反复使用的代码段
1、创建：2种
1、声明方式：
function 函数名(形参列表){
函数体;
return 返回值;
}
2、直接量方式：
var 函数名=function(形参列表){
函数体;
return 返回值;
}
函数名和变量名是同一个东西，尽量不要重复
2、调用：
var 接住返回的值=函数名(实参列表);
3、作用域：
全局作用域：成员，在任何地方都可以使用
函数作用域：成员，只能调用时内部可用
带来了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错
缺点：
1、千万不要对着未声明的变量直接赋值，这会导致全局污染
2、函数内的东西外面用不到，但是return可以解决，return的退出函数，如果后面跟着一个数据，就会返回到我们的全局作用域
4、声明提前：
规则：在程序正式执行之前，会悄悄的将var声明的变量(轻)和function声明的函数(重)集中提前到当前作用域的顶部，但是赋值留在原地
5、重载：同一个函数，根据传入的实参的不同，自动选择对应的函数执行，但是在js中不支持同名函数的存在
解决：函数中有一个类数组对象arguments，和数组有相同点：
1、都可使用下标访问某个元素
2、都可使用length获取长度
3、都可使用遍历得到每一个元素
作用：哪怕没有形参，也能接住所有的实参，通过在函数内部判断实参的不同去执行不同的分支，相当于变相实现了重载
function 函数名(){
if(arguments.length==?){
}...
}
2、数组：一个变量可以保存住多个数据
1、创建：2种
1、直接量：var arr=[数据,...];
2、构造函数：var arr=new Array(数据,...);
2、获取数组的元素：arr[i];//下标i是从0开始的，到arr.length-1结束的
3、添加/替换：arr[i]=新数据;
4、数组的三大不限制：
1、不限制类型
2、不限制长度
3、不限制下标越界 - 不是好事
获取元素，下标越界，得到undefined
添加元素，下标越界，得到是一个稀疏数组，如果搭配上遍历，那你会得到更多的undefined
5、数组的唯一的一个属性：arr.length - 获取到数组的长度，但是长度是从1开始数的
固定套路：
1、向末尾添加元素：arr[arr.length]=新数据;
2、获取倒数第n个元素：arr[arr.length-n];
3、缩容：arr.length-=n
6、遍历数组：拿出每一个元素 执行 相同 或 相似的操作
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
day05
1、**************DOM：Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法给你。
2、DOM树概念：DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象
document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根
作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象
3、查找元素：两大方面：
1、直接通过HTML的特点去查找元素
1、通过 ID 查找元素：
var elem=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; - 单个元素
为什么要通过关系去找元素呢？不希望影响到别人，只希望影响到自己的关系网
4、操作元素：前提：先找到元素，才能操作元素，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.属性名;
设置属性值：elem.属性名="属性值";
简化版的缺点：
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->当前触发事件元素
}
一切的获取，往往都是为了判断
一切的设置，可以说是添加也可以说是修改
