简称：JS，是运行在浏览器上的解释器上的解释器 弱类型语言，面向对象的脚本语言。

三种输出方式：

         1.console.log(想要输出的内容)-在F12的控制台console输出
         2、donlument.whie（输出的内容）-在页面输出
         3.aletc（输出的内容）-打开一个警告框，在警告框输出但是会卡住整个页面

变量：

可以变化的数据 原始值类型5种： Number/sting/Boolean/undefined/null 将字符串转为数字：parselnt()整数 pasefloaf()浮点数、小数 语法:var 变量名=值; *特殊：1.变量名不是随意的：1.不能以数字开头 2.不能使用关键字 3.尽量的见名知意

常量：

语法:const常量名=值;

算数运算符:

• • • / % %读者磨 m/n不取商，而取除不尽的余数 作用： 1.判断奇偶数 num%2==0偶数 num%2==1奇数 2.获取一个数字的后n位 12234%10->4 1234%100->34 3.判断一个数字永远不超过5 num%5->结果永远不会超过5 ***算数运算默认具有隐式转换为数字，在运算。 特殊：+运算，如果碰到了一个字符串，那么俩边都会悄悄的转为一个字符串，然后+运算为拼接操作。

分支结构：

一个条件一件事，满足就做，不满足九不做 if(条件){操作} 一个条件俩件事，满足就做第一件，不满足就做第二件 if(条件){操作}else{默认值} 多个条件多件事，满足谁就做谁 if（条件1）{操作1}else if(条件2){操作2}else{默认值} 特殊：1.分支走了一条路，就不会走别的路 2.最后的else可以省略不会，但是省略后，如果条件都不满足，则什么都不会执行

隐式转换：

只要是转为数字：true->1 false->0 undefined->NaN null->0 "100"->100 "100px"->NaN *算数运算的隐式转换：只要是算数运算 默认两边都会悄悄的转为数字在运算 *特殊+运算，碰到一个字符串，=两边都会悄悄的转换为字符串，爱拼接起来 其实字符串也是很可以转为数字的，但是要求是纯数字组成的字符串，只要字符串里包含了一个 非数字字符串则转为NaN

NaN:Not a Number:

不是一个数字，但是他确实是Number类型

全是缺点：

1.NaN参与任何算术运算，结果仍为NaN
          2.NaN参与任何比较运算，结果都为false，甚至不认识自己
          问题：我们没有办法使用普通的比较运算来判断X是不是NaN
          解决：!isNaN
          可以判断NaN要求用户输入的必须是一个数字!

显示转换：

强制转换：隐式转换出来的结果不是我们想要，程序员可以手动调用某些方法来实现的数据类型的转换 1.转为字符串： var str=xx.toString();//null和undefined不能使用

*转为数字

语法： parselnt(str/num)

执行原理：从左到右依次读取每一个字符，碰到非数字字符就会停止转换，并且不能认识小数点，如果一来就不认识，则为MaN只能放入str/num，一旦放入别的数据类型就会转换为NaN。
console.log(parseInt(35.45));//35
console.log(parseInt("35.45"));//35			       console.log(parseInt("3hello5"));//3
console.log(parseInt("35px"));//35
console.log(parseInt("hello35"));//NaN
console.log(parseInt(true));//NaN

语法：parseFloat(str)

执行原理：几乎和上者一样，认识第一个小数点 console.log(parseFloat("35.45"));//35.45 console.log(parseFloat("35.45.45"));//35.45 console.log(parseFloat("35.4abc5.45"));//35.4 console.log(parseFloat("35.45px"));//35.45 Number(x)：万能的什么都可以转为数字，包括undefined和null，垃圾 其实他完全相当于隐式转换，不用手动使用，还不如x1 x/1 x-0 parseXXX vs Number()： Number：绝对不会手动使用，还不如x1 x/1 x-0，可以转一切 *parseXXX：专门用于将字符串转为数字，一定用的非常多，因为页面上的数据都是字符串类型

*****函数:

函数在js是第一等公民。 什么是函数：函数（function）是一段被预定义好的，可以反复使用的代码段； 是个独立的功能体，可以将若干的代码放在里面。

 定义函数 以及 功能
