javascript脚本放在哪 javascript脚本的基本结构：代码示例

温馨提示：这篇文章已超过245天没有更新，请注意相关的内容是否还可用！

JavaScript脚本可以放在网页的不同位置，具体取决于你想要实现的功能和代码的执行时机。

1. 在<head>标签中的<script>标签内放置JavaScript脚本可以保证在页面加载时就执行脚本。这种方式适合放置一些需要在页面加载前执行的初始化代码。

示例代码：


<!DOCTYPE html>
<html>
<head>
  <script>
    // 在页面加载时执行的脚本
    console.log("页面加载完成！");
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

2. 在<body>标签的任意位置放置<script>标签，可以在页面加载完成后执行脚本。这种方式适合放置与页面交互相关的代码，如事件监听和DOM操作。

示例代码：


<!DOCTYPE html>
<html>
<head>
  <!-- 其他头部内容 -->
</head>
<body>
  <!-- 页面内容 -->
  <script>
    // 在页面加载完成后执行的脚本
    document.getElementById("myButton").addEventListener("click", function() {
      console.log("按钮被点击了！");
    });
  </script>
  <!-- 其他页面脚本 -->
</body>
</html>

3. 外部JavaScript文件可以通过<script>标签的src属性引入。这种方式适合将脚本代码与HTML代码分离，提高代码的可维护性和复用性。

示例代码（外部脚本文件 script.js）：


// script.js
console.log("外部脚本文件被加载了！");
document.getElementById("myButton").addEventListener("click", function() {
  console.log("按钮被点击了！");
});


<!DOCTYPE html>
<html>
<head>
  <!-- 其他头部内容 -->
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
  <button id="myButton">点击我</button>
  <!-- 其他页面脚本 -->
</body>
</html>