JavaScript笔记

第一章  JavaScript 简介

1.1  什么是JavaScript

1.1.1  JavaScript 的诞生

        1995年，由网景公司聘请的程序员Brendan Eich开发了JavaScript。

1.1.2  JavaScript 与 Java 的关系

        网景公司这种浏览器脚本最初叫 Mocha。

        1951年9月改名为LiveScript。同年12月，网景公司与Sun公司达成协议，后者允许将这种语言叫做JavaScript。

        1996年3月网景浏览器（现火狐浏览器）2.0浏览器正式内置JavaScript脚本语言。 

                                         

                                    

1.1.3  为什么学习 JavaScript

        JavaScript语言的特点：

        （1）简单性

        JavaScript语法简单，很多语法借鉴Java和C++的语法。除了语法简单外JavaScript的开发环境也简单，只需要 文本编辑器就可以编写JavaScript程序。它不需要对开发环境做过多的配置，快速入门是这种语言的最大特点。

        （2）安全性

        JavaScript语言主要是用来完成浏览器与访问者之间的交互效果，并不会涉及数据存储服务器、网络文档修改或删除等功能。JavaScript 本身没有操作数据的功能，所以说学习JavaScript 这门语言本身是“非常安全”的。

        （3）广泛性

        JavaScript可以应用于被浏览器解析的Web端，也可以作为后端语言使用，还可以用于构建移动端APP等。此外JavaScript还可以用来构建桌面应用，世界上最流行的2D游戏引擎之一Cocos2d和最流行的3D游戏引擎之一Unity3D均可以由JavaScript来开发。

        （4）开放性

        JavaScript属于客户端脚本语言，可以在浏览器中直接查看其源代码，对于学习和借鉴都很有帮助，可以说JavaScript这门语言具有完全的开放性。

1.2  JavaScript的特性

1.2.1  语言特性

        JavaScript 语言特性如图所示：

        （1）解释型 

        编译型语言在计算机运行代码前，先把代码翻译成计算机可以理解的文件，如 Java、C++等属于编译型语言；而解释型语言则不同，解释型语言的程序不需要在运行前编译，只需在运行程序时编译即可，如：JavaScript、PHP 等属于解释型语言。

        解释型语言的优点是可移植性比较好，只要有解释环境，可在不同操作系统上运行。代码修改后即可运行，无序编译，上手方便、快速。但缺点是需要解释环境，运行起来比编译型语言满，占用资源多，代码效率低。

        （2）弱类型

        弱类型语言是相对强类型语言而言的。在强类型语言中，变量类型有很多种，如 int、char、float、boolean 等，不同的类型相互转换有时需要强制转换。而 JavaScript 只有一种类型 var，当其为变量赋值时会自动判断类型并转换，因此 JavaScript 是弱类型语言。

        弱类型语言的优点是易于学习、语言表达简单易懂、代码更优雅、开发周期更短、更加偏向逻辑设计。缺点是程序可靠性差、调试繁琐、变量不规范、性能低下。

        （3）动态性

        动态性语言是指在变量定义时不一定进行赋值操作，只需在使用时作赋值操作即可。这种方式使得代码更灵活、方便。在 JavaScript 中有多处会用到动态性，如获取元素、原型等。

        （4）事件驱动性

        JavaScript 可以直接对用户或客户输入做出响应，无须经过 Web 程序。它对用户的响应以事件驱动的方式进行，即由某种操作动作引起相应的事件响应，如单击、拖动窗口、选择菜单等。

        （5）跨平台性

        JavaScript 依赖于浏览器本身，与操作环境无关。只要计算机上可以运行浏览器，并且浏览器支持 JavaScript，即可正确执行，从而实现"编写一次，走遍天下"。

1.2.2  JavaScript 与 ECMAScript 的关系 

        ECMAScript 和JavaScript 的关系为前者是后者的规范，后者是前者的实现。

