概叙：JavaScript：简称js，是一个运行在客户端浏览器端的【解释性】【弱类型】【面向对象】的脚本语言
1、运行环境
- 浏览器自带js解释器，不需要安装任何环境
- 等到学习node.js的时候才需要安装服务器端的环境
2、解释型：
- 在运行程序之前不需要检查语法是否正确直接运行，碰到错误才会停止运行后续代码
- 编译型：在运行程序之前，需要先检查语法是否正确，如果不正确，直接不运行 - 严格
3、弱类型
- 变量保存的数据可以是随意的，数据类型由数据来决定
- 强类型：变量保存的数据，由数据的类型来决定了能保存什么数据
4、面向对象：
对象名，属性名； 对象名.方法名()；
2、如何使用JS
1、使用方法：
- 直接在HTML上写入一个script标签，在里面直接书写JS代码
- 创建一个JS文件，在其中写入JS代码，最后在HTML中引入
2、输出方式/打桩输出/检查错误：
- 在控制台打印输入日志：console.log(你想要输出的东西)
- 在页面上输出日志：document.write(你想要输出的东西)
- 在浏览器自带的警告框输出日志：alert(你想要输出的东西)
3、变量和常量
- 变量：创建后，值可以再次修改
- 如何使用：var 变量名=值;
- 特殊：
1、变量名其实不是随意的
- 不能以数字开头
- 建议使用驼峰命名法或下划线命名法
- 命名要尽量的见名知意
2、如果你的变量名是name，不管你保存的数据类型是什么，都会悄悄的给你转为一个字符串 - name这个变量名是一个关键字
3、变量名不能是关键字
4、变量可以只创建，不赋值，默认值为undefined
5、如果多个变量连续创建，用逗号隔开
常量：创建后的值不允许修改
语法：const 常量名=值；
3、数据类型：
- Number - 数字，取值有无数个，而且数字就是直接写，不用加任何东西（控制台输出的颜色是蓝色）
- String - 字符串，取值有无数个，但是必须加上""或者''（控制台输出的颜色是黑色）
- Boolean - 布尔，取值只有2个，分别叫做true（真|对） 或 false（假|错） - 一般用于当作条件判断（控制台输出的颜色是蓝色）
- Null - 空，取值只有一个，就是null，唯一的作用就是用于释放变量释放内存的，节约内存空间（控制台输出的颜色是灰色）
- Undefined - 翻译过来未定义，取值只有一个，就是undefined，变量默认值为undefined
- 查看数据类型：typeof(变量) - 熟练过后，我们光看颜色，也能知道是什么数据类型
4、运算符：
1、算术运算符
- %：取余，俗称模，两个数相除，不取商，而是取除不尽的余数
- 带有隐式转换：悄悄地会将数据类型转换，发生变化，默认：将左右两边都悄悄的转为数字 true->1 false->0 undefined->NaN null->0 "100"->100 "100px"->NaN，确实可以将字符串转为数字，但是前提必须是纯数字组成的字符串才可以，但凡包含了非数字字符，则为NaN NaN:参与任何算术运算结果仍为NaN，参与任何比较运算结果都为false 3.+运算符：如果碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是拼接操作
2、关系/比较运算符：>，<，>=，<=，==，!=，===，!==
- 结果：一定是一个布尔值
- 带有隐式转换：默认左右两边都会悄悄的转为数字在比较大小
3、逻辑运算符：在比较运算的基础上，在进行综合比较，一个条件比较不出来我想要，可以考虑综合比较
1、&&：与（并且） 全部条件都满足，结果才为true 只要一个不满足，结果就为false
2、||：或者 全部条件都不满足，结果才为false 只要一个满足，结果就为true
3、!：颠倒布尔值
- !true->false
- !false->true
4、赋值运算符：=，+=，-=，*=，/=，%=
5、自增自减运算符：++，--
6、位运算：
- 左移：m<<n，读作m左移了n位，翻译：m*2的n次方
- 右移：m>>n，读作m右移了n位，翻译：m/2的n次方
- 底数只能是2，不可以修改！
7、用户输入框：var user=prompt("提示文字");
Day 02
1、分支结构
程序的流程控制语句：3种
- 顺序结构 - 默认：从上向下依次执行每一句话
- 分支结构 - 通过条件判断，选择部分代码执行
- 循环结构 - 通过条件判断，要不要反复执行某一块代码
2、如何使用
1、if分支：
- 一个条件，一件事，满足就做，不满足就不做if(条件){操作}
- 一个条件，两件事，满足就做第一件，不满足就做第二件if(条件){操作}else{默认操作}
- 多个条件，多件事，满足谁就做谁 if(条件1){操作1}else if(条件2)｛操作2}else{默认操作}
2、switch...case分支：前提：只要知道最后的结果是什么，才可以用语法
- switch(变量/表达式){case 值1:操作1;break;case 值2:操作2;break;case 值3:操作3;break;default:默
- 注意 case的比较是不带有隐式转换 问题：默认只要一个case满足过后，会将后续所有的操作全部做完 解决：关键字break;
- 建议：每个case的操作后面都可以跟上一个break，有的地方也可以不加break：
- 最后一个操作default可以省略break、如果中间多个条件，做的操作是一样的，可以省略掉中间部分
- default可以省略不写，但是不推荐，如果条件都不满足，则什么都不执行
3、三目运算：纯粹是为了简化【简单的】分支
语法：
- 短路逻辑：条件&&(操作) === if
- 条件?操作1:默认操作; === if...else
- 条件1?操作1:条件2?操作2:默认操作 === if...else if...else
4、强制数据类型转换
1、转字符串
- var str=x.toString();//x不能是undefined和null，会报错
- var str=String(x);//万能的，任何人都可以转为字符串，完全等效于隐式转换，其实String()就是隐式转换的底层原理，还不如+""
2、转数字
- parseInt(str/num) - parse解析 Int整型，不能转换小数点后的数字
- parseFloat(str) - parse解析 Float浮点型（小数） - 专门用于将【字符串转为小数】
- Number(x);//万能的，任何人都可以转为数字，完全等效于隐式转换，其实Nunber()就是隐式转换的底层原理，还不如x-0 *1 /1
3、转布尔：
- Boolean(x);//万能的，任何人都可以转为布尔，完全等效于隐式转换，其实Boolean()就是隐式转换的底层原理，还不如!!x
- 只有6个会为false：0，undefined，null，" ",NaN,false ，其余都是true
Day 03
1、循环结构：反复执行 相同 或 相似的操作
循环三要素：
- 循环条件：开始 - 结束，循环的次数
- 循环体：每次循环要做什么操作
- 循环变量：记录着我们当前在哪一次，而且他会不断的变化，变化往往是向着不满足循环条件前进的
1、三种循环结构：
1、while循环：
语法： var 循环变量=几;while(循环条件){循环体;循环变量变化起来;} 死循环是：while(true);
- break退出整个循环 - 多半都是搭配死循环使用的
- continue - 退出本次循环，下一次还是会执行的
2、for 循环
语法： for(var 循环变量=几;循环条件;循环变量变化起来){循环体;} for(var i=0;i<elem.length;i++); 死循环为：for(;;)
面试题：while 和 for的区别？
while和for从原理上来说没有区别 while更麻烦，一般不确定循环次数的时候使用 - 死循环 for更简单，一般确定循环次数的时候使用 - 大部分情况都是使用他
do...wilie循环
语法： var 循环变量=几;do{循环体;循环变量变化起来;}while(循环条件)
面试题：while 和 do...while的区别
区别只看第一次，如果第一次条件都满足，两者没有区别如果第一次条件都不满足，while一次都不会执行，而do...while至少执行一次
2、Function的基础
1、概念：Function - 函数，也称之为方法，先【预定义】好，以后可以【反复使用】的代码段
2、如何使用函数：
- 定义/创建/声明：function 函数名(){函数体/代码段;}
- 调用函数： 直接在JS内部书写：函数名() 在HTML页面上绑定点击事件：文字
3、带有参数的函数：
-
- function 函数名(形参,...){函数体;}
-
- function zhazhiji(fruit){console.log("正在榨"+fruit+"汁");}zhazhiji("苹果");
- 传参的时候顺序是不能乱的，必须和形参的顺序一一对应上，数量也不要多也不要少
Day 04
自定义函数Function
1、创建方式
-
- 【声明方式】创建函数function 函数名(形参){函数体;return 返回值;}
-
- 【直接量方式】创建函数：var 函数名=function(形参){函数体;return 返回值;}
- 函数名其实就是一个变量名，函数名要尽量的不重复，否则后面的会把前面的覆盖掉
2、调用函数：调用函数：var result=函数名(实参);
3、作用域
- 全局作用域：全局变量 和 全局函数，在页面的任何一个位置都可以访问/使用
- 函数作用域：局部变量 和 局部函数，只能在【函数调用时，内部可用】
- 函数作用于可以使用全局的变量，但是全局不能使用函数内部的变量
数组Array的基础
数组：创建一个变量可以保存【多个数据】
1、创建数组：
直接量方式：
- var arr=[];//空数组
- var arr=[数据1,...];
2、构造函数方式
- var arr=new Array();//空数组
- var arr=new Array(数据1,...);
3、获取数组之中的数据
数组名[i]
4、后续添加或者替换数组中的元素
数组名[i]=新数据，如果下标处没人，则为添加，如果下标处有人则为替换
5、数组具有三大不限制
- 不限制元素的类型
- 不限制元素的个数
- 不限制下标越界（下标是由0开始）
6、数组中唯一的属性：length：获取到数组的长度，长度是从1开始数的
- 获取数组倒数第n个元素：arr[arr.length-n];
- 向末尾添加元素：arr[arr.length]=新;
- 缩容：删除数组倒数n个元素：arr.length-=n;
7、遍历数组
- 往往很多情况，我们不会拿出数组的某个数组来使用，而是拿出数组中的所有数组来进行 相同 或 相似的操作 - 搭配上循环
- 公式：for(var i=0;i<arr.length;i++){arr[i];//当前次元素}
Day 05
1、DOM：Document Object Model：文档对象模型，专门用于操作HTML文档的
2、DOM树概念：DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是HTML标签，而是document对象
- document对象：不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根
- 作用：可以通过树根对象找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
3、查找元素
1、通过HTML的特点去查找元素
- 通过 ID 去查找元素：var elem=document.getElementById("id值");
- 通过 标签名 去查找元素var elems=document/已经找到的某个父元素.getElementsByTagName("标签名");
- 通过 class名 去查找元素var elems=document/已经找到的某个父元素.getElementsByClassName("class名");
2、通过元素之间的关系去查找元素
- 父亲：elem.parentNode;单个元素
- 儿子：elem.children;集合
- 第一个儿子：elem.firstElementChild;单个元素
- 最后一个儿子：elem.lastElementChild;单个元素
- 前一个兄弟：elem.previousElementSibling;单个元素
- 后一个兄弟：elem.nextElementSibling;单个元素
4、操作元素
1、获取元素之间的内容
1、innerHTML - 获取或设置开始标签到结束标签之间的内容。【支持识别标签的】
- 获取：elem.innerHTML;
- 设置：elem.innerHTML="新内容";
2、nnerText - 获取或设置开始标签到结束标签之间的纯文本。【不支持识别标签的】
- 获取：elem.innerHTML;
- 设置：elem.innerHTML="新内容";
3、value - 专门用于获取或设置input的内容的
- 获取：input.value;
- 设置：input.value="新值";
获取元素的属性
- 获取属性值：elem.getAttribute("属性名");
- 设置属性值：elem.setAttribute("属性名","属性值");
简化版
- 获取属性值：elem.属性名;
- 设置属性值：elem.属性名="属性值";
- 简化版有两个小缺陷：
- class必须写为className，ES2015(es6)class变成了一个关键字
- 只能操作标准属性，不能操作自定义属性
获取元素的样式
操作的是元素的内联样式表
- 获取样式：elem.style.css属性名;
- 设置样式：elem.style.css属性名="css属性值";
- css属性名，有横线的地方，去掉横线，换为小驼峰命名法
绑定事件
elem.onclick=function(){} 操作; 关键字this - 这个，目前只能在【事件】内部使用
- 如果单个元素绑定事件，this-->这个元素
- 如果多个元素绑定事件，this-->当前元素
