我的书签
添加书签
移除书签1.5 附加外部JavaScript文件
正如前面所介绍的，如果想要在多个W e b页面中使用同样的脚本，通常把JavaScript代码放在单独的一个文件中。然后可以让Web页面载入这个文件并使用其中的JavaScript。当我们使用他人的JavaScript代码的时候，外部JavaScript文件也很方便。特别是，JavaScript代码的集合叫做库，它们提供了有用的JavaScript程序。通常，这些库使得我们可以很容易地完成一些一般来说相当难的工作。我们将在第4章学习有关JavaScript库的更多内容，特别是本书所使用的JavaScript库jQuery。
但是现在体验一下把一个外部JavaScript文件附加到页面，并且编写一个简短的程序来做一些令人惊讶的事情：
1.在文本编辑器中打开文件fadeIn.html。
这个页面只包含了一些简单的HTML：几个＜div＞标签、一个标题栏和几个段落。你可以为这个页面添加一个简单的视觉效果，它会缓慢地淡入显示所有的内容。
2.单击靠近页面顶端的＜link＞和结束＜/head＞标签之间的空白行，并且输入：
＜script src="../_js/jquery-1. 6.3.min.js"＞＜/script＞
这段代码把一个名为jquery-1.6.3.min.js的文件链接到这个Web页面，而该文件包含在名为_js的目录下。当Web浏览器载入这个页面的时候，它还会下载jquery-1.6.3.min.jsJavaScript文件并运行其中的代码。
接下来，我们将把自己的JavaScript程序添加到这个页面。
注意：在JavaScript文件的名称中包含一个版本号，这是很常见的。在这个例子中，文件名是jquery-1.6 3.min.js。1.6.3表示jQuery的版本是1.6.3。min部分表示文件是最小化的，这会使得文件较小以便可以更快地下载。
3.按下回车键产生一个新的空白行，然后输入：
＜script＞
HTML标签通常成对出现，有一个开始标签和一个结束标签。要确保不会忘记添加结束标签，可以在输入了开始标签之后立即输入结束标签，然后再填写两个标签之间的内容，这么做能够帮助你避免遗忘。
4.按下回车键两次，产生两个新的空白行，然后输入：
＜/script＞
这就结束了JavaScript代码段。现在添加一些程序。
5.单击开始script标签和结束script标签之间的空白行，并输入：
$（document）.ready（function（）{
你可能会问这究竟要干什么。我们将会在第6章了解这段代码的所有细节，但是基本上，这行代码利用jquery-1.6.3.min.js文件中的程序，确保浏览器在适当的时候执行下一行代码。
6.按下回车键创建一个新行，然后输入：
$（'body'）.hide（）.fadeIn（3000）；
这行代码完成一个背景颜色的魔术：在3秒钟（或3000 ms）的时间内，它让页面内容先消失然后缓慢地淡入显示。它是如何做到这些的？哦，这是jQuery的魔力的一部分，jQuery使得我们仅用几行代码就可以产生复杂的效果。
7.最后一次按下回车键，然后输入：
}）；
这行代码结束了JavaScript代码，它和表示到了JavaScript程序末尾的结束＜/script＞标签很相似。对于那些奇怪的标点符号，现在不必过于关心，我们将在本书后面详细了解它们是如何工作的。你需要做的主要事情是确保输入的代码和这里给出的完全一致。一个输入错误可能就会导致程序无法工作。最后添加到页面的代码如下面的粗体部分所示：
＜link href="../_css/site.css"rel="stylesheet"＞
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function）（）{
$（'body'）.hide（）.fadeIn（3000）；
}）；
＜/script＞
＜/head＞
8.保存HTML文件，并且在Web浏览器中打开它。
你现在应该会看到页面慢慢地淡入到视线中。将数值3000修改为不同的值（例如，从250到10 000），再看看页面工作方式的变化。
注意：如果你尝试在Internet Explorer中预览这个页面，如果它似乎什么也不做，你可能需要单击在页面底部出现的“Enable blocked content”对话框（参见1.3节的“注意”部分）。
正如你所见到的，实现Web页面上的惊人效果并不需要太多的JavaScript代码。得益于像jQuery这样的JavaScript库，我们能够创建高级的、交互式的Web站点，而不需要自己是编程高手。然而，了解JavaScript和编程的基础知识确实有帮助。在接下来的3章中，我们将介绍非常基础的JavaScript知识，以帮助你熟悉构成这个语言的基本概念和语法。
