书名：JavaScript前端开发程序设计教程：微课版pdf/doc/txt格式电子书下载

推荐语：

作者：李玉臣,臧金梅等编

出版社：人民邮电出版社

出版时间：2018-10-01

书籍编号：30495636

ISBN：9787115489777

正文语种：中文

字数：245061

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：JavaScript前端开发程序设计教程：微课版

作者：李玉臣　臧金梅

出版社：人民邮电出版社

出版日期：2018-10-01

ISBN：9787115489777

版权所有 · 侵权必究

内容提要

JavaScript是一门广泛应用于Web前端开发的脚本语言，能为网页添加各式各样的动态效果，为用户提供流畅美观的浏览效果，具有简单、易学的特点。

本书系统地讲解了JavaScript编程的基础知识和实用技术。全书共10章，内容包括初识JavaScript、JavaScript语言基础、流程控制语句、JavaScript函数、对象、BOM和DOM、事件及事件处理、表单和表单对象、Ajax初步、JavaScript特效。为了加深读者对知识的理解，本书在全面、系统地知识讲解的基础上，配备了精彩的同步案例及综合案例，有助于读者对知识和技能的理解。

本书既可以作为普通高等学校、高职高专院校计算机相关专业的教材，也可以作为JavaScript爱好者及相关技术人员自学的参考资料。

前言 Foreword

随着互联网行业的发展，无论是计算机、平板电脑，还是手机用户，用户体验的要求都越来越高，JavaScript作为一种流行的脚本语言，可以实现网页的交互，为用户提供流畅的网页浏览效果，是目前Web前端开发中非常重要的一门语言。如何快速、全面、系统地了解并掌握它，已成为Web开发人员的迫切需求。

本书特色

1.案例贯穿

案例教学是当前非常有效的教学方法之一。本书将JavaScript脚本知识和案例有机结合，通过先易后难、从基础到高级的方式，循序渐进讲解JavaScript的基础知识和应用技术，并且通过“案例贯穿”的形式展开，在讲解知识点时，共配备了86个“同步案例”，让读者明白所学的知识点能用来解决什么问题。

然后，全书共用10个“综合案例”有效引导读者将本章学过的内容串起来，培养读者分析问题与解决问题的能力，以此真正做到知识点与案例相辅相成，使读者学以致用。

2.微课视频

为帮助读者对重点知识的理解和掌握，本书每章重点、难点部分都配备微课视频，读者只需用手机扫描二维码，即可同步观看视频教学。

3.巩固训练

本书在每一章的最后都提供了训练习题，方便读者及时巩固和验证自己的学习效果。

内容安排

本书在章节安排上充分考虑到实际的教学和学习过程，使其更加符合人的一般认知规律。从JavaScript语言的发展历史及应用范围开始介绍，再通过数据类型和流程控制语句的讲解，让读者掌握JavaScript语言基本编程思路，然后对函数、对象、BOM和 DOM、事件等 JavaScript 的核心知识点进行重点介绍，最后介绍了几种常用的JavaScript的网页特效。全书通过大量有针对性的同步案例及综合案例来帮助读者更方便、更清晰地理解教材内容、知识点和技能点。

教学建议

本书作为教材使用时，建议采用理论实践一体化教学模式，课堂教学建议为40～45学时，上机指导建议为40～45学时。各章主要内容和学时建议分配如下，教师可以根据实际教学情况进行调整。

学时分配表

由于编者水平有限，书中难免有不足之处，欢迎读者来函给予宝贵意见，我们将不胜感激。编者电子邮箱：wflyc028@163.com。

编者

2018年6月

第1章 初识JavaScript

学习目标：

■了解JavaScript的发展历史及主要特点

■了解JavaScript的应用范围

■ 掌握JavaScript的语法规范以及在HTML文档中的应用

■什么是JavaScript？JavaScript能做什么？怎么使用JavaScript？可能每个初次接触JavaScript的人都会有这些疑问，我们一一进行解答。

1.1 JavaScript简介

JavaScript（JS）是基于对象和事件驱动的客户端脚本语言，主要是用来进行Web前端开发的，如图1-1所示的可以查看某个日期星期几的日历，图1-2所示的查看某个日期距离2025年1月1日多长时间的倒计牌，图1-3所示的弹球小游戏等，都是典型的使用JavaScript开发的网页特效。

图1-1 日历

图1-2 倒计牌

微课1-1 JavaScript简介

