第一周知识点
JavaScript概述
概述：JavaScript，简称JS，是运行在客户端浏览器的解释型弱类型面向对象的脚本语言。
解释型：在执行代码之前，不需要检查代码语法是否正确，遇到错误就直接停止执行后面的代码。
弱类型：变量保存的数据可以是随意的，数据类型是由数据来确定的。
JavaScript的特点：解释型、弱类型、面向对象编程方式
JavaScript的使用
引入：2种
1、直接在HTML中写一个script标签，里面就可以书写JS代码
2、外部引入JS文件，先创建一个JS文件，再引入到HTML中
语法：<script src="xxx.js的路径"> 只要有了src属性，就不写代码 </script>
输出方式
1、控制台输出：console.log(要输出的内容);支持标签识别，
2、页面上输出：document.write(要输出的内容);支持标签识别，(如果绑定了点击事件，会将页面上原来的内容覆盖)。
3、警告弹出框输出:alert(要输出的内容); 会卡住页面，用户只能看到一个白板
变量与常量
变量
创建后，值可以进行修改;在重复使用的数据就可以放在变量中，以后使用变量名时就相当于在使用变量的值。
用法：var 变量名=变量值;
注意：变量名不是随意的，不能以关键字或保留字命名，不能以数字开头；如果变量名是name，无论保存的数据类型是什么，都会转换为字符串；创建多个变量可以简写 var 变量名=变量值,变量名=变量值...;
常量
创建后，值不可以进行修改;
用法：const 变量名=变量值;
算术运算符：+ - * / %
%运算：取余或模，用于判断，获取一个数的倒数n位；
注意：算数运算符具有隐式类型转换，默认转为数字在运算
1、 进行+运算时，如果+的两边只要有一边是字符串，结果会是字符串，+运算不再是+运算，而是字符串拼接；
2、- / * %运算时，也可以转换成数字，前提符号两边都必须是纯数字组成的字符串；如果字符串包含了非数字的字符串结果是NaN；
3、NaN不是一个数字，但是是数据类型，不是一个有效数字；NaN参与内容比较运算，结果都是false；参与任何算术运算，结果都是NaN；
数据类型
1、原始类型：5种
String：字符串，取值无数个
Number：数字，取值无数个
Boolean：布尔，取值两个---true 和 false
Undefined：取值一个---undefined
Null：空，取值一个--null 可以用来释放变量/内存。
2、引用/对象类型：11个引用类型的对象
在以后的学习中会接触到
数据类型转换
不同数据类型做操作可能出来的结果不一样；页面上获取的一切数据在JS中默认都是一个字符串。
查看数据类型 typeof(要查看的内容);
1、算术运算符的隐式转换
如上算术运算的注意一致
其他类型的数据也可转化成数字类型 true->1 false->0 undefined->NaN null->0
2、强制转换
1、转字符串：var str=x.toString();
注意：x不能是undefined或者null
2、转数字
1)、parseInt(str/num)
执行原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符，就停止转换，如果一来就碰到了不认识的，则为NaN。
2)、parseFloat(str)
执行原理几乎和上一个一样，可以识别第一个小数点。
3)、Number(x);相当于隐式转换
Function基础
Function：函数（方法），需要提前预定义好，后就可以反复使用的代码段
使用步骤： 1、定义/创建函数： function 函数名(){代码}； 2、调用函数：函数名(); 或者绑定在某个元素上，写上点击事件让用户来触发。
带参数的函数
创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值，默认值为undefined
使用：实参 : 实际参数，真正的值，需要调用时再传入
注意：1、参的顺序一定要和形参的顺序一一对应，并且数量也要对应；
2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析
分支结构
判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路
程序的流程控制语句 3种
1、顺序执行–默认，从上向下的依次执行
2、分支结构-通过条件的判断，选择部分代码执行
3、循环结构-通过条件的判断，选择要不要重复执行某些代码
比较运算符 > < >= <= != ==
用于判断或比较；结果一定是Boolean值。
逻辑运算符 && || !
&& 并且，要求全部条件都要满足，最后结果才为true，只要有一个条件满足就为false;
|| 或，要求全部条件都要不满足，最后的结果才为false，只要有一个条件满足，结果则为true；
! 颠倒布尔值
for循环
else if个数是不限的；
最后的else可以省略不写，如果条件都不满足就会什么都不做；
书写顺序要根据要求来判断，不能乱写。
一个条件，一件事，满足就做，不满足就不做
if（判断条件）{操作;}
一个条件，两件事，满足就做第一件，不满足就做第二件
if（判断条件）{操作;}else{操作;}
多个条件 ，多件事，满足谁就做谁
if（判断条件）{
操作;
}else if{
操作;
}else if{操作;
} .....
else{操作;}
循环结构
反复执行相同的操作
循环三要素
1)、循环条件： 开始---结束，循环的次数；
2)、循环变量：记录当前在哪一次，而且都会不断变化；
3)、循环体：具体做的操作。 回头继续判断条件是否满足。
while循环
语法：var 循环变量=几;while(循环条件){循环体;循环变量变化;}
执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做一次循环体操作，并不会退出循环，回头继续判断条件是否满足，如果满足，则再做一次直到循环条件不满足，才会退出循环。
注意：1、死循环：while(true){循环体;} 2、退出循环语句: break-只能在循环中使用，多半都是搭配死循环使用的
for循环
用法：for(var循环变量=几;循环条件;变量的变化){循环体;}
死循环：死循环:for(;;){循环体;}
for循环与while循环的区别
1、语法上有区别，但两者都能做到相同的操作；
2、一般来说我们不确定循环次数的时候，会使用while循环–死循环。
数组基础
数组：创建一个变量就可以存放多个数据的集合
数组都是线性排列的，除了第一个元素，每个元素都有唯一的前驱元素；除了最后一个元素，每个元素都有唯一的后继元素；下标是从0开始。
创建数组 2种方法
1、直接量方式
var arr=[];
var arr=[数据1，数据2...];
2、构造函数方式
var arr=new Array();
var arr=new Array(数据1,数据2...);
获取数组中的数据
数组名[下标];
添加/替换
数组名[下标]=新值;
如果下标的位置没有元素，就是添加元素，有则为替换
数组的三大不限制
1、不限制元素个数
2、不限制元素类型
3、不限制下标越界
如果获取元素，下标越界，返回的值是undefined
如果添加元素，下标越界，会得到一个稀疏数组，导致下标不连续，若搭配上循环遍历就会得到很多undefined
下标越界的解决方法---使用长度
数组中唯一的属性:长度，数组名.length -获取当前数组的长度:最大下标+1
三个固定套路：
------获取倒数第n个元素: arr[arr.length-n]；
------始终向末尾添加元素:arr[arrllength]=新值;
------缩容：删除倒数n个元素；arr.length--=n;
遍历数组
用法：for(var i=O;i<数组名.length;i++){ console.log(数组名们);//当前次元素 }
DOM的相关知识
DOM：Document Object Model 文档对象模型，专门用于操作HTML文档的。
DOM树概念
1、DOM将HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象；
2、document对象:不需要程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document；
3、作用:可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法)；
4、DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象。
查找元素
1、通过ID查找元素
用法： var elem = getElemtById("id名");
注意：1、返回值，找到了返回的是一个当前找到的DOM元素，没找到，返回一个null，做了别的操作可能就会报错了；
2、找到了多个相同的id，只会返回第一个。
2、通过标签名查找元素
用法：var elems=document/已找到的父元素.getElementsByTagName("标签名");
注意：1、返回值:找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历）；没有找到返回一个空集合；
2、JS不能直接操作DOM集合，只能操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素；
3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了。
3、通过class名查找元素
用法：语法: var elems=document/已找到的父元素.getElementsByClassName("标签名");
注意：与通过标签名的相同
4、通过关系查找元素----前提：必须要先找到一个元素，才能调用关系网
父元素: elem.parentNode;
子元素: elem.children; 集合
第一个儿子: elem.firstElementChild;
最后一个儿子: elem.lastElementChild;
前一个兄弟:elem.previousElementSibling;
后一个兄弟:elem.nextElementSibling:
DOM集合不能直接做操作
操作元素
1、操作内容
1)、innerHTML:获取和设置开始标签和结束标签之前的内容--支持识别标签；获取：elem.innerHTML; 设置： elem.innerHTML="新内容";
2)、innerText:获取和设置开始标签和结束标签之间的文本，但不支持标签识别；获取： elem.innerText; 设置:elem.innerText="新内容";
3)、value：专门为input标签的value值准备的； 获取input.value; 设置：input.value = "新值";
注意：前面两个属性只适用于双标签，做不了单标签的内容
2、操作属性
获取属性：elem.getAttribute("属性名");
设置属性值: elem.setAttribute("属性名","属性值");
简化操作：
--------获取属性值：elem.属性名；
--------设置属性值：elem.属性名="新属性值"；
注意：1、class必须写为className - 2015年过后，ES6诞生过后，class变成了一个关键字；
2、不能操作自定义属性，只能操作标准属性
3、操作样式
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
注意：1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法；
2、获取时，只能获取内联样式。
4、绑定事件
elem.on事件名=function(){操作;}
this关键字：目前只能用于事件内： -------如果单个元素绑定事件:this->这个元素 -------如果多个元素绑定事件: ths->当前触发事件的元素
eval()计算字符串时去掉引号
