📌  相关文章
📜  js 位置 - Javascript (1)

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

JS 位置 - Javascript

在 Web 开发中，JavaScript（简称 JS）是非常重要的一部分。它可以用来处理交互逻辑、修改 DOM、发送网络请求等。但是，在代码编写过程中，我们需要关注代码的位置和执行时机，以确保代码的正确性和性能。

JS 的位置

在 HTML 文件中，我们可以使用以下两种方式来引入 JS：

1. 内部 JS

在 HTML 的 <head> 或 <body> 标签中使用 <script> 标签来包含 JS 代码。这种方式称为内部 JS。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script>
      // JS 代码
    </script>
  </head>
  <body>
    ...
    <script>
      // JS 代码
    </script>
  </body>
</html>

2. 外部 JS

除了内部 JS，我们还可以在 HTML 文件中引入外部 JS 文件。这可以通过使用 <script> 标签的 src 属性来实现。

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

外部 JS 文件通常存放在另一个文件中，并使用 .js 扩展名。

JS 的执行时机

JS 代码可以在页面加载和页面准备就绪时执行，也可以在特定的事件时执行。以下是常见的 JS 执行时机：

1. 页面加载时执行

使用 window.onload 事件可以在页面加载完毕后执行 JS 代码。

<script>
  window.onload = function() {
    // JS 代码
  };
</script>

2. 页面准备就绪时执行

使用 document.ready 事件可以在页面文档准备就绪后执行 JS 代码。

<script>
  $(document).ready(function() {
    // JS 代码
  });
</script>

为了方便，我们也可以使用 $() 或 jQuery() 方法来代替 document.ready 事件。

<script>
  $(function() {
    // JS 代码
  });
</script>

3. 事件触发时执行

JS 代码还可以在特定的事件时执行。以下是常见的事件：

  • 点击事件：onclick
  • 鼠标移动事件：onmousemove
  • 输入事件：oninput
  • 键盘事件：onkeydown, onkeyup, onkeypress
<button onclick="myFunction()">点击我</button>
<script>
  function myFunction() {
    // JS 代码
  }
</script>
结论

在编写 JS 代码时，我们需要了解 JS 的位置和执行时机。这样，我们才能正确地编写 JS 代码，并确保代码的正确性和性能。