1.4 JavaScript基础_Java Web程序设计任务教程（第2版）-QQ阅读中文科幻网

上QQ阅读APP看书，第一时间看更新

1.4 JavaScript基础

1.4.1 JavaScript概述

JavaScript是Web中一种功能强大的脚本语言，常用于为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入HTML页面中就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

1. JavaScript的组成

JavaScript是由ECMAScript、DOM、BOM共3个部分组成的。下面对这3个组成部分进行简单介绍。

（1）ECMAScript:JavaScript的核心。ECMAScript规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。

（2）DOM（Document Object Model，文档对象模型）：是W3C组织推荐的处理可扩展置标语言（Extensible Markup Language,XML）的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作（例如修改大小、位置、颜色等）。

（3）BOM（Browser Object Model，浏览器对象模型）：它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作（例如弹出框、控制浏览器导航跳转等）。

2. JavaScript代码引入方式

在HTML文档中，引入JavaScript代码有3种方式，分别是行内式、内嵌式和外链式，下面分别进行介绍。

（1）行内式

行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中。下面通过案例演示行内式引入JavaScript代码。

在chapter01文件夹中创建一个名称为JavaScriptDemo01的HTML文件，代码如文件1-14所示。

文件1-14 javaScriptDemo01.html

1  <!DOCTYPE>
2  <html>
3  <head>
4      <title> JavaScript行内式</title>
5  </head>
6  <body>
7      <input type=＂button＂ value=＂点我＂ onclick=＂alert(＇行内式＇)＂ />
8  </body>
9  </html>

使用浏览器打开文件1-14，运行结果如图1-20所示。

文件1-14中，第7行代码的onclick属性值就是JavaScript代码。alert(’行内式’)的作用是当单击图1-20中的“点我”按钮时，会自动弹出一个对话框，如图1-21所示。

图1-20 文件1-14的运行结果

图1-21 单击图1-21“点我”按钮弹出的对话框

在实际开发中，使用行内式还需要注意以下4点。

① 注意单引号和双引号的使用。在HTML中推荐使用双引号，而JavaScript推荐使用单引号。

② 行内式可读性较差，尤其是在HTML中编写大量JavaScript代码时，不便于阅读。

③ 在遇到多层引号嵌套的情况时，非常容易混淆，导致代码出错。

④ 行内式只有在临时测试或者特殊情况下才使用，一般情况下不推荐使用行内式。

（2）内嵌式

在HTML文档中，可以通过<script>标签及其相关属性引入JavaScript代码。当浏览器读取到<script>标签时，就会解释执行其中的脚本。使用内嵌式引入JavaScript文件的方式如下：

<script type=＂text/javascript＂>
    // 此处为JavaScript代码
</script>

在上述代码中，type属性用于指定HTML文档引用的脚本语言类型，当type属性的值为text/javascript时，表示<script>标签中包含的是JavaScript脚本。

下面通过一个具体的案例演示如何在HTML文档中使用内嵌式JavaScript。在chapter01文件夹中创建一个名为JavaScriptDemo02的 HTML文件，代码如文件1-15所示。

文件1-15 javaScriptDemo02.html

1  <!DOCTYPE>
2  <html>
3  <head>
4   <title>JavaScript内嵌式</title>
5    <script type=＂text/javascript＂>
6     alert(＇内嵌式＇);
7    </script>
8  </head>
9  <body>
10 </body>
11 </html>

在文件1-15中，第6行代码是JavaScript代码，末尾的分号“;”表示该语句结束，后面可以编写下一条JavaScript语句。使用浏览器打开文件1-15，运行结果如图1-22所示。

图1-22 文件1-15的运行结果

（3）外链式

外链式是指将JavaScript代码写在一个单独的文件中，一般使用“.js”作为文件的扩展名，在HTML文件中使用<script>标签进行引入JavaScript文件。外链式适合JavaScript代码量比较多的情况。

外链式有利于HTML页面代码结构化，把大段的JavaScript代码独立到HTML页面之外，既美观，也方便文件级别的代码复用。需要注意的是，外链式的<script>标签内不可以编写JavaScript代码。

在HTML文件中使用外链式引入JavaScript文件的方式如下：

<script type=＂text/javascript＂ src=＂JS文件的路径＂></script>

下面通过一个具体的案例演示如何在HTML文档中通过外链式引入JavaScript文件。在chapter01文件夹中创建一个名为jsDemo的JS文件，代码如下：

