网页中插入javascript的方法-网页设计-锦华智联科技

核心概念

要理解一个网页的基本结构，它由 HTML（内容结构）、CSS（样式）和 JavaScript（行为/交互）三部分组成，JavaScript 代码可以嵌入到 HTML 文件中，也可以链接到外部的 .js 文件。

（图片来源网络，侵删）

内联脚本

这是最直接的方法，直接在 HTML 文件中编写 <script> 标签，并将 JavaScript 代码放在其中。

在 `<head>` 标签中

将 <script> 标签放在 <head> 部分，在早期网页中很常见，但现在不推荐用于主要的脚本,因为它会阻塞页面的渲染。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">内联脚本示例</title>
    <style>
        body { font-family: sans-serif; }
    </style>
    <!-- 在这里放置脚本 -->
    <script>
        // 这里的 JavaScript 代码会在页面加载时执行
        alert('你好！这是从 head 标签中弹出的消息。');
    </script>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>页面正在加载，请注意浏览器弹出的提示框。</p>
</body>
</html>

缺点：浏览器在解析到 <head> 中的 <script> 时，会暂停解析和渲染后续的 HTML 内容，直到脚本执行完毕，这会导致页面加载变慢,用户体验不佳。

在 `<body>` 标签底部

这是目前最推荐的内联脚本放置位置，将 <script> 标签放在 </body> 标签之前。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">内联脚本示例 (Body底部)</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个按钮，点击它会在控制台打印消息。</p>
    <button id="myButton">点击我</button>
    <!-- 推荐将脚本放在 body 底部 -->
    <script>
        // 当整个 HTML 文档（DOM）被完全加载和解析后执行
        // 这样可以确保下面的 button 元素已经存在
        document.getElementById('myButton').addEventListener('click', function() {
            console.log('按钮被点击了！');
        });
    </script>
</body>
</html>

优点：

不阻塞渲染：浏览器会先加载并显示页面内容，然后再执行脚本，用户可以看到页面,而不会因为脚本加载而长时间等待。
访问 DOM：可以确保脚本执行时，页面上的所有 HTML 元素都已经加载完毕,可以安全地操作它们。

外部脚本

这是最佳实践和最专业的方法，将所有的 JavaScript 代码写在一个独立的 .js 文件中，然后在 HTML 中通过 <script> 标签的 src (source) 属性来引用它。

步骤：

创建 JS 文件 创建一个名为 script.js 的文件（文件名可以自定义）,并写入你的代码。

script.js 文件内容：

（图片来源网络，侵删）

// 当整个 HTML 文档（DOM）被完全加载和解析后执行
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('myButton');
    if (button) {
        button.addEventListener('click', function() {
            console.log('按钮被点击了！这是来自外部脚本的消息。');
            alert('你好！');
        });
    }
});

在 HTML 中引用 在 HTML 文件的 <body> 底部，使用 <script> 标签的 src 属性链接到你的 JS 文件。

index.html 文件内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个按钮，点击它会执行外部脚本中的代码。</p>
    <button id="myButton">点击我</button>
    <!-- 引用外部 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

优点：

关注点分离：HTML 负责内容，CSS 负责样式，JS 负责行为，代码结构清晰,易于维护。
可重用性：同一个 JS 文件可以被多个 HTML 页面引用。
浏览器缓存：当用户访问多个使用同一个 JS 文件的页面时，浏览器只需下载一次，之后会从缓存中读取,加快了页面加载速度。
性能优化：现代浏览器可以并行下载外部资源（如 CSS 和 JS 文件），而不会像内联脚本那样阻塞 HTML 解析。

事件属性（不推荐）

你也可以直接在 HTML 元素的事件属性中编写简短的 JavaScript 代码。onclick, onload, onmouseover 等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">事件属性示例</title>
</head>
<body>
    <h1>事件属性示例</h1>
    <!-- 直接在 HTML 中写 JS -->
    <button onclick="alert('你好！这是通过 onclick 事件弹出的。')">点击我</button>
    <p>将鼠标悬停在此文本上试试：</p>
    <p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
        鼠标悬停变红，移开变黑。
    </p>
</body>
</html>

缺点：

维护困难：HTML 和 JavaScript 代码混合在一起,使得代码难以阅读和维护。
违反关注点分离原则：这是 Web 开发的大忌。
作用域问题：在事件属性中编写的代码通常在全局作用域中执行,容易造成变量污染。

注意：这种方法仅适用于非常简单的、一次性的交互，对于任何复杂的应用,都应该避免使用。

总结与最佳实践

方法	描述	优点	缺点	推荐度
内联脚本 (Body底部)	`<script>` 标签直接写在 HTML 的 `</body>` 前	解决了阻塞渲染问题，能直接访问 DOM	HTML 和 JS 仍混合在一起，不易维护	⭐⭐⭐ (适用于小型、单页测试)
外部脚本	通过 `<script src="...">` 引用独立的 `.js` 文件	最佳实践，代码分离、可重用、可缓存、易于维护	需要额外的 HTTP 请求（但可被缓存优化）	⭐⭐⭐⭐⭐ (所有项目，尤其是中大型项目)
事件属性	在 HTML 标签内写 JS 代码，如 `onclick="..."`	简单直观，适合快速测试	代码混乱、难以维护、违反分离原则	⭐ (极不推荐，仅用于最简单的演示)

核心建议：

始终优先使用外部脚本：将你的所有 JavaScript 代码放在 .js 文件中，并在 HTML 的 </body> 标签之前通过 <script src="your-file.js"></script> 引用它。
将脚本放在 </body> 前：除非有特殊需求（如某些第三方分析脚本需要放在 <head> 中），否则请将 <script> 标签放在页面底部,以优化页面加载性能。
避免使用事件属性：保持 HTML 的纯净，只负责内容展示，把所有交互逻辑都交给 JavaScript 处理。

网页中插入javascript的方法

核心概念

内联脚本

在 <head> 标签中

在 <body> 标签底部

外部脚本

步骤：

事件属性（不推荐）

总结与最佳实践

在 `<head>` 标签中

在 `<body>` 标签底部