1.2 如何把JavaScript添加到页面
Web浏览器可以理解HTML和CSS，并且能够把这些语言转换为屏幕上可视化的显示。Web浏览器中能够理解HTML和CSS的部分叫做布局或渲染引擎。但大多数浏览器还拥有一种叫做JavaScript解释器的工具。它是浏览器的一部分，可以理解JavaScript并且执行一个JavaScript程序的步骤。既然Web浏览器通常期待HTML，当JavaScript出现的时候，必须使用<script>标签明确地告诉浏览器。
<script>标签是常规的HTML。它的作用就像是一个开关，其效果就是表示“嗨，Web浏览器，接下来是一些JavaScript代码，你不知道该对它们做什么，因此把它们交给JavaScript解释器处理吧”。当Web浏览器遇到了代表结束的</script>标签，它知道到了JavaScript程序的末尾，并且自己可以恢复履行正常的职责了。
很多时候，可以像下面这样在Web页面的<head>部分添加<script>标签：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>My Web Page</title>
<script type="text/javascript">
</script>
</head><script>标签的type属性表示脚本所遵从的格式和类型。在这个例子中，type="text/javascript"意味着这段脚本是常规的文本（就像HTML一样），并且它是以JavaScript编写的。
如果你使用HTML 5，脚本会更加简单。可以完全省略type属性：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>实际上，Web浏览器也允许你在HTML 4.01和XHTML 1.0文件中省略type属性——脚本还是一样会运行。然而，若没有type属性，页面将不会正确地验证（参见本章后面部分以了解关于验证的更多内容）。本书使用HTML5作为doctype，但是，JavaScript代码在HTML 4.01和XHTML 1.0中也是一样的，并且同样有效。
然后，我们可以在开始< script>标签和结束< script>标签之间添加JavaScript代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
alert('hello world!');
</script>
</head>稍后，你将会发现这段JavaScript代码实际上做什么。现在，把注意力放在开始< script>标签和结束< script>标签上。要在页面中添加一段脚本，首先要插入这些标签。在大多数情况下，要把< script>标签放到页面的 < head>中，以便JavaScript代码可以整洁地放置在Web页面的一个区域。
然而，把< script>标签放入页面的HTML的任何地方绝对都是有效的。实际上，在本章后面你会将看到，有一条JavaScript命令允许直接把信息写入Web页面。使用该命令，可以把< script>标签放置在想要脚本在页面上显示消息的某个位置（这是在HTML正文中的某个地方）。将< script>标签放置在结束< /body>标签的下面也很常见，这种方法确保了在运行任何JavaScript之前先载入页面，以便访问者可以看到页面。
外部JavaScript文件
像前面小节那样使用 < script>标签，使得我们可以把JavaScript添加到一个单独的页面。但是，很多时候需要创建供站点的所有页面共享的脚本。例如想要使用JavaScript程序为Web页面添加动画的、下拉式的导航菜单。我们希望在站点的每个页面上都能看到同样有趣的导航栏，但是，把同样的JavaScript代码复制和粘贴到站点的每个页面确实不是个好办法，这有几个方面的原因。
首先，不断地复制和粘贴同样代码的工作量很大，尤其是如果站点有数百个页面更是如此。其次，如果你决定修改或扩展JavaScript代码，将需要找到使用这段JavaScript代码的每个页面并更新代码。最后，既然这段JavaScript程序的所有代码放置在每个页面之中，每个页面都会变得更大而且载入更慢。
一种更好的方法是使用外部JavaScript文件。如果你为Web页面使用过外部CSS文件，那么，你应该熟悉这一技术。外部JavaScript文件是一个简单的文本文件，其文件扩展名为.js，例如navigation.js。该文件只包含JavaScript代码，并且使用 < script>标签将其链接到一个Web页面。例如，要把一个名为navigation.js的JavaScript文件添加到主页中，可以像下面这样编写代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
</head><script>标签的src属性的作用和<img>标签的src属性或<a>标签的href属性的作用一样。换句话说，它指向你自己的Web站点上的一个文件或者其他Web站点上的一个文件（参见后面的“快速熟悉：URL类型”部分）。
注意： 当添加src属性来链接到外部JavaScript文件的时候，不要在开始<script>标签和结束<script>标签之间添加任何JavaScript代码。如果想要连接到一个外部JavaScript文件并且为页面添加定制的JavaScript代码，再多使用一组<script>标签。例如：
<script src="navigation.js"></script>
<script>
alert('Hello world!');
</script>快速熟悉
URL类型
在把外部JavaScript文件附加到Web页面的时候，需要为<script>标签的src属性指定一个URL。URL也称作统一资源定位符（Uniform Resource Locator），它是到位于Web上的一个文件的路径。有3种类型的路径：绝对路径、根相对路径和文档相对路径。所有这3种路径都指明了Web浏览器可以在哪里找到一个特定文件（例如，其他的Web页面、图像文件或JavaScript文件）。
绝对路径就像邮政地址，它包含了位于世界任何地方的Web浏览器要找到该文件所需的所有信息。绝对路径包括http://、主机名、文件夹以及文件的名字。例如，http://www.cosmofarmer.com/scripts/site.js。
根相对路径表示文件相对于站点的顶级目录（站点的根目录）的位置。根相对路径不包括http://或域名。它以一个/（斜杠）开始，该斜杠表示站点的根目录，即主页所在的目录。例如，/scripts/site.js表示文件site.js位于一个名为scripts的目录下，而这个目录本身位于站点的顶级目录之中。创建根相对路径的一种简单方法是，从绝对路径中去除http://和主机名。例如，http://www.sawmac.com/index.html表示为根相对路径的URL就是/index.html。
文档相对路径指明了从Web页面到该JavaScript文件的路径。如果Web站点上有多个层级的目录，需要使用指向同一个JavaScript文件的不同路径。例如，假设有一个名为site.js的JavaScript文件，它位于Web站点的主目录中一个名为script的目录中。针对主页来说，该文件的文档相对路径就是scripts/site.js，但是，对于about目录中的一个页面来说，同样的文件的路径将会有所不同：../scripts/site.js；../的意思是从about目录向上，而/scripts/site.js的意思是到scripts目录下获取文件site.js。
使用哪种类型的URL有如下一些技巧：
如果要指定的文件和Web页面不在同一个服务器上，必须使用绝对路径。这是能够指向另一个Web站点的唯一类型。
根相对路径对于存储在自己的站点上的JavaScript文件很好用。既然它们总是从根目录开始，对于Web站点上的每个页面来说， JavaScript文件的URL都是相同的，即使Web页面位于站点中的目录或子目录中。然而，除非你通过一个Web服务器（要么是Internet上外部的Web服务器，要么是你在自己的计算机上为了测试而安装的Web服务器）来浏览Web页面，根相对路径是无效的。换句话说，如果你在自己的计算机之外使用浏览器的File→Open命令打开一个Web页面，Web浏览器无法定位、载入或运行使用一个根相对路径附加的JavaScript文件。
当你在自己的计算机上设计站点而没有Web服务器的辅助时，文档相对路径是最好的选择。你可以创建一个外部JavaScript文件，将其附加到Web页面，然后直接打开硬盘上的Web页面，从而在Web浏览器中检查该JavaScript文件。当把实际的、生动而逼真的Web站点移到Internet上时，文档相对路径能够很好地工作，但是，如果你把Web页面移动到服务器的另一个位置，则需要重写JavaScript文件的URL。在本书中，将使用文档相对路径，因为这种路径允许你在自己的计算机上执行和测试教程，而不需要Web服务器。
你可能（并且将常常会）把多个外部JavaScript文件附加到单个Web页面。例如，你可能创建一个外部JavaScript文件来控制下拉式导航栏，并且还有另一个外部JavaScript文件使得能够为照片页面添加漂亮的幻灯播放效果（将在第7章学习如何做到这点）。在照片集页面中，我们希望把这两个JavaScript程序都用上，因此，要把两个文件都附加上。
此外，可以像下面这样给同一个页面附加外部JavaScript文件并且添加一个JavaScript程序：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
alert('hello world!');
</script>
</head>别忘了，必须对每个外部JavaScript都使用一对开始<script>标签和结束<script>标签。我们将在后面小节介绍的教程中创建一个外部JavaScript文件。
可以把外部JavaScript文件保存在Web站点的根目录（或根目录下的任何子目录）中的任何地方。很多开发者在站点的根目录下创建一个专门的目录，用来放置外部JavaScript文件，通常这个目录名为js（表示JavaScript）或libs（表示库）。
注意： 有时候，要附加外部JavaScript文件的顺序。你将在本书后面看到，有时候编写的脚本依赖于外部文件中的代码。在使用JavaScript库（简化复杂的编程任务的JavaScript代码）时，这是常见的情况。在本书1.5节的教程中，我们将看到真正使用JavaScript库的一个例子。
