临近年关，开始学习JavaScript的基础，说实话，因为马上要过春节的原因，心思有点沉不下来，而且学习H5一个月了，感觉自己有点进入疲惫期，对于自己来说，静态页面效果，写起来还算比较轻松，可一接触JavaScript这一类的时候，整个人懵懵的，很多东西老师讲的时候，或者看视频的时候，我基本都能跟上，也能明白每一条代码什么意思，它的逻辑是怎样的，可是一但开始自己动手的时候，往往开头就不知道该怎么开始了，老是写着写着就忘记它的逻辑了，然后就又去看视频，看完再自己写，可最后当自己成功写下来一个样式后，发现并不是自己吃透了，而是我好像形成肌肉记忆了。。。这就很尴尬了啊。
接下来说说，我这一周所学吧：
JavaScript概述
简称JS，是运行在【javascript解释器 或者 特定引擎中】的【解释型】【弱类型】【面向对象】脚本语言，对我来说这么复杂的东西，居然是一个人用短短7天时间就研发出来的，我跪了啊。
javascript使用：
1、在HTML页面写上一个标签：
<script>js代码 </script>
2、创建一个xx.js文件，在里面书写js代码，最后在HTML页面引入
<script src="xx.js文件路径"></script> 这个还没教，不过我感觉应该跟CSS是一样的。
JS的调试语句：代码运行期间，如果碰到错误，会报错，但是后续代码就不会执行了，然后就需要一个方式找到错误何在
在控制台输出日志：console.log(XXX);老师说这个叫打桩机，目前我还没怎么发挥它的作用，估计一会我也会用来打桩吧。
变量：值是可以改变的
这个东西呢，相当于就是把你经常使用的一大段代码，给它取个类名，以后用的时候就直接写类名就行了，也可以用来改变，前期用这个呢，都是用于改变给它重新赋值，然后达到想要的结果
语法：var 变量名=值;
同时创建多个变量可以直接把；变成，号继续写，但我老觉得会出错，我还是老实挨着写var吧。还有个常量，目前没用过，估计也不咋用。
算术运算符：+ - * / %
这个其实没啥好说的，小学都学过，除了%模这个可能突然有点不记得以为，都还好，取余多算几个数就懂了，然后就是这个+号，只要碰上一个字符串，则都变为字符串，+运算也不再+运算，变成了拼接字符串操作，*/%运算，有字符串也可以转为数字，但是必须是纯数字组成的字符串才可以，只要包含了非数字字符，结果则为NaN（NaN：Not a Number）
数据类型：
1、原始/基本/值类型：5个
1、String - 字符串，取值有无数个，必须写"" 或者 ''
2、Number - 数字，取值有无数个，直接写个数字就行
3、Boolean - 布尔，取值只有两个，true 或 false，多半都是用于判断比较
4、Undefined - 取值只有一个默认值undefined，没有任何用处 - 祖师爷犯的一个错误
5、Null - 空，取值只有一个null，作用：释放变量、内存，节约内存空间
2、引用/对象类型：11个，每个对象都有很多的属性和方法等待我们去学习，这个还没教哦，我也不清楚啥东西。
数据转换：里面包括隐式转换和强制转换
隐式转换，就是程序自己转的，强制转换就是我可以转的
转为字符串：
语法：var str=x.toString();//x不能是undefined和null，因为undefined和null不能使用.操作
转数字：
var num=parseInt(str/num); parse->解析 Int->整型/整数
原理：从左向右依次读取每个字符，进行转换，碰到非数字字符就停止，而且不认识小数点，如果一开始就碰到了不认识的字符，结果为NaN
var num=parseFloat(str); parse->解析 Float->浮点数/小数
原理：几乎和parseInt一模一样，认识小数点
以后用就用第二个float
函数：
这玩意是个关键啊
函数：也称为方法，需要【预定义】（提前创建好）后，可以【反复使用】的【代码段】（里面可以放若干代码）
创建函数并且调用函数
第一步： 创建：function 函数名(){ 代码段 }
第二步：
调用：2种方式
1、直接在js里面写 函数名(); 写几次就会执行几次
2、绑定在页面的元素上，让用户来触发，用户触发一次就会执行一次 提升用户体验感/多了交互感
<elem οnclick="函数名();"></elem>
带有参数的函数
创建带参数的函数：
形参：就是一个变量名，只不过这里的变量名不需要var，并没有保存真正的值，形式参数，简称形参
function 函数名(形参,...){函数体;}
调用带参数的函数：
实参：实际参数，这个变量名所保存的值
函数名(实参,...)
一个函数可以执行相似的操作
分支结构
分支/选择结构：
根据条件，选择一部分代码去执行
if结构：
1、一个条件一件事，满足就做不满足就不做
if(条件){ 操作}
2、一个条件2件事，满足就做1不满足2
if(条件){1}else{ 2 }
3、多个条件多件事，满足谁就做谁
if(条件1){1 }else if(条件2){ 2 }else{ 3 }
循环结构
循环：反复执行 【相同 或 相似】 的操作，几乎是一瞬间就完成了很多次
循环三要素：
1、循环条件：开始、结束，重复执行的次数
2、循环体：循环操作，干什么事
3、循环变量：创建，并且要让他不断的改变（自增、自减），往往向着不满足循环条件在变化
while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量的变化;
}
原理：先判断循环条件，如果条件为真，则执行一次循环体中的语句，然后再一次判断循环条件，如果为真，则再执行一次循环体中的语句
直到循环条件为假，才会退出循环
死循环：停不下来的循环，多半用于不确定循环次数的时候
while(true){
循环体;
}
循环流程控制语句：死循环多半都要搭配上一个：退出循环：break;可以出现在任何一个循环之中
一般用于 循环次数不明确的情况，死循环
for循环：和while能做的事是一模一样的，只不过语法比while更简单，看上去也更加的舒服
语法：
for(var 循环变量=几;循环条件;循环变量的变化){
循环体;
}
特殊：1、死循环：for(;;){循环体}
2、创建循环变量部分，也可以，隔开创建多个变量
一般用于 已经确定了循环次数的情况 - 个人推荐，语法更加的简便
就是这个东西开始让我头大了，循环过去循环过来的，头疼！！
数组：
创建数组：var arr=[];//空数组
var arr=[元素,元素,...];
访问数组中的元素
数组名[下标];
添加/修改数组中元素
数组名[下标]=新元素;
数组唯一的一个属性：length长度
语法：数组名.length;三个固定套路：
1、想末尾添加元素：arr[arr.length]=新值;
2、获取倒数第n个：arr[arr.length-n];
3、删除数组的倒数n个：arr.length-=n
遍历数组：把数组中的每一个元素都取出来执行相同 或 相似的操作
公式：
for(var i=0;i<数组名.length;i++){
数组名[i];//当前次拿到的数据
}
DOM树：
DOM将HTML看做了是一个倒挂的树状结构，树根：是一个document对象，document对象不需要我们程序员创建，由浏览器的JS解释器创建，一个页面只有一个document
作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）
DOM节点：一个标签、文本、属性、元素
查找元素：
1、通过HTML的特点去查找元素
1、id查找：var elem=document.getElementById("id值");
在当前DOM树中，根据元素的id，获取具体的DOM节点
返回：找到了，返回对应的元素
没找到，null
特殊：1、如果页面上有多个重复的id，只会返回第一个
2、此方法找到的是单个元素 - DOM节点是可直接用于做操作的
2、此方法你不能使用 - 以后留给后端工程师使用
*2、标签名查找：var elems=document/已经找到的父元素.getElementsByTagName("标签名");
在当前DOM树中，根据标签名获取元素们
返回：找到了，返回一个DOM集合
没找到，空数组
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
*3、class查找：var elems=document/已经找到的父元素.getElementsByClassName("标签名");
在当前DOM树中，根据标签名获取元素们
返回：找到了，返回一个DOM集合
没找到，空数组
特殊：1、返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部
2、不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素
2、节点之间的关系进行查找：前提：必须先要找到一个人，才能使用关系
父：elem.parentNode;//单个元素
子：elem.children;//集合
第一个儿子：elem.firstElementChild;//单个元素
最后一个儿子：elem.lastElementChild;//单个元素
前一个兄弟：elem.previousElementSibling;//单个元素
后一个兄弟：elem.nextElementSibling;//单个元素
操作元素：
<标签名 属性名="属性值" style="样式">内容</标签名>
1、内容：
*1、innerHTML属性：获取 或 设置 某个元素的内容，并且可以识别标签
获取内容：elem.innerHTML;
设置内容：elem.innerHTML="新内容";
2、innerText属性：获取 或 设置 某个元素的文本，不能可以识别标签
获取内容：elem.innerText;
设置内容：elem.innerText="新内容";
以上两个属性，是为双标签准备的
3、value属性：专门为单标签（input）操作内容准备的
获取内容：input.value;
设置内容：input.value="新内容";
2、属性：什么是属性：HTML属性：id、class、title、alt、style、type、href...只要是放在HTML标签上的都是一个属性
1、获取属性值：elem.getAttribute("属性名");
2、设置属性值：elem.setAttribute("属性名","属性值");
以上两个方法有点繁琐 - 但是无敌的
能够简化：
1、获取：elem.属性名;
2、设置：elem.属性名="属性值";
缺陷：1、不能操作自定义属性，只能操作标准属性
2、class在ES6升级为了一个关键字，所以想要写class换为了className
3、样式：
1、css定义的方式：3种
1、内联样式 - 二阶段
2、内部样式表
3、外部样式表 - 最适合写样式的时候使用此方法
2、JS操作内联样式的好处：
1、优先级最高，写的JS样式必定生效
2、一次只会操作一个元素，不会牵一发动全身
3、语法：
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：1、css属性名，要把有横线地方，换成小驼峰命名法
2、获取的时候，代老湿只交了大家获取内联样式，不能获取样式表中的样式
元素绑定事件：
单个元素：elem.οnclick=function(){
操作;
this->单个元素绑定事件，this->elem绑定事件的这个元素
}
多个元素：for(var i=0;i<elems.length;i++){
elems[i].οnclick=function(){
操作
this->多个元素绑定事件，this->当前触发事件的元素
}
}
总结：
1、一切的获取都是为了判断
2、一切的设置都是为了修改
3、千万不要对着一个集合做操作，要么遍历拿全部，要么下标拿一个
上面这个太难写了，我直接复制的笔记，但这个相对于循环来说还比较好理解，只要死记住这些单词就行了
