加载 js - Javascript (1)

📌 相关文章

📜 加载 js - Javascript (1)

📅 最后修改于: 2023-12-03 15:36:59.417000 🧑 作者: Mango

加载 js - JavaScript

JavaScript 是一种广泛使用的脚本语言，可用于增强 Web 应用程序，以动态交互方式呈现内容。要将 JavaScript 添加到 Web 页面中，必须将其加载到 HTML 文件中。

在 HTML 文件中加载 JavaScript

在 HTML 文件中，可以通过以下方式将 JavaScript 引入到页面中：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

在上面的示例中，我们使用 <script> 标记将 JavaScript 文件 script.js 添加到 HTML 页面中。通过将 src 属性设置为 JavaScript 文件的位置，可以将其引入到页面中。在以上示例中，浏览器将从 script.js 文件中加载 JavaScript 代码。

将 JavaScript 代码添加到 HTML

除了从外部 JavaScript 文件中加载代码之外，还可以将 JavaScript 代码添加到 HTML 文件中。用 <script> 标记将 JavaScript 代码添加到 HTML 文件中的示例如下：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
      }
    </script>
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
  </body>
</html>

在此示例中，我们在 <body> 标记中编写了 JavaScript 代码。在此示例中，单击按钮时调用 myFunction() 函数，并将其输出传递给具有 id 属性为 demo 的 <p> 元素。

使用 defer 和 async 属性

使用 HTML 中 <script> 标记时，还可以使用 defer 和 async 属性来控制脚本加载的时间。

defer 属性告诉浏览器按顺序加载页面而不会阻止页面呈现。在加载文档时，defer 属性将推迟脚本执行，直到页面完成解析。以下是使用 defer 属性加载脚本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script defer src="myscript.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

async 属性告诉浏览器立即下载脚本，但不会阻止页面呈现。在加载文档时，浏览器将在下载脚本时执行页面的其他部分。以下是使用 async 属性加载脚本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script async src="myscript.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

总结

JavaScript 是用于增强 Web 应用程序的脚本语言。
可以从外部 JavaScript 文件或内部 HTML 文件中加载 JavaScript 代码。
使用 defer 和 async 属性可以控制脚本加载的时间。```