1、概述：JavaScript：简称js，是一个运行在客户端浏览器端的【解释型】【弱类型】【面向对象】脚本语言
1、js的运行环境：
1、浏览器自带js解释器，不需要安装任何环境
2、编译型：在运行程序之前，需要先检查语法是否正确，如果不正确，直接不运行 ，比如：Java、C++...
解释型：在运行程序之前，不需要检查语法是否正确，直接运行，碰到错误就会停止后续代码 ，比如：JavaScript、Node.js、PHP...
3、弱类型：变量保存的数据可以是随意的，数据类型由数据来决定
1 - number
"1" - string
强类型：变量保存的数据，由数据的类型来决定了能保存什么数据 - 比如Java
4、面向对象 -
对象名.属性名;
对象名.方法名();
5、特点：
1、可以用一切编辑工具编写js代码
2、解释型
3、弱类型
4、面向对象
5、可以做一切css完成不了的效果（轮播、选项卡、购物车、验证....）
2、如何使用JS：
1、使用方式：2种
1、直接在HTML写上一个script标签，在里面书写JS代码 -
2、创建一个xx.js文件，在其中写入JS代码，最后在HTML引入 -
2、输出方式/打桩输出/检查错误：3种 - 给程序员使用的，并不是给用户看的
1、在控制台打印输入日志：console.log(你想要输出的东西);//console控制台 log日志
2、在页面上输出日志：document.write(你想要输出的东西);//document此HTML文档 write写入 - 支持标签，但是有一个缺点：平时无所谓，但是如果绑定了点击事件，会将页面上所有的内容全部替换掉
3、在浏览器自带的警告框输出日志：alert(你想要输出的东西);//有时候会卡住整个浏览器，导致我们的用户只能看到一个白板
3、变量和常量：
变量：创建后，值可以再次修改
何时使用：以后反复使用到的数据，都要提前把他保存在一个变量种，以后使用变量名，相当于就是在使用变量的值
如何使用：var 变量名=值;
特殊：
常量：创建后，值不允许再次修改
语法：const 常量名=值;
1、用户输入框：var user=prompt("提示文字");
3、- 数据类型有哪些？分为两大类
1、原始/基本/值类型：5个
1、Number - 数字，取值有无数个，而且数字就是直接写，不用加任何东西（控制台输出的颜色是蓝色）
2、String - 字符串，取值有无数个，但是必须加上""或者''（控制台输出的颜色是黑色）
3、Boolean - 布尔，取值只有2个，分别叫做true（真|对） 或 false（假|错） - 一般用于当作条件判断（控制台输出的颜色是蓝色）
4、Null - 空，取值只有一个，就是null，唯一的作用就是用于释放变量释放内存的，节约内存空间（控制台输出的颜色是灰色）
5、Undefined - 翻译过来未定义，取值只有一个，就是undefined，变量默认值为undefined（控制台输出的颜色是灰色）
查看数据类型：typeof(变量)
2、引用/对象类型：有11个
1、算术运算符：+ - * / %
特殊：
1、%：取余，俗称模，两个数相除，不取商，而是取除不尽的余数
作用：
1、任意数%2 - 判断奇偶数
2、取出某个数字的后n位
console.log(1234%10);//4
console.log(1234%100);//34
console.log(1234%1000);//234
2、带有隐式转换：悄悄地会将数据类型转换，发生变化，默认：将左右两边都悄悄的转为数字，再运算！
true->1
false->0
undefined->NaN
null->0
"100"->100
"100px"->NaN，确实可以将字符串转为数字，但是前提必须是纯数字组成的字符串才可以，但凡包含了非数字字符，则为NaN
NaN：Not A Number：不是一个数字，但是他确实是数字类型,有两个缺点：
1、参与任何算术运算结果仍为NaN
2、参与任何比较运算结果都为false
3、+运算符：如果碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是拼接操作
2、关系/比较运算符：>，<，>=，<=，==，!=，===，!==
何时使用：一般都出现在明天的分支结构之中，我们可以通过条件满足不满足，走不同的路线
结果：一定是一个布尔值
带有隐式转换：默认左右两边都会悄悄的转为数字在比较大小
特殊：
1、如果参与比较的两边【都是】一个字符串！则会按位PK每个字符的十六进制unicode号（十进制ASCII码）
数字0-9<大写A-Z<小写a-z<汉字
常识：汉字的第一个字：一 unicode号：4e00 ascii码：19968
汉字的最后一个字：龥 unicode号：9fa5 ascii码：40869
2、NaN参与任何比较运算结果都为false，那我们怎么判断一个x是不是NaN呢？
!isNaN(x);
专门为了判断NaN而存在的，结果一定是一个布尔值：
true->是一个有效数字
false->是一个NaN
3、undefined==null;//true
解决：===，全等：不带隐式转换的等值比较，要求数据相同，值也要相同
3、逻辑运算符：在比较运算的基础上，在进行综合比较，一个条件比较不出来我想要，我们可以考虑综合比较
&&：与（并且）
全部条件都满足，结果才为true
只要一个不满足，结果就为false
||：或者
全部条件都不满足，结果才为false
只要一个满足，结果就为true
!：颠倒布尔值
!true->false
!false->true
4、赋值运算符：=，+=，-=，*=，/=，%=
1、=：赋值符号，将=右边的东西，保存到=的左边的变量名中
2、后面5个可以理解为是一种升级写法，一句话两个操作，运算后再保存回变量本身！
i=i+1 ==> i+=1
5、自增自减运算符
++，--
举例：i++ === i+=1 === i=i+1
自增：固定的每次只能+1
累加：+=每次加几由程序员自己决定
笔试题：
前++ 和 后++的区别？
1、如果单独使用，前++和后++，没有任何区别！
2、但是如果参与了其他表达式，变量始终都会+1，但是前++和后++【返回的结果】不同
前++，返回的是加了之后的新值
后++，返回的是加了之前的旧值
6、位运算：
左移：m<<n，读作m左移了n位，翻译：m*2的n次方
右移：m>>n，读作m右移了n位，翻译：m/2的n次方
垃圾：底数只能是2，不可以修改！
分支结构：
1、程序的流程控制语句：3种
1、顺序结构 - 默认：从上向下依次执行每一句话
2、分支结构 - 通过条件判断，选择部分代码执行
3、循环结构 - 通过条件判断，选择要不要重复执行某块代码
2、如何使用：3大类
1、if分支：3种写法
1、一个条件，一件事，满足就做，不满足就不做
if(条件){
操作;
}
2、一个条件，两件事，满足就做第一件，不满足就做第二件
if(条件){
操作;
}else{
默认操作;
}
3、多个条件，多件事，满足谁就做谁
if(条件1){
操作1;
}else if(条件2){
操作2;
}else{
默认操作;
}
注意：
1、分支只要满足了一条路，就不会再走别的路
2、else if这句话想写多少，由程序员自己决定
3、else这句话可以省略不写，但是不推荐，如果条件都不满足，则什么都不执行
4、分支可以嵌套
2、switch...case分支：
语法：
switch(变量/表达式){
case 值1:
操作1;
break;
case 值2:
操作2;
break;
default:
默认操作;
}
特殊：
1、问题：默认只要一个case满足后，会将后续所有的操作全部做完
解决：关键字break;
建议：每一个case的操作后面都可以跟上一个break;
有的地方也可以不加break：
1、最后一个操作default可以省略break
2、如果中间多个条件，做的操作是一样的，可以省略掉中间部分！
2、case在做比较的时候是不带隐式转换的
3、default可以省略不写，但是不推荐，如果你不写，条件都不满足，则什么都不会执行
面试题：if vs switch的区别？
1、switch...case：优点：执行效率高，*速度比较快（他比较的时候，case做的不是范围查找而是等值比较）
缺点：必须要直到最后的结果是什么才可以使用switch case去判断！
2、if...else：优点：可以做范围判断
缺点：执行效率较慢，速度慢（做的范围判断）
3、三目运算：纯粹就是为了简化【简单的】分支结构
语法：
短路逻辑：条件&&(操作); === if...
条件?操作1:默认操作; === if...else...
条件1?操作1:条件2?操作2:默认操作; === if...else if...else
注意：
1、默认操作不能省略，省略了会报错
2、如果操作比较复杂，不能使用三目运算：【操作只能有一句话】，如果操作有多句话还是推荐是用if或switch
页面上一切的数据js获取到后都是字符串类型！
2、强制（显示）数据类型转换：
1、转字符串：2种
1、var str=x.toString();//x不能是undefined和null，会报错，undefined和null不能使用.做任何操作！
2、var str=String(x);//万能的，任何人都可以转为字符串，完全等效于隐式转换，其实String()就是隐式转换的底层原理，还不如+""
2、转数字：3种
1、parseInt(str/num) - parse解析 Int整型 - 专门用于将【字符串转为整数】的
执行原理：从左向右依次读取每个字符，碰到非数字字符就停止转换，如果一来就不认识则为NaN，不认识小数点
console.log(parseInt(35.5));//35
console.log(parseInt("35.5"));//35
console.log(parseInt("3hello5"));//3
console.log(parseInt("hello35"));//NaN
console.log(parseInt("35px"));//35
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(null));//NaN
2、parseFloat(str) - parse解析 Float浮点数（小数） - 专门用于将【字符串转为小数】的
执行原理：几乎和parseInt一致，认识第一个小数点
console.log(parseFloat(35.5));//35.5
console.log(parseFloat("35.5"));//35.5
console.log(parseFloat("3hello5.5"));//3
console.log(parseFloat("hello5.5"));//NaN
console.log(parseFloat("35.5px"));//35.5
console.log(parseFloat(".5px"));//0.5
console.log(parseFloat("35.5.5"));//35.5
3、var num=Number(x);//万能的，任何人都可以转为数字，完全等效于隐式转换，其实Number()就是隐式转换的底层原理，还不如-0 *1 /1
3、转布尔：
Boolean(x);//万能的，任何人都可以转为布尔，完全等效于隐式转换，其实Boolean()就是隐式转换的底层原理，还不如 !!x
只有6个会为false：0,"",undefined,null,NaN,false - 其余的全部都是true
1、循环结构：
循环结构：反复执行 相同 或 相似的操作
循环三要素：
1、循环条件：开始 - 结束，循环的次数
2、循环体：你要做的操作
3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，变化往往都是向着不满足循环条件前进的
2、3种循环：
1、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
执行原理：首先创建出循环变量，判断循环条件，如果条件满足，则执行【一次】循环体操作，并不会退出循环，而会回过头再次判断循环条件满不满足，如果满足，则执行【一次】循环体操作.........直到循环条件不满足，才会退出循环
宏观上感觉循环好像是一瞬间就结束了（其实因为浏览器的执行速度快），但是微观上循环其实是【一次一次】执行的！
特殊：
1、有的时候可能真的需要使用死循环：默认永远不会停止的循环
何时使用：【不确定循环次数的时候】
while(1){操作}
2、死循环其实也有一天会停下来
break - 退出整个循环 - 多半都是用于配合死循环使用的
continue - 退出本次循环 - 还会执行下一次操作
2、for循环：和while的原理是一样的，但是他比while看上去更加的简洁，更加的舒服，那while能做的事，for也可以去完成
语法：
for(var 循环变量=几;循环条件;循环变量变化){
循环体;
}
特殊：
死循环：for(;;){操作}
面试题：while 和 for 的区别？
while 和 for在原理上来说几乎没有区别
一般我们不确定循环次数的时候会使用while循环 - 死循环
一般我们确定循环次数的时候推荐for循环 - 大部分情况都是他
3、do...while循环： 语法：
var 循环变量=几;
do{
循环体;
循环变量变化;
}while(循环条件)
面试题：while 和 do...while 的区别？
区别只看第一次，如果第一次条件都满足，那么两者没有区别
如果第一次条件都不满足，while一次都不会执行，而do...while至少会执行一次
2、Function的基础：
1、概念：Function - 函数，也称之为方法，先【预定义】好，以后可以【反复使用】的【代码段】
2、如何使用函数：2步
1、定义/创建/声明：
function 函数名(){
函数体/代码段;
}
2、调用函数：2种
1、在JS内部写：函数名() - 程序员写几次就会调用几次
2、在HTML页面上绑定事件：
- 任何元素都可以绑定点击事件
3、我们以后何时使用函数呢？
1、不希望打开页面立刻执行
2、希望由用户来触发 - 提升用户的体验感
3、以后每一个独立的功能（作业）都要封装为一个函数
4、函数的地位很高，是第一等公民地位
带参数的函数：2步
1、创建出带有形参的函数：其实就是一个变量，只不过不需要写var，而且不需要赋值，所以称之为叫做形式参数，简称形参
function 函数名(形参,...){
函数体/代码段;
}
2、使用带参数的函数时，记得要必须传入实参 - 实际参数，就是你传递过去的值！
函数名(实参,...)
注意：传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量也不要多也不要少
总结：
1、不带参数的函数，用于执行一些固定操作
2、带参数的函数，可以根据我们传入的实参的不同，执行的操作略微不同
总结：循环也可以反复执行，函数也可以反复执行，他们的区别在哪里？时机不同
1、循环：几乎是一瞬间就执行完毕了
2、函数：需要调用后才会执行