什么是Web前端开发？可以通过常见的项目开发基本框架图来了解，如图1-4所示。

图1-3 弹球小游戏

图1-4 项目架构示意图

如图1-4所示，项目开发基本框架一般分为三层。第一层是Web前端页面开发，这个页面是用HTML、CSS和JavaScript开发的，其中HTML+CSS实现了前端页面的结构和样式， JavaScript程序代码实现动态交互、网页特效等功能部分，这一层也就是常说的Web前端开发；中间一层是Web后台开发，也叫服务器端的程序开发，主要是进行业务处理；最后一层就是数据库了。在Web前端开发中，把纯粹的HTML+CSS开发的页面称为静态页面，这个页面是死的，没有用户交互功能，也没有什么特效，用户体验度低，要解决这个问题就需要用JavaScript来处理，这也是本书主要学习的内容。

1.1.1 JavaScript的发展概况和特点

JavaScript是怎么来的？它的特点是什么？要解决这些问题，要先了解一下JavaScript的发展历史。

1.JavaScript的历史

（1）JavaScript语言诞生

最早的JavaScript语言思想是从嵌入式语言来的，大概在1992年，有一家叫Nombas的公司开发出了嵌入式脚本语言C--（C-minus-minus，Cmm），后来改名为Script Ease。这种将脚本嵌入到网页中的设计方法也就成为JavaScript诞生的理论基础。在1995年，网景（Netscape）公司的布兰登（Brendan Eich）为解决类似于“向服务器提交数据之前验证”的问题。Netscape Navigator 2.0与Sun公司合作开发的一个脚本语言，最开始的时候叫Live Script。为了营销的便利，借助于当时如日中天的Java，将其更名为JavaScript，JavaScript1.0版本就这样诞生了。

（2）JavaScript标准的制定

JavaScript诞生后，成功地进行了推广，刺激了微软，所以微软也决定向浏览器进军，并发布了一个JavaScript克隆版，叫JScript，搭载到IE浏览器。微软进来以后，加上后来CEnvi的Script Ease，就有三种不同的JavaScript版本。所以这个时候就需要一个统一的标准来进行语法和特性的统一，JavaScript标准的制定就提上了日程。

在1997年，JavaScript 1.1作为一个草案提交给欧洲计算机制造商协会（ECMA）。当时第39技术委员会（TC39）承担了制定一个标准化语法和语义的“通用、跨平台、中立于厂商”的脚本语言。TC39集合了来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员，其同制定了ECMA-262标准。该标准的出生，诞生了ECMAScript这种全新脚本语言，但是习惯上，大家还是将这种语言叫作JavaScript。

（3）JavaScript的应用推广

JavaScript的ECMA标准化推出后，各个公司都参照JavaScript的标准进行了浏览器引擎的修改，以适应ECMA的标准。网景公司虽然是最早推出JavaScript的，但是整整晚了一年才推出“完全遵循ECMA规范”的JavaScript，而微软早在一年前就推出了“完全遵循ECMA规范”的IE4.0，让微软取得了优先，这样就直接导致一个恶果：微软的JScript成为JavaScript语言的事实标准。

后来，国际标准化组织及国际电工委员会（ISO/IEC）也采纳ECMAScript作为标准（ISO/IEC-16262）。各Web浏览器也分别努力将ECMAScript作为JavaScript实现的基础。

由于网景的慢节奏，在JavaScript推广中，促成了微软的JScript成为JavaScript语言的事实标准，加上Windows绑定着IE浏览器，几乎占据全部市场份额。所以，1999年之后，所有的网页都是基于JScript来开发的。而网景在微软强大攻势下，于1998年全面溃败。但微软也没有一支独大，同年成立的Mozilla项目中的Firefox（火狐浏览器）在支持JavaScript方面无可比拟，在后来的时间里一步步蚕食IE的市场，成为全球第二大浏览器。另一个同微软构成竞争的是谷歌（Google Chrome），又称Google浏览器，是一个由Google（谷歌）公司开发的开放原始码网页浏览器。它以简洁的页面、极速的浏览，一举成为全球第三大浏览器。随着移动互联网的普及，嵌有Android系统的平板电脑和智能手机，抢占了大块的市场份额。后来苹果也成为浏览器的竞争者，苹果开发出了Safari浏览器，作为苹果公司各种产品的默认浏览器，在苹果的一体机（i Mac）、笔记本（Mac）、MP4（i Pod）、i Phone（智能手机）、i Pad （平板电脑）都运行着Safari浏览器，随着苹果的产品不断的发展，Safari浏览器也分得了浏览器的大量份额。

