如何引用JavaScript

本节学习目标

• 能够通过内部引用和外部引用两种方式在页面中引入JavaScript代码

本节内容

正如我们之前所了解到的，HTML控制页面的内容，CSS控制页面的样式，JavaScript控制页面的行为。

HTML文档中的一个个标签表达的就是页面中的内容；若想要在HTML文档中加入样式，可以在某一个标签中加入style属性同时写上CSS样式即可，如<p style="font-size:16px"><p/>，或者将不同选择器的样式写在HTML文档head中的<style>//some css attributes</style>标签下，也可以在HTML文档中的head下加入link标签外链CSS文件，如：<link rel="stylesheet" type="text/css" href="//path to css file"> 。那么我们如何在HTML文档中引入JavaScript呢？

• 内部引用

通过HTML文档内的script标签加载JavaScript代码。

示例：

<script type="text/javascript">
  document.write("Hello World!");
</script>

通过此方式就可以在当前页面中引入script标签中的JavaScript代码。

• 外部引用

也是使用HTML文档的script标签，但是要使用script标签的src属性，指向外部JavaScript文件的路径。

示例：

<script src="./main.js" />

由于HTML文档是由上向下对页面元素进行解析的，所以在一个HTML文档中，所有的<script>元素都会按照它们在页面中出现的顺序依次被解析，默认情况下，只有在解析完前面的<script>元素中的代码之后，才会开始解析后面的<script>元素中的代码，所以为防止网页加载缓慢，也可以把非关键的JavaScript放到网页最后，即主要内容后面，</body>元素的前面。

示例：

// other code ...    
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

使用内部引用的方法在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码。不过，并不存在必须使用外部文件的硬性规定，但支持使用外部文件的人多会强调如下优点：

1. 可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标签的情况下，集中精力编辑JavaScript代码。

2. 可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。

3. 适应未来：统一定义JavaScript代码，方便查看，同时使代码更安全，可以压缩，也可以加密某个JavaScript文件。

其他资料推荐

• JavaScript Script - w3schools
• JavaScript Where To - w3schools

本节练习

分别通过内部引用和外部引用的方式引入下面一段JavaScript代码。

document.write('Hello World');