JavaScript基础

JavaScript（以下简称为JS）在web前端开发中的重要性在每一位开发人员的心中应该都十分的清楚。在网页的特效方面，JS起到重要的作用，虽然在网络中，JQuery插件可以说是一抓一大把，但JQ插件的制作完成亦是通过JS来实现的。想要制作出炫酷的特效动画效果不是一朝一夕便可完成的，需要有坚实的基础来支撑。今天，我们就来学一学JS入门基础。

一、关于内容的输出打印

1. window.alert(“内容”); 该语句会在页面弹出一个对话框，对话框中的内容为想要输出的内容，在对话框出现后点击右下方的确定按钮后对话框关闭后才可关闭页面
2. console.log("内容"):该语句在控制台输出打印内容。内容不会显示在页面上，只会在后台的控制台中显示，程序员多用此语句进行程序的调试。console不仅仅可以在控制台输出打印内容，还可以输出打印警告、错误信息
   （1）输出打印警告信息:console.warn("警告信息");
   （2）输出打印错误信息:console.error("错误信息");
3. document.write(“内容”);该语句输出的内容会显示在页面上，若有若干个document.write(“内容”);这些内容会依次输出。该语句可识别标签，若想通过document来添加标签，语法:document.write("<h1>内容</h1>")

二、关于获取元素

• 通过ID获取:document.getElementById(“ID名”);由于ID名唯一，因而只会返回一个元素
• 通过类名获取:document.getElementsByClassName(“类名”);一个页面中类名可有多个，所以，返回为数组。需注意的是：通过类名获取元素，IE具有兼容性，IE不支持该方法
• 通过标签获取:document.getElementsByTagName(“标签”);一个页面中同一个标签必定会重复使用，因而该方法返回值也为数组。

三、关于数据类型：

1. 数据类型：

• Number类型：数字，例如：1，2，3…
• String类型:“hello world ”、“你好”…
• Boolean类型:ture/false
• null
• undefind
• Array:[1,2,3]
• Object:{name:“lili”,age:20}

2. 数据类型转换:

• 转换为Boolean类型：Boolean(需转换的变量名);
• 转换为Number类型:Number（需转换的变量名）；
• 转换为String类型:String（需转换的变量名）；或使用"+"转换

四、关于内容的获取:

• 获取标签中的内容:元素.innerHTML;该方式使用于双标签中的内容的获取
• 获取表单元素中的内容：元素.value；

五、关于内容的设置:

 1、设置标签中的内容:元素.innerHTML("内容");
 2、设置表单元素中的内容:元素.value("内容");

六、关于函数

1. 含义：可重复使用的代码块
2. 函数的定义:

• function 函数名(){ 代码块 }
• 函数直接量定义:var fn=function(){ 代码块 }
• 通过构造函数定义:var fn=new Function("代码块")

3. 函数的调用：

• 函数名（）
• 自执行函数:(function(){ 代码块 })();

七、关于流程控制

• for语句:for语句大多用于数组的遍历，语法为:for(var i=0;i<数组名.length;i++){ 代码块 }
• if…else/if…else if …else语句:两种语句大多用于条件的判断，若条件成立则执行if的代码块，若if中的条件不成立则继续判断else if语句中的条件，成立则执行若两者条件皆不成立则执行else语句中的代码块,语法:

if(条件1）{   代码块1；} else if(条件2){  代码块2;  } else{ 代码块3;}
//若只有两种条件下，else if可以省略

八、事件

JS中的事件是动画特效不可缺少的。事件具有三要素:事件源(谁引起）、事件类型（引起的人怎么了）、事件驱动程序(结果如何),JS的事件有多种，之今我接触的大多为以下几种：

• 点击事件:onclick()
• 鼠标悬停事件:onmouseover()/onmouseenter();
• 鼠标移除事件:onmouseout()/onmouseleave();注意：:onmouseover()与:onmouseout()配合使用，onmouseenter()和onmouseleave()配合使用。大多使用的为后两者，因为后两者的触发不会产生冒泡事件。
• 鼠标获取焦点事件:onfocus();
• 鼠标事情焦点事件:onblur();

九、forEach和Map的区别

• forEach返回值是undefind，不可以链式调用
• Map返回一个新数组，原数组不会改变
• 没有办法终止或跳出forEach循环，出发抛出异常
• $each()方法为每个匹配元素规定运行的函数，可以返回false，可用于及早停止循环

十、event loop(事件循环）

• 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
• 异步任务：不进入主线程，而进入“任务队列”的任务。只有“任务队列”通知主线程，某个异步任务可以执行，该任务才会进入主线程执行
• event loop:主线程从任务队列中读取事件，这个过程是不断的，整个的运行机制
• 宏任务（macro-task):每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调，并放到执行栈中执行，每一个宏任务会从头到尾将这个任务执行完毕，不会执行其他），包括整体代码script、setTimeout、setInterval.
• 微任务（micro-task)：在当前task执行结束后立即执行的任务，包括Promise.process nextTick

setTimeout(function(){
    console.log(1)
})
new Promise(function(resolve){
    console.log(2)
}).then(function(){
    console.log(3)
})

console.log(4)

//result:2 4 3 1

代码解析：
首先，整个代码是一个宏任务，遇到setTimeout，会创建另一个宏任务，接着执行当前的宏任务，Promise新建后就会立即执行，所以先打印2.then方法是一个微任务，遇到then，添加到微任务队列，代码执行打印4，此时宏任务执行完毕，接着检查当前 微任务队列是否有微任务，如果有，立即执行当前的微任务（也就是then)，打印3，当前微任务执行完毕后，开始执行下一轮的宏任务setTimeout,打印1

关于JS的相关知识不仅仅只是以上内容，还有很多有趣的知识，若有兴趣或是有需要的同学可以自己去查看，当然，我也会在博客中为大家提供一定的帮助。