JavaScript 用法

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

JavaScript 用法

在现代前端开发中，JavaScript 是不可或缺的核心技术。掌握将 JavaScript 集成到网页中的方法，是运用这门语言的第一步。

✅ 通常，我们有有三种方法将 JavaScript 添加到网页中：

内嵌代码：通过<script>标签直接在 HTML 中嵌入 JavaScript 代码。
事件属性：通过 HTML 元素的事件属性（如onclick）添加 JavaScript 代码。
外部引用：通过<script src="...">引入外部 JavaScript 文件。

内嵌代码（<script>标签）

内嵌代码是指将 JavaScript 代码直接嵌入在 HTML 文件的<script>和</script>标签之间，是一种常见的脚本引入方式。这种方法适用于体量较小、仅针对当前页面编写的功能逻辑，或需要立即执行的初始化代码。

然而，内嵌脚本也存在明显的弊端。当嵌入的 JavaScript 代码过多或过于复杂时，会导致 HTML 文件体积增大、结构混杂，不仅降低代码的可读性和可维护性，还会增加 HTML 文档的加载时间，进而影响页面的整体性能。尤其在多人协作或项目规模较大的情况下，这种方式往往不利于代码复用和长期维护。

因此，在实际开发中，建议仅将关键、短小的脚本以内嵌方式引入，复杂或通用的代码封装为外部.js文件，使用<script src="">进行引用，以实现结构清晰、易于缓存和更优的加载性能。

实例代码运行代码

复制

<script type="text/javascript">
function showMessage() {
    alert('这是内嵌的JavaScript代码！');
}
</script>
<button onclick="showMessage()">点击我</button>

这段 Javascript 代码，可以放在<head>或在<body>中，具体位置应结合实际业务需求来决定。

如果代码需要尽早加载和执行，例如某些关键样式或必要地初始化脚本，建议将其放置在<head>部分；如果是某些不影响首屏渲染、可以延后加载的脚本或内容，则更适合放在<body>的末尾，以避免阻塞页面渲染，提升加载性能。合理放置代码有助于优化用户体验和页面加载速度。

注意：在早期的 JavaScript 示例中，可能会使用type属性，例如<script type="text/javascript">。自 HTML5 起，不再需要为该标签添加type属性，因为 JavaScript 已成为 HTML5 默认的脚本语言。

事件属性

事件属性是指通过 HTML 元素的事件属性（如onclick）直接添加 JavaScript 代码，是一种简便的交互实现方式。这种方法适用于简单的用户交互场景，例如按钮点击、鼠标悬停等，可以快速响应用户操作。

然而，过度使用事件属性会导致 HTML 结构混乱，代码难以维护和复用。尤其在复杂的应用中，建议将事件处理逻辑集中在 JavaScript 文件中，通过事件监听器（如addEventListener）来管理事件响应，以实现更清晰的代码结构和更好的可维护性。

实例代码运行代码

复制

<button onclick="alert('你点击了按钮!')">点击我</button>
<input type="text" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">

这段代码展示了如何通过 HTML 元素的事件属性（如onclick、onfocus和onblur）直接添加 JavaScript 代码，以实现按钮点击弹窗和输入框聚焦变色的交互效果。

外部引用

外部引用是指通过<script src="...">标签引入外部 JavaScript 文件，是现代前端开发中最常用的脚本引入方式。这种方法适用于大型项目或需要复用的代码库，可以将 JavaScript 代码与 HTML 结构分离，提升代码的可维护性和复用性。

通过外部引用，可以实现代码的模块化管理，便于多人协作开发和版本控制。此外，浏览器可以缓存外部 JavaScript 文件，减少重复加载，提高页面加载速度和性能。是使用最多的、最值得推荐的方式。

实例代码运行代码

复制

<!-- 在HTML文件中 -->
<script src="script.js"></script>

<!-- 在script.js文件中 -->
function calculateSum(a, b) {
    return a + b;
}

通过这种方式，可以将 JavaScript 代码与 HTML 结构分离，提升代码的可维护性和复用性。

JavaScript 简介 JavaScript 输出

评论区 0

发表评论

教程介绍

JavaScript 前端开发的核心技术之一，与 HTML 和 CSS 配合使用，能够为网页添加交互效果。

7 章节

26 阅读

0 评论

JavaScript 用法