JavaScript 文件的运行方式|极客笔记

JavaScript 文件的运行方式

JavaScript 是一种用于网页开发的脚本语言，通常用于增强网页的交互性。JavaScript 文件通常以 .js 扩展名结尾，它可以直接嵌入 HTML 文件中，也可以作为外部文件引用到 HTML 文件中。

本文将详细介绍 JavaScript 文件的运行方式，包括嵌入式和外部引用两种方式，并通过示例代码展示它们的运行结果。

嵌入式 JavaScript 文件

嵌入式 JavaScript 文件是直接写在 HTML 文件中的 JavaScript 代码块，通过 <script> 标签来实现。我们可以在 <head> 或 <body> 标签中使用 <script> 标签来嵌入 JavaScript 代码。

下面是一个简单的示例，展示了如何在 HTML 文件中嵌入 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
    <title>嵌入式 JavaScript 示例</title>
</head>
<body>
    <h1>嵌入式 JavaScript 示例</h1>
    <script>
        // 在这里编写 JavaScript 代码
        var message = "Hello, World!";
        document.write(message);
    </script>
</body>
</html>

在这个示例中，我们在 <script> 标签中编写了一段 JavaScript 代码，用于在页面中显示 “Hello, World!”。当浏览器加载这个 HTML 文件时，会执行 <script> 中的 JavaScript 代码，最终在页面中显示出 “Hello, World!”。

外部引用 JavaScript 文件

除了将 JavaScript 代码直接嵌入 HTML 文件中，我们还可以将 JavaScript 代码单独存放在外部的 .js 文件中，然后通过 <script> 标签引用这个外部文件。

下面是一个示例，展示了如何在 HTML 文件中引用外部的 JavaScript 文件：

<!DOCTYPE html>
<html>
<head>
    <title>外部引用 JavaScript 示例</title>
    <script src="external.js"></script>
</head>
<body>
    <h1>外部引用 JavaScript 示例</h1>
    <p id="output"></p>
</body>
</html>

在这个示例中，我们在 <head> 标签中使用 <script src="external.js"></script> 这样的语法来引用外部的 JavaScript 文件 external.js。外部文件中的 JavaScript 代码会在页面加载时被执行。

external.js 文件中的内容如下：

var message = "Hello, World!";
document.getElementById("output").innerHTML = message;

当浏览器加载这个 HTML 文件时，会自动加载并执行 external.js 文件中的 JavaScript 代码，最终在页面中显示出 “Hello, World!”。

JavaScript 文件的加载顺序

在使用外部引用 JavaScript 文件时，需要注意文件的加载顺序。通常情况下，引用的外部 JavaScript 文件应该放在 HTML 文件中所有内容的末尾，以避免因为 JavaScript 文件未加载完成导致页面其他元素无法正常显示。

如果有多个外部 JavaScript 文件需要引用，可以使用 defer 属性来延迟它们的执行，保证它们按照引入的顺序依次执行。

下面是一个示例，展示了如何使用 defer 属性来引入多个外部 JavaScript 文件，并保证它们按照引入的顺序依次执行：

<!DOCTYPE html>
<html>
<head>
    <title>引入多个外部 JavaScript 文件示例</title>
    <script src="first.js" defer></script>
    <script src="second.js" defer></script>
</head>
<body>
    <h1>引入多个外部 JavaScript 文件示例</h1>
</body>
</html>

在这个示例中，first.js 和 second.js 的 JavaScript 代码会按照引入的顺序依次执行，保证执行顺序的正确性。

总结

JavaScript 文件可以通过嵌入式和外部引用两种方式来运行。嵌入式 JavaScript 文件通过 <script> 标签直接写在 HTML 文件中，外部引用 JavaScript 文件则是将 JavaScript 代码存放在外部 .js 文件中，通过 <script> 标签引用这个外部文件。

在开发中，根据具体情况选择适合的方式来管理 JavaScript 代码可以提高代码复用性和维护性。同时，按照正确的加载顺序引入外部 JavaScript 文件也是确保页面正常运行的关键。