1.3 JavaScript基础
1.3.1 DOM相关知识
DOM是Document Object Model（文档对象模型）的简称，是W3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
W3C中将DOM标准分为3个不同的部分：核心DOM、XML DOM和HTML DOM，其中，核心DOM是针对任何结构化文档的标准模型，XML DOM是针对XML文档的标准模型，而HTML DOM是针对HTML文档的标准模型。由于本章中主要讲解的是网页开发的基础知识，而主要涉及的DOM内容就是HTML DOM，所以本节将主要介绍HTML DOM的知识。
HTML DOM模型被构造为对象的树，该树的根节点是文档（Document）对象，该对象有一个documentElement的属性引用，表示文档根元素的Element对象。HTML文档中表示文档根元素的Element对象是<html>元素，<head>和<body>元素可以看作树的枝干。
HTML DOM树的结构如图1-18所示。
图1-18 DOM对象的文档层次结构图
在图1-18中，每个元素被称为一个节点，直接位于一个节点之下的节点被称为该节点的子节点（childNode），直接位于一个节点之上的节点被称为该节点的父节点（parentNode），具有相同父节点的两个节点称为兄弟节点（siblingNode）。
1．节点的访问
在DOM中，HTML文档的各个节点被视为各种类型的Node对象。如果想要通过某个节点的子节点找到该元素，其语法如下所示：
父节点对象 = 子节点对象．parentNode;
Node对象的常用属性如表1-2所示。
表1-2 Node对象的常用属性
2．获取文档中的指定元素
通过遍历节点的访问可以找到文档中指定的元素，但是这种方法有些麻烦，document对象中提供了直接搜索文档中指定元素的方法，具体如下。
（1）通过元素的id属性获取元素
Document的getElementById()方法可以通过元素的id属性获取元素。例如，获取id属性值为userId节点的代码如下所示：
document.getElementById("userId");
（2）通过元素的name属性获取元素
Document的getElementsByName()方法可以通过元素的name属性获取元素。由于多个元素可能有相同的name值，所以该方法返回值为一个数组，而不是一个元素。如果想获得唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name值为userName节点的代码如下所示：
document.getElementsByName("userName")[0];
1.3.2 JavaScript概述
JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。
1.JavaScript的引入
在HTML文档中，较为常用的引入JavaScript的方式有两种，一种是在HTML文档中直接嵌入JavaScript脚本，称为内嵌式；另一种是链接外部JavaScript脚本文件，称为外链式。具体介绍如下。
（1）内嵌式
在 HTML 文档中，通过<script></script>标签及其相关属性可以引入 JavaScript 代码。当浏览器读取到<script>标签时，就会解释执行其中的脚本。JavaScript的内嵌式的使用方式如下：
<script type="text/javascript">
// 此处为JavaScript代码
</script>
在上述代码中，type 属性用来指定 HTML 文档引用的脚本语言类型，当 type 属性的值为text/javascript时，表示<script></script>元素中包含的是JavaScript脚本。
需要注意的是，在老旧的浏览器中，引入javascript脚本时type="text/javascript"是必须编写的，但现在已经可以不使用了，因为JavaScript是所有现代浏览器以及HTML 5中的默认脚本语言。
JavaScript中有3种弹出对话框的方式，分别是使用alert()、confirm()以及prompt()。由于篇幅有限，这里将不单独介绍这3种方法的具体使用方式，在方法具体使用时再做介绍。如果不想使用弹出对话框，也可使用document.write()方法直接将信息显示在页面上。
了解了一些简单的 JavaScript 知识后，接下来，通过一个具体的案例来演示如何在 HTML文档中使用内嵌式JavaScript。
在chapter01文件夹中创建一个名为jsDemo01的HTML文件，其代码如文件1-12所示。
文件1-12 jsDemo01.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>内嵌式</title>
6 <script type="text/javascript">
7 document.write("欢迎来到传智播客");
8 </script>
9 </head>
10 <body>
11 <br />
12 学习JavaScript
13 </body>
14 </html>
在文件1-12中，使用document.write()方法输出了“欢迎来到传智播客”这段文本。运行文件1-12，结果如图1-19所示。
图1-19 内嵌式
在图1-19中显示了两段文本，其中第一段文本“欢迎来到传智播客”就是由 JavaScript代码定义的。
（2）外链式
当脚本代码比较复杂或者同一段代码需要被多个网页文件使用时，可以将这些脚本代码放置在一个扩展名为．js 的文件中，然后通过外链式引入该 js 文件。在 Web 页面中使用外链式引入JavaScript文件的方式如下：
<script type="text/javascript" src="JS文件的路径"></script>
接下来，通过修改文件1-12，来演示如何在HTML文件中通过外链式引入JavaScript。
首先在 chapter01文件夹中创建一个名为 demo01.js 的文件，使用记事本将该文件打开，并将文件1-12中第7行代码“document.write("欢迎来到传智播客");”复制到该文件中保存。
然后创建一个名称为jsDemo02的 HTML 文件，将jsDemo01中的代码复制到jsDemo02中，并更改为外链式，如文件1-13所示。
文件1-13 jsDemo02.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>外链式</title>
6 <script type="text/javascript" src="demo01.js"></script>
7 </head>
8 <body>
9 <br />
10 学习JavaScript
11 </body>
12 </html>
上述代码中，使用外链式引入了demo01.js文件，运行文件1-13，结果如图1-20所示。
图1-20 外链式
在图1-20中可以看出，外链式与内链式的显示效果相同。在实际开发中，如果页面中需要编写的js代码很少，可以使用内嵌式，但是如果js代码很多时，通常都会使用外链式，使用外链式可以使HTML代码更加整洁。
2．数据类型
JavaScript中的几种常见数据类型如表1-3所示。
表1-3 JavaScript常见数据类型
3．变量
在JavaScript中，使用var命令声明变量，由于JavaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定，其语法格式如下所示。
var number=27;
var str="传智播客";
变量的命名必须遵循命名规则，变量名可以由字母、下划线（_）、美元符号（$），甚至中文组成，但中文命名的方式不建议使用，中间可以是数字、字母或下划线，但是不能有空格、加号、减号等符号，不能使用JavaScript的关键字。JavaScript中的关键字如下所示。
abstract continue finally instanceof private this
boolean default float int public throw
break do for interface return typeof
byte double function long short true
case else goto native static var
catch extends implements new super void
char false import null switch while
class final in package synchronized with
需要注意的是，以上关键字同样不可以用作函数名、对象名及自定义的方法名等。
4．运算符
运算符是程序执行特定算术或操作的符号，用于执行程序代码运算。JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种，具体介绍如下。
（1）算术运算符
算术运算符用于连接运算表达式，主要包括加（+）、减（−）、乘（*）、除（/）、取模（%）、自增（++）、自减（--）等运算符，如表1-4所示。
表1-4 算术运算符
（2）比较运算符
比较运算符在逻辑语句中使用，用于判断变量或值是否相等，返回布尔类型值true或false，常用的比较运算符如表1-5所示。
表1-5 比较运算符
续表
（3）逻辑运算符
逻辑运算符是根据表达式的值来返回真值或假值，常用的逻辑运算符如表1-6所示。
表1-6 逻辑运算符
（4）赋值运算符
最基本的赋值运算符是等于号“=”，用于对变量进行赋值。其他运算符可以和赋值运算符联合使用，构成组合赋值运算符，如表1-7所示。
表1-7 赋值运算符
（5）条件运算符
条件运算符是JavaScript中的一种特殊的三目运算符，它与Java中的三目运算符的使用类似，其语法格式如下。
操作数？结果1：结果2
如果操作数的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。其示例代码如下所示。
<script type="text/javascript">
var a=5;
var b=5;
alert((a==b)?true:false);
</script>
在上述js代码中，由于声明的变量a和b的值相同，所以通过使用比较运算符“==”的比较结果为true，此时整个alert()语句的结果就为true；如果变量a与b的值不相等时，则整个语句的执行结果为false。
5．条件语句if
所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。条件语句中最常用的是if判断语句，它的使用与Java语言中的if判断语句相似，是通过判断条件表达式的值为true或者false，来确定是否执行某一条语句。可将if语句分为单向判断语句、双向判断语句和多向判断语句，具体讲解如下。
（1）单向判断语句
单向判断语句是结构最简单的条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句，其语法格式如下：
if（执行条件）{
执行语句
}
在上面的语法结构中，if可以理解为“如果”，小括号“()”内用于指定if语句中的执行条件，大括号“{}”内用于指定满足执行条件后需要执行的语句，当执行语句只有一行时，也可以不写{}。（2）双向判断语句
双向判断语句是if条件语句的基础形式，其基本语法格式如下：
if（执行条件）{
语句1
}else{
语句2
}
双向判断语句的语法格式和单向判断语句类似，只是在其基础上增加了一个 else 从句。表示如果条件成立，则执行“语句1”，否则执行“语句2”。
（3）多向判断语句
多向判断语句是根据表达式的结果判断一个条件，然后根据返回值做进一步的判断，其基本语法格式如下：
if（执行条件1）{
执行语句1
}
else if（执行条件2）{
执行语句2
}
else if（执行条件3）{
执行语句3
}
……
在多向判断语句的语法中，通过else if语句可以对多个条件进行判断，并且根据判断的结果执行相关的语句。
1.3.3 JavaScript的使用
1．函数的定义及调用
在JavaScript中，定义函数是通过function语句实现的。其语法格式如下：
function functionName([parameter1,parameter2,…]){
statements;
[return expression;]
}
在上述语法中，functionName 是必选项，用于指定函数名，在同一个页面中，函数名必须是唯一的，并且区分大小写；parameter1,parameter2,…是可选项，代表参数列表，当使用多个参数时，参数间使用逗号进行分隔，一个函数最多可以有255个参数；statements 是必选项，代表用于实现函数功能的语句；return expression是可选项，用于返回函数值，expression为任意表达式、变量或常量。
在 JavaScript 中，由于函数区分大小写，所以在调用函数时需要注意函数名称大小写。不带参数的函数使用函数名加上括号即可调用，带参数的函数需要根据参数的个数和类型在括号中传递相应的参数进行调用。如果函数有返回值，可以使用赋值语句将函数值赋给一个变量进行返回。
2．事件处理
采用事件驱动是JavaScript语言的一个最基本的特征，所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如，单击鼠标或按键，它可以触发与这个事件相关联的事件处理程序。事件处理的过程通常分为3步：发生事件、启动事件处理程序和事件处理程序做出反应。
值得一提的是，在上面的事件处理过程中，要想事件处理程序能够启动，就需要调用事件处理程序，事件处理程序可以是任意的JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理。接下来通过一个案例来演示如何在HTML中调用事件处理程序。
在chapter01文件夹中创建一个名称为jsDemo03的HTML文件，编辑后的关键代码如文件1-14所示。
文件1-14 jsDemo03.html
1 <body>
2 <input type="button" name="btn" value="点我" onclick="alert('Hello');"/>
3 </body>
在文件1-14中，onclick代表当前事件类型为鼠标单击事件；alert()函数主要用于弹出警示对话框，起到对用户进行提示的作用。使用浏览器打开文件1-14，显示结果如图1-21所示。
图1-21 调用事件处理程序
单击图中的按钮后，将弹出图1-22所示的警示框。
图1-22 弹出警示框
除onclick事件外，JavaScript中还有很多常用的事件类型，如表1-8所示。
表1-8 JavaScript的常用事件
3．常用对象
（1）Window对象
Window对象表示整个浏览器窗口，它处于对象层次的顶端，可用于获取浏览器窗口的大小、位置，或设置定时器等。在使用时，JavaScript允许省略Window对象的名称。
Window对象常用的属性和方法如表1-9所示。
表1-9 Window对象的常用属性和方法
（2）Date对象
Date对象是一个有关日期和时间的对象。它具有动态性，必须使用new关键字创建一个实例，语法如下所示。
var Mydate=new Date();
Date对象没有提供直接访问的属性，只有获取和设置日期的方法，如表1-10所示。
表1-10 Date对象的常用方法
（3）String对象
String对象是JavaScript提供的字符串处理对象，创建对象实例后才能引用，它提供了对字符串进行处理的属性和方法，具体如表1-11所示。
表1-11 String对象常用属性和方法
