Javascript概述
javaScripat简称js是运行在js解释器的解释型、弱类型、面对对象的脚本语言。
1.js解释器不需要安装，
浏览器自带的，后续会在node.js服务器安装一个独立的js解释器
2.解释型是运行之前不需要检查代码的语法错误,直接运行,遇到错误的 就停止运行
编译型是java,c语言,它们会检查语法错误,错误的话会直接报错.更严格。
3.js特点
代码可以用任何编译器来写
不需要检查语法错误，遇到错误，就停止
弱类型是由数据决定了数据类型----就是变量想保存什么就保存什么
强类型更严格，是由数据类型决定数据是什么
面向对象，万物皆对象
对象.属性 ------对象.方法(）
4.js的用途，是把静态网页写成动态，
ajax服务端交互
5.如何在html文件中使用javaScript
在html写上标签<script>js代码内容</script>
在html中引入外部js文件<script src="js路径"></script>;标签里面就不能写js代码了
建议js代码都卸载html文件最后,因为代码是从上往下读取,可能js读取比较慢,导致用户进来的时候看不到页面效果.
js代码
1.注释代码
单行注释//
多行注释/* */
2.输入方式
console.log()在控制台输入,打桩输出,检查代码错误,经常使用.
document.write()在页面中输入,缺点是如果绑定了实际,会把内容全部替换
alert()在弹出框输出.缺点是会卡住页面
3.变量
变量就是一个空间,存储数据的,在需要用的时候,把变量空间里面的内容拿出来用，它可以是字符串、数字、Boolean.....
变量的名字不能随便取，不能以数字开头，不能是关键字，尽量见名思意
如果要创建多个变量可以var 变量名=数据,变量名=数据;
= 是赋值的意思把右边赋值给左边的变量之中
4.常量
const 常量名=数据
常量一旦创建,数据就不能更改
数据类型
1.原始基本类型
字符串-string-"它有无数个";加了双引号,它都是字符串
数字-number-无数个
布尔值-Boolean-两个取值,false=0/假 true=1/真
undefined-是一个变量默认的值
null=0-空的意思-取值也就为null,释放变量空间的
2.11个对象
3.算数运算符 + - * / %
%为mo模,n%m 取余
算数运算具有隐式转换,默认都转为数字来计算
+ 运算比较特殊,如果碰到字符串,他会使他们变成拼接状态
- * /也会转为数字数字计算,必须是纯数字的字符串,如果遇到不是纯数字的字符串,得到的结果就会为NAN
NAN做比较运算,都会是为false
解决方法 !isNAN 是NAN为false 不是则为true
1、程序的结构：3种
1、顺序结构：默认结构，从上向下依次执行每一句代码
2、分支结构：根据判断条件，选择一部分代码去执行（只会走一条路）
3、循环结构：根据判断条件，选择是否重复执行某一段代码
4、比较/关系运算符：> < >= <= == !=
结果：以上六个运算符结果都为布尔值：true、false
往往比较运算符出现在分支、循环的判断条件之中
其实关系运算符也具有隐式转换：
5.逻辑运算符：
&&：与（并且）
只有全部条件都为true，最后结果才为true
只要有一个条件为false，最后结果就为false
||：或
只有全部条件都为false，最后结果才为false
只要有一个条件为true，最后结果就为true
!：颠倒布尔值：
!true -> false
!false -> true
循环
1、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化一下;
}
执行原理：先判断循环条件，如果条件为真，则执行【一次】循环体
然后再判断循环条件，如果条件为真，则执行再【一次】循环体
...
直到条件为假，循环才会结束
注意：循环是一次一次执行的 - 并不是同事执行的，只不过计算机的CPU计算速度比较快
死循环：永远不会结束的循环 - 保存死循环也是可以退出循环
何时：不确定要执行的具体次数，但往往死循环会搭配上break进行退出
while(true){
循环体
}
循环退出语句：break; - 出现循环之中
2.for循环：while能做，for也能做，而且for看上更加的简单/简洁
语法：for(var 循环变量=几;循环条件;变量的变化){
循环体
}
特殊：
1、死循环：for(;;){循环体} - 两个分号一个不能少
2、循环变量处其实可以创建多个变量
3、也支持break
总结：
1、while：一般都不用，何时使用：不确定循环次数的时候
2、for：常用，确定循环次数时
数组
1数组：
问题：保存1000个人的姓名? - 如果是以下这种写法，我们开辟1000个内存空间
var name1="张三1"
...
var name1000="张三1000"
解决：数组：多个数据/元素组成的一个集合，保存在一个变量中
数组中的元素都是按照线性顺序来排列，除了第一个元素，每个元素都有一个唯一的前驱元素
除了最后一个元素，每个元素都有一个唯一的后继元素
*数组中每个元素都有一个唯一的位置序号，称之为【下标】，用来表示数组中的每一个元素
下标是从0开始，到最大长度-1
2.创建数组：2种方式：
1、*直接量方式：
var arr=[];//空数组
var arr=[数据,数据,...];
2、构造函数方式：此方法还有一个坑，但是我不说
var arr=new Array();//空数组
var arr=new Array(数据,数据,...);
3.访问数组：
1、获取数据
数组名[下标];
特殊：1、下标越界，获取到的是一个undefined
2、添加数据
数组名[下标]=新数据;
特殊：1、如果下标处已有元素，则为替换
2、如果下标越界，会导致你的数组变成一个稀疏数组，中间就会出现很多的undefined，而且下标也不再连续
结论：数组具有3大不限制：
1、不限制元素的长度
2、不限制元素的类型
3、不限制下标越界 - 但是这个操作并不是好事情，强烈不推荐下标越界
3.数组对象 - 唯一属性
正是因为我们自己数下标容易数错，提供了一个属性：语法：数组名.length - 获取到数组的长度
三个固定套路：
1、向末尾添加元素：arr[arr.length]=新值
2、获取倒数第n个元素：arr[arr.length-n];
3、删除末尾的n个元素：arr.length-=n
4.遍历数组：将数组中的每个元素都取出来 执行 相同 或 相似的操作
公式：for(var i=0;i<arr.length;i++){
arr[i];//当前次获取到的元素
}
dom
1.DOM概念：
DOM树：把HTML看做了是一个倒挂的树状结构，但是树根并不是你们理解的HTML，而是document对象（属性和方法）
document对象不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document
有一些属性和方法等待我们去学习
注意：DOM会把页面上的所有的元素都看做是一个DOM对象、DOM节点、DOM元素 - 都是同一个意思
2.获取元素：
1、通过 HTML 的属性去获取元素
1、通过ID：
语法：var elem=document.getElementById("id值");
返回：是一个DOM对象/DOM节点/DOM元素，才可以直接做操作
特殊：
1、如果id重复了，只会返回第一个
2、如果没找到，返回的是一个null
3、此方法白学，以后不准使用
2、*通过 标签名：
语法：var elems=document/parent.getElementsByTagName("标签名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
3、*通过 class名：
语法：var elems=document/parent.getElementsByClassName("class名");
返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
特殊：
1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
2、如果没找到，返回的是一个空集合
3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
如果是写的document，则会找到页面上所有的标签
而写的是parent，只会找到parent下面的所有的标签
3.通过 节点之间的关系 获取元素
前提：至少先要找到一个元素，才能找关系
1、父元素：xx.parentNode - 单个元素
2、子元素：xx.children - 集合
3、第一个儿子：xx.firstElementChild - 单个元素
4、最后一个儿子：xx.lastElementChild - 单个元素
5、前一个兄弟：xx.previousElementSibling - 单个元素
6、后一个兄弟：xx.nextElementSibling - 单个元素
4.操作元素：<elem 属性名="属性值" style="样式">内容<elem/>
1、内容：
1、*innerHTML：用于操作双标签，能够识别标签
获取：elem.innerHTML;
设置/修改：elem.innerHTML="新内容";
2、innerText：用于操作双标签，不能识别标签
获取：elem.innerText;
设置/修改：elem.innerText="新内容";
3、*value：用于操作input
获取：elem.value;
设置/修改：elem.value="新内容";
属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版：
获取属性值：elem.属性名;
设置属性值：elem.属性名="属性值";
简化版注意：两个小缺点：
1、class必须写为className
2、只能操作标准属性，不能操作自定义属性
建议：开发中优先使用简化版，简化版实现不了的时候在用复杂版代替
绑定事件：
为什么不用以前的绑定方式了呢？
保证HTML和CSS和JS分离
语法：elem.onclick=function(){
点击后要执行什么代码
***this关键字：
单个元素绑定事件，this->这个元素
多个元素绑定事件，this->当前触发事件的元素
}