alert(＇外链式＇);

然后创建一个名称为javaScriptDemo03的HTML文件，代码如文件1-16所示。

文件1-16 javaScriptDemo03.html

1  <!DOCTYPE>
2  <html>
3   <head>
4     <title>JavaScript外链式</title>
5     <script type=＂text/javascript＂ src=＂jsDemo.js＂></script>
6   </head>
7  <body>
8  </body>
9  </html>

在文件1-16中，第5行代码通过外链式引入了jsDemo.js文件。运行文件1-16，结果如图1-23所示。

图1-23 文件1-16的运行结果

由图1-23可以看出，外链式与内链式的显示效果相同。在实际开发中，如果页面中需要编写的JavaScript代码很少，可以使用内嵌式；如果JavaScript代码很多，通常使用外链式，使用外链式可以使HTML代码更加整洁。

3．数据类型

JavaScript中常见的数据类型如表1-2所示。

表1-2 JavaScript中常见的数据类型

4．变量

在JavaScript中，使用关键字var声明变量，因为JavaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值确定。声明变量的语法格式如下：

var number=27;
var str=＂传智播客＂;

变量的命名必须遵循命名规则，变量名可以由字母、下画线（_）、美元符号（$）组成，不能有空格、加号、减号等符号，不能使用JavaScript的关键字。

5．运算符

运算符也称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。JavaScript 中的运算符主要包括算术运算符、比较运算符、逻辑运算符、赋值运算符和三元运算符5种，下面分别进行介绍。

（1）算术运算符

算术运算符用于连接运算表达式，主要包括+、-、＊（乘）、/（除）、%（取模）、++（自增）、--（自减）等运算符。JavaScript常用的算术运算符如表1-3所示。

表1-3 JavaScript常用的算术运算符

（2）比较运算符

比较运算符用于对两个数据进行比较。比较运算的结果是一个布尔值，即true或false。JavaScript常用的比较运算符如表1-4所示。

表1-4 JavaScript常用的比较运算符

（3）逻辑运算符

逻辑运算符用于判断运算符两侧表达式的真假，其结果仍为真值或假值。JavaScript常用的逻辑运算符如表1-5所示。

表1-5 JavaScript常用的逻辑运算符

（4）赋值运算符

赋值运算符的作用是将常量、变量或表达式的值赋给某一个变量。最基本的赋值运算符是等于号“=”，其他运算符可以与赋值运算符联合使用，构成组合赋值运算符。JavaScript常用的赋值运算符如表1-6所示。

表1-6 JavaScript常用的赋值运算符

（5）三元运算符

三元运算符又叫三目运算符，其语法格式如下：

条件表达式？表达式1：表达式2

如果条件表达式的值为true，则整个表达式的结果为“表达式1”，否则为“表达式2”。三元运算符用法示例代码如下：

<script type=＂text/javascript＂>
  var a=5;
  var b=5;
  alert((a==b)?true:false);
</script>

在上述JavaScript代码中，因为声明的变量a与b的值相同，所以使用比较运算符“==”的结果为true，此时整个表达式的结果就为true,alert( )语句会弹出内容为“true”的对话框；如果变量a与b的值不相等，则整个语句的执行结果为false,alert( )语句会弹出内容为“false”的对话框。

前面介绍了JavaScript的各种运算符，那么在对一些比较复杂的表达式进行运算时，首先要明确表达式中所有运算符参与运算的先后顺序，把这种顺序称作运算符的优先级。表1-7列出了JavaScript中运算符的优先级。

表1-7 JavaScript中运算符的优先级

续表

在表1-7中，运算符的优先级由上至下递减，在同一单元格的运算符具有相同的优先级。从表1-7可以看出，小括号“( )”是优先级最高运算符。当表达式中有多个小括号时，最内层小括号中的表达式优先级最高。在编写代码时，尽量使用括号“( )”来实现想要的运算顺序，以免产生歧义。

6．条件语句if

所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。条件语句中最常用的是if判断语句，其使用方法与Java语言中的if判断语句相似，是通过判断条件表达式的值为true或者false来确定是否执行某一条语句。可将if语句分为单向判断语句、双向判断语句和多向判断语句，具体讲解如下。

（1）单向判断语句

单向判断语句是结构最简单的条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句，其语法格式如下：

if(执行条件){
    执行语句
}

