在 html 中包含 js - Javascript (1)

📌 相关文章

📜 在 html 中包含 js - Javascript (1)

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

在 HTML 中包含 JS - JavaScript

JavaScript 是一个广泛使用的客户端脚本语言，用于在 Web 中为用户提供动态和交互性。要在 HTML 中包含 JavaScript，您可以使用以下方法：

内联 JavaScript

内联 JavaScript 是将 JavaScript 引入 HTML 文件中的最简单方法。使用 <script> 元素将代码嵌入到 HTML 页面中。

<!DOCTYPE html>
<html>
  <head>
    <title>内联 JavaScript 示例</title>
  </head>
  <body>
    <script>
      console.log("Hello, World!");
    </script>
  </body>
</html>

在以上示例中，console.log() 语句将输出 "Hello, World!" 到浏览器的开发者工具控制台中。

外部文件

如果您需要在多个页面中使用相同的 JavaScript 代码，最好将代码保存到单独的 .js 文件中，并在 HTML 页面中引用该文件。

<!DOCTYPE html>
<html>
  <head>
    <title>外部文件示例</title>
    <script src="scripts.js"></script>
  </head>
  <body>
    <button onclick="sayHello()">点击我</button>
  </body>
</html>

在以上示例中，代码从另一个名为 "scripts.js" 的文件加载。该文件中的函数 sayHello() 将根据按钮单击事件输出一个消息。

执行 JavaScript

在 HTML 页面中包含 JavaScript 代码不仅是加载代码，而且需要能够执行该代码。为此，您可以将 <script> 元素放置在页面的 <head> 或 <body> 中。执行 JavaScript 的常用方法包括使用：

onload事件
onclick 事件
onmouseover 事件
onsubmit 事件

下面是一个示例，演示了如何使用 onload 事件在加载页面时执行 JavaScript 代码。

<body onload="alert('欢迎来到我的网站!');">
...
</body>

在加载页面时，弹出一个欢迎消息，以表示您的代码正在有效执行。

总结

在 HTML 中包含 JavaScript 有多种方法。您可以将代码内联到页面中，或将代码保存到外部文件中，然后在页面中引用。为了确保代码被正确执行，您需要使用适当的事件（例如 onload 或 onclick）将代码与页面链接起来。