JavaScript前端开发入门

随着我国改革开放的进一步深化，高等教育也得到了快速发展，各地高校紧密结合地
方经济建设发展需要，科学运用市场调节机制，加大了使用信息科学等现代科学技术提升、
改造传统学科专业的投入力度，通过教育改革合理调整和配置了教育资源，优化了传统学
科专业，积极为地方经济建设输送人才，为我国经济社会的快速、健康和可持续发展以及
高等教育自身的改革发展做出了巨大贡献。但是，高等教育质量还需要进一步提高以适应
经济社会发展的需要，不少高校的专业设置和结构不尽合理，教师队伍整体素质亟待提高，
人才培养模式、教学内容和方法需要进一步转变，学生的实践能力和创新精神亟待加强。
*一直十分重视高等教育质量工作。 2007年 1月，*下发了《关于实施高等
学校本科教学质量与教学改革工程的意见》，计划实施“高等学校本科教学质量与教学改革
工程（简称‘质量工程’）”，通过专业结构调整、课程教材建设、实践教学改革、教学团队
建设等多项内容，进一步深化高等学校教学改革，提高人才培养的能力和水平，更好地满
足经济社会发展对高素质人才的需要。在贯彻和落实*“质量工程”的过程中，各地
高校发挥师资力量强、办学经验丰富、教学资源充裕等优势，对其特色专业及特色课程（群）
加以规划、整理和总结，更新教学内容、改革课程体系，建设了一大批内容新、体系新、
方法新、手段新的特色课程。在此基础上，经*相关教学指导委员会专家的指导和建
议，清华大学出版社在多个领域精选各高校的特色课程，分别规划出版系列教材，以配合“质量工程”的实施，满足各高校教学质量和教学改革的需要。本系列教材立足于计算机专业课程领域，以专业基础课为主、专业课为辅，横向满足高校多层次教学的需要。在规划过程中体现了如下一些基本原则和特点。
（1）反映计算机学科的发展，总结近年来计算机专业教学的成果。内容先进，充分吸收国外先进成果和理念。

（2）反映教学需要，促进教学发展。教材要适应多样化的教学需要，正确把握教学内容和课程体系的改革方向，融合先进的教学思想、方法和手段，体现科学性、先进性和系统性，强调对学生实践能力的培养，为学生知识、能力、素质协调发展创造条件。

（3）实施精品战略，突出重点，保证质量。规划教材把重点放在公共基础课和专业基础课的教材建设上；特别注意选择并安排一部分原来基础比较好的优秀教材或讲义修订再版，逐步形成精品教材；提倡并鼓励编写体现教学质量和教学改革成果的教材。

（4）主张一纲多本，合理配套。专业基础课和专业课教材配套，同一门课程有针对不同层次、面向不同应用的多本具有各自内容特点的教材。处理好教材统一性与多样化，基本教材与辅助教材、教学参考书，文字教材与软件教材的关系，实现教材系列资源配套。

（5）依靠专家，择优选用。在制定教材规划时要依靠各课程专家在调查研究本课程教材建设现状的基础上提出规划选题。在落实主编人选时，要引入竞争机制，通过申报、评审确定主题。书稿完成后要认真实行审稿程序，确保出书质量。

繁荣教材出版事业，提高教材质量的关键是教师。建立一支高水平教材编写梯队才能保证教材的编写质量和建设力度，希望有志于教材建设的教师能够加入到我们的编写队伍中来。 
21世纪高等学校计算机专业实用规划教材联系人：魏江江 weijj@tup.tsinghua.edu.cn 