在上述语法格式中，if可以理解为“如果”，小括号“()”内指定if语句的执行条件，大括号“{}”内指定满足执行条件后需要执行的语句，当执行语句只有一行时，也可以不写{}。

（2）双向判断语句

双向判断语句是if条件语句的基础形式，其语法格式如下：

if(执行条件1){
    语句1
}
else {
    语句2
}

双向判断语句的语法格式与单向判断语句类似，只是在其基础上增加了一个else语句，表示如果条件成立，则执行“语句1”，否则执行“语句2”。

（3）多向判断语句

多向判断语句会根据执行条件执行相应的执行语句，其基本语法格式如下：

if（执行条件1）{
    执行语句1
}
else if（执行条件2）{
    执行语句2
}
else if（执行条件3）{
    执行语句3
}
......

在多向判断语句的语法中，通过else if语句可以对多个条件进行判断，并且根据判断的结果执行相关的语句。

1.4.2 DOM相关知识

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

W3C中将DOM标准分为3个不同的部分：核心DOM、XML DOM和HTML DOM。其中，核心 DOM 是针对任何结构化文档的标准模型，XML DOM是针对XML文档的标准模型，而HTML DOM是针对HTML文档的标准模型。由于本章主要讲解的是网页开发的基础知识，主要涉及的DOM内容是HTML DOM。

HTML DOM 模型被构造为对象的树，该树的根节点是文档（Document）对象，该对象有一个documentElement的属性引用，表示文档根元素的Element对象。HTML文档中表示文档根元素的Element对象是<html>元素，<head>和<body>元素可以看作树的枝干。

HTML DOM树的结构如图1-24所示。

图1-24 HTML DOM树的结构

由图1-24中可知，一个页面其实就是一个文档，一个元素就是一个节点。

一个文档中所有的节点关系分为3种，具体如下。

● 直接位于一个节点之下的节点被称为该节点的子节点（childNode），例如图1-24中元素<title>位于元素<head>之下，所以元素<title>就是元素<head>的子节点。

● 直接位于一个节点之上的节点被称为该节点的父节点（parentNode），例如图1-24中元素<head>位于元素<title>之上，所以元素<head>就是元素<title>的父节点。

● 具有相同父节点的两个节点称为兄弟节点（siblingNode），例如图1-24中的元素<title>和元素<meta>就是兄弟节点。

在开发中，要想操作页面上的某个部分，例如控制一个div的显示或隐藏等，需要先获取到该部分对应的元素，再对其进行操作。下面详细介绍获取元素的两种方式。

1．节点的访问

在DOM中，HTML文档的各个节点被视为各种类型的Node对象。通过某个节点的子节点可以找到该元素，其语法如下：

父节点对象 = 子节点对象．parentNode;

Node对象的常用属性如表1-8所示。

表1-8 Node对象的常用属性

2．获取文档中的指定元素

通过遍历节点可以找到文档中指定的元素，但是这种方法有些麻烦，document对象提供了直接搜索文档中指定元素的方法，具体如下。

（1）通过元素的id属性获取元素

Document的getElementById( )方法可以通过元素的id属性获取元素。例如，获取id属性值为userId节点的代码如下：

document.getElementById(＂userId＂);

（2）通过元素的name属性获取元素

Document的getElementsByName( )方法可以通过元素的name属性获取元素。因为多个元素可能有相同的name 值，所以该方法返回值为一个数组，而不是一个元素。如果想获得具体的元素，可以通过数组索引实现。例如，获取name属性值为userName节点的代码如下：

document.getElementsByName(＂userName＂)[0];

1.4.3 BOM相关知识

BOM提供了独立于内容且可与浏览器窗口进行交互的对象，其核心对象是Window。

Window下又提供了很多对象，这些对象用于访问浏览器，被称为浏览器对象。Window各内置对象之间按照某种层次组织起来的模型统称为浏览器对象模型，如图1-25所示。

图1-25 浏览器对象模型

从图1-25可以看出，BOM包含了DOM( Document )。BOM的核心对象是Window，其他的对象称为Window的子对象，子对象是以属性的方式添加到Window对象中的。

Window对象是浏览器顶级对象，具有双重角色，既是JavaScript访问浏览器窗口的一个接口，又是一个全局对象，定义在全局作用域中的变量、函数都是Window对象的属性和方法。

Window对象提供了很多事件，下面介绍两个比较常用的事件。

