本教程通过示例向您展示如何将 JavaScript 代码嵌入 HTML 页面来帮助您开始使用 JavaScript。

要将 JavaScript 插入 HTML 页面,您可以使用 <script> 元素。有两种方法可以在 HTML 页面中使用 <script> 元素:

  • 将 JavaScript 代码直接嵌入到 HTML 页面中。
  • 引用外部 JavaScript 代码文件。

在 HTML 页面嵌入 JavaScript 代码

JavaScipt 开发者通常不建议将 JavaScript 代码直接放置在 <script> 元素,但在用于概念验证或测试目的时则可以这样做。

<script> 元素中的 JavaScript 代码是从上到下解释。例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>

<script> 元素中,我们使用 alert() 函数来显示 Hello, World! 消息。

引用外部 JavaScript 文件

要引用来自外部 JavaScript 文件:

  • 首先,创建一个扩展名为 .js 的文件,例如 app.js ,并将其放在 js 子文件夹中。请注意,将 JavaScript 文件放在 js 文件夹不是必需的,但这是一个很好的做法。
  • 然后,在 <script> 元素的 src 属性设置 JavasScript 文件的 URL 。

app.js 文件的内容:

alert('Hello, World!');
app.js

helloworld.html 文件的内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script src="js/app.js"></script>
</head>
<body>

</body>
</html>
helloworld.html

如果您在 Web 浏览器运行 helloworld.html 文件,您将看到一条alert 函数弹出的消息 `Hello, World!。

您可以从远程服务器加载 JavaScript 文件。这允许您其它域,例如内容分发网络  CDN ,提供 JavaScript 文件加速页面载入。

当页面上有多个 JavaScript 文件时,JavaScript 引擎会按文件出现的顺序解释这些文件。

<script src="js/service.js"></script>
<script src="js/app.js"></script>

在此示例中,JavaScript 引擎将依次解释 service.jsapp.js 文件。它先完成对 service.js 文件的解释,然后再解释 app.js 文件。

对于包含很多外部 JavaScript 文件的页面,页面渲染阶段会出现空白页面。为避免这种情况,您可以在 </body> 标记之前包含 JavaScript 文件。如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
</head>
<body>
 
   <!-- end of page content here-->
   <script src="js/service.js"></script>
   <script src="js/app.js"></script>
</body>
</html>

async 与 defer 属性

要更改浏览器加载和执行 JavaScript 文件的方式,您可以使用元素的两个属性之一 asyncdefer

这些属性只对 <script> 元素设置 src 属性的 JavaScript 文件有效。async 属性指示 Web 浏览器异步执行 JavaScript 文件。

async属性不保证脚本文件按照它们出现的顺序执行。例如:

<script async src="service.js"></script>
<script async src="app.js"></script>

在此示例中 app.js 文件可能在 service.js 文件之前执行。因此,您必须确保它们之间没有依赖关系。

defer 属性请求 Web 浏览器在解析 HTML 文档后执行脚本文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>

即使我们将 <script> 元素放在 <head> 部分中,脚本也会等待浏览器解释完 DOM 元素才开始执行 JavaScript 文件。

结论

  • 使用 <script> 元素在 HTML 页面中包含 JavaScript 文件。
  • <script> 元素的 async 属性指示 Web 浏览器并行异步运行 JavaScript 文件,然后在 JavaScript 文件可用时立即解析并执行。
  • <script> 元素的 defer 属性允许 Web 浏览器在解析 HTML 文档后执行 JavaScript 文件。