2.7　引用JavaScript脚本文件

本节介绍引用JavaScript脚本文件的用法，了解如何在HTML网页中使用JavaScript代码。

2.7.1　概述

目前，HTML网页设计几乎离不开JavaScript脚本语言的支持。JavaScript是一种解释型编程语言，其解释器通常也被称为JavaScript引擎。目前，业内主流浏览器均内置了JavaScript引擎，且该引擎的性能优劣会直接影响到浏览器的性能，进而直观地体现到用户体验上。

在HTML网页中增加JavaScript脚本语言，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力，因此深受广大设计人员所青睐。

下面简单介绍在HTML网页中使用JavaScript脚本语言的几种方法，本小节的内容也为后面的章节做出了铺垫。

2.7.2　内嵌式JavaScript脚本

先来看内嵌式JavaScript脚本的语法，具体如下：

如果读者想在HTML网页中嵌入脚本，一般需要遵循上面的写法，并将脚本语言写在两个script标签元素之间。

下面看一段使用内嵌式JavaScript脚本语言的HTML网页的示例代码（参见源代码ch02/ch02-html-script-embed.html文件）。

【代码2-9】

【代码解析】

先看第12～16行代码，这里是一段内嵌在head标签元素中的脚本代码。其中，第13行代码使用document.write()方法尝试向HTML网页中写入一行文本，因为调用document.write()方法将会打开一个页面输出流，所以在第14行代码必须使用document.close()方法对其进行关闭（请读者注意，如果打开了输出流，操作完毕后就要关闭它）。第15行代码使用document.getElementById()方法尝试在一个div标签元素（id值为"id-div-header"，在第22行代码中定义）内插入一段文本。

然后看第25～29行代码，这里是一段内嵌在body标签元素中的脚本代码。其中，第26行代码使用document.write()方法打来一个输出流尝试在HTML网页中动态创建了一个div标签元素（id值为"id-div-dynamic"），并在第27行代码使用document.close()方法关闭了该输出流。第28行代码使用document.getElementById()方法尝试在这个动态创建的div标签元素内插入一段文本。

最后看第34～36行代码，这里同样是一段内嵌在body标签元素中的脚本代码。其中，第35行代码使用document.getElementById()方法尝试在一个div标签元素（id值为"id-div-body"，在第32行代码中定义）内插入一段文本。

下面运行测试网页，效果如图2.13所示。

从图2.13中看到网页中输出的信息比较多，下面针对图中输出结果进行详细的解释：

页面中最先输出的是一行文本信息，通过查看【代码2-9】知道是第13行代码中输出的，而页面中第二行输出的信息是第21行代码定义的，可见在head标签元素之间定义的第13～15行脚本代码最先被编译执行了，是先于HTML网页DOM树被解析之前就执行了，这完全是基于在HTML网页定义的JavaScript脚本语言编译执行的一项基本原则，即“按顺序载入，载入即执行”。

页面中输出的第三行信息是第22行代码定义的，而第15行脚本代码尝试在div标签元素（id值为"id-div-header"）中插入文本信息的操作却没有显示，这是因为该标签元素是在第22行定义的，是在脚本之后定义的，相当于脚本执行操作时还没有被定义。

紧接着，页面输出的第一条横线是第23行代码定义的。

页面中第四行输出也是一行文本信息，通过查看【代码2-9】知道是第26行脚本代码所输出的。

之后页面中第五行显示的文本信息，是第28行代码尝试动态插入到第33行代码创建的div标签元素（id值为"id-div-dynamic"）之后的，说明插入文本的操作成功了。

然后，页面输出的第二条横线是第30行代码定义的。

页面中第六行显示的文本信息，是第32行代码定义的div标签元素（id值为"id-div-body"）定义的。

之后页面中第七行显示的文本信息，则是第35行代码尝试动态插入在第32行代码定义的div标签元素（id值为"id-div-body"）之后的，说明插入文本的操作成功了。

通过上面的分析，读者会对HTML网页中定义的JavaScript脚本语言的编译执行顺序有了一个初步了解，其实JavaScript脚本执行顺序需要遵循以下几个大的原则：

• 按顺序载入。
• 载入即执行。
• 执行时会阻塞后续内容。

所以，为了避免第15行的脚本代码没有被有效执行的情况出现，一般建议将自定义脚本放在HTML网页的最后，这样可以保证全部HTML网页DOM树载入后，再执行JavaScript脚本。

2.7.3　引入外部JavaScript脚本

这一小节介绍使用script标签引入外部JavaScript脚本的方法，这里先明确使用script标签载入外部脚本库的语法，看这行代码：

如果读者想在HTML网页中载入外部JavaScript脚本，一般需要遵循上面的写法，并建议放在HTML文档最后。

下面看一段引入外部JavaScript脚本的HTML网页的示例代码（参见源代码ch02/ch02-html-script-src.html文件）。

【代码2-10】

【代码解析】

第21行代码使用script标签元素载入了一个外部脚本，其中通过src属性定义了该脚本的路径为"js/src.js"，该路径是一个基于本HTML网页的相对路径，将其转换成绝对路径为"ch02/js/src.js"。

第19行代码通过div标签元素定义了一个层区域，其id值为"id-div-body"。

下面看引入的外部JavaScript脚本代码（参见源代码ch02/js/src.js文件）：

【代码2-11】

在【代码2-11】中，使用document.getElementById()方法尝试在【代码2-10】中第26行代码定义的div标签元素（id值为"id-div-body"）内插入一段文本。

下面运行测试网页，效果如图2.14所示。可以看到，页面中第三行显示的文本（"import body js."）信息就是【代码2-11】中执行的脚本代码所插入的。