二阶段第一周复习
一、输出方式：
console.log();
document.write(); - 支持标签，但是如果绑定事件后点击触发的话会替换掉整个HTML
alert(); - 会卡主页面
二、变量和常量：
变量：var 变量名=值;
常量：const 常量名=值; - 一旦创建后不允许修改
三、算术运算符：
+ - * / %
四、数据类型：
1、原始/基本/值类型：String、Number、Boolean、Undefined、Null
2、引用/对象（属性和方法）类型：11种 - Array/Function
五、数据类型的转换
1、隐式转换
1、算术运算带有隐式转换：默认转为数字，在运算
特殊：
1、+运算，如果碰到字符串，变成了拼接操作
2、-*/%，字符串可以转为数字，但是纯数字组成的，但凡包含一个非数字字符，则为NaN
3、true->1 false->0 undefined->NaN null->0
4、NaN：不是一个数字，但是是数字类型
全是缺点：
1、参与任何算术运算，结果都为NaN
2、参与任何比较运算，结果都为false，甚至自己都不认识自己
解决：!isNaN(x) true->x是一个有效数字
false->x是一个NaN
2、显式转换：隐式转换出来的结果不是我们想要的，先强制转换一下，再去做操作
1、转字符串：var str=x.toString();//x不是undefined和null，因为undefined和null不能使用.
页面上获取到的数据默认都是字符串类型
2、转数字：
var num=parseInt/Float(str);//专门为字符串转数字准备的方法
原理：从左向右依次读取每个字符，碰到非数字字符则停止，Int不认识小数点，Float认识第一个小数点，如果一来就不认识，则为NaN
Number(x);//x可以是万能的，相当于隐式转换，还不如*1 /1 -0
六、函数：方法：需要预定义的，可以反复使用的代码段 - 要么就是用户触发一次执行一次，要么就是程序员调用一次执行一次
1、创建：
function 函数名(形参,...){
函数体;
}
2、调用：
1、程序员在JS里面调好：函数名(实参,...);
2、绑定在页面元素上：<any on事件名="函数名()"></any> - HTML（内容）和CSS（样式）和JS（行为）要分离 - 以后不要这么使用
七、分支结构：根据条件的不同，选择一条路执行
比较运算符：> < >= <= == !=
逻辑运算符：&& || !
结果都是一个布尔值，但是比较运算符是直接比较，逻辑运算符是综合比较
if(条件){操作}
if(条件){操作}else{默认操作}
if(条件1){操作1}else if(条件2){操作2}else{默认操作}
八、循环结构：根据条件满不满足，如果满足就会一直做操作，直到条件不满足才会停止
1、var i=0;
while(i<10){
console.log(i);
i++;
}
2、for(var i=0;i<10;i++){
console.log(i);
}
3、死循环：
while(true){}
for(;;){}
4、循环流程控制语句：退出循环：break;
九、数组：一个变量可以保存多个数据，以后也可以拿出来使用
1、创建：
直接量：var arr=[1,2,3,4];
构造函数：var arr=new Array(1,2,3,4);
2、使用
访问：arr[i]
添加：arr[i]=新值;//i处已经有人了，则为替换
3、数组三大不限制：
1、不限制长度
2、不限制类型
3、不限制下标越界
4、数组的属性：arr.length - 得到长度
1、缩容：arr.length-=n;
2、向末尾添加元素：arr[arr.length]=新值;
3、获取倒数第n个元素：arr[arr.length-n];
5、遍历数组：
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
十、DOM：树根是document，不需要我们程序员创建，直接可用，一个页面只有一个document
1、查找元素
1、通过HTML的特点
ID：var elem=document.getElementById("id值"); - 单个元素，没找到为null
标签/class名：var elems=document/parent.getElementsByTag/ClassName("标签/class名"); - 集合，没找到为空集合
2、通过节点之间的关系：
父：elem.parentNode;
子：elem.children; - 集合，没找到为空集合
第一个元素儿子：elem.firstElementChild;
最后一个元素儿子：elem.lastElementChild;
前一个元素兄弟：elem.previousElementSibling;
后一个元素兄弟：elem.nextElementSibling;
单个元素可以直接做操作，但是集合不行：
1、要么加下标拿到某一个
2、要么遍历拿到每一个
2、操作元素：
1、内容：innerHTML/innerText/value（转为input准备的）
获取：elem.xxxx
设置：elem.xxxx="新内容"
2、属性：
获取：elem.getAttribute("属性名")
简化：elem.属性名
设置：elem.setAttribute("属性名","属性值")
简化：elem.属性名="属性值"
简化版有两个小缺陷：1、自定义属性不能操作 2、class必须写为className
建议：优先使用简化版，简化版做不到的操作在用复杂版代替
3、样式：JS就要操作【内联样式】
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：css属性名有横线的地方要去掉横线变为小驼峰命名法
获取的目的往往都是为了判断
设置的目的就是修改
3、绑定事件：
1、单个元素：elem.onclick=function(){
//关键字this的指向->这个元素
}
2、多个元素：
for(var i=0;i<elems.length;i++){
elems[i].onclick=function(){
//关键字this的指定->当前元素：当前你触发事件的元素
}
}
1、this的指向： 单个元素绑定事件：this->单个元素 多个元素绑定事件：this->当前触发的事件
2、脱字符串衣服的方法：eval(str);//脱掉字符串的外套并且执行里面的操作
