一、JS三个组成部分
ES:ECMAScript语法
DOM:document对象模型=》通过js代码与页面文档（出现在body中的所有可视化标签）进行交互
BOM：borwser对象模型=》通过js代码与浏览器自带功能进行交互
二.引入方式
行间式
出现在标签中的全局事件属性中
this代表该标签，可以访问全局属性，再访问具体操作对象（eg:this.style.color = "red")
内联式
出现在script脚本标签
可以通过标签的id唯一标识，在js代码块中操作页面标签
js采用的是小驼峰命名规范，属于解释性语言（由上至下依次解释执行）
外联式
通过script标签的src属性连接外部js文件，连接后，script标签本身内部的js代码
块将会被屏蔽
在任何位置都可以使用this对象，当this对象不指向任意一个标签是，代表的是window
对象
js具体出现的位置
head标签的底部：依赖性js库
body标签的底部（body与html结束标签之间）：功能性js脚本
三、变量的定义
四种定义变量的方式
语法：关键字 变量名 = 变量值
num = 10; //省略关键字，定义的为全局变量，在任何位置定义，在任何位置都可
以访问，但不建议使用。
var num = 10;//var关键词，无块级作用域，定义在块级作用域中的变量，外界
也可以访问
let num = 10;//let关键词，有块级作用域，定义在块级作用域中的变量，外界
无法访问
const NUM = 30;// const关键词，有块级作用域，定义在块级作用域中的变量，
外界无法访问，且变量的值不能再被二次修改，所以为常量
产生块级作用域的方式
{
直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
// 函数可以产生局部作用域，除了定义在局部作用域中的全局变量（没有关键字的变量
声明），外界可以访问，其他定义方式，外界都不可以访问
ES5 | ES6
是ECMAScript两个语法版本，ES6是ES5之后的一个版本，但是对ES5是向下兼容，
ES6中支持ES5语法
命名规范
变量命名规范
可以由哪些组成：字母，数字，_，$，中文
不能出现什么：关键字，保留字
提倡什么书写规范：小驼峰，支持_连接语法
好的 = "真好"
console.log(好的）；
四.三种弹出框
普通弹出框
alert("你丫真帅！！！")
输入框：以字符串形势接受用户输入内容
var info = prompt("请输入内容：”）；
确认框：根据用户选择确认或取消，得到 true | false 两个布尔结果
var res = confirm("你是猪吗？")
console.log(res)
五 数据类型
值类型
var a = 10; // Number 10
var a = 'abc'; // String abc
var a = true; // Boolean true
var a = undefined // undefined undefined
// 引用类型
var a = function(){} // function f(){}
var a = {} // Object {}
var a = null // Null null
// 其他Object具体体现
Array | Date | RegExp
六 值类型的类型转换
1.通过类型声明转换
Number() | String() | Boolean()
2.方法(函数) parseInt('10') | parseFloat('3.14') 123..toString()
3.隐式转换 +'10' => 10 '' + 10 => '10'
六、分支结构
1.if语句
if基础语句
if(条件表达式）{
代码块；
}
// 当条件表达式结果为true,会执行代码块；反之不执行
// 条件表达式可以为普通表达式
// 0、undefined 、null、""、NaN为假，其他均为真
if 复杂语法
// 1.双分支
if (表达式1){
代码块1；
} else{
代码块2；
}
// 2.多分支
if (表达式1){
} else if (表达式2） {
}
...
else if (表达式2） {
} else {
}
if嵌套
if(表达式1）{
if(表达式2）{
}...
}...
2.switch语句
switch (表达式){
case 值1：代码块1；break;
case 值2：代码块2; break;
default : 代码块3；
}
// 1. 表达式可以为 整数表达式 或 字符串表达式
// 2. 值可以为 整数 或字符串
// 3. break可以省略
// 4. default为默认代码块，需要出现在所有case最下方，在所有case均为被匹配时执行
}
七、循环结构
1.for循环
for(循环变量①；条件表达式②；循环变量增量③）{
代码块④；
}
// 1.循环变量可以在外、在内声明
// 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②，②④③个数为[0,n]
2.while循环
while(条件表达式){
代码块；
}
3.do...while循环
do{
代码块；
} while (条件表达式)；
4.for ...in 循环
obj = {"name":"zero","age":8}
for(k in obj){
console.log(k,obj[k])
}
// 用于遍历对象：遍历的结果为key，通过[]语法访问对应的value
5.for...of循环
iter = ['a','b','c'];
for (i in iter){
console.log(iter[i])
}
// 1.用于遍历可以迭代对象：遍历结果为index，通过[]语法访问对应的value
//2.ES6新增，可以迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等
6.break,continue关键词
break:结束本层循环进入下一次循环
八、异常处理
try {
易错代码块；
} catch(err) {
异常处理代码块；
} finally{
必须逻辑代码块；
}
// 1.err为存储错误信息的变量
// 2.finally分支在异常出现与否都会执行
throw "自定义异常"
// 必要的时候抛出自定义异常，要结合对应的try...catch使用
九、函数初级
1、函数的定义
ES5
function 函数名（参数列表）{
函数体；
}
var 函数名 = function(参数列表）{
函数体；
}
ES6
let 函数名 = （参数列表） =>{
函数体；
}
匿名函数
（function(参数列表）{
函数体；
}）（参数列表）；
2.函数的diaoy
函数名（参数列表）
3.函数的参数
个数不需要统一
function fn (a,b,c){
connsile.log(a,b,c) // 100 undefined undefined
}
fn(100)
function fn (a) {
console.log(a) // 100
}
fn(100,200,300) //200,3000被丢弃
可以任意位置具有默认值
function fn (a, b=20 , c , d = 40）{
console.log(a,b,c,d) // 100 200 300 40
}
fn(100 , 200,300)
通过...语法接收多个值
function fn (a,....b){
console.log(a,b) //100 [200 300]
}
fn (100 , 200 , 300)
// ...变量必须出现在参数列表最后
4.返回值
function fn(){
return 返回值；
}
//1.可以空return操作，用来结束函数
//2.返回值可以为任意js类型数据
//3.函数最多只能拥有一个返回值
5、事件初级
onload:页面加载完毕事件，只附属于window对象
onclick:鼠标点击时间
onmouseover:鼠标悬浮事件
onmouseout:鼠标移开事件
十、js选择器
1.getElement系列
// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名‘）；
//该方法只能由document调用
//2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名’）;
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组记过的对象,使用方式同数组）
// 没有匹配到任何结果返回空HTMLCollection对象([])
//3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名‘）;
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection(一个类数的对象，使用方式同数组）
// 没有匹配到任何结果返回空HTMLCollection对象（[])
2、querySelect系列
// 1.获取一个匹配的页面元素
document.querySelector('css语法选择器');
// 该方法可以由document及任意页面对象调用
// 该方法可以由document及任意页面对象调用
// 返回值NodeList (一个类数组结果的对象，使用方式同数组）
// 没有匹配到任何结果返回空NodeList对象（[]）
3、id 名
可以通过id名直接获取对应的页面元素对象，但是不建议使用
七、JS操作页面内容
innerText:普通标签内容（自身文本与所有子标签文本）
innerHTML:包含标签在内的内容（自身文本及子标签的所有）
value: 表单标签的内容
outerHTML:包含自身标签在内的内容（自身标签及往下的所有）
八、JS操作页面样式
读写style属性 样式
div.style.backgroundColor = 'red';
//1.操作的为行间式
//2.可读可写
//3.具体属性名采用
只读 计算后 样式
//eg:背景颜色
// 推荐
getComputedStyle(页面元素对象，伪类）.getPropertyValue('background-color');
// 不推荐
getComputedStyle(页面元素对象，伪类）.backgroundColor;
//IE9以下
页面元素对象.currentStyle.getAttribute('background-color);
页面元素对象.currentStyle.backgroundColor;
// 1.页面元素对象由JS选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式只读
// 4.该方式依旧可以获取行间式样式 （获取逻辑最后的样式）
结合css操作样式
页面元素对象.className = ""; // 清除类名
页面元素对象.className = "类名"；//设置类名
页面元素对象.className+="类名"；//添加类名