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等。
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结相关推荐
- Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- Web前端开发精品课HTML CSS JavaScript基础教程第十四章课后编程题答案
编程题: 下面有一段代码,请在这段代码的基础上使用正确的选择器以及这两章学到的字体样式.文本样式来实现图14-13所示的效果. <!DOCTYPE html> <html> & ...
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
编程题: 利用这样一章学到的知识,制作如图6-10所示的表格效果,并且要求代码语义化. 用VS2013新建ASP.NET空网站,添加新项,建立HTML文件,向其加入以下代码: <!DOCTYPE ...
- Web前端开发精品课HTML CSS JavaScript基础教程第四章课后编程题答案
编程题 利用这一章学到的各种文本标签,把图4-25所示的网页效果做出来. 用VS2013新建ASP.NET空网站,添加新项,建立HTML文件,向其加入以下代码: <!DOCTYPE html&g ...
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
编程题: 图5-15所示为一个问卷调查的网页,请制作出来.要求:大标题用h1标签:小题目用h3标签:前两个问题使用有序列表:最后一个问题使用无序列表. 用VS2013新建ASP.NET空网站,添加新项 ...
- 《Web前端开发精品课 HTML与CSS进阶教程》——1.4 id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰 更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
最新文章
- 第十六届智能车竞赛比赛进行中 - 参赛队员提出的问题
- Eclipse使用mybatis generator自动生成代码
- python消息订阅_python rabbitmq消息发布订阅
- ​【文末有福利】股票跨度——真实世界的算法
- 想转行人工智能?哈佛博士后有话说...
- Linux io运行情况,Linux IO调度层分析
- 在ChemDraw中一键隐藏所有氢原子的方法
- Leetcode 746.使用最小花费爬楼梯
- C++中 _T 的用途
- 可以出题的答题小程序
- java的handler机制_从源码解析Handler机制
- 论文阅读-2017-Vidal-NEARP
- windows 优化详解
- Pycharm 安装 github copilot 报错:failed to initiate the github login process please try again
- Springboot整支付宝网站支付、APP支付、单笔转账给用户、退款功能
- 百度编辑器如何在html引入,网页制作中如何集成百度Ueditor网页编辑器
- html页面字体缩小模糊怎么解决,如何解决网页字体模糊的问题
- 免费阅读正在杀死腾讯阅文?
- windows10新增本地账户
- android照片墙的实现