第一天
1、JavaScript：简称js，是一个运行在浏览器端的解释型弱类型面向对象脚本语言 由三部分组成ECMAScript+DOM + BOM
2、如何使用js：
1、使用方式：2种
1、 <script></script>
2、创建一个js文件，再在HTML进行引入
<script src="js文件"></script>
2、输出的方式：3种
1、在控制台输出日志：console.log();
2、在页面上输出日志：document.write();
3、在弹出框输出日志：alert();
3、变量：
语法：var 变量名=值;
特殊：1、变量名其实不是随意的
1、不能以数字开头
2、建议驼峰命名法或下划线命名法
3、命名要尽量的见名知意
2、如果你的变量名是name，不管你保存的数据类型是什么，都会悄悄的给你转为一个字符串
3、变量名不能是关键字
4、变量可以只创建，不赋值，默认值为undefined
5、如果多个变量连续创建，简写：
var 变量名=值,变量名=值,变量名=值,变量名=值,变量名=值;
4、常量：
语法：const 常量名=值;
5、数据类型有哪些？分为两大类
1、原始/基本/值类型：5个
1、number - 数字：取值有无数个，而且数字就是直接写，不用加任何东西（颜色是蓝色）
2、string - 字符串：取值有无数个，但是必须加上："" 或 ''（颜色是黑色）
3、boolean - 布尔：取值只有2个，分别叫true（真|对） 或 false（假|错）- 一般用于当作条件判断（颜色是蓝色）
4、null - 空，取值只有1个，就是null，唯一的作用就是用于释放变量释放内存的，节约内存空间，提升网页的性能，以后会有更好的方式（颜色是灰色）
5、undefined - 取值只有1个，就是undefined（颜色是灰色）查看数据类型：typeof(变量);
3、运算符：
1、算术运算符：+ - * / %
特殊：
1、%：取余，俗称模，两个数相除，不取商，而是取除不尽的余数
作用：
2、带有隐式转换：悄悄地会将数据类型转换，发生变化，默认：都是左右两边转为数字再运算
缺点：
1、参与任何的算术运算结果仍为NaN
2、参与任何的比较运算结果都是false
3、+运算特殊：如果碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是拼接操作
2、比较/关系运算符：> < >= <= == != === !==
结果：一定是一个布尔值
带有隐式转换：默认左右两边都会悄悄转为数字再比较大小
3、赋值运算符：= += -= *= /= %=
=：赋值：将=右边的东西，保存到=左边的变量名之中
4、逻辑运算符：
&&：与（并且）
全部条件都满足，为true
只要一个不满足，为false
||：或者
全部条件都不满足为false
只要一个满足为true
!：颠倒布尔值
5、自增自减运算符：
++
自增：固定的每次只能+1
累加：+=每次加几由程序员自己决定
前++，返回的是加了过后的新值
后++，返回的是加了之前的旧值
6、位运算：
左移：m<<n，读作m左移了n位，翻译：m*2的n次方
右移：m>>n，读作m右移了n位，翻译：m/2的n次方
底数只能为2
变量=prompt("提示文字");
第二天
1、分支结构： 1、程序的流程控制语句：3种 顺序结构 分支结构 循环结构
1、if...else...如何使用：3种情况
1、一个条件，一件事，满足就做，不满足就不做
if(条件){
操作;
}
2、一个条件，两件事，满足就做第一件，不满足就做第二件
if(条件){
操作;
}else{
默认操作;
}
3、多个条件，多件事，满足谁，就做谁
if(条件1){
操作1;
}else if(条件2){
操作2;
}else{
默认操作;
}
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可以省略不写的，但不好
3、三目运算：简化分支的
语法：
条件?操作1:默认操作; === if...else...
条件1?操作1:条件2?操作2:默认操作 === if...else if..else
注意：
1、默认操作不能省略，省略了会报错
2、如果操作复杂，不能使用三目运算：操作只能有一句话，如果操作有多句话还是推荐使用switch或if
页面上一切数据js获取到后都是字符串类型
1、强制(显示)数据类型转换：
1、转字符串：2种方法
1、var str=x.toString();
2、var str=String(x);
2、转数字：3种方法
1、parseInt(str/num);
执行原理：从左向右依次读取转换每个字符，碰到非数字字符就停止转换，如果一来就不认识则为NaN，不认识小数点。
console.log(parseInt(null));//NaN
2、parseFloat(str); - parse解析 Float浮点型 - 专门用于将【字符串转为小数】
执行原理：几乎和parseInt一致，认识第一个小数点
3、Number(x);
3、转布尔：
Boolean(x);、
***只有6个为false：0,"",undefined,NaN,null,false，其余全部都是true。
第三天
1、循环结构：
循环结构：反复执行 相同 或 相似的操作
循环三要素：
1、循环条件
2、循环体
3、循环变量
2、3种循环：
1、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
2、for循环：和while的原理是一样的，但是他比while看上去更加的简洁，更加的舒服
语法：
for(var 循环变量=几;循环条件;循环变量变化){
循环体;
}
3、do...while循环：废物：while我们都不想用，何况是更麻烦的do...while - 今日一见，不会再见
语法：
var 循环变量=几;
do{
循环体;
循环变量的变化
}while(循环条件)
2、Function的基础：
1、概念：Function 也叫函数也叫方法，先预定好，以后可以反复使用的代码
2、如何使用函数：2步
1、定义/创建/声明：
function 函数名(){
函数体/代码段;
}
注意：函数创建后，不会立刻执行，需要我们去调用函数
2、调用函数：2种
1、在js内部写：函数名(); - 程序员写几次就会调用几次
2、在HTML上面绑定事件：
<elem onclick="函数名()"></elem> - 什么元素都可以绑定事件
1、创建出带有形参的函数 - 形参：其实就是一个变量，只不过不需要加var，而且不需要赋值，所以称之为叫做形式参数 - 简称形参
function 函数名(形参,...){
函数体/代码段;
}
2、使用带有形参的函数时，必须传入实参 - 实际参数，就是你传递过去的值
函数名(实参,...)
第四天
1、自定义函数Function
什么是函数：需要先定义好，以后可以反复使用的一个代码段
何时使用：不希望打开页面立刻执行，以后可以反复使用，希望用户来触发...
如何使用：
1、创建：2种
1、【声明方式】创建函数
function 函数名(形参列表){
操作;
return 返回值/结果;
}
2、【直接量方式】创建函数：- 不推荐
var 函数名=function(形参列表){
操作;
return 返回值/结果;
}
感觉到函数名其实就是一个变量名
2、调用：
var 接住返回的结果=函数名(实参列表);
3、作用域：2种
1、全局作用域：全局变量 和 全局函数，在页面的任何一个位置都可以使用。
2、函数作用域：局部变量 和 局部函数，在【当前函数调用时，内部可用】
带来了变量的使用规则：优先使用局部的，局部没有找全局要，全局也没有那就会报错
特殊点：缺点：
1、千万不要再函数中对着未声明的变量直接赋值 - 全局污染：全局本身没有这个东西，但是被函数作用域给添加上了
2、局部可以使用全局的，但是全局不能使用局部的 - 解决：看上面return
4、声明提前： - 只会出现在鄙视之中
规责：在程序正式执行之前，将var声明的变量（轻）和function声明的函数（重），都会悄悄的集中定义在当前作用域的顶部，但是赋值留在原地
强调：
声明方式创建的函数会完整的提前（第一种）
直接量方式创建的函数不会完整提前，只有变量名部分会提前（第二种）
何时使用：永远不会自己使用，干扰我们判断的 - 只会在笔试中遇到，为什么平时开发不会遇到呢？
只要你遵守以下规则：
1、变量名和函数名尽量不要重复
2、先创建后使用
5、重载：相同的函数名，根据传入的实参的不同，自动选择对应的函数去执行，但是JS不支持，函数名如果重复了，后面的肯定会覆盖掉前面的
目的：减轻我们程序员的压力，记住一个方法就可以执行很多的操作
解决：在【函数内部】自带一个arguments的对象（类似数组对象）：不需要我们去创建 - 哪怕没有写任何形参，他也可以接受住所有实参，所以默认你看他length长度为0
固定套路：
1、通过下标去获取传入的某一个实参：arguments[i] - i从0开始
2、通过length去获取到底传入了几个实参：arguments.length
通过判断传入的实参的不同，在内部去写判断，从而变相的实现重载
2、数组的基础：
解决：数组：创建一个变量可以保存多个数据
数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素
除了最后一个元素，每个元素都有唯一的后继元素每个元素都有一个自己的位置，称之为叫做下标，下标都是从0开始的，到最大长度-1结束
1、创建数组：2种
1、*直接量方式：var arr=[];//空数组
var arr=[数据1,...];
2、构造函数方式：var arr=new Array();//空数组
var arr=new Array(数据1,...);
2、获取数组之中的元素：
数组名[i]
3、后续添加/替换元素：
数组名[i]=新数据;
如果下标处没人则为添加，如果下标处有人则为替换
4、数组具有三大不限制
1、不限制元素的类型
2、不限制元素的长度
3、不限制下标越界 - 不是一个好东西
如果获取元素时，下标越界，返回的是一个undefined
如果添加元素时，下标越界，会得到一个稀疏数组，如果我们搭配上我们学过循环去遍历获取每个元素，那么你会得到很多很多undefined
问题：自己数下标，难免会数错，导致我们下标越界
5、解决：数组中有一个唯一的属性：length
语法：数组名.length
作用：获取到数组的长度，长度是从1开始的
三个固定套路：
1、向末尾添加元素：arr[arr.length]=新数据;
2、获取数组的倒数第n个元素：arr[arr.length-n];
3、缩容：删除倒数n个元素：arr.length-=n;
6、遍历数组：往往很多情况，我们不会拿出某个元素来使用，而是拿出每个元素来进行 相同 或 相似的操作 - 搭配上循环
固定公式：
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
第五天
1、DOM
Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法给你。
2、DOM树概念
DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象 document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根 作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法） DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象
3、查找元素：两大方面：
1、直接通过HTML的特点去查找元素
1、通过 ID 查找元素：
var elem=document.getElementById("id值");
2、通过 标签名 查找元素：
var elems=document/已经找到的父元素.getElementsByTagName("标签名");
3通过 class 查找元素：
var elems=document/已经找到的父元素.getElementsByClassName("class名");
2、通过关系去获取元素：前提条件：必须先找到一个元素才可以使用关系
父元素：elem.parentNode; - 单个元素
子元素：elem.children; - 集合
第一个子元素：elem.firstElementChild; - 单个元素
最后一个子元素：elem.lastElementChild; - 单个元素
前一个兄弟：elem.previousElementSibling; - 单个元素
后一个兄弟：elem.nextElementSibling; - 单个元素
4、操作元素：前提：先找到元素，才能操作元素，3方面
1、内容：
1、elem.innerHTML
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、elem.innerText
获取：elem.innerText;
设置：elem.innerText="新内容";
3、input.value - 专门获取/设置input里的内容
获取：input.value;
设置：input.value="新内容";
2、属性：
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
3、样式：
使用样式的方式：3种
1、内联样式
2、内部样式表
3、外部样式表
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
4、绑定事件：
elem.on事件名=function(){
操作;
*****关键字this - 这个
如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件元素
}
