JS（JavaScript)
1.概述
运行在客户端浏览器的解释型，弱类型，面向对象的脚本语言
JavaScript有三部分组成：
ECMAScript--核心语法，以后任何操作都离不开它
DOM -- Document Object Modle-文档对象模型，可以用JS操作HTML和CSS
BOM -Browser Object Model 浏览器对象模型，可以用来操作浏览器
编译型
在运行程序之前，需要先检测语法是否正则，如果不正确，直接不允许运行（严格），比如：java/c++/c#........
解释型
在运行程序之前，不需要先检查语法是否正则，直接执行，但是碰到错误就会停止后续代码（更加自由），比如:javascript,PHP,node.js......
弱类型
变量保存的数据是可以随意的，数据类型是有数据来决定的。
1 - Number数字型
“1” - String 字符型
强类型
变量保存的数据，是由数据类型来决定的 Java 更加的严格
面相对象★★★★★
常用写法：对象名.方法名（）； 对象名.属性名；
特点
1.可以使用一切编译器工具来编写JS代码。
2.解释型
3.弱类型
4.面向对象编程方式
5.可以做一切css完成不了的效果（如：轮播/选项卡/购物车 /数据渲染.....）
★★变量和常量
变量：
创建后，值可以再次修改
var 变量名 = 值；
特殊：
1.变量名不能随意起 / 不能以关键字命名 / 不能以数字开头 / 建议使用下划线（_）命名法或者驼峰命名法
2.如果变量名是name，不管你保存的数据是什么类型的值，都会悄悄地转换成字符串型的
3.多个变量创建可以简写
常量：
创建后不可再修改，只能设置一次
语法：const 常量名 = 值；
算术运算符：
+，-，*，/，%
取余的固定套路：
1.判断奇偶性：num%2，结果为0就是偶数，结果为1就是奇数
获取一个数字的第几位
1234%10 == 4
1234%100 == 34
1234%1000 == 234
2.***特殊：其实算术运算存在隐式类型转换，默认转换为数字在运算
+运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接
- * / %：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以
如果字符串包含了非数字字符，直接转为NaN：Not A Number 不是一个数字，但确实是一个数值型
NaN：
1.参与任何算术运算，结果都为NaN
2.参与任何比较运算，结果都为false
问题：我们没有变法使用普遍的比较运算来判断x是不是NaN
解决：！isNaN（x）
true 是一个有效数字
false 是一个NaN
3.强制转换
显示/强制转换：隐式转换出来的结果不是我们想要的，我们需要自己手动调用一些方法，强制转为我们需要的类型，再做其他操作
1.转字符串：var str=x.toString(); x不能是undefined和null，因为这两个不能使用任何操作
2.转数字：
**parseint（str/num）； 把字符串和小数转为整数，从左到右转换，碰到非数字就停止转换，如果开始为非数字则转为NaN
console.log(parseint(100.5)) /// 100
console.log(parseint("100.5")) /// 100
console.log(parseint("100.5px")) ///100
console.log(parseint("px100.5")) ///NaN
console.log(parseint("true")) ///NaN
console.log(parseint("false")) ///NaN
console.log(parseint("null")) ///NaN
console.log(parseint("undefined")) ///NaN
parseFloat（str/num）； 转为数字型，可以转小数位
console.log(parseFloat(100.5)) ///100.5
console.log(parseFloat("100.5px")) ///100.5
console.log(parseFloat("100.5")) /// 100.5
console.log(parseFloat("10px0.5")) ///10
console.log(parseFloat("100.5.5.5.5")) ///100.5
3.Number(x); 强制转换为数值型（垃圾）
数据类型：
两大类
1.值类型
Number 数字 无数个值
String 字符串 无数个值，必须写上‘’或者“”
Boolean 布尔 两个值，False或者True
Undefined 1个值：undefined 创建一个变量，但是没有赋值，默认值为undefined
null 空 一个值 null释放变量/内存 节约内存空间
2.引用/对象类型：11个引用类型的对象
数字型：
可以用来保存整数类型以及小数类型（浮点数）
进制：2进制，8进制，10进制，16进制 （JS中八进制前加0，16进制前加上0x）
范围：JS中数值的最大值：Number.Max_Value
JS中数值的最小值：Number.Min_Value
三个特殊值：
alert（Infinity）；无穷大，大于任何数值
alert（-Infinite）；无穷小，小于任何数值
四舍五入/取整
向上取整：Math.ceil
向下取整：Math.floor
四舍五入：Math.round
固定精度：Math.toFixed
固定长度：Math.toPrecision
取整：Math.parseInt、位运算
字符串：
在JS中推荐使用单引号
引号嵌套：
var str='我是一个"高富帅"';
var str="我是一个'高富帅';
字符串转义字符：
\n 换行符
\\ 斜杠
\' 单引号
\'' 双引号
\t tab缩进
\b 空格
2.如何使用JS
使用方式
1.直接在HTML页面上写script标签，里面就可以书写js代码
<script></script>
2.外部引入js---正式开发时使用方式
创建XX.js文件，里面书写js代码
在HTML页面引入
<script src="XX.js">
只要有了src属性，中间就不允许再写代码了
</script>
输出方式/打桩输出：帮助我们检查错误,3种
1.控制天输出日志：console.log（想要输出/查看的东西）； F12console显示日志
2.在页面上输出日志：document.write（想要输出/查看的东西）document当前文档 write写入：在页面上输出，而且支出识别标签——垃圾：如果绑定了点击按钮，会让之前的HTML页面消失，会影响html和css
3.弹窗输出：alert（想要输出/查看的东西）；在一个浏览器自带输出的弹出窗中输出日志，但是弹出框会卡住页面，用户只能看到一个白板-垃圾
二.Function：函数
称之为方法：需要提前预定义好的，以后就可以反复使用的代码段
函数定义（后面带有小括号的就是函数）例如：
rotate（360deg） 完成一个360度顺时针旋转的功能
url（图片路径） 一个根据路径来显示图片的功能
使用方式
定义/声明/创建函数：
function 函数名（）{
若干代码；
}
调用/使用函数
1.要么在js中程序员直接写死，要执行几次：函数名（）；
2.要么交给用户绑定在某个元素上，写上点击事件，让用户来触发：
<elem onclick="js代码">内容</elem>
3.何时使用：
1.不希望打开页面立即执行，而需要时在使用 或 由用户来触发
2.希望能够反复执行，不用刷新页面
3.以后任何 一个独立的功能体，都要单独封装为一个函数（你的每一个作业）
4.函数的地位非常高，函数是第一等公民地位，随时随地考虑能不能封装为一个函数，尤其是重复的代码
5.函数内的一切内存，函数调用完毕后都会自动释放
4.带参数的函数
创建：形参，形式参数
funciton 函数名（形参，形参,.....）{
函数体；
}
使用：实参，实际的值，需要的时候再去调用使用
函数名（实参）；
funciton 函数名（形参，形参,.....）{
函数体；
}
例如：
pink（5,6）
funciton pink（x，y）{
console.log(x+y);
}
特殊： 1.传实参顺序一定要和形参顺序和数量一一对应
2.不是一定要带参数的函数才是好函数，具体情况，需要具体分析：
如果你的函数体就是固定的一则普通函数。
如果你的函数体希望根据传入的实参不同，做的略微不同一则带有参数的函数
三.顺序/分支/循环
递增（++）递减（--）运算符
前置递增或者递减：先自加/减，后返回值
后置递增或者递减：先返回值，后自加/减
比较（关系）运算符
< 大于
< 小于
<= 大于等于
>= 小于等于
= 赋值
== 等于
=== 全等于（值和数据类型完全一致）
!= 不等于
结果一定是布尔值，用来做判断
逻辑运算符
&& 逻辑与（and）两边条件都满足，返回true，否则返回false
// 逻辑或（or） 两边任意一个条件满足，返回true，否则返回false
! 逻辑非（not）取相反值，如果是true则返回false
多个条件综合比较
赋值运算符
= 直接赋值
+=，-= 加，减后在赋值
*=，/=，%= 成，除，取模后在赋值
运算符优先级
小括号()
一元运算符 ++,--,! !非最先运算
算术运算符 先算*,/后算+,-
关系运算符 >,>=,<,<=
相等运算符 !=,===
逻辑运算符 先看逻辑与在看逻辑或
赋值运算符 =
逗号运算符 ,
条件
判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路
使用：
一个条件，一件事，满足运行，不满足跳过
if（条件）{
操作；
}
一个条件两件事，满足第一条就运行第一条，不满足运行第二条
if（条件）{
操作；
else（条件）{
操作；
}
}
多个条件，多件事，满足谁运行谁
if（条件）{
操作；
else if（条件）{
操作；
}
}
特殊：
1.else if 可以写多个，根据需求判断写多少
2.最后else可以省略不写，但是不推荐，如果条件都不满足，那么就不会执行任何语句
3.书写判断顺序，需要根据需求来写，不能打乱顺序写
输入框
prompt（“提示信息”，“默认值”）；
循环
**for循环
for（var 循环变量；循环条件；循环变量变化）{循环体；}
死循环：for（；；）{循环体；}
面试题：while和for 的区别？
语法上有区别，但两者都能做到相同的操作
一般来说我们不确定循环次数的时候，使用while循坏---死循环
我们确定循环次数的时候，就用for循环-----更加简洁，平时大部分都使用for循环
while循环：
语法
var 循环变量；
while（循环条件）{
循环体；
循环变量变化；
}
执行原理：创建循环变量，然后判断条件，如果条件满足，则做一次循环体操作，并不会退出循环，会回头重新判断条件是否满足，直到条件不满足后退出循环；如果一开始条件不满足，则直接退出循环执行循环后面的语句。
特殊:
1.有时候不知道从何开始循环，从何结束循环，死循环：永远不会停下来
何时使用：不确定循环次数的时候
死循环：while（true）{循环体；}
2.退出循环语句：break-只能在循环中使用，多半搭配死循环使用的
***数组
数组可以解决：创建一个变量可以保存多个数据的集合
数组都是线性排列，除了第一个元素，每个元素都有唯一的后继元素
***每一个元素都有一个自己的位置，称为下标，数组的下标是从0开始，到最大长度-1
创建数组 2种
1.*直接量方式：
var arr=[];空数组
var arr=[数据1，数据2，数据3.....]；
2.构造函数方式：
var arr=new Array（）；空数组
var arr=new Array（数据1，数据2，数据3......）；
获取数组中的数据
数组名[下标]；
添加/替换数组
数组名[下标]=新值；
下标处没有元素，就会增加，如果下标处有元素，则会替换
数组具有三大不限制
1.不限制元素个数
2.不限制元素的类型
3.不限制元素的下标越界---不是好的限制
如果获取元素，下标越界，返回的一个undefined
如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多的undefinec 问题：自己数下标，是不科学的，很有可能就会数错
解决：数组中唯一的属性:
长度：数组名.length - 获取当前数组的长度：最大下标+1
三个固定套路: 1、获取倒数第n个元素：arr[arr.length-n] 2、始终向末尾添加元素：arr[arr.length]=新值; 3、缩容：删除倒数n个元素：arr.length-=n；
前面的下标好数，后面的下标也好数，中间的下标不好数
***往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行 相同或相似的操作
遍历数组：把数组中的每个元素拿出来执行相同或相似的操作
公示：
for (var i=0;i<数组名.length;i++){
console.log(数组名[i]);
}
三.DOM（Document Object Model：文档对象模型）
专用于操作HTML文档的，提供了一些属性和方法
DOM树概念：
DOM将我们的HTML看作了上一个倒挂的树状结构，但是树根不是html，而是document
document对象：不需要我们创建，由浏览器的js解释器自动创建，一个页面只有一个document
DOM作用:
可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
DOM会将页面上的每一个元素/属性/文本/注释都会当作一个DOM元素/节点/对象
查找元素：
通过ID值来查找元素 语法：
var x=document.getElementByid（“id值”);
特殊：
1.返回值，找到了返回的是一个当前找到的DOM元素，没找到的话，返回一个null，null进行操作会报错
2.找到了多个相同的id，只返回第一个id
3.垃圾方法，不准使用，一次只能回去一个元素，只能操作一个元素，麻烦
4.其实根本不需要使用此方法，直接写ID也可以找到元素 --偷懒的写法
*通过标签名查找元素：语法
var elems=document.getElementsByTagName("标签名"); 特殊: 1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合 2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标享到某一个元素，要么使用通历掌到每一个元素
3.不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到该父元素下面的元素
*通过class名查找元素 语法
var elems=document.getElementsByClassName("class名");
特殊: 1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合 2、JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标享到某一个元素，要么使用通历掌到每一个元素
3.不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到该父元素下面的元素
*通过关系查找元素：
前提：必须先找找到一个元素才可以调用关系网
父元素: elem.parentNode; 子元素：elem.children；- 集合 第一个儿子: elem.firstElementChild; 最后一个儿子：elem.lastElementChild; 前一个兄弟: elem.previousElementSibling; 后一个兄弟: elem.nextElementSibling;
强调：DOM集合不能直接做操作！
操作元素
找到元素才能操作元素：<标签名 属性名=“属性值” style=“样式”>内容</标签>
1.内容
**innerHTML：获取和设置开始标签到结束标签之间的内容-支持识别标签
获取emel.innerHTML;
设置emel.innerHTML=“新内容”;
innerText: 获取和设置开始标签到结束标签之间的文本一不支持识别标签
获取elem.innerText；
设置emel.innerText=“新内容”;
以上两个属性都是为双标签准备的，但是操作不了单标签input的内容
value:专门为input的value值准备的
获取: input.value; 设置: input.value="新值”;
2.*属性:
获取属性值:
elem.getAttribute("属性名");
设置属性值:
elem.setAttribute("属性名","属性值");
简化：
获取属性值：elem.属性名;
设置属性值：elem.属性值=“新属性值”；
例如： id名.className="bbb";
修改id值后，后面获取时要使用修改后的id值获取
简化版的 1.class必须写成className 例如：id值.className
2.不能操作自定义属性，只能操作标准属性
3.*样式
使用样式的方式: 1、*内联/行内样式 2、内部样式表 3、外部样式表
获取：
emel.style.css属性
设置：
emel.style.css属性=“css属性值”；
特殊：
1.css属性名有横向的地方，要取掉横线变为小驼峰命名法
例如：list-style-type ->listStyleType
2. 目前学习的，获取时，只能获取内联样式--小缺点，我们**可以忽略掉**，就算以后会了操作样式表，也不会去使用
4.绑定事件
elem.on事件名=function(){
操作;
***this关键字：目前只能用于事件内：
如果单个元素绑定事件：this==当前这个元素
如果单个元素绑定事件：this==当前触发事件的元素
}
总结：
获取就是用于判断或者比较
设置就是用于改变值
方法：
eval（）计算字符串
后端返回的数据是JSON字符串