在如今这个互联网飞速发展的时代，网站开发几乎成了每一个程序员的必会技能。众所周知，Web开发分为前端开发和后端开发，而前端开发需要用的技术主要分为 3部分，分别是 HTML、CSS和 JavaScript。前两者的终目标是设计出符合功能需求且美观的页面，主要任务是将美工设计好的 UI和页面样式通过代码转换成能够被浏览器显示出来的网页；而 JavaScript则是负责让这个页面动起来，本书介绍的 JavaScript能够让页面在不涉及与数据库进行数据交换的情况下实现一些基本的逻辑以及动态效果，至于后端的 node.js部分将不会涉及。
在 Web开发中，对于后端语言我们有很多的选择，不会只局限于 Java或者 PHP，因为还有很多同样优秀的后端语言（如 Python、node.js）可供使用。同样，我们还可以选择 ASP.NET，但是没法选择的就是前端的 HTML CSS JavaScript。因此 JavaScript可以算是所有网站开发领域内的程序员必会的一门语言，而且它不仅仅能够实现一些前端的逻辑，AJAX技术甚至可以利用 XML在不重载页面的情况下与服务器进行数据交换。一名优秀的 JavaScript开发者不但可以做出十分友好的界面和精彩的动态效果，还能够大大减轻服务器的压力。
为了让 JavaScript初学者能够快速熟悉这门语言，在阅读了很多市场上 JavaScript的书籍并参考了很多网上的教程后，结合在之前的前端开发中获得的经验，我们编写了本书。希望能提供给读者真正实用的 JavaScript知识和技巧。对比其他 JavaScript教材，本书在以下几个重要方面有突出特色。
（1）目标针对性强：本书针对具有一门编程语言基础且掌握基本的 HTML和 CSS知识并想要学习 JavaScript的读者，旨在让有一定程序编写能力，想要学习网站前端开发的初学者能够快速入门 JavaScript，并能在短时间内了解到网站开发中常用的 JavaScript知识，为今后的课程学习和职业前途打下坚实的基础。

（2）结构合理，引人入胜：本书结构安排合理，由浅入深，先从读者了解的编程语言的基本语法入手，通过对比体现出 JavaScript的特点，而不是填鸭式地推出它们。在简要介绍 JavaScript的基本语法后，通过提出一个现实需求，引发读者的思考。之后通过展示并讲解 demo代码，来让读者更好地理解并能在实践中运用。

（3）理论结合实践：本书用实例讲授知识点，不局限于枯燥的理论介绍。在讲解 JavaScript的基本语法和框架的过程中穿插进一个个实际的软件开发样例，从实际中体会 JavaScript在前端开发中发挥的作用，加深对语法知识的印象。读者通过将书中代码手敲一遍或仿照书中实例自己编写小型网页进行练习，可切实强化编码能力，提高对网站逻辑的

分析及设计能力，真正回归语言学习的真谛。

（4）注重实用性，能够快速上手：本书编写的初衷是想让 JavaScript的初学者能够快速上手并运用于实践中，因此我们讲解的语法知识都是在实际网站开发中经常会用到的，有些冷僻的或者开发中不常用的内容可能不会涉及。所以本书可能不是一本面面俱到的教材，但是一定会是一本实用的快速入门秘籍。

本书的作者为吕云翔、罗琦，曾洪立参与了部分内容的编写并进行了素材整理及配套资源制作等。由于我们的水平和能力有限，书中难免有疏漏之处，恳请各位同仁和广大读者批评指正，也希望各位能将实践过程中的经验和心得与我们交流（ yunxianglu@hotmail.com）。
编者 
2019年 5月

JavaScript前端开发入门

JavaScript前端开发入门

第 1章 JavaScript概述 .1 

1.1 
JavaScript简介 1 

1.1.1  
JavaScript的历史 1 

1.1.2  
JavaScript的特点 2 

1.1.3  
JavaScript的组成 2 

1.2 
JavaScript简单程序示例 3 

1.2.1  JavaScript写法 3 
Hello, World!3

1.
2.2 小结.4 习题.5 

第 2章 JavaScript基础语法 .6 

2.1 
JavaScript变量 6 

2.1.1  
JavaScript变量的特点 6 

2.1.2  
JavaScript变量的命名规范 6 

2.1.3  
JavaScript变量声明 8 

2.1.4  
变量的作用域 9 

2.1.5  
变量优先级 12 

2.1.6  
变量提升 12 

2.2 
JavaScript数据类型 13 

2.2.1  
字符串类型 14 

2.2.2  
数字类型 15 

2.2.3  
布尔类型 16 

2.2.4  
数组类型 16 

2.2.5  
对象类型 17 
undefined17

2.2.6 null .19
2.2.7 
2.2.8  函数类型 19 

2.3 
JavaScript常量 21 

2.3.1  
常量的声明 21 

