python 如何在网页中添加js

在网页中添加JavaScript的主要方法有三种：使用内联JavaScript、在HTML文件中嵌入JavaScript代码、使用外部JavaScript文件。建议使用外部JavaScript文件，因为它有助于代码的重用、提高网页加载速度、便于维护。

在这里，我们将详细描述如何使用外部JavaScript文件。

一、内联JavaScript

内联JavaScript是指直接在HTML元素的属性中添加JavaScript代码。虽然这种方法很直接，但并不是最佳实践，尤其是当代码变得复杂时。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>

在上面的示例中，我们在按钮的 onclick 属性中内联了一个简单的JavaScript代码。

二、嵌入JavaScript代码

将JavaScript代码嵌入到HTML文件的 <script> 标签中。这种方法适用于中小型脚本，但当脚本变得更复杂时，建议将其移到外部文件中。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedded JavaScript Example</title>
    <script>
        function showMessage() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

在这个示例中，我们将JavaScript代码嵌入到了 <head> 标签中的 <script> 标签内。

三、使用外部JavaScript文件

将JavaScript代码保存在一个独立的文件中，并通过 <script> 标签的 src 属性将其包含到HTML文件中。这种方法不仅使代码更容易维护，还能提高页面加载速度，因为浏览器可以缓存外部脚本文件。

1、创建外部JavaScript文件

首先，创建一个新的JavaScript文件，例如 script.js，并添加以下代码：

function showMessage() {
    alert('Hello, World!');
}

2、在HTML文件中引用外部JavaScript文件

在HTML文件中，通过 <script> 标签的 src 属性引用外部JavaScript文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

在这个示例中，我们在 <head> 标签中包含了 script.js 文件。浏览器会加载并执行 script.js 文件中的JavaScript代码。

四、将JavaScript放在页面底部

通常建议将 <script> 标签放在HTML文件的底部，而不是在 <head> 标签中。这样可以确保在JavaScript代码执行之前，HTML内容已经完全加载。这有助于避免一些潜在的加载问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript Example</title>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
    <script src="script.js"></script>
</body>
</html>

在这个示例中，我们将 <script> 标签移动到了 </body> 标签之前。

五、使用 `defer` 和 `async` 属性

在某些情况下，我们可能希望在页面加载时延迟或异步加载JavaScript文件。可以使用 <script> 标签的 defer 和 async 属性来实现。

1、`defer` 属性

defer 属性会让JavaScript文件在HTML文档完全解析后执行。多个带有 defer 属性的脚本会按顺序执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Defer JavaScript Example</title>
    <script src="script.js" defer></script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

2、`async` 属性

async 属性会让JavaScript文件异步加载和执行，这意味着脚本的加载和执行不会阻塞页面的解析。多个带有 async 属性的脚本可能会以任何顺序执行，因此不适合依赖执行顺序的脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async JavaScript Example</title>
    <script src="script.js" async></script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

六、使用模块化JavaScript

现代JavaScript支持模块化编程，这使得代码更加模块化和可维护。可以使用 type="module" 属性来加载模块化的JavaScript文件。

1、创建模块化JavaScript文件

创建一个模块化的JavaScript文件，例如 module.js：

export function showMessage() {
    alert('Hello, Modular World!');
}

2、在HTML文件中引用模块化JavaScript文件

在HTML文件中，通过 <script> 标签的 type="module" 属性引用模块化JavaScript文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Module JavaScript Example</title>
    <script type="module">
        import { showMessage } from './module.js';
        document.querySelector('button').addEventListener('click', showMessage);
    </script>
</head>
<body>
    <button>Click Me</button>
</body>
</html>