1.2.3  JavaScript 与 HTML 和 CSS 的关系

        JavaScript 语言主要用来完成浏览器与访问者之间的交互效果，需要与HTML、CSS配合使用，三者就像板凳的三条腿，缺一不可。Web 前端三大核心技术的关系，如图所示。

        如果想要对JavaScript语言有更深入的理解，需要对HTML和CSS有一定的认知。 那么，三者是如何进行分工的呢？下面用一个盖 房子的例子来描述三者之间的关系，首先需要把房子 的地基和骨架搭建好，即良好的结构（HTML)；然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)；最后给房子添加电梯和地暖，与住户进行一些行为上的交互（JavaScript)，这样房子才算搭建完毕。总而言之，首先通过 HTML 搭建网页的结构，然后用CSS设置网页的样式，最后通过 JavaScript 添加网页的交互效果，从而完成整个前端的开发过程。

        具体分工如下：HTML 负责结构、CSS负责样式、JavaScript负责行为。根据 W3C组织规定的Web 标准，应该尽可能地让三者进行分离式开发，最后再整合到一起，从而实现最终的效果。

1.2.4  JavaScript 的组成

        JavaScript 的组成包含三大部分，分别为 ECMAScript、DOM和BOM。JavaScript的组成如图1.6所示。

         1. ECMAScript

         ECMAScript 是 JavaScript 语言的规范，是 JavaScript 的核心内容，它描述了语言的基本语法和数据类型等。ECMAScript 是一套标准，规范了 JavaScript 编码方式与语言特性。

         2. DOM

        文档对象模型（Document Object Model,DOM）是 W3C 组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口（API)。网页上组织页面（或文档）的对象被组织在一个树形结构中，通过DOM操作的方式可以让页面跟JavaScript进行通信交互。DOM树展示，如图1.7所示。

         通俗地说，DOM就是获取或设置HTML和CSS代码的功能实现。通过下面的示例可以看出HTML页面的每个部分都是一个节点的衍生物，具体示例代码如下：

	
		
		
	
	
		
hello JavaScript!
	

         DOM通过创建树来表示文档中所有的标签结构（即节点），从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。

         3.BOM

        浏览器对象模型（Browser Object Model,BOM）是对浏览器窗口进行访问和操作的 功能接口。例如，弹出新的浏览器窗口、获取浏览器信息等。注意，BOM 是作为 JavaScript 的一部分而不是作为 W3C 组织的标准，每款浏览器都有自己的实现方式，这会导致 BOM 代码的兼容性不如ECMAScript 和 DOM 代码的兼容性。

1.3  编写第一个JavaScript程序

1.3.1  JavaScript 编辑工具

· Dreamweaver，它是由Adobe公司出品。

· Sublime Text，它是由程序员 Jon Skinner开发的。

· WebStorm，它是由JetBrains公司出品。

· HBuilder，它是由DCloud公司出品。

1.3.2  JavaScript 在 HTML 的引入方式

        CSS在HTML 中有三种引入方式，JavaScript与CSS在HTML 中的引入方式完全相同，如下所示。

        1．行间引入方式（行内式）

行间引入方式是通过HTML标签的属性进行操作，一般不推荐使用，因为它违背了Web标准中规定的结构、样式、行为三者分离开发的原则，接下来通过案例演示行间JavaScript展示效果，具体如例1-1所示。

         【例1-1】 行间JavaScript展示效果。

	
		
		
	
	
		
