JavaScript：
简称JS，是一门运行在浏览器、客户端的解释型、解释型、弱类型、面向对象型的脚本语言。
运行环境：
1、浏览器自带js解释器
2、node.js需要安装环境
编译型：
会在运行之前检查有没有报错，如果有报错直接不执行。如：Java、c++、c
解释型：
在运行之前不会检查有没有报错，直接运行，遇到有报错的地方停止。如：JavaScript、node.js等
弱类型：
在创建变量时，想放入什么数据就放入什么数据，非常自由。
强类型：
在创建变量时，要先规定好要放入的数据类型，才能往里面方式数据。
js的运行方式：
1、在html页面找一个位置，创建一个<script></script>，在里面编写你的js代码。
2、在外部创建js文件，在文件里面写入你的js代码，在html中引入
打桩输出的三种方式：
1、在控制台输出：console.log();
2、在页面输出：document.write();
3、警告框弹出：alert();
js注释：
作用：方便以后的日常维护
单行注释：
多行注释
变量和常量：
硬盘：外部存储器：外存，保存文件/数据
CPU：中央处理器，计算机速度
内存：内部存储器，保存的是应用程序在执行过程中，所需要的用到的数据，变量其实就是一个内存，变量名就是内存地址。
变量：可以保存数据，如数据繁琐可以使用变量名，就相当于是在使用变量的值，变量的值是可以改变的。
何时使用：只要反复出现反复使用的，都要先保存在变量之中。
语法：var 变量名=变量值
注意：
1、变量名不是随意的，不能是数字开头，可以数字结尾。起名最好能见名思意，不能使用关键字名。
2、可以简写，后面的值用逗号隔开
常量：一但创建，值不可以修改
语法：const=常量值
数据类型：
1、原始、基础、值类型：5种
1、number：数字类型，取值有无数个
2、string：字符串类型，取值有无数个
3、Boolean：布尔类型，取值有两个true、flase，一半做判断时出现
4、null：空类型，释放你不要的内存、变量
5、undefiend：没什么实际意义
运算符：
赋值运算：=
算数运算：+ - * /
特殊：
作用：最大的作用就是用来判断奇偶数
算术运算都有隐式转换：都是转换成数字在运算
特殊：+运算，只要碰到一个字符串，两边都会转换成字符串，+运算不在是+运算而是变成了拼接
数据类型的转换：
隐式转换：将两边的转换为数字类型在进行运算
特殊：+运算会将两边的转换为字符串进行拼接
- * /%都可以转换为数字前提是两边的为纯数字，但凡包括了一个非数字类型结果都为NAN
NAN:not a number,不是一个数字但又是数字类型，不是一个有效数字
有两个缺点：1、NAN参与任何计算结果都为NAN
2、NAN参与任何比较运算结果都为flase，带来一个问题：我们没有办法用普通的比较运算来判断x是否为flase。
解决方法：!NAN():
显示强制转换：隐式转换出来不是我们想要的，我们可以手动调用一些方法，强制转换为我们想要的数据
1、字符串：var str=x.string();
2、转数字：3种
1、parenInt(ste/num);parse：解析 Int:整数
原理：专门为字符串小数转换为整数数字准备的，从左往右依次读取每个字符，碰到非数字字符就停止转换，一开始就碰到非数字字符，则无NAN，不认识小数点
2、parseFlase（str）；parse：解析 flase：浮点型，小数
原理：和parseInt差不多，但是只认识第一个小数点
3、Number（any）；任何类型都可以转化为数字类型，完全等效于隐式转换
function（）函数：
function：函数也称之为方法，要提前预定义好的，以后就可以重复使用的代码段
如何使用：1、创建函数：
function 函数名(){
若干操作/代码段;
}
2、调用函数：
函数名（）；
注意:1、程序员在js里面写死的，调用几次就会执行几次
2、交给用户来触发，只需要在某个元素上绑定点击事件
<elem.onclick="函数名()">内容</elem>
带参数的函数：
创建：形参：形式参数，其实就是一个变量，但不用写var，而且默认保存的是unedfined
function 函数名(形参，....){
若干操作/代码段；
}
调用：实参：实际参数，真正的值，需要在你调用的时候从外部传入进去
函数名（实参，....）;
注意：传参的顺序要一一对应，并且数量也要对应上，不是所有的函数都要带参数，而是根据我们的需求来考虑的
分支结构:
1、程序的控制语句：3种
1、顺序执行：默认从上往下依次执行
2、分支结构：通过判断条件，选择部分代码执行
3、循环结构：通过判断条件，要不要重复执行某一块代码
2、比较运算符：> < >= <= != == 用于做判断用的
结果：一定是一个布尔值
3、逻辑运算符：
&&：与、并且，要求条件都满足，结果才为true
只要有一个不满足结果为flase
||：或者，要求条件都不满足，结果才为flase
只要有一个条件满足结果为true
！：颠倒布尔值
分支语法：
一个条件一件事，满足就做不满足就不做
if(条件){操作}
一个条件两件是，满足就做第一件，不满足就做第二件
if(条件){操作1}else{默认操作}
一个条件多件事，满足谁就做谁
if(条件1){操作1}else if(条件2){操作2}else{默认操作}
循环：
循环结构：反复执行相似或者相同的操作
循环三要素：
1、循环条件：开始到结束，循环的次数
2、记录每一次的变化，而且它一定时在不断变化的
3、循环体：做的什么操作
1、while循环：
语法：
var 循环变量= ;
while(循环条件)
循环体；
循环变量，变化起来
}
执行原理：首先创建循环变量，判断循环条件，如果条件满足就执行一次循环，并不会结束，会回头继续判断循环，条件满足的话继续执行.........直到循环条件不满足flase时，才会退出循环。
宏观上是一瞬间就结束了，但微观上是一次次执行的
特殊：有时候需要用到死循环
何时使用：不确定循环次数的时候
while(true){
循环体；
}
退出循环语句：break 只能在循环中使用，多半是搭配死循环使用
2、for循环：和while循环原理是一样的，但是它比while循环看上去更加整洁、简单、舒服
语法：
for(var 循环变量=几；循环条件；循环变量变化起来){
循环体；
}
死循环：
for(;;){
循环体；
}
while循环和for循环有什么区别？
一般来说我们不确定循环次数的时候使用while循环
一般来说我们确定循环次数的时候使用for循环
数组的基础：
数组：创建一个变量可以保存多个数据
数组都是线性排列的，除了第一个元素，每个元素都有唯一的前驱元素
除了最后一个元素，每个元素都有唯一的后继元素
每个元素都有自己的唯一位置，称之为下标，下标从0开始到最大长度-1结束
创建数组：2种
直接量方式：var arr=[]
var arr=[数据，....]
构造函数方式：var arr=new Array();
var arr=new Array(数据，。。。。)
获取数组中的数据：
数组名[i]
后继添加、替换元素：
数组名[i]=数据；
具体要看i有没有位置
数组有三大不限制：
1、不限制元素的个数
2、不限制元素的类型
3、不限制下标越界
如果获取元素下标越界就会得到unedfinde
如果添加元素是下标越界就会得到一个稀疏数组
数组有一个唯一的属性：length：长度
语法：数组名.length；
三个固定套路：
1、向末尾添加元素：arr[arr.length]=数据
2、获取数组中的倒数第n个元素：arr[arr.length-n]
3、缩容：删除数组中倒数第n个元素arr.length-=n
往往很多情况下，我们不会把某个元素拿出来使用，而是把所有元素拿出来进行相同或相似的操作
遍历数组：把数组中的每个元素取出来进行相同或相似的操作
for(var i=o;i<arr.length;i++){
arr[i]//当前元素
}
DOM：
Document Object Model：文档对象模型，专门用于操作html文档的，提供了一些方法
DOM树概念：
DOM将HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
document对象：不需要程序员创建，有浏览器的js解释器自动创建，一个页面只有一个document对象
作用：只要是对象就提供了属性和方法，找到想要的任何DOM元素、对象、节点，甚至进行操作
DOM会将页面上的每个元素、属性、文本、注释都当作一个DOM元素、对象、节点。
查找元素：
通过ID查找元素：
var elem=document.getElementById("id名")；
特殊：
1、如果页面有多个重复的ID，只会返回第一个
2、没有找到，返回null
3、ID不用找，可以直接使用
4、最好不要使用ID，把ID留给后端使用
通过标签名查找元素：
var elems=document/parent.getElementsByTagName("标签名")
特殊：
1、返回值，返回了一个类数组对象，没有找到，返回空空类数组
2、js不能直接操作DOM集合，解决：要么使用下标得到某一个元素，要么使用遍历得到每一个元素
3、parent 代表你已经找到的某个父元素
通过class名查找元素：
var elems=document/parent.getElementsByClassName("class名")；
特殊：
1、返回值，返回了一个类数组对象，没有找到，返回空空类数组
2、js不能直接操作DOM集合，解决：要么使用下标得到某一个元素，要么使用遍历得到每一个元素
3、parent 代表你已经找到的某个父元素
通过关系找元素：
前提：必须先找到一个元素才可以调用关系
父元素：elem.parent.Node
子元素：elem.children
第一个子元素：elem.firstElemetChild
最后一个子元素：elem.lastElementChild
前一个兄弟:elem.previousElementSibling
好一个兄弟:elem.nextElementSibling
操作元素：
前提：找到元素才能进行操作
1、内容：
1、innerHTML:获取和设置开始标签到结束标签之间的内容，支持识别标签
获取：elem.innerHTML
设置：elem.innerHTML="新内容"
2、innerText:获取和设置开始标签到结束标签之间的文本，不支持识别标签
获取：elem.innerText
设置：elem.innerText="新内容"
3、value：专门为input准备的
获取：input.value
设置：input.vlaue="新内容"
2、属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名"，"属性值")
简化版：
获取属性值：elem.属性名；
设置属性值：elem.属性名="属性值";
3、样式：
使用样式表的方式：
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值"；
特殊：
1、css属性名，有-的地方要去除掉-，变为小驼峰命名法
border-radius -> borderRadius
2、获取样式时，也只能获取到内联样式
4、绑定事件：
elem.on事件名=function(){
操作；
this关键字：这个
如果单个元素绑定事件。this -> 这个元素
如果多个元素绑定事件，this -> 当前触发事件的元素
}