语法：
	function 函数名(){
		函数体;//若干操作
	}
 注意：函数定义好之后，不会立刻执行，只有在【调用】之后才会执行
 调用函数
语法：函数名();

调用的方式：2种
	1、直接在js内部调用
	2、可以绑定在页面元素之上：比如：<any onclick="函数名();"></any>

什么东西适合封装在函数之中 1、不希望打开页面立刻执行，可能是用户来触发 2、有可能会反复执行的代码，重复的代码 3、本身就是一段独立的功能体，你的每一个作业都是一个独立的功能体 好处：函数里面的变量执行完毕后，他会自动释放，节约内存

带参数的函数 定义在函数小括号种的变量名，不需要写var，称之为形式参数，简称形参 function 函数名(形参,...){ 函数体; } 调用带参数的函数，必须向里面传入实际参数，简称为实参 函数名(实参,...);

分支结构：

程序一共有三种结构：

1、顺序结构：默认结构，从上向下，依次执行每一段代码
2、分支结构：根据判断条件，选择一部分代码去执行（只会选择一条路走）
3、循环结构：根据判断条件，选择是否需要重复执行某一段代码

比较运算符：

< >= <= == != 结果：以上6个运算符：布尔值：true、false 往往比较运算都会出现在分支、循环的条件之中

if结构：

1、一个条件一件事，满足就做，不满足就不做 if(条件){ 操作 }

2、一个条件两件事，满足就做第一件，不满足就做第二件 if(条件){ 操作 }else{ 默认操作 }

3、多个条件多件事，满足谁就做谁 if(条件1){ 操作1 }else if(条件2){ 操作2 }else{ 默认操作 }

注意：1、else if想写多少个就写多少个 2、最后的else可以省略不写，但是如果条件都不满足，则什么都不执行

逻辑运算符：

&&：与（并且）
只有全部条件都为true，最后结果才为true
只要有一个条件为false，最后结果就为false

||：或者
只有全部条件都为false，最后结果才为false
    只要有一个条件为true，最后结果就为true

 !：颠倒bool值
 

循环结构：

什么是循环：【反复执行相同 或 相似的操作】 循环特点：循环三要素 1、循环条件：开始、结束：重复执行多少次 2、循环体：循环操作：要做什么 3、循环变量 以及 循环变量的变化

while循环：

语法：
  var 循环变量=几;
  while(循环条件){
	循环体;
	循环变量发生变化;
  }

执行原理：先判断循环条件，如果条件为true的话，则执行【一次】循环体 然后再一次判断循环条件，如果条件为true的话，则再执行【一次】循环体 ... 直到条件为false，才会退出循环执行后续代码 注意：循环是一次一次的执行的，不是同时执行的，只不过计算机的速度比较快 死循环：永远不会结束的循环 - 【不确定执行的次数】的时候，就可以使用死循环，但是死循环多半都要搭配上一个循环控制语句break while(true){循环体} 循环流程控制语句：break - 退出循环

for循环：

语法：for(循环变量;循环条件;循环变量的变化){
		循环体;
      }

while循环可以做的操作，for循环一样也可以 特殊：1、循环变量处可以创建多个中间用,间隔 2、死循环：for(;;){操作} 函数 - 反复执行，多半都是用户触发 循环 - 反复执行，感觉是一瞬间就结束了

数组：

创建数组：2种方式 1、*直接量方式 var arr=[];//空数组 var arr=[数据,数据,...];

2、构造函数方式
	var arr=new Array();//空数组
	var arr=new Array(数据,数据,...);

创建的特殊点： 1、不限制数据的长度 2、不限制数据的类型 3、不限制下标越界 - 并不是好事情 访问元素时下标越界：结果undefined 追加元素时下标越界：数组变成一个稀疏数组

访问数组中的元素：

数组名[下标];

追加/替换元素

数组名[下标]=值;
当前下标有没有元素，如果有，则为替换，如果没有，则为追加

数组中有一个属性：length：长度 语法：数组名.length

