HTML怎么引入js文件？-猿码集

在网页设计过程中，经常需要使用JavaScript来实现交互效果或动态更新网页内容，而HTML页面如何引入js文件是我们需要了解的。

1. 什么是JavaScript文件

JavaScript语言是一种基于Web的脚本语言，运行于浏览器中。它可以通过操作HTML页面中的标签，实现页面内容的动态刷新、修改、添加等操作。为了使JavaScript脚本可以使用，我们需要将它们放置在一个或多个.js文件中，并将这些文件以正确的方式引入到HTML页面中。

2. JS文件引入的方式

2.1 内联方式

在HTML页面的<head>或<body>部分中，可以使用<script>标签将JavaScript代码直接嵌入到HTML文档中。这种方式被称为内联式编写JavaScript。一般来说，内联方式只适用于执行长度较短的JavaScript代码，避免在HTML文档中出现大量的JavaScript代码。


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>内联式编写JavaScript</title>
  <script>
   function sayHello() {
    alert("Hello World!");
   }
  </script>
 </head>
 
 <body>
  <h1>内联式编写JavaScript</h1>
  <button onclick="sayHello()">Say Hello!</button>
 </body>
</html>

2.2 外部文件引入方式

与内联式编写JavaScript不同的是，我们可以将JavaScript代码放置在一个称为.js文件的单独文件中，并使用外部文件引入方式将JavaScript文件与HTML文档分离，以便降低HTML文件的代码量。这种方式在Web应用程序开发中非常常见。

在HTML文档中引入外部js文件的最简单的方法是使用<source>标签，其位于<head>标记中。在href属性中指定包含JavaScript代码的文件的URL。以下是示例代码：


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>外部文件引入方式</title>
  <script src="script.js"></script>
 </head>
 
 <body>
  <h1>外部文件引入方式</h1>
  <button onclick="sayHello()">Say Hello!</button>
 </body>
</html>

在上面的示例中，我们将JavaScript代码存储在一个名为<script.js>的文件中。在HTML文档中，我们只需使用<script>标记，并在其src属性中指定JavaScript文件的URL即可：


function sayHello() {
 alert("Hello World!");
}

2.3 async和defer方式

在使用外部文件引入方式时，如果在 JavaScript 文件没有完全加载之前，使用了该文件中定义的某个函数或变量，那么会导致 JavaScript 出错。为了避免这种问题，可以使用async和defer方式。

使用async方式，在HTML文档解析的过程中，如果在HTML文档的解析过程中发现script，那么会异步的加载js文件，但不会等待js文件加载完毕，就执行js文件，当在js文件执行时，HTML文档解析继续。


    <script async src="demo_async.js"></script>

使用defer方式，在HTML文档解析时，如果在HTML文档的解析过程中发现script，那么会异步的加载js文件，并且在HTML文档解析完成后，再执行js文件。


    <script defer src="demo_defer.js"></script>

需要注意的是：

- async和defer都是用在外部文件引入的script标签中

- async和defer方式在IE9及以下浏览器不支持

3. 引入js文件时需要注意的地方

3.1 js文件放置位置

为了使JavaScript代码能够找到在HTML文档中定位的所有元素并操作它们，必须确保JavaScript能够访问目标元素。为此，请确保将JavaScript文件放置在HTML页面的头部或身体中，以确保在使用JavaScript文件时所有必要的元素已被访问和定位。一般情况下，我们会将JavaScript文件放置在HTML文件的头部，以便在文档实际加载之前就加载该文件。如果有必要使用JavaScript文件在文档BODY的其他部分中创建动态元素，我们可以考虑将文件放置在BODY或FOOTER中。

3.2 js文件的版本控制

随着时间的推移，JavaScript文件的版本和功能会有所变化。当我们在升级现有JavaScript文件或创建新的JavaScript文件时，最好使用版本控制方法，在文件名或路径中包含版本号。这样可以确保在使用最新的JavaScript文件时，浏览器不会从缓存中加载旧文件。如：


   <script src="script_v2.0.js?v=2.0"></script>

如果新的js文件名称不同，那么我们可以在之前的库文件的基础上增加一个版本号，这样CSS文件就不会在缓存中被保留，从而避免了文件更新后浏览器依然使用旧文件的情况。

3.3 js文件的压缩

为了提高Web应用程序的响应速度和性能，使用压缩的JavaScript文件常常是一个好选择。压缩后的JavaScript文件可以极大地减少文件大小，缩短文件加载时间，并显著降低带宽流量。我们可以使用一些在线压缩工具来对js文件进行压缩。

4. 总结

引入JavaScript文件的方式是一项重要的Web开发技巧，可以降低HTML文件的代码量，提高应用程序的性能和响应性。无论内联式还是外部文件引入方式，我们需要注意js文件的放置位置、版本控制和压缩，以确保JavaScript文件能够正确地与HTML文档交互，为用户提供优质的用户体验。

HTML怎么引入js文件？