JavaScript入门经典（第7版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1 在Web页面里添加JavaScript

正如第1章所介绍的，JavaScript代码是和页面内容一起发送给浏览器的，这是如何做到的呢？有两种方法可以把JavaScript代码关联到HTML页面，它们都要用到第1章介绍的<script>和</script>标签。

第一种方法是把JavaScript语句直接包含在HTML文件里，就像第1章所介绍的一样:

<script>
      ... Javascript statements are written here ...
</script>

第二种方法，也是更好的方法，是把JavaScript代码保存到单独的文件，然后利用<script>元素的src（源）属性来指定文件名，从而把这个文件包含到页面里：

<script src=′mycode.js′></script>

前例包含了一个名为mycode.js的文件，其中有我们编写的JavaScript语句。如果JavaScript文件与调用脚本不在同一个文件夹，就需要添加一个相对或绝对路径：

<script src=′/path/to/mycode.js′></script>

或

<script src=′http://www.example.com/path/to/mycode.js′></script>

把JavaScript代码保存到单独的文件中有如下好处。

➢ 当JavaScript代码有更新时，这些更新可以立即作用于使用这个JavaScript文件的页面。这对于JavaScript库是尤为重要的（本书稍后会有介绍）。

➢ HTML页面的代码可以保持简洁，从而提高易读性和可维护性。

➢ 可以稍微提高一点性能。浏览器会把包含文件进行缓存，当前页面或其他页面再次需要使用这个文件时，就可以使用一个本地副本了。

说明：文件名后缀

按照惯例，JavaScript代码文件的名称扩展名是.js。但从实际情况来看，代码文件的名称可以使用任何扩展名，浏览器都会把其中的内容当作JavaScript来解释。

注意：留意标记

外部文件中的JavaScript语句不能放到<script>和</script>标签中，也不能使用任何HTML标签，只能是纯粹的JavaScript代码。

程序清单2.1 是第1章里Web页面的代码，但是现在，已被修改为在<body>区域里包含了一个JavaScript代码文件。JavaScript可以放置到HTML页面的<head>或<body>区域里，但一般情况下，我们把JavaScript代码放到页面的<head>区域，从而让文档的其他部分能够调用其中的函数。第3章将介绍函数的有关内容。就目前而言，我们把范例代码暂时放到文档的<body>区域。


程序清单2.1 包含了一个JavaScript文件的一个HTML文档

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Page</title>
</head>
<body>
    <p>Some content ...</p>
    <script src=′mycode.js′></script>
</body>
</html>

当JavaScript代码位于文档的body区域时，在页面被呈现时，遇到这些代码就会解释和执行。为此，JavaScript代码不要试图访问没有定义的DOM元素，这一点很重要。相反，JavaScript语句必须包含在定义这些元素的HTML的后面。在代码读取和执行完毕之后，页面呈现才会继续，直到页面完成。

提示：多个脚本

你并不是只能够使用一个script元素，需要的话，可以在页面中使用任意多个script元素。

说明：HTML注释

有时在<script>标签里可以看到HTML风格的注释标签<!--和-->，它们包含着JavaScript语句，比如：

<script>
    <!--
    ... Javascript statements are written here ...
    -->
</script>

这是为了兼容不能识别<script>标签的老版本浏览器。这种“注释”方式可以防止老版本浏览器把JavaScript源代码当作页面内容显示出来。除非我们有特别明确的需求要支持老版本的浏览器，否则是不需要使用这种技术的。

上一章目录下一章