内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结
第24章 JavaScript简介
1、HTML是网页的结构，CSS是网页的外观，而JavaScript是网页的行为；
2、推荐2个前端开发工具：Hbuilder和vscode。建议初学者使用Hbuilder；
3、JavaScript常用引入方式有3种：①外部JavaScript；②内部JavaScript；③元素事件JavaScript；
第25章 语法基础
对于这一章来说，我们需要清楚这5个概念：变量、数据类型、运算符、表达式、语句。可以根据下图25-38来理解：
图25-38 分析图
1、变量
（1）所有变量都是用var声明的；
（2）对于变量命名，尽量取有意义的英文名字，以便一眼就可以看出来这是干嘛的；
（3）变量的值是可以变的；
2、数据类型
在JavaScript中，常见的数据类型有6种：
（1）数字；
（2）字符串；
（3）布尔值；
（4）转义字符；
（5）未定义值；
（6）空值；
3、运算符
在JavaScript中，常见的运算符有5种：
（1）算术运算符；
（2）赋值运算符；
（3）比较运算符；
（4）逻辑运算符；
（5）条件运算符；
4、表达式与语句
1+2是一个表达式，而整一句代码“var a=1+2;”就是一个语句。
图25-39 表达式与语句
5、注释
//单行注释
/*多行注释*/
第26章 流程控制
这一章我们学习了3种流程控制的结构：顺序结构、选择结构、循环结构。为什么这一章叫做“流程控制”呢？大家好好琢磨“流程控制”这4个字，然后想一下这一章我们都学了什么就明白了。
1、选择结构
选择结构指的是根据“条件判断”来决定执行哪一段代码。选择结构有单向选择、双向选择以及多向选择3种。
在JavaScript中，选择结构共有2种方式，一种是if语句，另外一种是switch语句。其中if语句又包括：
（1）单向选择：if…
（2）双向选择：if…else…
（3）多向选择：if…else if…else…
（4）if语句的嵌套
2、循环结构
循环语句指的是在“满足某个条件下”循环反复地执行某些操作的语句。
在JavaScript中，循环语句共有以下3种：
（1）while语句
（2）do...while语句
（3）for语句
第27章 初识函数
在JavaScript中，函数指的是一个用大括号“{}”括起来的、可重复使用的、具有特定功能的语句块。如果想要使用函数，一般需要2步：
① 定义函数；
② 调用函数；
1、函数的定义
在JavaScript中，函数可以分2种，一种是“没有返回值的函数”，另外一种就是“有返回值的函数”。
（1）没有返回值的函数
没有返回值的函数，指的是函数执行完就算了，不会返回任何值。
语法：
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
}
（2）有返回值的函数
有返回值的函数，指的是函数执行完了之后，会用return语句返回一个值，这个返回值可以供我们使用。
语法：
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
return 返回值;
}
2、函数的调用
如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的（认真琢磨这句话，非常重要）。
JavaScript函数调用方式很多，常见有4种：
① 直接调用；
② 在表达式中调用；
③ 在超链接中调用
④ 在事件中调用；
此外，对于嵌套函数和内置函数，我们稍微看看就行，不需要深入了解。
【后话】：函数的内容是极其复杂的，我们在这一章学到的只是一点皮毛而已。高级部分如this、闭包、类、继承、递归函数、高阶函数等，都与函数有关。事实上，函数在JavaScript又被称为“第一等公民”，可见其重要程度。对于JavaScript进阶部分，可以关注绿叶学习网。
第28章 字符串对象
在JavaScript中，字符串对象常用的属性和方法如下表28-1和表28-2所示：
表28-1 字符串对象的属性
表28-2 字符串对象的方法
实际上，字符串对象的属性和方法还有很多，不过我们只需要掌握上面这些就够了，不需要浪费时间和精力去记忆其他没用的东西。对于初学者来说，可能很多人会问上表中的属性和方法都有什么用。其实字符串更多的是结合其他技术一起使用，等真正到了实战开发的时候就知道了。所以我们一定要认真掌握上面的每一种属性和方法，把基础打好。
第29章 数组对象
在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”（一般情况下）的数据类型。
数组的创建一般用简写形式，如[1,2,3,4,5]。数组的获取和赋值，都是使用下标的方式，特别注意一点：数组的下标是从0开始，而不是从1开始的。
其中，数组常用的属性和方法如下表29-1和表29-2所示：
表29-1 数组的属性
表29-2 数组的方法
对于数组来说，最常用的方法是2个：push()和join()。如果小伙伴们觉得上面方法太多记不住，可以只记住这2个，其他的等需要的时候再回来查一下就行。
第30章 时间对象
对于日期时间对象的方法来说，getXxx()用于获取时间，setXxx()用于设置时间。
表30-5 用于获取时间的getXxx()
表30-6 用于设置时间的setXxx()
第31章 数学对象
对于Math对象的属性来说，我们只需要掌握Math.PI就行。对于Math对象的方法来说，我们需要掌握表31-5中这些方法就行了。
表31-5 Math对象常用方法
第32章 DOM基础
1、DOM是什么？
对于DOM，我们总结出以下几点：
（1）DOM操作，可以简单理解成：元素操作；
（2）一个HTML文档就是一棵节点树，页面中的每一个元素就是一个树节点；
（3）每一个元素就是一个节点，而每一个节点就是一个对象。我们在操作元素时，就是把这个元素看成一个对象，然后用这个对象的属性和方法进行操作；
2、节点类型
DOM节点共有12种类型，不过常见的只有3种（其他不用管）：
（1）元素节点，nodeType值为1
（2）属性节点，nodeType值为2
（3）文本节点；nodeType值为3
3、获取元素
在JavaScript中，我们可以通过6种方式来获取指定元素：
（1）getElementById()
（2）getElementsByTagName()
（3）getElementsByClassName()
（4）querySelector()和querySelectorAll()
（5）getElementsByName()
（6）document.title和document.body
虽然这些方法名又长又臭，不过根据英文意思来记忆就很轻松啦。此外对于这些获取元素的方式，有几点需要我们注意的：
（1）只有getElementsByTagName()可以操作动态DOM，其他的都不行
（2）querySelector()表示选取满足选择条件的第1个元素，querySeletorAll()表示选取满足条件的所有元素
（3）当你选取的只有一个元素时，querySelector()和querySelectorAll()是等价的
（4）getElementsByName只用于表单元素，准确来说一般用于单选按钮和复选框
（5）getElementsByTagName()、getElementsByClassName()、getElementsByName()这3个方法返回的都是一个类数组（elements嘛），想要准确获取其中一个元素，可以使用数组下标来实现
4、DOM操作
表32-2 DOM操作的方法
在HTML中直接添加元素，这是静态方法。而使用JavaScript添加元素，这是动态方法。这一章介绍的这些就是动态方法，也叫动态DOM操作。动态DOM操作在实际开发中用途是非常广的。
第33章 DOM进阶
1、HTML属性操作
在JavaScript中，有2种操作HTML元素属性的方式，一种是用“对象属性”，另外一种是用“对象方法”。不管是用哪种方式，都涉及2种操作：①获取HTML属性值；②设置HTML属性值。
（1）“对象属性”方式
obj.attr //获取值
obj.attr = "值" //设置值
（2）“对象方法”方式
obj.getAttribute("attr") //获取值
obj.setAttribute("attr","值") //设置值
对于操作HTML属性的2种方式，我们总结一下：
①“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性；
②只有“对象方法方式”才可以操作自定义属性；
2、CSS属性操作
（1）获取值
getComputedStyle(obj).attr
（2）设置值
obj.style.attr = "值"; //使用style对象
obj.style.cssText = "值" //使用cssText属性
3、DOM遍历
表33-2 DOM遍历的属性
4、innerHTML和innerText
在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。
第34章 事件基础
事件操作是JavaScript的核心，不懂事件操作，JavaScript等于白学。在JavaScript中，事件调用方式有2种：①在script标签中调用；②在元素中调用。
表34.2 鼠标事件
表34.3 键盘事件
表34.4 表单事件
表34.5 编辑事件
表11.6 页面事件
上面列出来的都是JavaScript中最常用的事件，对于不常用的，我们已经舍弃掉了。学完这些，我们可以自己尝试开发一下各种效果了，如图片轮播、Tab选项卡、回顶部等。
此外，这些事件大多数都是针对PC端的，像移动端还有一些特殊的事件如touchstart、touchend、touchemove等，这个可以关注绿叶学习网的移动Web开发教程。
第35章 事件进阶
1、事件监听器
在JavaScript中，想要给元素添加一个事件，其实我们有2种方式：①事件处理器；②事件监听器。
obj.addEventListener("click", function () {……);}, false);
obj.onclick = function () {……};
如果想要为一个元素添加多个相同事件，必须要用事件监听器，而不能用事件处理器。
（1）绑定事件
语法：
obj.addEventListener(type , fn , false)
（2）解绑事件
语法：
obj.removeEventListener(type , fn , false);
说明：
removeEventListener()只能解除“事件监听器”添加的事件，如果要解除“事件处理器”添加的事件，需要用“obj.事件名 = null;”方法来实现。
2、event对象
当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。
表35-3 event对象的属性
3、this
在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
第36章 window对象
一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。
表36-5 window对象下的重要子对象
1、窗口操作
（1）打开窗口
window.open(url, target)
（2）关闭窗口
window.close()
2、对话框
表36-6 3种对话框
3、定时器
在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。
我们也可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterva()来取消执行setInterval()。
4、location对象
表36-7 location对象的属性
5、navigator对象
在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。
第37章 document对象
document对象其实是window对象下的一个子对象来的，它操作的是HTML文档里所有的内容。document对象常用的属性和方法如下：
表37-3 document对象常用的属性
表37-4 document对象常用的方法
小伙伴们边学边练，不知不觉看完这本书的时候，应该已经对HTML、CSS、JavaScript有了基本的掌握，能够制作出简单的页面了。
要想成为一名合格的前端开发人员，接下来要学习更多的前端技术，如：jQuery、HTML5、CSS3等。
