day1:
一：JavaScript概述：
简称：js，是运行在【JavaScript解释器】的【解释型】【弱类型】面向对象脚本语言
二、javascript的使用：
1: JS的调试语句：代码运行期间，如果碰到错误就会报错，但是后续代码就不会再执行了，我们如何去寻找错误呢？
a、*在控制台输出日志：console.log(想要输出的内容);//打桩输出、疯狂打桩、一句一句的找到错误在哪里
b、在页面上输出：document.write(想要输出的内容);//支持标签的写法，但是，只要绑定在某个页面元素的事件上，则会替换掉整个网页
c、弹出警告框输出：alert(想要输出的内容);//会卡主整个页面，必须关闭后用户才能看到网页的内容
2:变量：值是可以改变的
何时：只要你以后需要经常使用的数据，都要先保存在一个变量中，以后使用变量名，相当于就是在使用变量的值了
语法：var 变量名=值;
比如： var name="名字";
var age=128;
var hobby="女";
特殊：
a、=：赋值符号，将=右边的数据放到=左边的变量名之中
var age=18;
age=19;//18=19;错误的理解，=左边的变量名只可能永远是变量名，不会变成变量的值
console.log(age);//19
b、如果只声明/创建/定义了，没有赋值的话，默认值为undefined（是一个垃圾，没有任何用处），记得一定要赋值。
c、取变量名不能随意，尽量的见名知意
不能以数字开头
var 1name="张三丰";
推荐：
var name;
不推荐：
var xingming; - 不推荐，降低我们的逼格
更不推荐：
var a; - 没有具体的意义
不能以关键字为名字
var var=1; - 报错
d、name变量名是一个关键字，里面只能放入字符串，哪怕你放的不是字符串，也会悄悄变成一个字符串
e、如果创建多个变量，中间的var可以省略，中间的;换为,隔开，最后一个还是;结束
f、面试题：
如果是一个未声明的变量直接使用，会报错
如果是一个声明过但是未赋值的变量，会undefined
3:常量：一旦初始化后(第一次赋值)，值不允许被修改 - 以后不会用到
三：算术运算符：+ - * / %
其实前四个运算符和小时候一模一样
但是特殊：
1、%：取余，俗称模，两个数相除，但是不取商，而是取除不尽的余数
5%2 ==> 1
作用：
1、*判断奇偶性
num%2;//结果为0说明是一个偶数，结果为1说明是一个奇数
2、获取某个数字的最后n位
1234%10;//4
1234%100;//34
1234%1000;//234
2、自带隐式转换：悄悄地转换，数据类型会发生变化，我们程序员看不见
常理来说只有数字才能参与算术运算，但是其实字符串也可以，一定要切记下面的几句话
*****默认运算符左右两边都会悄悄转换为一个数字，再运算
特殊：a、+运算，只要碰上一个字符串，则都会变为字符串，+运算也不再是+运算，变成了拼接操 b、-*/%运算：有字符串也可以转为数字，但是必须是纯数字组成的字符串才可以，只有包含一个非数字字符，结果则为NaN
NaN：Not a Number：不是一个数字，但是确实是数字类型 - 垃圾
NaN参与任何算术运算结果都为NaN
NaN参与任何比较运算结果都为false - 不在三界之中
以后不希望见到undefined和NaN
四：*JS中的数据类型：
1、原始/基本/值类型：5个
1、String - 字符串，取值有无数个，必须写 "" 或 ''
2、Number - 数字，取值有无数个，直接写个数字就行
3、Boolean - 布尔，取值只有两个，true 或 false，多半用于判断的
4、Undefined - 取值只有一个默认值为undefined，没有任何用处 - 祖师爷犯下的错误
5、Null - 空，取值只有一个null，作用，释放变量、节约内存
2、引用/对象类型：11个
五：扩展：
1、弹出一个用户输入框：var user=prompt("请示文字","默认值"); 2、*分支结构：根据条件的不同，选择一部分代码执行 语法： a、一个条件 一件事：满足就做，不满足就不做 if(条件){ 操作 }
b、一个条件 两件事：满足就做第一件，不满足就做第二件
if(条件){
操作1
}else{
默认操作;
}
c、多个条件多件事：满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else if(条件3){
操作3
}else{
默认操作;
}
注意：1、else if你想写几句就写几句
2、最后的else是可以省略不写的，但是如果条件都不满足的话则什么不会执行了
3、分支结构只要满足一个就不可能再走另一条路了
day2
一、数据类型的转换
javascript是弱类型语言，数据类型都是由数据来决定
对于不同数据类型的运算时，数据类型会进行转换：
number + number = number
number + string = string
如何你希望查看数据类型：typeof(需要检查的东西)
a、*算术运算具有隐式转换：其实其他的运算符也有隐式转换
自动转换：悄悄地，我们程序员是看不见的
默认将左右两边转为数字，再运算
特殊：
1、+运算，如果碰到一个字符串，两边都会悄悄的隐式转换字符串，再拼接
2、-*/%：就算是字符串也可以转为一个数字，但是必须是纯数字组成的字符串才行，只要包含非数字字符，则为NaN
3、某的人转为数字的结果
true -> 1
false -> 0
undefined -> NaN
null -> 0
"100" -> 100
"10a0" -> NaN
4、NaN：Not A Number：不是一个数字，但是确实是数字类型，理解是不是有效范围的数字（不在三界之中）
缺点：1、NaN参与任何算术运算结果都为NaN
2、NaN参与任何比较运算结果都为false
问题：我们没有办法使用普通的比较运算来判断x是不是NaN
解决：个人更爱反用
!isNaN(x) - 判断x是不是一个有效数字，此方法也具有数字的隐式转换
true -> 说明x是一个有效数字
false -> 说明x是一个NaN
作用：防止用户恶意输入，要求用户输入的必须是一个有效数字，想要更加严格的管控用户需要以后学习正则表达式才行
b、显式/强制转换：
隐式转换的结果可能不是我们想要的，我们程序员可以手动调用某些方法，进行数据类型的转换后，再运算
1、转字符串：
语法：var str=x.toString();//x不能是undefined和null，因为undefined和null不能使用.操作
//此方法不重要，原因：页面上获取来的所有的数据默认都是字符串
2、*转数字：3个方法
**1、var num=parseInt(str/num);** parse->解析 Int->整型/整数
原理：从左向右依次读取每个字符，进行转换，碰到非数字字符就会停止，而且不认识小数点，如果一来就碰到了不认识的字符，则为NaN
console.log(parseInt(35.5));//35
console.log(parseInt("35.5"));//35
console.log(parseInt("35hello5"));//35
console.log(parseInt("35px"));//35
console.log(parseInt("35px555abc"));//35
console.log(parseInt("0.35"));//0
console.log(parseInt(布尔、undefined、null));//NaN
**2、*var num=parseFloat(str);** parse->解析 Float->浮点数/小数
原理：几乎和parseInt一致，认识第一个小数点
console.log(parseFloat("35.5"));//35.5
console.log(parseFloat("35.5px"));//35.5
console.log(parseFloat("35.5.5"));//35.5
console.log(parseFloat(".55"));//0.55
console.log(parseFloat("px.55"));//NaN
console.log(parseFloat(true));//NaN
强调：不要觉得只能转字符串很菜鸡，其实很牛逼，页面上获取来的所有的数据默认都是字符串
3、Number(x);//x是万能的，任何人都可以转为数字
//垃圾，因为此方法完全等效于隐式转换，还不如*1 /1 -0，其实这就是隐式转换的底层原理
总结：1、Number何时都不使用
2、只要页面上带有单位的数字，我们都可以用parseXXX来去掉单位变成数字
二、基本的函数：学3次才能完整的学完 - 第一等公民地位
url(图片路径) - 完成了一个根据图像路径显示图片的功能
rotate(角度值) - 完成了一个根据角度值旋转的功能
...
js里面的函数 - 完成了一个xxxxxxxxxxxx的功能
1、什么是函数：也称之为方法，需要【预定义】后，可以【反复使用】的【代码段】
2、创建函数并且调用函数
第一步：
创建：function 函数名(){
若干代码段
}
注意：函数创建后并不会自动执行，需要我们手动调用它
第二步
调用：2种方式
1、直接在js里面写 函数名(); 程序员写几次就会执行几次
2、绑定在页面的元素上，让用户自己来触发，用户触发一次就会执行一次 - 提升用户的体验感
<elem onclick="函数名()"></elem>
三、以后何时要使用函数呢？
a、打开页面不希望立刻执行
b、希望用户/程序员来触发
c、希望能够被反复执行
d、本身就是一段独立的功能体：暂时理解为我们的每一个作业就是一个独立的功能体
e、以后要尽量的将每个功能封装为一个函数，函数是js的第一等公民地位，而且函数中的变量会自动释放
四、带有参数的函数
1、创建带参数的函数
形参：就是一个变量名，只不过这里的变量不需要var，并没有保存到真正的值，形式参数简称形参
function 函数名(形参,...){
函数体;
}
2、调用带参数的函数
实参：实际参数，这个变量名所保存的值
函数名(实参,...);
一个函数可以执行相似的操作
比如：实现任意两个数相加：
function add(a,b){
console.log(a+b);
}
add(1,2);
add(3,4);
注意：带参数的函数，调用时，传入的实参的顺序和个数都要和形参一一对应上
总结：
1、如果你的函数体是固定不变的，则不需要使用带参数的函数
2、如果你的函数体希望根据传入的实参的不同，做的事儿也略微不同，则需要带有参数
五、分支结构：
1、代码中流程控制语句：3种
1、顺序结构：
默认结构，代码从上向下一步一步执行的
2、分支/选择结构：
根据条件，选择一部分代码去执行
3、循环结构：
根据条件，判断你是否需要再一次重复执行某一些代码
2、*比较运算符：> < >= <= == !=
作用：比较判断/条件中出现
结果：以上六个运算符，结果一定是一个布尔值
其实比较运算符也具有隐式转换，但是我不给你说，大部分情况下依然会转为数字在比较大小
3、if结构：
1、一个条件一件事，满足就不做，不满足就不做
if(条件){
操作
}
2、一个条件两件事，满足就做第一件，不满足就做第二件
if(条件){
操作
}else{
默认操作
}
3、多个条件多件事，满足谁就做谁
if(条件1){
操作1;
}else if(条件2){
操作2;
}else{
默认操作
}
扩展：*逻辑运算符：&&（与、并且） ||（或） !非
&&：只有全部条件都满足，最后结果才为true
只要有一个条件不满足，结果则为false
day3
一：循环结构
1: 循环：反复执行 【相同 或 相似】 的操作，几乎是一瞬间就完成了很多次
2: 循环三要素：
a、循环条件：开始、结束，重复执行的次数
b、循环体：循环操作，干什么事
c、循环变量：创建，并且要让他不断的改变（自增、自减），往往向着不满足循环条件再变化
3:while循环
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
死循环：停不下来的循环，多半用于【不确定循环次数】的时候
while(true){
循环体;
}
循环流程控制语句：退出循环：break;
4、for循环：和while能做的事是一样的，只不过语法比while更简单，看上去也更加舒服
语法：
for(var 循环变量=几;循环条件;变量的变化){
循环体
}
特殊：
1、创建循环变量部分可以同时创建多个变量，用，分隔
2、死循环：for(;;){循环体}
二：数组
1:希望一个变量可以保存多个数据 - 数组
2:数组中的每一个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的元素的位置，从0开始，到最大长度-1结束
3:创建数组：2种方式
***a、直接量方式：var arr=[];//空数组
var arr=[数据,数据,....];
b、构造函数方式：var arr=new Array();//空数组
var arr=new Array(数据,数据,....);
4:获取/访问数组中的元素
数组名[下标]
5:添加/修改数组中的元素
数组名[下标]=新元素
特殊：
a、下标处如果没有人，则为添加
b、下标处如果有人，则为修改
c、如果下标越界 - 会导致我们的数组变为一个稀疏数组，不是好东西，因为我们迟早会去用循环遍历数组得到里面所有的数据，但是稀疏数组一定会出现一些undefined
6:数组具有3大不限制
a、不限制长度 - 优点
b、不限制类型 - 优点
c、不限制下标越界：
获取时：下标越界，返回结果是一个undefined
添加时：下标越界，导致我们的数组变为一个稀疏数组
7:数组唯一的一个属性：length长度
语法：数组名.length;
*有了这个属性，我们就可以实现数组的三个固定套路：
a、希望向末尾添加元素：arr[arr.length]=新元素
b、获取倒数第n个元素：arr[arr.length-n]
c、缩容：删除数组的倒数n个：arr.length-=n;
8:遍历数组：把数组中的每一个元素取出来执行 相同 或 相似的操作
公式：
for(var i=0;i<数组名.length;i++){
数组名[i];//当前次元素
}
day4
一：DOM树：
DOM将HTML看做了是一个倒挂的树状结构，但是树根不是你们所理解的html标签
*树根：是一个document对象，document对象是不需要程序员来创建的，由浏览器的js解释器负责创建，一个页面只有一个document
二：查找元素：
1、通过HTML的特点去查找元素：3种方式
A、通过ID找到元素：var elem=document.getElementById("id值");
在当前DOM树中，根据元素的id，获取具体的DOM节点
找到了：返回对应的元素
没找到：返回null
特殊：1、如果页面上有多个重复的id，只会返回第一个
2、此方法找到的是单个元素 - DOM节点是可以直接用于做操作的
3、此方法你不能使用 - 以后id留给后端使用，而且此方法一次也只能找到一个元素操作起来不方便
B、标签名查找：var elems=document/已经找到的某个父元素.getElementsByTagName("标签名");
在当前DOM树中，根据元素的标签名获取元素们
找到了：返回是一个DOM集合/DOM类数组对象
没找到：空集合
特殊：a、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么加下标拿到某一个，要么遍历拿每一个
DOM集合：类数组对象，类似数组：1、都可以使用下标 2、都可以使用length 3、都可以遍历 和数组的区别我们以后在慢慢学习
b、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
C、class名查找：var elems=document/已经找到的某个父元素.getElementsByClassName("class名");
在当前DOM树中，根据元素的标签名获取元素们
找到了：返回是一个DOM集合/DOM类数组对象
没找到：空集合
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么加下标拿到某一个，要么遍历拿每一个
DOM集合：类数组对象，类似数组：a、都可以使用下标 b、都可以使用length c、都可以遍历 和数组的区别我们以后在慢慢学习
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
2、通过节点之间的关系进行查找元素：前提：必须先要找到一个人，才能使用关系：
父：xx.parentNode; - 单个元素
子：xx.children; - 集合
第一个元素儿子：xx.firstElementChild; - 单个元素
最后一个元素儿子：xx.lastElementChild; - 单个元素
前一个元素兄弟：xx.previousElementSibling; - 单个元素
后一个元素兄弟：xx.nextElementSibling; - 单个元素
只有单个元素可以做操作，集合不行
三、操作元素：
<标签 属性名="属性值" style="样式">内容</标签>
1、内容：3个
*a、innerHTML：获取 或 设置某个元素的内容部分 - 可以识别标签的
获取：elem.innerHTML; - 多半用于判断操作
设置：elem.innerHTML="新内容"; - 修改内容
b、innerText：获取 或 设置某个元素的文本部分 - 不能识别标签的
获取：elem.innerText; - 多半用于判断操作
设置：elem.innerText="新文本"; - 修改内容
以上两个属性：都是为双标签准备的
c、value属性：专门为单标签（input）操作内容准备的
获取：input.value; - 多半用于判断操作
设置：input.value="新内容"; - 修改内容
2、属性
a、获取属性值：elem.getAttribute("属性名"); - 多半用于判断操作
b、设置属性值：elem.setAttribute("属性名","属性值"); - 修改
c、简化：
1、获取：elem.属性名; - 多半用于判断操作
2、设置：elem.属性名="属性值" - 修改
缺陷：1、不能操作自定义属性，只能操作标准属性
2、class在ES6升级的时候成为了一个关键字，所以不可以在用class，换为了className
3、样式：
css定义的方式用外部样式表，JS操作用内联样式
语法：
获取：elem.style.css属性名 - 多半用于判断操作
设置：elem.style.css属性名="css属性值"; - 修改
特殊：css属性名，要把有横线的地方，换成小驼峰命名法
4、元素绑定事件：
单个元素：elem.onclick=function(){
//操作
}
多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
//操作
}
}
day5
一、this的指向：
单个元素绑定事件：this->单个元素
多个元素绑定事件：this->当前触发的事件
二、脱字符串衣服的方法：
eval(str);//脱掉字符串的外套并且执行里面的操作
