1.输出方式
console.log();
document.write();支持标签，但是如果绑定事件后点击触发的话会替换整个html
alert();会卡住页面
2.变量和常量
变量：var 变量名=值；
常量：const 常量名=值； 一旦创建后不允许修改
3.算术运算符 + - * %
4.数据类型：
1.原始/基本/值类型：String/Number/Boolean/Undefined/Null
2.引用/对象类型：11种--Array/Function
5.数据类型的转换
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.转字符串：x.toString(); x不是undefined和null，因为undefined和null不能使用.
页面上获取到的数据默认都是字符串类型
2.转数字：
var num=parseInt/Float(str); 专门为字符串数字准备的方法
原理：从左往右依次读取每个字符，碰到非数字字符则停止，Int不认识小数点，Float认识第一个小数点，如果一来就不认识，则为NaN.
Number(x);//x可以是万能的，相当于隐式转换，还不如*1 /1 -0
6.函数：
方法：需要预定义的，可以反复使用的代码段-要么就是用户触发一次就执行一次，要么就是程序员调用一次执行一次
1.创建：
function：函数名(形参,...){
函数体;
}
2.调用：
1.程序员在js里面调好：函数名(实参,...);
2.绑定在页面元素上：<any on事件名="函数名()"></any>--html(内容)和css(样式)和JS(行为)要分离--以后不要这么使用
7.分支结构
作用：根据条件的不同，选择一条路执行
比较运算符：> < >= <= == !=
逻辑运算符：&& || !
结果都是一个布尔值，但是比较运算符是直接比较，逻辑运算符是综合比较
if(条件){操作}
if(条件){操作}else{默认操作}
if(条件){操作}else if(条件){操作}else{默认操作}
8.循环结构
作用：根据条件满不满足，如果满足就会一直操作，直到条件不满足才会停止
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
9.数组
一个变量可以保存多个数据，以后也可以拿出来使用
1.创建
直接量：var arr=[1,2,3,4];
构造函数：var arr=new Array(1,2,3,4);
2.使用
访问：arr[i]
添加：arr[i]=新值；//i处已经有人了，则为替换
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];//当前次元素
}
10.DOM
树根是document，不需要我们程序员创建，直接可用，一个页面只有一个document
1.查找元素
1.通过html的特点
ID:var elem=document.getElementById("id值")；--单个元素，没找到为null
标签名/class名:var elems=document/parent.getElementByTag/ClassName("标签/class名");--集合，没找到为空集合
2.通过节点之间的关系：
父：elem.parentNode;--单个元素，没找到为null
子：elem.children;--集合，没找到为空集合
第一个元素儿子：elem.firstElementChild;
最后一个元素儿子：elem.lastElementChild;
前一个元素兄弟：elem.previousElementSibling;
后一个元素兄弟：elem.nextElementSibling;
单个元素可以直接做操作，但是集合不行：
1.要么加下标拿到某一个
2.要么遍历拿到每一个
2.操作元素
1.内容：innerHTML/innerText/value(专为input准备的)
获取：elem.xxx
设置：elem.xxx="新内容"
2.属性
获取：elem.getAttribute("属性名") 简化：elem.属性名
设置：elem.setAttribute("属性名","属性值") 简化：elem.属性名="属性值"
简化版有2个小缺陷：
1.自定义属性不能操作
2.class必须写为className
建议：优先使用简化版，简化版做不到的操作再用复杂版代替
3.样式：JS就要操作内联样式
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊:css属性名有横线的地方要去掉横线变为小驼峰命名法
获取的目的往往都是为了判断
设置的目的就是修改
3.绑定事件：
单个元素：elem.onclick=function(){
//关键字this
}
多个元素：
for(var i=0;i<elems.length;i++){
elem[i].onclick=function(){
//关键字this
}
}