2.3.2  
JavaScript内置常量 21 

2.4 
JavaScript运算符 22 

2.4.1  
算术运算符 22 

2.4.2 
字符串运算符 23 

2.4.3 
赋值运算符 24 

2.4.4 
比较运算符 25 

2.4.5 
逻辑运算符 27 

2.4.6 
位运算符 29 

2.4.7 
特殊运算符 30 

2.4.8 
运算符执行顺序 37 

2.5 
JavaScript基本语句 39 

2.5.1 
注释语句 39 

2.5.2 
条件语句 39 

2.5.3 
循环语句 44 

2.5.4 
with语句53 
小结.55 
习题.55 

第 3章 JavaScript进阶 .57 

3.1 
JavaScript异常处理 57 

3.1.1 
抛出异常 57 

3.1.2 
捕获异常 59 

3.1.3 
finally语句 62 

3.2 
JavaScript函数 63 

3.2.1 
JavaScript函数简介 63 

3.2.2 
函数的声明 64 

3.2.3 
函数的嵌套 67 

3.2.4 
函数的返回值 67 

3.2.5 
函数的参数传递 68 

3.2.6 
函数的调用 70 

3.2.7 
回调函数 74 

3.3 
JavaScript对象 76 

3.3.1 
对象简介 76 

3.3.2 
对象的创建和使用 77 

3.3.3 
原型对象 77 

3.3.4 
通过原型对象继承 79 

3.4 
JavaScript核心对象 81 

3.4.1 
Number对象81 

3.4.2 
String对象 .83 

3.4.3 
Boolean对象 .90 

3.4.4 
Date对象 .91 

3.4.5 
Math对象 95 

3.4.6 
RegExp对象96 

3.4.7 
数组对象 102 
小结.106 
习题.106 

第 4章 JavaScript动态页面 . 110 

4.1 
文档对象模型  110 

4.1.1 
获取节点元素  112 

4.1.2 
获取和修改元素的文本内容  117 

4.1.3 
获取和修改元素的属性 120 

4.1.4 
修改 HTML输出流 121 

4.1.5 
修改元素的 CSS样式.122 

4.1.6 
向页面中添加元素 123 

4.1.7 
删除页面中的元素 125 

4.2 
JavaScript事件驱动 126 

4.2.1 
事件类型 126 

4.2.2 
绑定事件 127 

4.3 
浏览器对象模型 130 

4.3.1 
window对象简介 130 

4.3.2 
screen对象 130 

4.3.3 
location对象131 

4.3.4 
history对象133 

4.3.5 
navigator对象135 

4.3.6 
网页弹窗 136 

4.3.7 
窗口操作 138 

4.3.8 
计时事件 139 
Cookie 141

4.4 
4.4.1 
创建和获取 Cookie .141 

4.4.2 
使用 Cookie存储多条信息 143 

4.4.3 
删除 Cookie .145 

4.5 
表单验证 146 

4.5.1 
表单元素 146 

4.5.2 
表单对象 148 

4.5.3 
输入元素 150 

4.5.4 
表单验证示例 153 

4.6 
JavaScript实现简单动画效果 155 

4.6.1 
动画效果一：块元素平移 155 

4.6.2 
动画效果二：字体闪烁 157 

4.6.3 
动画效果三：进度条 158 
小结.159 
习题.159 

目 录 

第 5章 AJAX 161 

5.1 
AJAX概述 161 

5.1.1  
AJAX使用场景 161 

5.1.2  
异步处理 162 

5.2 
AJAX用法 162 

5.2.1  
创建 XMLHttpRequest对象.162 

5.2.2  
为 XMLHttpRequest绑定函数 .163 

5.2.3  
发送 HTTP请求165 

5.2.4  
服务器响应 166 

5.3 
AJAX实例 166 

5.3.1  AJAX实例一：搜索建议 .166 

5.3.2 
AJAX实例二：用户名查重 .169 
小结.172 
习题.173 

第 6章 jQuery 174 

6.1 
jQuery概述174 

6.1.1  
jQuery的简介174 

6.1.2  
jQuery的安装174 

6.2 
jQuery操作元素 175 

6.2.1  
jQuery获取元素 175 

6.2.2  
jQuery获取