从以上JavaScript的分析我们可以得知，JavaScript是一门独立的脚本语言，虽然与Java语言名字相似，但二者没有一点关系，只是借了一下“名字”而已。

2.JavaScript的特点

（1）解释型语言：JavaScript是一种解释型语言，其源代码不需要编译就可以通过浏览器解释运行。在编写代码时，它可以和HTML代码结合在一起来解释执行。

（2）基于对象的语言：JavaScript是一种基于对象的语言，在运行时，可以运用对象的属性和方法来实现各种功能，这个特点使JavaScript变得很强大。它可以使用内置对象，也可以使用自定义对象来实现比较复杂的功能。

（3）数据安全性：JavaScript是一种安全的语言，它不允许访问本地的硬盘，也不能将数据存在网络服务器，不允许对网络文档进行修改和删除，只能通过浏览器进行进行信息浏览和动态的交互，防止数据的丢失。

（4）跨平台性：JavaScript在运行时，只依赖于浏览器，与操作环境无关，只要有支持JavaScript的浏览器就可以正确地运行，对操作平台无要求。

就因为有了以上四大基本特点，JavaScript在软件开发，特别是Web前端开发受到越来越多的关注，其应用范围也就越来越广。

1.1.2 JavaScript的应用

JavaScript语言具体可以应用到以下几个方面。

1.验证用户输入的内容

JavaScript语言可以实现在客户端对用户输入的数据进行验证，如在注册时，提示用户名的格式是否符合要求，设置密码时两次设置是否相同等。

2.实现页面的特效文字

使用JavaScript语言可以实现页面文字的多种效果，如旋转、翻滚等。

3.实现页面的动画效果

在浏览页面时，我们会发现一些类似下雨、下雪的动画效果，这些效果使页面更加生动，这些动画效果也可以通过JavaScript来实现。

4.实现窗口浮动的广告

浏览页面时经常发现一些浮动的广告窗口，这些浮动的广告窗口也可以通过JavaScript来实现。除此之外，JavaScript还广泛的应用在其他很多方面，例如JavaScript虽然是客户端脚本语言，但是也可以来开发服务器端的应用，现在比较时兴的HTML5 APP也是HTML5结合了JavaScript来开发的。

1.1.3 支持JavaScript的浏览器

众所周知，JavaScript最初开发出来就是为了嵌套在浏览器中使用的，浏览器对JavaScript支持也是JavaScript代码能够正常解析运行的基础，那么，支持JavaScript浏览器有哪些呢？其实现在市场上主流的浏览器都支持JavaScript，如图1-5所示的几款浏览器，都对JavaScript有很好的支持。

图1-5 支持JavaScript的浏览器

1.2 编写JavaScript的工具

从原理上来说，我们可以用任何一种文本编辑工具来编写JavaScript程序，如记事本、Notepad++、Edit Plus等，但这一类的编辑工具在写代码时很不方便，因为JavaScript是可以嵌入HTML网页文档中的，所以我们可以用任何一款HTML网页文件的编辑工具来完成JavaScript程序的编写，如Dreamwaver、HBuilder、Web Storm等。运用这些软件工具来编写程序的好处是一是代码自动提示，减少我们编写代码的失误和提高编写代码的速度，二是这些工具都有强大的纠错能力，帮助我们减少错误，三是提供了编写代码的模板，可以帮助我们提高速度和质量。这些软件编辑工具可以从网上很容易找到，安装在计算机上就可以使用它们开始我们的JavaScript征程了。其操作界面如图1-6和图1-7所示。

图1-6 JavaScript操作界面（1）

图1-7 JavaScript操作界面（2）

1.3 JavaScript在HTML中的应用

通过前面的介绍，我们知道JavaScript主要是用来嵌入HTML中使用的，那么到底怎么使用呢？JavaScript在HTML中的应用是很灵活的，但大致上有下面三种使用方式。

1.3.1 直接将JavaScript代码嵌入HTML中

JavaScript代码是可以直接在HTML中编写的，怎么编写的，其实很简单，我们只要提供一对<script>…</script>即可，在这对标记中编写的代码浏览器就不会把它认为是HTML代码了，当然，在实际编写时，在这对标记中还有其他一些属性，如表1-1所示。

微课1-2 JavaScript在HTML中的应用

表1-1 <script>标记属性说明

