作者：刘刚
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
JavaScript程序设计基础教程(慕课版)试读：
前言
JavaScript简介
JavaScript是Internet上非常流行的脚本语言之一，在前端开发和Web开发的实际工作中应用非常广泛。目前流行使用的很多框架，如JQuery、AngularJS等，都是以JavaScript为基础进行封装的，因此，学习JavaScript是学习脚本语言的基础和根基。
如今，用户已经习惯了使用App、微信小程序等移动程序带来的便利，因此良好的互动体验和及时的用户反馈才能让我们设计的网页具备竞争力。而我们常见的鼠标悬浮变色、显示二级菜单，显示、隐藏部分内容，注册表单验证提示，手风琴菜单，幻灯片轮播等特效，都可以使用JavaScript制作。JavaScript给网页带来了丰富的交互效果和动态的用户体验，使网页界面充满生气。
本书细致地讲解了JavaScript的基础知识，分为三篇，从初识JavaScript到JavaScript必备基础知识，再到技能提升。全书内容全面，循序渐进，并在重要知识点处设计了任务训练，通过实战案例帮助读者边学边练，掌握重点难点。全书最后精选了13个常用的特效实例，并设置综合实战，带领读者实现购物车的功能，体验JavaScript在实际工作中的真实应用，与Web开发实际工作无缝接轨。
小刚老师简介
• 一线项目研发、设计、管理工程师，高级项目管理师、项目监理师，负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据等多个国家级项目的设计与开发。
• 极客学院、北风网金牌讲师。
• 畅销书《微信小程序开发图解案例教程（附精讲视频）》《小程序实战视频课：微信小程序开发全案精讲》《Axure RP8原型设计图解微课视频教程（Web+App）》作者。
全部案例源代码、素材、最终文件、电子教案可登录人邮教育社区（www.ryjiaoyu.com）下载使用。编者2019年2月第一篇 初识JavaScript
20世纪90年代中期，互联网方兴未艾，越来越多的Web页面被制作出来，通过浏览器来使用互联网的用户数量越来越多。然而，这个时候浏览器客户端最简单的表单验证都需要在服务端来完成。往往为了一个简单的表单有效性验证，就要与服务器进行多次的往返交互。这给用户操作带来了极大的不便。那时正处于技术革新最前沿的Netscape公司，也正为这个问题感到苦恼，于是开始认真考虑开发一种客户端脚本语言来解决如此简单的处理问题。
Netscape公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，用户忘记填写“用户名”，就单击了“发送”按钮，到服务器再发现这一问题就太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，容易学习和部署。
基于这些设想，1995年，Netscape公司雇佣程序员Brendan Eich开发出了这种网页脚本语言的第一版，其最初的名字叫LiveScript，但为了和当时非常火的Java搭上关系，LiveScript改名为JavaScript。自此JavaScript正式问世。后来随着互联网应用越来越广泛，JavaScript也不断演化。发展至今，已经从一个简单的表单验证器成为一门强大而复杂的语言。在本书后面，将会详细介绍这门语言。第1章 JavaScript简介
■ JavaScript是Internet上最流行的脚本语言之一，它存在于全世界所有Web浏览器中，能够增强用户与Web站点及与Web应用程序之间的交互。本章中，将介绍什么是JavaScript，JavaScript的应用及实现等知识。1.1 什么是JavaScript？精讲视频什么是JavaScript
JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用它的目的是与HTML（超文本标记语言）、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互，从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML中实现的。它的出现弥补了HTML的缺陷，它是Java与HTML折中的选择，具有以下几个基本特点。
1. 简单性
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其他脚本语言一样，JavaScript同样是一种解释性语言，它提供了一个易开发的过程。它的基本结构形式与C、C++、Visual Basic、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
JavaScript的简单性主要体现在：首先，它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对学习Java来说是一种非常好的过渡；其次，它的变量类型采用弱类型，并未使用严格的数据类型。
2. 动态性
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。
它对用户的响应，是以事件驱动的方式进行的。在主页（Home Page）中执行了某种操作所产生的动作称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。所谓事件驱动，就是指当事件发生后，可能会引起相应的事件响应。
3. 跨平台性
JavaScript依赖于浏览器本身，与操作环境无关，只要有能运行浏览器的计算机，以及支持JavaScript的浏览器就可以正确执行。从而实现了“编写一次，走遍天下”的梦想。
4. 节省服务器的开销
JavaScript是一种基于客户端的语言，用户在浏览过程中进行的填表、验证等交互过程只需通过浏览器调入HTML文档中的JavaScript源代码来进行解释，并执行已经编好的JavaScript的相应程序来完成即可，大大减少了服务器的资源消耗。
实际上JavaScript最杰出之处在于它可以用很小的程序做大量的事。无需高性能的计算机和Web服务器通道，仅需一个字处理软件及一个浏览器，通过自己的计算机即可完成所有的事情。精讲视频JavaScript与Java的区别1.2 JavaScript与Java的区别
虽然JavaScript命名起源于Java，但JavaScript却是有别于Java的。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的解释性语言，它的前身是LiveScript，而Java的前身是Oak语言。下面对两种语言间的异同做如下比较。
1. 基于对象和面向对象
Java是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。
JavaScript是一种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
2. 解释和编译
两种语言在浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器。
JavaScript的源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。
3. 强变量和弱变量
两种语言所采取的变量是不一样的。
Java采用强类型变量检查，即所有变量在编译之前必须做声明，例如：Integer x; String y; x=1234; y=4321;
其中x=1234声明为一个整数，y=4321声明为一个字符串。
JavaScript中的变量声明，采用弱类型，即变量在使用前不需做声明，而是解释器在运行时检查其数据类型，例如：x=1234; y="4321";
前者说明x为数值型变量，而后者说明y为字符型变量。
4. 代码格式不一样
Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那样进行装载，其代码以字节代码的形式保存在独立的文档中。
JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
5. 嵌入方式不一样
在HTML文档中，两种编程语言的标识不同，JavaScript使用来标识，而Java使用来标识。
6. 静态联编和动态联编
Java采用静态联编，即Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查。
JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。1.3 JavaScript能做什么?精讲视频JavaScript能做什么与不能做什么
用JavaScript可以做许多事情，使网页更具交互性，为站点的用户提供更好、更令人兴奋的体验。JavaScript可以创建活跃的用户界面，当用户在页面间浏览时向他们提供反馈。例如：使用JavaScript的翻转器技术，实现当鼠标指针停留在页面按钮上时，会突出显示按钮。还可以使用JavaScript来确保用户以表单形式输入有效的信息，如果表单需要进行一些校验工作，那么可以在用户机器上用JavaScript来完成，而不需要任何服务器端处理。
另外，使用JavaScript，根据用户的操作可以创建自定义的Web页面。假设用户正在访问一个美食站点，单击某个美食，可以在一个新窗口中显示该美食的相关信息。JavaScript可以控制浏览器，可以打开新窗口、显示警告框，还可以在浏览器窗口的状态栏中显示自定义的消息。
除此之外，JavaScript还可以处理表单、设置cookie，即时构建HTML页面以及创建基于Web的应用程序。1.4 JavaScript不能做什么?
JavaScript是一种客户端语言。也就是说，设计它的目的是在用户的计算机上，而不是服务器上执行任务。因此，JavaScript有如下一些固有的限制。
□ JavaScript不允许写服务器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面单击数或用户填写的表单数据），但是JavaScript不允许这么做。而是需要用服务器上的一个程序处理和存储这些数据。这个程序可以是用Java、Perl或PHP等语言编写的CGI（运行在服务器上的程序）。
□ JavaScript不能关闭不是由它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。
□ JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。换句话说，网页不能读取已经打开的其他窗口中的信息，因此无法探察访问这个站点的用户还在访问其他哪些站点。1.5 JavaScript实现精讲视频JavaScript实现
一个完整的JavaScript实现由3个不同部分组成：核心（ECMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM），如图1.1所示。图1.1 JavaScript实现
1. ECMAScript
ECMAScript是一种通过ECMA-262标准化的脚本程序设计语言。它可以为不同种类的宿主环境提供核心的脚本编程能力。也就是说ECMAScript描述了语言的语法和基本对象。它并不与任何具体浏览器相绑定，实际上，它也没有提到用于任何用户输入输出的方法（这点与C这类语言不同，它需要依赖外部的库来完成这类任务）。浏览器中的ECMAScript添加了与DOM的接口，可以通过脚本改变网页的内容、结构和样式。
2. DOM
DOM是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。看下面的HTML页面。
helo world!
这段代码可以用DOM绘制成一个节点层次图，如图1.2所示。图1.2 节点层次图
DOM将整个页面规划成由节点层次构成的文档，从而使开发者对文档的内容和结构有很好的控制，可以很方便地删除、添加和替换节点。
3. BOM
BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript扩展都被看作BOM的一部分。这些扩展包括：
□ 弹出新的浏览器窗口；
□ 移动、关闭浏览器窗口以及调整窗口大小；
□ 提供Web浏览器详细信息的定位对象；
□ 提供用户屏幕分辨率详细信息的屏幕对象；
□ 对cookie的支持；
□ IE扩展了BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象。
由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器都可以为这些对象或其他对象定义自己的属性和方法。1.6 搭建JavaScript环境精讲视频搭建JavaScript环境
相比其他语言，JavaScript的优势之一在于不用安装或配置任何复杂的环境就可以开始学习。每台计算机上都已具备所需的环境，哪怕使用者从未写过一行代码，有浏览器足矣！
为了运行本书中的示例代码，建议安装Chrome或Firefox浏览器，一个合适的编辑器（如Sublime Text或NotePad++），以及一个Web服务器（WAMP或XAMPP，这一步是可选的）。
接下来将介绍搭建环境最常用的两种方案。1.6.1 浏览器
浏览器是最简单的开发环境。Chrome浏览器或者Firefox浏览器是最常用的。如果使用Firefox浏览器，需要安装Firebug插件，安装完成后，在浏览器的右上角会看到一个图标，如图1.3所示。图1.3 Firebug插件图标
单击Firebug图标，打开浏览器控制台，在命令行区域中编写所有JavaScript代码，如图1.4所示（执行源代码可以单击“运行”按钮）。图1.4 Firefox浏览器控制台编码
也可以扩展命令行，来适应Firebug插件的整个可用区域。
使用Chrome浏览器也是可以的，Chrome已经集成了Google Developer Tools（谷歌开发者工具）。打开Chrome，单击设置及控制图标，选中更多工具|开发者工具（英文为Tools|Developer Tools），如图1.5所示（执行源代码可按【Enter】键）。图1.5 Chrome浏览器控制台编码1.6.2 Web服务器（WAMP）
安装WAMP，然后在WAMP安装文件夹下找到htdocs目录。在该目录下新建一个文件夹，就可以在里面执行本书中所讲述的源代码，或直接将示例代码下载后提取到此目录。
接下来，在启动WAMP服务器后，就可以通过localhost这个URL，用浏览器访问源代码，注意别忘了打开Firebug或谷歌开发者工具查看输出。1.7 编写第一个JavaScript程序精讲视频编写第一个JavaScript程序
学习JavaScript或者其他新技术的最佳方法都是一样的，要多写多练。每一个范例都务必弄懂并亲自编写。
下面通过一个例子——脚本1-1，编写第一个JavaScript程序。通过它可以说明JavaScript的脚本是怎样被嵌入到HTML文档中的。脚本1-1.html
上例是一个HTML文档，其标识格式为标准的HTML格式。如同HTML一样，JavaScript程序代码是一些可用字处理软件浏览的文件，它在描述页面的HTML相关区域出现。alert()是JavaScript的窗口对象方法，其功能是弹出一个具有“确定”按钮的对话框，并显示()中的字符串。//用来标识注释，注释内容不会被执行。使用注释是一个好的编程习惯，它使其他人可以读懂你的代码。JavaScript以
标签结束。从上面的实例分析中可以看出，编写一个JavaScript程序是非常容易的。运行这个实例分别弹出两个窗口，如图1.6和图1.7所示。图1.6 第一个JavaScript程序弹窗1图1.7 第一个JavaScript程序弹窗2【任务1-1】热身
1. 任务介绍
JavaScript是一门很神奇的语言，在开始学习之前，先来按照下面的操作做一个小任务，看看结果窗口会有什么变化。
如脚本1-2所示，在标签中输入document.write("hello")和document.getElementById("p1").style.color = "blue"；保存后运行脚本看看结果窗口会有什么变化。
2. 实现代码
完整代码如脚本1-2所示。脚本1-2.html
我是第一段文字
我是第二段文字
3. 运行结果
运行脚本1-2显示结果如图1.8所示。图1.8 运行结果1.8 小结
JavaScript是一种专为网页交互而设计的脚本语言。本章主要介绍了JavaScript的实现、JavaScript的主要特点、JavaScript能做哪些事和不能做哪些事以及常用的两种开发环境，最后以一个实例介绍了JavaScript在HTML文档中的使用。通过这一章的学习，应该对JavaScript有一个清晰的认识。下一章将详细介绍JavaScript基础知识。第二篇 JavaScript必备基础知识
本篇是JavaScript的基础核心内容。介绍了JavaScript基础语法、函数、事件、对象、数组等内容。认真学完本篇，就可以对JavaScript脚本编程有一个全面系统的认识，也能够依靠这些核心知识来解决JavaScript中某些复杂问题了。本篇的目录结构如下：
第2章 JavaScript基本语法
第3章 JavaScript程序构成
第4章 JavaScript对象
第5章 JavaScript数组第2章 JavaScript基本语法
■ 本章中，一起来学习JavaScript基本语法，包括JavaScript脚本编码和JavaScript的基础知识。先来简单了解一下HTML的常见标签，为后面各章节JavaScript的学习做好准备。HTML常用标签及属性如表2.1所示。表2.1 HTML常用标签及属性2.1 JavaScript在HTML中的使用精讲视频JavaScript在HTML中的使用
JavaScript在HTML中有两种存放方式：直接在页面上嵌入JavaScript代码、引用独立的js文件。
1. 直接在页面上嵌入JavaScript代码
请看脚本2-1。脚本2-1.html
在上面的代码中，将JavaScript脚本直接放在HTML的
标签之间，保存为HTML文件，运行HTML文件，弹出一个对话框，如图2.1所示。图2.1 弹出对话框也可以将脚本放在
标签之间，运行结果是一样的。2. 引用独立的js文件
示例代码如脚本2-2所示。（1）先创建HTML文件。脚本2-2.html
以上两种脚本存放位置，运行结果都是一样的。但比较来说，推荐使用第二种引用单独的js文件的方式。注意
加载外部js文件是线程阻塞的，在没有加载完成的时候，页面不会继续加载后面的标签，所以通常我们将引用的js文件放在关闭body标签之前或者
标签之后，这样有利于提升页面的性能。【任务2-1】在HTML中使用JavaScript1. 任务介绍
分别运用上面介绍的两种在HTML中引用JavaScript的方式，在页面上弹出alert警告框“欢迎学习JavaScript！”。
2. 任务目标
学会常见的两种在HTML中引用JavaScript的方式。
3. 实现思路（1）将脚本嵌入在页面的
标签之间，并在脚本之间编写alert()警告框。（2）将alert()警告框写在单独的JavaScript文件中，然后在页面上引入外部JavaScript文件。4. 实现代码
两种不同实现方式的代码如脚本2-3和脚本2-4所示。脚本2-3.html
5. 运行结果
第1种实现方式见脚本2-3，运行结果如图2.3所示。图2.3 任务2-1运行结果1
第2种实现方式见脚本2-4，运行结果如图2.4所示。图2.4 任务2-1运行结果22.2 JavaScript代码调试方式精讲视频JavaScript代码调试方式
通常情况下，如果JavaScript代码出现错误，是不会有相关提示信息的。
那么到底是语法错误还是逻辑错误，错误的具体位置在哪都无法得知，这样就迫切需要掌握几种JavaScript代码的调试方式。这一小节一起学习3种最常见的调试方式。（1）使用alert()弹出警告框，示例代码如脚本2-5所示。脚本2-5.html
运行上面HTML代码，浏览器显示结果如图2.5所示。图2.5 alert弹出警告框（2）使用document.write()方法将内容写到HTML文档中，示例代码如脚本2-6所示。脚本2-6.html
运行上面HTML代码，浏览器显示结果如图2.6所示。图2.6 document.write()显示结果（3）使用console.log()写入到浏览器控制台，示例代码如脚本2-7所示。脚本2-7.html
运行上面HTML代码，浏览器显示结果如图2.7所示。图2.7 console.log()显示结果
比较这3种调试技巧，console.log()是一种更好的方式，在实际应用中，更受开发人员的青睐。对比分析如下。（1）如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖，对程序的执行造成不便。（2）alert()函数会阻断JavaScript程序的执行，从而出现副作用，而且使用alert()方法需要单击弹出窗的确认按钮，操作麻烦，最重要的是alert()只能输出字符串。（3）console.log()仅在控制台打印相关信息，不会对JavaScript程序执行造成阻隔，此外，console.log()可以接受任何字符串、数字和JavaScript对象，可以看到清楚的对象属性结构，在ajax返回json数组对象时调试很方便。注意
程序中调试是测试、查找及减少bug（错误）的过程。console.log()对于IE8及以下版本会报错，测试后注意注释掉。2.3 语句精讲视频语句
JavaScript语句是向浏览器发出的命令。语句的作用是告诉浏览器该做什么。下面的JavaScript语句将“1+2”的值赋给变量a，也叫变量赋值。var a = 1+2;
var是变量声明命令，这里声明了变量a，然后将1+2的计算结果赋值给变量a。
1+2在JavaScript中叫表达式，会返回一个计算结果。表达式和语句的区别在于：表达式由运算符构成，并运算产生结果的语法结构，每个表达式都会返回一个值。而语句主要是为了进行某种操作，一般情况下不需要返回值。
语句以分号结尾。一个分号代表一条语句结束。多条语句可以写在一行内，如：var a = 1+2; var b = 'abc';注意（1）语句结尾的分号需要在英文状态下输入，同样，JavaScript中的代码和符号也都需要在英文状态下输入；（2）在实际编码中也有可能遇见不带分号的案例。一般情况下，在JavaScript代码的最后用分号来结束语句是可选的。但为了养成良好的编程习惯，建议还是每条语句都加上分号。2.4 变量精讲视频变量2.4.1 变量的概念
在日常生活中，有些东西是固定不变的，而有些东西则会发生很多变化，如天气、时间等。在程序设计语言中，约定俗成地将这些会改变的东西称之为变量。
同代数一样，JavaScript变量可用于存放值和表达式。变量的命名遵循以下原则：（1）变量必须以字母开头；（2）变量也能以$和_开头（不过不推荐这么做）；（3）变量名不能包含空格或其他标点符号；（4）变量名称对大小写敏感（a和A是不同的变量）。2.4.2 变量的类型
JavaScript是一种动态类型语言。变量的类型没有限制，可以赋予各种类型的值。比如文本值（name="John"）。在JavaScript中，类似"John"这样一条文本被称为字符串。
尽管JavaScript变量有很多种类型，但是现在，我们只需要关注数字和字符串两种类型。
当向变量分配文本值时，应该用双引号或单引号来包围这个值。
当向变量赋的值是数值时，不要使用引号。如果用引号包围数值，该值会被作为文本来处理。2.4.3 变量声明赋值
在JavaScript中，变量声明用关键词var，变量赋值用=。变量声明赋值其实是分开的两步操作，比如var a=1这样一条赋值语句实际的步骤是下面这样的：var a; // 声明变量aa = 1; // 给变量a赋值为1
如果只是声明了变量a而没有给变量a赋值，那么变量a的值是undefined。
变量必须声明之后才能使用，否则JavaScript会报错：变量未定义。注意
也可以使用a = 1这样省略了关键词var声明变量的方式，这样其实也是没错的。但建议总是使用var命令声明变量。【任务2-2】变量赋值
1. 任务介绍
定义一个名为mynum的变量，并赋值为8。
2. 任务目标
学会JavaScript变量的声明赋值方式。
3. 实现思路
用var关键字声明变量，用=给变量赋值。
4. 实现代码var mynum = 8;
5. 运行结果
该任务没有输出结果，只是定义变量和赋值。2.4.4 变量作用域
JavaScript变量分为全局变量和局部变量。
变量在函数内声明即为局部变量。局部变量有局部作用域：只能在函数内访问。
变量在函数外定义，即为全局变量。全局变量有全局作用域：网页中所有脚本和函数均可使用。如果变量在函数内没有使用var关键字声明，该变量也为全局变量。
变量生命周期：局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁；全局变量在页面关闭后销毁。
下面来看一个实例，如脚本2-8所示。脚本2-8.html
运行脚本2-8显示结果如图2.8所示。图2.8 变量作用域示例结果
第1步操作console.log(a)输出global，因为var a = "global"在函数外声明是一个全局变量；
第2步操作console.log(testaFunction())输出local，因为操作调用函数testaFunction，在函数testaFunction内var a = "local"声明了一个局部变量a，其作用域仅在testaFunction函数内；
第3步操作console.log(b)输出global，因为我们在代码头部用赋值语句b = "global"初始化了全局变量b;
第4步操作console.log(testbFunction())输出local，因为在testbFunction函数内，变量b没有用var关键词修饰，引用的是全局变量并赋值为local;
第5步操作console.log(b)输出local，因为在第4步操作中，调用的testbFunction函数里修改了全局变量b的值。注意
在JavaScript中，代码质量可以用全局变量和函数的数量来考量，全局变量越多或者函数越多，代码质量越糟。因此，应该尽可能避免使用全局变量。2.4.5 变量提升
JavaScript引擎工作方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行代码。这样所有变量声明语句都会被提升到代码头部执行。这就叫作变量提升。
先看一段简单的代码，如脚本2-9所示。脚本2-9.html
按惯性逻辑来理解，首先在控制台打印出a的值，但这个时候a还未声明和赋值，所以应该会报错。但实际上并不会报错，运行结果如图2.9所示。图2.9 变量提升示例结果
因为存在变量提升，真正运行的是脚本2-10。脚本2-10.html
所以控制台显示的结果是undefined，表明变量a已经声明但未赋值。注意（1）变量提升只是提升变量的声明，并不会把变量赋值也提升上来。（2）变量提升只对var声明的变量有效，如果一个变量没有用var命令命名，则不会发生变量提升。（3）console.log(a);a = 1；这段代码执行会报错，提示“ReferenceError:a is not defined”，即变量a未声明，这是因为a不是用var命令声明的，JavaScript引擎不会将其提升，而只是视为对顶层对象的a属性的赋值。（4）大多数程序员并不知道JavaScript变量提升。如果程序员不能很好地理解变量提升，他们写的程序就容易出现一些问题。为了避免这些问题，通常在每个作用域开始前声明这些变量，这也是正常的JavaScript解析步骤，这样易于理解。【任务2-3】运用变量提升
1. 任务介绍
分析脚本2-11.html中的代码，判断输出结果。
2. 任务目标
理解JavaScript变量作用域概念及变量提升的运用。
3. 实现思路（1）用var声明的变量存在变量提升，且变量提升只是提升变量的声明，变量赋值并不会提升；（2）在函数外声明的变量为全局变量；在函数体内声明的变量为局部变量，且只能在当前函数体内访问；（3）声明变量时如果没有使用var关键词，直接赋值的变量为全局变量。
4. 实现代码脚本2-11.html
分析如下：
这里最关键的是理解清楚“var a = b = 3”这条语句，它实质上可以拆解为“var a = b; b = 3;”，那么这段代码可以重写如下：
代码首先用语句“var a,b”声明了全局变量a和b；然后在匿名函数内声明了局部变量a和全局变量b；所以行1和行2处的a和b都声明了但未初始化；b = 3这里重写了全局变量b的值，所以行3和行4的a和b值为3；行5打印的是全局变量a，显然是未初始化的；行6打印的是全局变量b，结果为3。
5. 运行结果
运行结果如图2.10所示。图2.10 任务2-3运行结果
试读结束[说明：试读内容隐藏了图片]