1. window.onload加载事件

在网页开发中可通过Window对象调用onload实现窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载时会触发该事件，并调用该事件对应的事件处理函数。

JavaScript代码是从上往下依次执行的，如果要在页面加载完成后执行某些代码，并把这些代码写到页面任意地方，可以把这部分代码写到window.onload事件处理函数中，因为onload事件是等页面内容全部加载完毕再去执行处理函数的。

onload页面加载事件有两种注册方式，分别如下所示：

//方式1
window.onload = function() {};
//方式2
window. addEventListener(＇load＇, function() {});

需要注意的是，window.onload 注册事件的方式只能写一次，如果有多个window.onload 注册事件，会以最后一个为准。如果使用window. addEventListener注册事件，则不会受注册次数的限制。

2. document.DOMContentLoaded加载事件

document.DOMContentLoaded加载事件会在DOM加载完成时触发。这里所说的加载不包括CSS样式表、图片和Flash动画等额外内容的加载。因此，该事件的优点在于执行的速度更快，适用于页面中图片很多的情况。当页面图片很多时，用户访问到onload事件触发可能需要较长的时间，从而不能实现交互效果，这样会影响用户的体验。这种情况下使用document.DOMContentLoaded事件更为合适，只要DOM元素加载完即可执行。需要注意的是，document.DOMContentLoaded事件有兼容性问题，需要浏览器是IE 9以上版本。

BOM中还有许多方法和事件，由于篇幅问题，这里不再赘述。读者可以参考黑马程序员编著的《JavaScript+jQuery交互式Web前端开发》。

1.4.4 JavaScript的使用

下面从函数的定义及调用、事件处理和常用对象三个方面来具体讲解JavaScript的使用。

1．函数的定义及调用

在JavaScript中，函数的定义是通过function语句实现的。定义函数的语法格式如下：

function functionName(parameter1,parameter2,…){
    statements;
    return expression;
}

在上述语法中，functionName是必选项，用于标识函数名，在同一个页面中函数名必须是唯一的，并且区分大小写；parameter1,parameter2,…是可选项，代表参数列表，当使用多个参数时，参数间使用逗号进行分隔，一个函数最多可以有255个参数；statements是必选项，代表用于实现函数功能的语句；return expression是可选项，用于返回函数值，expression为任意表达式、变量或常量。

在JavaScript中，因为函数名区分大小写，所以在调用函数时需要注意函数名称大小写。不带参数的函数使用函数名加上括号即可调用，带参数的函数需要根据参数的个数和类型在括号中传递相应的参数进行调用。如果函数有返回值，可以使用赋值语句将函数值赋给一个变量进行返回。

2．事件处理

采用事件驱动是JavaScript语言的一个最基本的特征，所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时，例如单击鼠标或按键，它可以触发与这个事件相关联的事件处理程序。事件处理的过程通常分为三步：发生事件、启动事件处理程序和事件处理程序做出反应。

需要说明的是，在上述事件处理过程中，要想事件处理程序能够启动，就需要先调用事件处理程序。事件处理程序可以是任意 JavaScript 语句，但通常使用特定的自定义函数（Function）来对事件进行处理。JavaScript中还有很多常用的事件类型，如表1-9所示。

表1-9 JavaScript常用的事件类型

3．常用对象

在JavaScript中，对象是一种数据类型，它是由属性和方法组成的一个集合。属性是指事物的特征，方法是指事物的行为。下面具体介绍JavaScript的常用对象。

（1）Window对象

Window 对象表示整个浏览器窗口，它处于对象层的顶端，可用于获取浏览器窗口的大小、位置，或设置定时器等。在使用时，JavaScript允许省略Window对象的名称。

Window对象常用的属性和方法如表1-10所示。

表1-10 Window对象常用的属性和方法

（2）Date对象

Date对象是用于处理日期和时间的对象，它具有动态性，必须使用new关键字创建一个实例才能使用。使用new关键字创建Date对象实例的语法如下：

var Mydate=new Date();

Date对象没有提供直接访问日期和时间的属性，只有获取和设置日期和时间的方法，如表1-11所示。

表1-11 Date对象的常用方法

（3）String对象

String对象是JavaScript提供的字符串处理对象，创建对象实例后才能使用，它提供了处理字符串的属性和方法，如表1-12所示。

表1-12 String对象的常用属性和方法

续表