常用的在HTML中嵌入脚本的语法格式如下。

<script type=\"text/javascript\">...</script>

提示

<script>标记可以放在<head></head>中，也可以放在<body></body>中。为了在网页加载时能够先解析JavaScript代码，通常一般将JavaScript代码放在<head>标签中。

例如：使用Dreamwaver工具编写案例，在HTML中直接嵌入JavaScript脚本，在页面上弹出窗口显示“Hello！欢迎来到JavaScript世界”，如图1-8所示，显示结果如图1-9所示。

图1-8 在HTML中直接嵌入JavaScript脚本

图1-9 显示结果

1.3.2 链接外部的JavaScript

链接外部的JavaScript脚本文件是通过<script>...</script>标记的“src”属性来实现，实现步骤如下。

（1）建立一个JavaScript文件，JavaScript文件的扩展名是.js，并且在单独建立JavaScript文件时不需要添加<script>...</script>标签，直接写文件内容即可，如下代码所示。

alert(\"Hello，欢迎来到JavaScript世界！\");

（2）将建立好的以.js为扩展名的文件保存到链接它的HTML文件相同的目录下。（3）在HTML文件中使用<script>标签的“src”属性链接该文件，如下代码所示。

<script type=\"text/javascript\" src=\"hello.js\">...</script>

例如，在HTML文件hello.html的同一路径下创建一个JavaScript文件“hello.js”，然后使用<script>标签的“src”属性链接该文件，如图1-10所示。

图1-10 链接外部的JavaScript

提示

在使用<script>标签的“src”属性链接外部.js文件时，外部.js文件要同HTML文件在同一目录下，因为“src”的路径文件一般使用相对路径来实现。

1.3.3 直接在HTML标签中使用

有时我们需要使用JavaScript代码实现一个简单的页面效果，那么我们可以直接在标签中使用。有如下两种方式。

（1）使用“javascript:”调用

我们在HTML代码中，使用“javascript:”的方式来调用简单的JavaScript语句，如图1-11所示。

图1-11 使用“javascript:”方式调用

（2）结合事件调用

JavaScript支持很多的事件，例如鼠标单击、鼠标滑过、按下键盘等。我们将JavaScript代码与事件结合，实现一些特效，如下代码所示。

<input type=\"button\" value=\"显示Hello\" onclick=\"javascript：alert(\'Welcome!\');\"/>

1.4 【综合案例1】：随机抽奖小程序

这个抽奖主要是通过在HTML中嵌入JavaScript代码实现随机抽奖，通过单击“开始抽奖”按钮实现开始随机抽奖，按“停止抽奖”实现抽奖结果，显示抽奖结果。通过这个小案例，大家初步认识一下JavaScript脚本在HTML中的应用，其效果如图1-12和图1-13所示。

图1-12 开始抽奖界面

图1-13 停止抽奖界面

实现上述效果用以下代码就可以了，代码就是通过在HTML中嵌入JavaScript代码实现的，可以初步感受一下JavaScript代码。

<script type=\"text/javascript\">

var namelist=[

\"1号球\",\"2号球\",\"3号球\",\"4号球\",\"5号球\",\"6号球\",\"7号球\",\"8号球\",\"9号球\",\"10号球\"];

var mytime=null;

function doit(){

var bt=window.document.get Element By Id(\"bt\");

if(mytime==null){

bt.inner HTML=\"停止抽奖\";

show();

}else{

bt.inner HTML=\"开始抽奖\";

clear Timeout(mytime);

mytime=null;

}

}

function show(){

var box=window.document.get Element By Id(\"box\");

var num=Math.floor((Math.random()*100000))%namelist.length;

box.inner HTML=namelist[num];

mytime=set Timeout(\"show()\",1);

}

</script>

HTML页面代码如下所示。

<body id=\"bodybj\">

<div id=\"box\">准备好了，开始抽奖了</div>

<div id=\"bt\" on Click=\"doit()\">开始抽奖</div>

<div >

<p>适用浏览器：IE8、360、Fire Fox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>

</div>

</body>

【知识点提炼】

1.JavaScript是一门基于对象和事件驱动的脚本语言，它最初是为了实现在HTML嵌入代码而推出来的，主要是为了解决在客户端对数据进行验证的问题。

2.JavaScript遵循ECMA-262标准，所以JavaScript实际上叫ECMAScript，不过习惯上仍叫JavaScript。

3.JavaScript是解释型语言，可以直接在浏览器上运行，现在流行的浏览器都能够支持JavaScript代码。

4.JavaScript具备跨平台性和数据安全性特点，现在的应用很广泛。

5.JavaScript在HTML中应用有三种方法，第一可以直接嵌入HTML中，第二可以链接外部的JavaScript文件，第三可以直接在HTML标签中使用。

【训练1】

1.自行下载安装Dreamwaver和HBuilder软件，体验JavaScript代码的实现。

2.搜索关于JavaScript的信息，了解其特点、历史、应用等。

第2章 JavaScript语言基础

学习目标：

■了解JavaScript的基本数据类型

■掌握JavaScript的变量和常量的定义及使用

■掌握JavaScript的运算符和表达式，并具备运用表达式解决问题的能力

■ JavaScript脚本语言同其他程序设计语言一样，有自己支持的数据类型和运算符表达式。通过不同的表达式来对数据进行处理。本章将进行详细的介绍。

2.1 数据类型

JavaScript是一种弱类型的语言，即数据（变量或常量）在定义时不必指明数据类型，其数据类型可以通过为数据赋值时根据其值来确定是什么类型。本节将对JavaScript的数据类型进行详细的介绍。JavaScript的数据类型分为三类，有基本数据类型、引用数据类型和特殊数据类型。其中JavaScript的基本数据类型有数值型、字符串型和布尔型；引用数据类型是指支持对象编程的类型，特殊数据类型主要包括NULL（空值）、undefined（未定义）、Na N（非数值）以及转义字符。

微课2-1 数据类型

2.1.1 基本数据类型

1.数值型

JavaScript的数值型包括整型和浮点型。

（1）整型

整型也叫整数，是没有小数点的数值，它可以用十进制数、八进制数和十六进制数来表示。

十进制：用0～9的数字来表示，如24、67、-99、-102。

八进制：用0～7的数字来表示，首位必须加0，如023、045。

十六进制：用0～9的数字和A～F（或者a～f）来表示，前两位必须是0X或者0x。如0x245、0x5ad、0XCD、0XEF。

（2）浮点型

浮点型数值可以有小数，即浮点型数值包括整数部分和小数部分，中间用小数点分开，即“整数部分.小数部分”。表示浮点型数值时只能采用十进制，其表示的形式有两种，分别是普通形式和指数形式。

普通形式：由整数部分、小数点和小数部分组成。如3.5、23.0、0.6、-6.8。

指数形式：也叫科学计数法，由数字、e和指数组成。如3.45e3（表示3.45×103），注意一点，指数是-324～308之间的整数，如3.45e3214、3.45e3.5都是不合法的。

2.字符串型

字符串型数据是用来表示文本数据的，主要是由字母、数字、汉字或者其它特殊字符组成的。在程序中，字符串数据必须用单引号或者双引号括起来，其中单引号和双引号可以相互嵌套，即单引号中的字符串可以有双引号，双引号中的字符串可以有单引号，但单引号和双引号不能交叉使用，如下代码所示。

\"JavaScript是一门功能强大的编程语言\"

\'JavaScript是一门功能强大的编程语言\'

\"欢迎来到‘JavaScript’的世界\"

\'欢迎来到“JavaScript”的世界\'

但是，下面的语句表示也是错误的（单引号和双引号交叉）。

\'欢迎来到“JavaScript’的世界\"

\"欢迎来到‘JavaScript”的世界\'

同样，下面的语句表示也是错误的（单引号里面必须是双引号，双引号里面必须是单引号）。

\"欢迎来到“JavaScript”的世界\"

\'欢迎来到‘JavaScript’的世界\'

3.布尔型

布尔型也叫逻辑型，布尔型数值只有两个值，即逻辑真和逻辑假。在JavaScript中分别用true和false来表示布尔型的两个值。在程序中也可用非0数值和数值0表示true和false；当把true和false转换为数值时，分别是1和0。

在程序中，布尔值通常用在判断语句中，其表示结果的值是真还是假，如下代码所示。

n==1 判断n是否等于1，如果等于则为true，否则为false。

2.1.2 引用数据类型

引用数据类型主要用在面向对象编程中，在后面第5章对象章节中将进行详细的介绍。

2.1.3 特殊数据类型

1.NULL（空值）

NULL也是JavaScript的一个关键字，表示空值，用于定义空的或者不存在的引用。

2.undefined（未定义值）

undefined指的是未定义类型的变量，表示这个变量还没有赋值，如下代码所示。

....