单击
	

        运行结果如图：

         在 Chrome 浏览器下运行上面的代码，当单击＜div＞标签时，会弹出一个提示窗口，显示设置的文本内容。其中onclick属性表示单击相应事件，alert(）表示弹出窗口方法，括号中的内容为弹出内容。

        2．内部引入方式（内嵌式）

        内部引入方式是通过＜script＞标签的方式进行设置，类似于CSS中的＜style＞标签引入方式，接下来通过案例演示内部 JavaScript 展示效果，具体如例1-2所示。

         【例1-2】 内部JavaScript展示效果。

        运行结果图：

         

3．外部引入方式（外链式）

        外部引入方式，也是通过＜script＞标签的方式进行设置，但引入的是一个外部JavaScript文件，通过 src 属性引入链接的地址。类似于 CSS 中的＜link＞标签引入方式，具体示例代码如下：

         执行代码和展示效果都与内部引入方式类似，只是采用一个外部的 JavaScript 文件，这样可以在多个页面中共享同一段 JavaScript 代码。

1.3.3  注释、空格、分号

         JavaScript 中的注释分为单行代码注释和多行代码注释两种，下面将分别介绍这两种注释方式。

        单行注释：

        多行注释：

1.3.4  JavaScript 调试控制台

        一般情况下，可以利用 alert(）方式打印 JavaScript 计算后的值，从而进行程序的测试。但alert(）方式会阻止后续代码的执行，连续测试会很不方便。JavaScript中提供了另外一种测试方式，即console.log(）方式。此方式与alert）类似，可以打印出相关的值，但二者的区别在于console.log(）方式不会阻止后续代码的运行。因此，console.log(）方式适合做连续的输出操作。         如果想要查看 console.log(）方式打印的数据值，需要通过浏览器自带的调试控制台打印输出。例如Chrome浏览器，按F12键即可打开调试控制台。接下来通过案例演示Chrome浏览器调试控制台，具体如例1-3所示。

       【例1-3】 Chrome 浏览器调试控制台。

        运行效果： 

         首先编写例1-3，然后在Chrome浏览器中运行当前案例，运行后再按F12键，打开Chrome 浏览器内置的调试工具，然后选择 Console选项，即可以查看到例1-3中console.log(）语法中的代码信息。

        如果尝试添加多个 console.log(）代码输出，可以看到同时执行多条语句。但是如果尝试添加多个alert(）代码输出时，只会弹出一个提示框，只有当单击提示框的"确认"按钮后，才会执行下一次的弹窗提示。

第二章  JavaScript 基本语法

2.1  变量

2.1.1  关键字与保留字

        在 JavaScript 中提供了很多关键字，每个关键字都具有特定的用途，因此，不能将这些关键字定义为变量名。JavaScript常见关键字如下表：

JavaScript中常见的关键字

break	do	instanceof	var
case	else	new	void
catch	finally	return	while
continue	for	swith	with
debugger	function	this	delete
default	if	throw
in	try	typeof

        除上表中的关键字，还有部分单词不能用作变量的命名。JavaScript 语言的部分语法在当前版本中可能并未得到使用，但是很可能出现在后续版本中，通常将这部分语法称为 JavaScript 中的保留字。JavaScript中的保留字如下表所示：

JavaScript中的保留字

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
double	import	public

        在定义变量名时，应尽量避免出现 JavaScript 关键字与保留字。本质上来讲，关键字与保留字为同一概念，但在JavaScript 中，关键字是指已经被系统使用的保留字，而保留字是指未被系统使用的关键字。

2.1.2  命名规则

        JavaScript变量名命名要遵循一定的规则，其具体规则如下：

         · 不能是关键字或保留字。

         · 第一个字符，可以是任意字母、下画线（_)、美元符（$)。

         · 第二个字符及后面的字符，除了字母、美元符号和下画线，还可以用数字0~9。

         · 中文是合法的变量名，但应尽量避免使用。

         下面通过示例演示 JavaScript 命名规则，具体示例代码如下：

var for = '';            //✘（for为关键字）
var enum = '';           //✘（enum为保留字）
var 1foo = '';           //✘（第一个字符不能是数字）
var $foo = '';           //√ 
var _foo = '';           //√ 
var 苦艾酒 = '';         //√（尽量不用中文命名）

        在定义变量时，可以采用一些常见的命名法，具体方法如下：

         · 驼峰命名法：第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写。

         · 匈牙利命名法：开头字母用变量类型的缩写，其余部分用变量的英文或英文的缩 写，要求单词第一个字母大写（类型将在后面章节中进行讲解）。

         · 下画线命名法：通过下画线连接多个单词。

         下面分别用三种常见的命名方法进行命名，具体示例代码如下：

var fooBar = '';         //驼峰命名法
var sFoo = '';           //匈牙利命名法
var foo_bar = '';        //下划线命名法

2.1.3  规范与简写

        在 JavaScript 中定义变量，分为显式声明和隐式声明，其中显式声明通过 var 的方式定义，而隐式声明则不需要通过var的方式定义。具体示例代码如下：

var foo = '';        //显式变量
var bar = '';        //隐式变量

        在JavaScript规范中规定，所有变量必须均采用式声明的方式定义，这样才能避免出现隐式定义变量。 JavaScript语言的代码是严格区分大小写的，因此，下面示例代码表示了两个不同的变量，具体示例代码如下：

var foo = '';
var Foo = '';

        当定义多个变量时，可以分别进行定义，也可以通过简写的方式进行定义，用逗号隔开多个变量。具体示例代码如下：

var foo = '',bar = ''; //简单定义 foo 和 bar

        通常可能会遇到一种错误的写法，具体示例代码如下：

var foo = bar = '';

2.2  数据类型

         在 JavaScript 语言中把变量值也进行了划分，划分出来的不同类型值，称为数据类型。 

2.2.1  类型划分

         JavaScript 的数据类型分为 number、string、boolean、object、undefined、null 六种。

        1.number

        number类型表示数字类型，用于存储数字。数字可分为整型（int）和浮点型（float),整型用于表示整数，浮点型用于表示小数。具体示例代码如下：

var foo = 123;   //数字类型的整型
var bar = 3.14;  //数字类型的浮点型

         2. string 

         string 类型表示字符串类型。字符串是由 Unicode 字符集子集构成的序列，在 JavaScript 中用来表示文本的数据类型。具体示例代码如下：

var foo = 'hello';    //字符串类型
var bar = '123';      //字符串类型

        注意，字符串类型的值必须添加引号，如：'123' 表示字串类型，而 123 则表示数字类型。引号可以是单引号也可以是双引号，一般采用单引号定义 JavScript中的字符串，而双引号一般用于定义HTML的属性值。

        3. boolean

        boolean类型表示布尔值类型，布尔值表示真假值，只有两个可选值，即真值（true)和假值（false)。具体示例代码如下：

var foo = true;    //布尔类型值
var bar = false；    //布尔类型值

        4.object

        object类型表示对象类型，对象是各种值的集合。在后面章节中涉及的数组、函数、各种内置对象都属于对象类型。在后面章节中将会对对象进行详细的讲解，这里了解即可。

        5. undefined

        undefined类型表示未定义类型，如果 var 关键字声明一个变量，但并没有对其进行赋值，则无法判断变量的数据类型，此时变量数据类型是 undefined，具体示例代码如下：

var foo；    //未定义类型

         6.null

        null类型表示空类型，表示当前为空值，具体示例代码如下：

var foo = null;    //空类型

        可以发现，undefined 与 null 有些类似，null 表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。

        7．其他类型

        数据类型还可划分为原型类型、合成类型、特殊类型三大类。

        (1）原始类型包括：number、string、boolean。

        (2）合成类型包括：object。

        (3）特殊类型包括：undefined、null。 

2.2.2  类型判断

       在 JavaScript 中判断数据类型的方法有三种。本节只介绍第一种方法，通过 typeof 语法判断数据类型，具体示例代码如下：

typeof 123;         //number
typeof '123';       //string
typeof true;		//boolean
typeof {};			//object
typeof [];			//object
typeof undefined;	//undefined
typeof null;		//object

        需要注意 null 值不会返回 null 类型，而是返回object类型。因为在最初的 JavaScript 版本中，只有五种类型，没有null类型，空值是在object类型下定义的，所以 typeof null 会返回 object 类型，而这个问题一直延续至今。虽然 typeof 判断不出 null 类型，但可以采用另外两种判断方法。另外两种判断方法将在后面章节中进行讲解，这里不再赘述。

2.2.3  类型转换

        数据的类型是可以发生改变的，在 JavaScript 中改变数据类型的方式有显式类型转换和隐式类型转换两种方法，下面分别讲解这两种类型转换的方法。

        1．显式类型转换

        显式类型转换是通过具体的方法，手动地进行转换的方式。Number(）方法是把变量转换成数字类型；String(）方法是把变量转换成字符串类型；Boolean() 方法是把变量转换成布尔值类型。具体示例代码如下：

var foo = '1';
var bar = 2;
var baz ='hi';
Number(foo);		//1
alert(typeof(Number(foo)));	//number
String(bar);		//'2'
alert(typeof(String(bar)));	//string
Boolean(baz);		//true
alert(typeof(Boolean(baz)));//boolean

        从上述示例代码中可以发现，foo、bar、baz  的原始值并不会改变，只有调用显式类型方法时才改变，当然在 JavaScript 中改变数据类型的方法并不止三种方法，这里只是介绍什么是类型转换，在后面的章节中会讲解一些常用的类型转换方法。

         注意：当一个变量不能转成数字类型时，会返回 NaN。NaN 表示变量值不是数字，但其类型却是数字类型。具体示例代码如下：

var baz = 'hi';
Number(baz);	//NaN
alert(typeof Number(baz));	//number
baz		//'hi'

         2．隐式类型转换

        隐式类型转换是通过运算的方式，自动进行转换的方式。在 JavaScript 中有很多隐式类型转换的方法，这里只作简单介绍，后面章节中也会涉及相关转换的方法。 当数字与字符串相乘时，会自动地把字符串转成数字类型，然后计算出结果。当数字与布尔值相乘时，会自动地把布尔值转成数字类型，true会转成1,false会转成0，然后计算出结果。具体示例代码如下：

2 * '3';    //6
2 * true;    //2

        需要注意＋运算符，＋除了表示加法，还表示连接。因此当数字与字符串相加时，实际上是要连接两个变量，并不会发生隐式类型转换，而其他运算符不表示连接，可以进行隐式类型转换。具体示例代码如下：

2 + '3';    //23

        前面介绍过undefined 与 null 的区别，undefined 表示未定义，而 null 表示已经定义，其值为空。因此，当隐式类型转换时，undefined 不可以转换为数字，而null可以转换成0。具体示例代码如下：

2 * undefined;    //NaN
2 * null;    //0

2.2.4  类型比较 

        数据类型可以转换，同样也可以用来比较，在后面小节中将介绍比较运算符 ==、=== 。其中，== 运算符左右变量进行比较时，值相同，类型可以不同；而 === 运算符左右变量进行比较时，值相同而且类型也要相同。具体示例代码如下：

2 == '2';    // true
2 === '2';    // false

        还有几个特殊的比较，undefined 与 null 比较时会返回 true ；与 NaN 比较时，则会返回 false。具体示例代码如下：

undefined == null;    // true
undefined === null;    // false
NaN == NaN;    // false
NaN === NaN;    // false

        注意，NaN 与任何值比较都会返回 false，包括它自身。这也属于 JavaScript 的历史原因。因为，当时的语法不够严谨，延续至今。JavaScript 语言是一门极其灵活的语言，在很多地方不严谨，需要更多的实践与总结。

        除上述规则外，类型比较时还有许多地方需要注意，后面小节会进行详细分析。

2.3  运算符

2.3.1  算术运算符

        算术运算符用于在程序中进行加、减、乘、除等运算。在 JavaScript 中算术运算符一共有九种，如表所示:

算数运算符

运算符	描述	示例
+	加	2+3=5
-	减	5-2=3
*	乘	2*3=6
/	除	6/3=2
%	取模	7%4=3
++	自增	++1  // 2
--	自减	--1  // 0
+	数值	+1  // 1
-	负数值	-1  // -1

        加、减、乘、除运算符比较简单，这里将重点讲解取模运算符。使用取模运算时需要注意，当被除数小于除数取模时，模为被除数本身。具体示例代码如下：

3%5=3

        自增运算符（++）和自减运算符（--）是对数值进行加 1 或减 1 的操作，会改变原始数值的大小。具体示例代码如下：

var foo = 1;
++foo;        // 2
foo;        // 2

        对于自增和自减运算符需要注意一点，当运算符放在变量之后时，会先返回变量操作前的值，再进行自增或自减操作：当运算符放在变量之前时，会先进行自增或自减操作，再返回变量操作后的值。具体示例代码如下：

var foo = 1;
var bar = 1;
foo++;        // 1
++bar;        // 2

        上面代码中，foo 是先返回当前值，然后再自增，因此得到 1 ; bar 是先自增，然后再返回新的值，因此得到 2 。 数值运算符（+）和负数值运算符（-）的作用可以将任何值转为数值（与Number 函数的作用类似），一般用于显式类型转换中。数值运算符会返回一个新的值，而不会改变原始变量的值。具体示例代码如下：

var foo = '2';
+foo;        // 2
typeof +foo;        // number
foo;
typeof foo;        // string

2.3.2  赋值运算符

        JavaScript 中的赋值运算符分为简单赋值运算符和复合赋值运算符两种，下面分别介绍这两种赋值运算符。

1．简单赋值运算符

        将赋值运算符（ = ）右边表达式的值保存到左边的变量中。具体示例代码如下：

var foo = 1;        // 简单赋值运算符
var bar = 2;        // 简单赋值运算符

 2．复合赋值运算符

        结合了其他操作（ 如算术运算操作）和赋值操作。具体示例代码如下：

var foo = 1;
foo += 4;        // 复合赋值运算符，等阶于 foo = foo + 4;

       +＝ 的方式是一种简写的运算方式，除了 +＝ 外，还有＊=、/=、-=、%＝等常见写法。

2.3.3  比较运算符

        比较运算符用于比较两个值，返回一个布尔值，表示是否满足比较条件。满足条件返回true，不满足条件返回 false。在 JavaScript 中一共有八种比较运算符，如表所示。

比较运算符

运算符	描述	示例
==	相等	2==3        // false
===	严格相等	2==='2'        // false
!=	不相等	2!=3        // true
!==	严格不相等	2!='2'        // true
<	小于	7<4        // false
<=	小于或等于	7<=4        // false
>	大于	7>4        // true
>=	大于或等于	7>=4        // true

        在前面的小节中介绍过类型的转换方式，当不同类型进行比较时，先把左右类型转成数字类型，然后再进行比较，具体示例代码如下：

12 == '12';        // true    '12'转化为数字12
1 == true;        // true    true转变成数字1
0 == null;        // true    null转变成数字0
2 > true;        // true    true转变成数字1
5 < '12';        // ture    '12'转变成数字12

        但需要注意一条规则，当比较的两个值都是字符串类型时，不会按照上面的规则进行转化，而是按照字符串每一位的 Unicode 码点进行比较，例如，字符串a的码点为97、字符串b的码点为98，因此，a小于b，具体示例代码如下：

'a' < 'b';        // true    'a'转变成97，'b'转变成98
'5' > '12';        // true    '5'转成5，'1'转成1
5 > '12';        // false    '12'转成数字12

        从上述示例可以发现，当字符串出现多位时，是按照一位一位进行比较的，因此，当 '5'> '12' 比较时，是字符串 5 与字符串 1 先进行比较。 在前面介绍数据类型比较时，介绍了 == 和 === 两个运算符，两者的区别是 == 运算符表示值相等，类型可以不相同，而 === 运算符表示值相等而且类型也相同。具体示例代码如下：

12 == '12';        // true    值相同，所以相等
12 === '12';        // false    值相同但类型不相同，所以不相等

        不等运算符同样适用于此规则，具体示例代码如下：

6 !== '6';        // false    值相同，所以相等
6 !=== '6';        // true    只相等但类型不同，所以不相等

        第一个算式会忽略类型比较，因此返回 false，第二个算式需要比较类型，因此返回 true

2.3.4  逻辑运算符

        逻辑运算符一般用于执行布尔运算，通常和比较运算符一起用来表示复杂比较运算，逻辑运算涉及的变量通常不止一个，而且常用于 if、while 和 for 语句中。常见的逻辑运算符有 &&（ 逻辑与 ）运算符、||（ 逻辑或 ）运算符和 !（ 逻辑非 ）运算符三种。

 1.&＆运算符

        && 表示逻辑与，若两边表达式的值都为 true，则返回 true；任意一个值为 false ，则返回false 。具体示例代码如下：

5 < 6 && 4 < 3;        // false    后面表达为 false
2 == '2' && 1 == true;        // ture    前后表达式均为 true

 2. ||运算符

        ||表示逻辑或，只有表达式的值都为 false，才返回 false，否则返回 true。具体示例代码如下：

5 < 6 || 4 < 3;        // true    前面的表达式为 true
2 === '2' || 0 == true;        // false    前后表达式均为 false

 3.！运算符

        ！表示逻辑非，若表达式的值为 true，则返回 false；若表达式的值为 false，则返回 true。具体示例代码如下：

!(5 < 6);        // false    非运算符会对结果进行取反操作

       逻辑非运算符还可以用于类型转换，采用两个非运算来保证转换的正确性，具体示例代码如下：

var foo = 123;
!!foo;        // true    将其他类型转换成布尔值类型

2.3.5  条件运算符

        条件运算符是 JavaScript 支持的一种特殊的运算符。其语法格式如下：

条件 ? 语句1 : 语句2;

       其中，如果条件为 true，则表达式的值使用"语句1"的值；如果条件为 false，则表达式的值使用"语句2"的值，? ：运算符需要有三个操作数，因此一般也称为三目运算。具体示例代码如下：

var foo = true ? 2 : 3;
foo;        // 2    当条件为真，返回2值

2.4  流程控制

        JavaScript中的流程控制语句与其他语言相似，一般可分为顺序结构、 选择结构和循环结构三种。 顺序结构就是程序从上到下、从左到右依次执行。选择结构是按照给定的逻辑条件决定执行顺序，下面将介绍两种选择结构 if 判断和 switch 判断。循环结构是根据代码的逻辑条件来判断是否重复执行某一段程序，包括 for 循环和 while  循环。 

2.4.1  if 判断

        if 判断即if语句，是选择结构中运用最广泛的语句，一般可分为单向选择、双向选择和多项选择三种形式。

1．单向选择

        单向选择是指只有一条选择语句，符合条件即选择，不符合条件即不选择，其语法格式如下： 

if(逻辑条件){
    语句1;
}
    语句2;

        其中，如果if的逻辑条件返回true，则执行语句 1 和语句 2；如果 if 返回 false，则只执行语句2。

         if 语句单向选择流程图，如图2.1所示。

        接下来通过案例演示单向选择语句，具体如例2-1所示。

        单向选择语句。

        执行结果： 

 

        例2-1中，定义变量 score 为730。当执行到 if 语句时，如果 if 小括号内的结果为真， 则执行 if 语句大括号内的代码；如果 if 语句为假，则不执行大括号内的代码。无论 if 语句是否执行，都不会影响 if 外代码的执行，因此，本例会输出以上两条语句。

2．双向选择

        双向选择有两条选择语句，满足条件选择一条语句，不满足条件选择另一条语句。其语法格式如下：

if(逻辑条件){
    语句1;
}else{
    语句2;
}

        其中，如果if的逻辑条件返回 true，则执行语句 1 ，如果 if 的逻辑条件返回 false ,则执行 else内的语句2。

        if语句双向选择流程图，如图所示。

        接下来通过案例演示双向选择语句。

 运行结果：

        本代码采用双向选择，即 if-else 语句。当 if 语句的条件为真时，会执行 if 大括号内的语句：当 if 语句的条件为假时，会执行 else 大括号内的语句。因此，if 和 else 内的语句不能同时执行，只能执行一个。本例中，score 的值为700 ，小于 720 ，条件不满足，则触发 else 中的语句，输出以上相应结果。

3．多向选择

        多向选择是指有多条选择，进行多次判断，根据判断结构执行相应的语句。其语法格式如下：

if(逻辑条件1){
    语句1;
}else if(逻辑条件2){
    语句2;
}else{
    语句3;
}

        其中，如果 if 的逻辑条件1返回 true ，则执行语句1；如果 if 的逻辑条件1返回 false ,则执行else if 中的逻辑条件2。如果逻辑条件2返回 true ，则执行语句2；如果逻辑条件2 返回 false，则执行else中的语句3。

        if语句多向选择流程图，如图所示。

        接下来通过案例演示多向选择语句。

运行结果：

        在上面例子中，采用了多向选择语句 if-else if-else 的组合，与双向选择类似，多向选择也只会输出对应的区域。day 变量初始被定义为 6 。先进行 if 语句的条件判断，不满足条件；程序进行else if 的条件判断，满足条件。因此，执行 else if 语句大括号内的代码，输出以上控制台打印的内容。

2.4.2  switch 判断

        switch 判断即 switch 语句，也是选择结构中很常用的语句，用于将一个表达式同多个值进行比较，并根据比较结果选择执行语句。其语法格式如下：

switch(表达式){
    case 取值1:
        语句1;
break;
    case 取值2:
        语句2;
break;
    default:
        语句3;
}

        其中，如果 switch 的表达式匹配取值 1，则执行语句 1 ；如果 switch 的表达式匹配取值 2，则执行语句 2 ；如果都不匹配，则执行默认的代码块语句 3 。

        switch 语句判断流程图，如图所示。

        接下来通过案例演示switch判断语句。

运行效果：

        default 默认值可以省略，break 表示跳出选择，如果不加 break 语句，会执行后续 case 中的结果，因此需要添加 break 语句。注意，switch 中的表达式与 case 语句中的取值是严格相等的模式，即 === 方式，因此以下代码会执行 default 中的内容。具体示例代码如下：

2.4.3  while判断

        while 循环即 while 语句，是循环结构中常见的语句，也是比较简单的循环语句。其语法格式如下：

while(逻辑条件){
    语句1;
}
语句2;

        其中，while循环的逻辑条件为 true 时，执行循环体语句1，且会重复不断地执行语句1。直到逻辑条件为false时，停止执行语句1，而直接执行结束语句2。因此，执行循环操作时，一定要在某个特定点使逻辑条件为 false，否则程序会进入死循环，从而造成浏览器运行崩溃。

        while循环流程图，如图所示。

        接下来通过案例演示while循环。

运行结果：

        调试结果如图所示。 在本例中，首先定义了变量 i 为 0 ，然后继续向后执行，执行 while 循环语句。当 循环条件 i<5 条件成立时，执行 while 语句大括号内的代码，而且重复执行，直到while 语句的条件不满足时结束。i 每次进入循环体中都进行自身加 1 操作，当循环 5 次时，i 为5 ，不满足 while 语句条件，从而结束 while 循环，继续执行循环后的代码，即输出图中的结果。 

2.4.4  for循环

        for 循环即 for 语句，也是循环结构中常见的语句，同时也是使用最为广泛的循环语句。其语法格式如下：

for(初始值;逻辑条件;循环后操作){
    语句1;
}
语句2;

        其中，循环 for 的逻辑条件为 true 时，执行循环体语句 1，然后执行循环后操作。直到逻辑条件为 false 时，停止语句 1 的执行，而直接执行结束语句 2 。for 循环与 while 循环是等价的，所有能够进行 for 循环操作的方式都可以改写成 while 循环，反之亦然。 for 循环语句流程图，如图所示。

        接下来通过案例演示 for循环。

运行结果： 

        本例中，首先定义了变量 sum 的值为 0 ，然后执行 for 循环。在 for  循环的条件中定义了变量i的初始化为 1，条件为 i<=100 ，自增为 i++ ，这样 for 循环就会执行 100 次。在 100 次执行中都会触发 sum+=i 的语句，即把每一次i的变化值都累加到 sum 变量中。最后循环结束后会输出 1 加到 100 的和，即 sum 的值为 5050 。

        有时需要在循环未结束时就停止循环操作，为此在循环中提供了 break 语句和 continue 语句两种跳出循环的方式，接下来将分别讲解这两种方式。

1.break语句  

        break语句用于跳出整体循环，停止后续循环操作。接下来通过案例演示break语句。

 运行结果：

        本例中，首先定义了一个 for 循环，并且根据条件会执行 5 次循环体，但是当 i 自增到 3 时，会触发循环体中 if 语句的执行，即触发 break 语句。break 在循环中表示跳出整个循环，后续的代码及后续的循环都会立即停止。因此，只会触发输出 0、1、2 这三个结果。

2.continue 语句

        continue 语句与 break 语句类似，但 continue 语句只跳出本次循环，不影响后续循环接下来通过案例演示continue语句。

运行结果：

        在本例中，首先定义一个 for 循环，然后根据条件会执行5次循环体，但是当i自增到3时，会触发循环体中 if 语句的执行，即触发 continue 语句，continue 在循环中表示跳出当前循环，后续的代码不会执行，但是后续的循环还会继续。因此，会触发输出0、1、2、4四个结果，而3并没有触发。

第三章  DOM 的基本操作

3.1  获取元素

3.1.1  document 文档

        2如何通过 JavaScript 获取网页中的元素？首先需要了解 document 文档，document 文档指整个页面的根对象（最外层对象），通过document文档获取页面中的具体HTML元素。注意 document 文档的类型为对象类型，即 typeof document 返回 object 值，因此，通常 document 文档亦称 document 对象。document 文档页面的最外层如图所示。

        document 对象常见属性如下表： 

document 对象常见属性

属性	描述
doctype	获取或设置文档头信息
documentElement	获取或设置 标签
head	获取或设置 标签
body	获取或设置 标签
title	获取或设置        调试结果：         在例 3-1 中，分别输出五句 document 的属性，分别表示 document.doctype（文档信息）、document.documentElement ( 标签）、document.head( 标签）、document.body ( 标签）、document.title(