变量

语法：var 变量名 = 值；

这里的“=”是赋值不是等于，在JS中等于为“==”，且变量名不能以数字开头，不能为关键字，如果以name为变量名则此变量只能装字符串类型值，不是字符串也会转为字符串类型。在一次性创建多个变量的时候，var可以不用每创建一个就写一个，多个变量定义间用逗号隔开结束用分号可省略中间的var。
一个变量只定义不赋值，默认为undefined

常量

语法：const 常量名 =值

算术运算符

+-*%/

数据类型

1、原始/基本/值类型：String、Number、Boolean、Undefined、Null
2、引用/对象（属性和方法）类型：11种 - Array/Function

数据类型的转换

隐式转换

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

显示转换:隐式转换出来的结果不是我们想要的，先强制转换一下，再去做操作

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

函数

创建函数: function 函数名(形参,...){ 函数体; }
调用函数:
1、程序员在JS里面调好：函数名(实参,...);
2、绑定在页面元素上：<any on事件名="函数名()"> - HTML（内容）和CSS（样式）和JS（行为）要分离

分支结构

if语句：
语法：
①.一个条件一件事 if（条件1）{操作}
②.一个条件两件事 if（条件1）{操作1} else{操作2}
③.多个条件多件事 if（条件1）{操作1} elseif（条件2）{操作2}......else{操作}

循环结构

根据条件满不满足，如果满足就会一直做操作，直到条件不满足才会停止

while循环

.语法： var 循环变量名 = 值；
while（循环条件）{
循环体；
循环变量变化；
}
执行原理：当循环条件结果为true就执行一次循环，再返回判断循环条件直到判断循环条件结果为false则退出循环

while语句死循环：当循环不确定次数时
while（1/true）{
循环体；
}
注意：死循环往往需要配套循环流程控制语句break使用，用来强制退出循环

for循环

.语法：
for（var 循环变量=值，循环条件，循环变量的变化）{
循环体；
}
注意：循环变量可同时定义多个，中间用逗号隔开

for语句的死循环：
语法：for（；；）{
循环体；
}
同样需要配合循环流程控制语句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

查找元素

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、要么遍历拿到每一个

操作元素

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属性名有横线的地方要去掉横线变为小驼峰命名法
    获取的目的往往都是为了判断
    设置的目的就是修改

绑定事件

1、单个元素：elem.onclick=function(){ //关键字this的指向->这个元素 }

2、多个元素： for(var i=0;i<elems.length;i++){ elems[i].onclick=function(){ //关键字this的指定->当前元素：当前你触发事件的元素 } }

JS第一周

变量

常量