一个月的HTML，不论是pc端还是移动端都逃不开固定的结构和语法，接受程度还ok，紧接着开始步入第二阶段JavaScript的学习，就四天的内容足以望洋兴叹。课程本身的难度，老师上课的节奏，一周前一两天可以比喻成坐飞机，后面三四天堪称坐火箭，唆~~一愣一愣滴。本周主要学习了：
一、JavaScript概述
JavaScrip 简称JS，是运行在【javascript解释器 或者 特定引擎中】的【解释型】【弱类型】【面向对象】脚本语言
1、javascript解释器：
1、浏览器自带js解释器
2、独立安装一个js解释器 - node.js时
2、编译型：运行程序之前，需要检查语法是否正确，如果不正确直接不允许运行，比如：java、c、c++、c# - 更加严格
解释器：运行程序之前，不要检查语法是否正确，直接运行，碰到错误就会停止运行，比如：javascript、php、node.js... - 更*
3、js特点：
1、代码可用任何文本编辑器编写：vscode hbuilder 记事本...
2、解释型语言，无需编译
3、弱类型语言：不需要进行规定，你想放什么就放什么 - 爱*
变量的数据类型是由值来决定的
4、js作用：
1、客户端的数据的计算：购物车
2、表单的数据验证：（手机号、身份证、邮箱、密码）
3、提供了事件（点击、鼠标移入移除、键盘...）
4、网页中一切css做不了的特效，都由js完成
5、和服务器端进行交互 ajax
二、JavaScript的使用
1、使用方式：2个
1、在HTML页面写上一个标签：
<script>
js代码
</script>
2、创建一个xx.js文件，在里面书写js代码，最后在HTML页面引入
<script src="xx.js文件路径"></script>
2、JS的调试语句：代码运行期间，如果碰到错误，会报错，但是后续代码就不会执行了，甚至如果只是逻辑错误不是语法错误，那并不会报错，我们需要一个方式去帮助我们找到错误何在
*1、在控制台输出日志：console.log(想要输出的东西);//打桩输出，疯狂打桩
2、在页面上进行输出：document.write(想要输出的东西); - 要不得，如果绑定上了事件，会将页面上所有的内容全都替换掉
3、弹出框显示：alert(想要输出的东西); - 会卡主整个页面，必须关闭后用户才能看到HTML和CSS
3、js的语法规范：是严格要求区分大小写的，不能乱写
比如：
console.log();//正确
console.Log();//错误
三、JavaScript的语句
1、while循环：
语法：
var 循环变量=几;
while(循环条件){
循环体;
循环变量的变化;
}
2、for循环：和while能做的事是一模一样的，只不过语法比while更简单，看上去也更加的舒服
语法：
for(var 循环变量=几;循环条件;循环变量的变化){
循环体;
}
3、if结构：
1、一个条件一件事，满足就做不满足就不做
if(条件){
操作
}
2、一个条件2件事，满足就做1不满足2
if(条件){
1
}else{
2
}
3、多个条件多件事，满足谁就做谁
if(条件1){
1
}else if(条件2){
2
}else{
3
}
4、*****数组：
1、创建数组：2种方式
*1、直接量方式：var arr=[];//空数组
var arr=[元素,元素,...];
2、构造函数方式：var arr=new Array();//空数组
var arr=new Array(元素,元素,...);
三、JavaScript的组成
1、DOM树：DOM将HTML看做了是一个倒挂的树状结构，但是树根不是你们理解的HTML标签
*树根：是一个document对象，document对象不需要我们程序员创建，由浏览器的JS解释器创建，一个页面只有一个document
作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）
DOM节点：一个标签、文本、属性、元素
2、查找元素：
1、通过HTML的特点去查找元素
1、id查找：var elem=document.getElementById("id值"); //单个元素
2、标签名查找：var elems=document/已经找到的父元素.getElementsByTagName("标签名"); //群组
*3、class查找：var elems=document/已经找到的父素.getElementsByClassName("标签名"); //群组
2、节点之间的关系进行查找：前提：必须先要找到一个人，才能使用关系
父：elem.parentNode;//单个元素
子：elem.children;//集合
第一个儿子：elem.firstElementChild;//单个元素
最后一个儿子：elem.lastElementChild;//单个元素
前一个兄弟：elem.previousElementSibling;//单个元素
后一个兄弟：elem.nextElementSibling;//单个元素
3、操作元素：
1、内容：
*1、innerHTML属性：获取 或 设置 某个元素的内容，并且可以识别标签
获取内容：elem.innerHTML;
设置内容：elem.innerHTML="新内容";
2、innerText属性：获取 或 设置 某个元素的文本，不能可以识别标签
获取内容：elem.innerText;
设置内容：elem.innerText="新内容";
3、value属性：专门为单标签（input）操作内容准备的
获取内容：input.value;
设置内容：input.value="新内容";
2、属性：
1、获取属性值：elem.getAttribute("属性名");
2、设置属性值：elem.setAttribute("属性名","属性值");
简化：
1、获取：elem.属性名;
2、设置：elem.属性名="属性值";
缺陷：1、不能操作自定义属性，只能操作标准属性
2、class在ES6升级为了一个关键字，所以想要写class换为了className
3、样式：
语法：
获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";
特殊：1、css属性名，要把有横线地方，换成小驼峰命名法
2、获取的时候，代老湿只交了大家获取内联样式，不能获取样式表中的样式
4、元素绑定事件：
单个元素：elem.οnclick=function(){
操作;
this->单个元素绑定事件，this->elem绑定事件的这个元素
}
多个元素：for(var i=0;i<elems.length;i++){
elems[i].οnclick=function(){
操作
this->多个元素绑定事件，this->当前触发事件的元素
}
}
***总结：
1、一切的获取都是为了判断
2、一切的设置都是为了修改
3、千万不要对着一个集合做操作，要么遍历拿全部，要么下标拿一个