Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结

内容来自莫振杰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  字符串对象的属性

属性	说明
length	获取字符串的长度

 

表28-2  字符串对象的方法

方法	说明
toLowerCase()、toUpperCase()	大小写转换
charAt()	获取某一个字符
substring()	截取字符串
replace()	替换字符串
split()	分割字符串
indexOf()、lastIndexOf()	检索字符串的位置

 

    实际上，字符串对象的属性和方法还有很多，不过我们只需要掌握上面这些就够了，不需要浪费时间和精力去记忆其他没用的东西。对于初学者来说，可能很多人会问上表中的属性和方法都有什么用。其实字符串更多的是结合其他技术一起使用，等真正到了实战开发的时候就知道了。所以我们一定要认真掌握上面的每一种属性和方法，把基础打好。

第29章  数组对象
    在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”（一般情况下）的数据类型。

    数组的创建一般用简写形式，如[1,2,3,4,5]。数组的获取和赋值，都是使用下标的方式，特别注意一点：数组的下标是从0开始，而不是从1开始的。

    其中，数组常用的属性和方法如下表29-1和表29-2所示：

表29-1  数组的属性

属性	说明
length	获取数组的长度

表29-2  数组的方法

方法	说明
slice()	截取数组部分
unshift()	添加数组元素，在开头添加
push()	添加数组元素，在末尾添加
shift()	删除数组元素，在开头删除
pop()	删除数组元素，在末尾删除
sort()	数组大小比较
reverse()	数组颠倒顺序
join()	将数组元素连接成字符串

 

    对于数组来说，最常用的方法是2个：push()和join()。如果小伙伴们觉得上面方法太多记不住，可以只记住这2个，其他的等需要的时候再回来查一下就行。

第30章  时间对象
    对于日期时间对象的方法来说，getXxx()用于获取时间，setXxx()用于设置时间。

表30-5  用于获取时间的getXxx()

方法	说明
getFullYear()	获取年份，取值为4位数字
getMonth()	获取月份，取值为0（一月）到11（十二月）之间的整数
getDate()	获取日数，取值为1~31之间的整数
getHours()	获取小时数，取值为0~23之间的整数
getMinutes()	获取分钟数，取值为0~59之间的整数
getSeconds()	获取秒数，取值为0~59之间的整数

 

表30-6  用于设置时间的setXxx()

方法	说明
setFullYear()	可以设置年、月、日
setMonth()	可以设置月、日
setDate()	可以设置日
setHours()	可以设置时、分、秒、毫秒
setMinutes()	可以设置分、秒、毫秒
setSeconds()	可以设置秒、毫秒

第31章  数学对象
对于Math对象的属性来说，我们只需要掌握Math.PI就行。对于Math对象的方法来说，我们需要掌握表31-5中这些方法就行了。

表31-5  Math对象常用方法

方法	说明
max(a,b,…,n)	返回一组数中的最大值
min(a,b,…,n)	返回一组数中的最小值
sin(x)	正弦
cos(x)	余弦
tan(x)	正切
asin(x)	反正弦
acos(x)	反余弦
atan(x)	反正切
atan2(x)	反正切
floor(x)	向下取整
ceil(x)	向上取整
random()	生成随机数

第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操作的方法

方法	说明
createElement()	创建元素节点
createTextNode()	创建文本节点
appendChild	插入元素，在父元素最后一个子元素后面插入
insertBefore()	插入元素，在父元素任意一个子元素前面插入
removeChild()	删除元素
cloneNode()	复制元素
replaceChild()	替换元素

在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遍历的属性

属性	说明
parentNode	查找父元素
childNodes、firstChild、lastChild	查找子元素，包含文本节点
children、firstElementChild、lastElementChild	查找子元素，不包含文本节点
previousSibling、nextSibling	查找兄弟元素，包含文本节点
previousElementSibling、nextElementSibling	查找兄弟原始，不包含文本节点

  4、innerHTML和innerText

    在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

第34章  事件基础
    事件操作是JavaScript的核心，不懂事件操作，JavaScript等于白学。在JavaScript中，事件调用方式有2种：①在script标签中调用；②在元素中调用。

表34.2  鼠标事件

事件	说明
onclick	鼠标单击
onmouseover	鼠标移入
onmouseout	鼠标移出
onmousedown	鼠标按下
onmouseup	鼠标松开
onmousemove	鼠标移动

表34.3  键盘事件

事件	说明
onkeydown	键盘按下
onkeyup	键盘松开

表34.4  表单事件

事件	说明
onfocus	获取焦点
onblur	失去焦点
onselect	选择文本
onchange	选择某一项触发（单选框、复选框、下拉菜单）

 

表34.5  编辑事件

事件	说明
oncopy	用于防止文本被复制
onselectstart	用于防止文本被选取
oncontextmenu	用于禁止鼠标右键

表11.6  页面事件

事件	说明
window.onload	页面加载完毕触发
window.onunload	离开页面触发

 

    上面列出来的都是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对象的属性

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

 

  3、this

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

第36章  window对象
    一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。

表36-5  window对象下的重要子对象

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息

 

  1、窗口操作

  （1）打开窗口

window.open(url, target)

  （2）关闭窗口

window.close()

  2、对话框

表36-6  3种对话框

方法	说明
alert()	仅提示文字，没有返回值
confirm()	具有提示文字，返回“布尔值”（true或false）
prompt()	具有提示文字，返回“字符串”

  3、定时器

    在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

    我们也可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterva()来取消执行setInterval()。

  4、location对象

表36-7  location对象的属性

属性	说明
href	当前页面地址
search	当前页面地址“？”后面的内容
hash	当前页面地址“#”后面的内容

  5、navigator对象

    在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。

第37章  document对象
    document对象其实是window对象下的一个子对象来的，它操作的是HTML文档里所有的内容。document对象常用的属性和方法如下：

表37-3  document对象常用的属性

属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.URL	当前文档的URL
document.referrer	返回使浏览者到达当前文档的URL

表37-4  document对象常用的方法

方法	说明
document.getElementById()	通过id获取元素
document.getElementsByTagName()	通过标签名获取元素
document.getElementsByClassName()	通过class获取元素
document.getElementsByName()	通过name获取元素
document.querySelector()	通过选择器获取元素，只获取第1个
document.querySelectorAll()	通过选择器获取元素，获取所有
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容
document.writeln()	输出内容并换行

 

小伙伴们边学边练，不知不觉看完这本书的时候，应该已经对HTML、CSS、JavaScript有了基本的掌握，能够制作出简单的页面了。

要想成为一名合格的前端开发人员，接下来要学习更多的前端技术，如：jQuery、HTML5、CSS3等。