怎么在网页body中插入js

在网页body中插入JS的几种方法、推荐使用外部脚本

在网页的body中插入JavaScript有多种方法，包括直接在HTML中嵌入内联脚本、在body标签中使用事件属性以及引用外部脚本文件。内联脚本、事件属性、外部脚本文件，推荐使用外部脚本文件，因为这种方式有助于代码的可维护性和重用性。

一、内联脚本

内联脚本是将JavaScript代码直接写在HTML文档中的一种方法。这种方法简单直接，但不利于代码的重用和维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        console.log('This is an inline script.');
        document.querySelector('h1').style.color = 'blue';
    </script>
</body>
</html>

优势：

简单直接，无需额外文件。
适合用于简单的页面或快速测试。

劣势：

不利于代码重用。
难以维护，特别是在项目规模较大时。

二、使用事件属性

在HTML标签中，可以通过事件属性直接插入JavaScript代码。这种方法多用于响应用户交互。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('Button clicked!')">Click me</button>
</body>
</html>

优势：

简单易用。
适合用于简单的交互功能。

劣势：

代码分散在HTML标签中，不便于维护。
不利于代码重用。

三、外部脚本文件

将JavaScript代码写在独立的文件中，并在HTML文档中引用。这种方法推荐使用，因为它有助于代码的可维护性和重用性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="script.js"></script>
</body>
</html>

外部脚本文件 script.js：

console.log('This is an external script.');
document.querySelector('h1').style.color = 'blue';

优势：

代码集中，便于管理和维护。
有助于代码重用和团队协作。
可以利用浏览器缓存，提高加载速度。

劣势：

需要额外的HTTP请求（可以通过HTTP/2或合并文件减小影响）。

四、异步和延迟加载

为了优化网页加载速度，可以使用 async 和 defer 属性来控制外部脚本的加载和执行。

`async` 属性

async 属性使脚本在下载时不会阻塞页面的其他操作，但脚本的执行顺序不确定。

<script src="script.js" async></script>

`defer` 属性

defer 属性使脚本在页面完全解析后执行，且按顺序执行。

<script src="script.js" defer></script>

五、模块化加载

使用现代JavaScript模块化机制（ES6 Modules）可以进一步提高代码的组织和可维护性。

<script type="module" src="main.js"></script>

main.js：

import { myFunction } from './module.js';
myFunction();

module.js：

export function myFunction() {
    console.log('This is a module function.');
}

六、工具和框架

在实际开发中，使用项目管理系统和协作工具可以大大提高团队的效率。例如，研发项目管理系统PingCode 和 通用项目协作软件Worktile 都是值得推荐的工具。这些工具可以帮助团队更好地管理代码、任务和沟通，从而提高整体效率和代码质量。

七、综合示例

为了更好地理解上述方法，下面提供一个综合示例，展示如何在实际项目中应用这些技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comprehensive Example</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button onclick="changeColor()">Change Color</button>
    <script src="main.js" defer></script>
</body>
</html>