三个固定套路：

  1、向末尾追加元素：数组名[数组名.length]=值;
  2、获取倒数第n个元素：数组名[数组名.length-n];
  3、删除某位的n个元素：数组名.length-=n;

遍历数组：

把数组中的每个元素都取出来执行 相同 或 相似 的操作

公式：

  for(var i=0;i<数组名.length;i++){
	数组名[i];//当前次元素
  }
     
     
     
     

DOM概念：

DOM树：把HTML看做了是一个倒挂的树状结构，树根其实不是html，而是document的一个对象 document对象不需要我们创建，浏览器的js解释器自动创建，一个页面只有一个document 提供了很多属性和方法， 注意：DOM会把页面上的所有的元素、属性、文本、注释都会视为一个dom节点/dom元素/dom对象

获取元素：

通过 ID：

   语法：var elem=document.getElementById("id值");
   返回：是一个dom节点/dom元素/dom对象，可以用于做操作
   特殊：
	1、id重复了，只会找到第一个
	2、如果没找到，返回的是一个null
	3、此方法白学不用，因为id一次只能找到一个元素，操作过于繁琐 - 自定义举例小张可以用

*通过 标签名：

   语法：var elems=document/parent.getElementsByTagName("标签名");
   返回：是一个类数组对象/dom集合，长得像数组，也可以使用下标，也可以使用length，也可以遍历，不能直接做操作
               特殊：
	1、可以使用下标获取到某个元素，也可以使用遍历获取到所有元素，再做操作
	2、如果没找到，返回的是一个空集合
	3、此方法不一样非要写document，可以写parent（你已经找到的某个父元素）

*通过 class名：

   语法：var elems=document/parent.getElementsByClassName("class名");
   返回：是一个类数组对象/dom集合，长得像数组，也可以使用下标，也可以使用length，也可以遍历，不能直接做操作
特殊：
	1、可以使用下标获取到某个元素，也可以使用遍历获取到所有元素，再做操作
	2、如果没找到，返回的是一个空集合
	3、此方法不一样非要写document，可以写parent（你已经找到的某个父元素）

*通过 元素之间的关系 获取元素：

强调：必须先找到一个元素才能使用关系
1、父亲：elem.parentNode; - 单个元素
2、儿子：elem.children; - 集合
3、第一个儿子：elem.firstElementChild; - 单个元素
4、最后一个儿子：elem.lastElementChild; - 单个元素
5、前一个兄弟：elem.previousElementSibling; - 单个元素
6、后一个兄弟：elem.nextElementSibling; - 单个元素

操作元素：

<any 属性名="属性值" style="css属性名:css属性值;">内容 内容： *1、innerHTML：双标签，能够识别标签 获取：elem.innerHTML; - 往往用于参加比较运算 设置/修改：elem.innerHTML="新值"; 2、innerText：双标签，纯文本 获取：elem.innerText; - 往往用于参加比较运算 设置/修改：elem.innerText="新值"; value：单标签 获取：input.value; - 往往用于参加比较运算 设置/修改：input.value="新值"; 属性： 获取属性值：elem.getAttribute("属性名"); - 往往用于参加比较运算 - 万能 设置属性值：elem.setAttribute("属性名","属性值"); - 万能 简化版操作： 获取属性值：elem.属性名; - 往往用于参加比较运算 设置属性值：elem.属性名="属性值"; 特殊点： 1、class必须写为className 2、只能操作标准属性，不能操作自定义属性 样式：

内联样式的操作：

优点：
 1、优先级最高 - 保证生效
 2、不会牵一发而动全身 - 只会修改当前元素
缺点：
1、获取时，也只能获取内联样式 - 忽略不计
获取样式：elem.style.css属性名; - 往往用于参加比较运算 
设置样式：elem.style.css属性名="css属性值";

特殊：css属性名的写法有横线的地方，去掉横线，换成小驼峰命名法

*绑定事件：

elem.onclick=function(){
	***this：只能在事件之中使用
	this->单个元素绑定事件this指向的就是这个元素
	this->多个元素循环绑定了事件，this指向的就是当前元素（你当前点的是哪个就是哪个）
}