前端开发中的 HTML、CSS 与 JavaScript
在前端开发领域，HTML、CSS 和 JavaScript 是三大基石。HTML 是一种标记语言，主要负责网页的结构；CSS 则是一种样式语言，用于控制网页的视觉呈现。
JavaScript 是一种面向对象的编程语言，其主要作用是为 Web 和移动应用程序添加客户端的动态交互。JavaScript 以其灵活性和易学性而著称，作为开源的动态语言，已成为最广泛使用的编程语言之一。
通过 HTML5 和 CSS3，开发者可以构建静态网站。然而，要使这些网站具有交互性，就必须借助浏览器能够识别的编程语言，比如 JavaScript。
本文将深入探讨为什么在 HTML 中使用 JavaScript 至关重要，介绍将 JavaScript 代码融入 HTML 的多种方式，并分享结合这两种语言的最佳实践方法。
为什么在 HTML 中使用 JavaScript 非常关键
- 增强交互性：交互性是指无需重新加载浏览器即可对用户的输入或操作做出实时响应的能力。例如，可以创建一个点击时递增的计数器，或者在用户每次提交表单时显示反馈信息。
- 客户端验证：JavaScript 可以用来在客户端对表单数据进行验证。例如，可以验证用户在注册页面输入的电子邮件格式、密码长度和字符组合，确保数据的有效性。
- DOM 操作：JavaScript 提供了文档对象模型（DOM），使得动态修改网页内容变得非常便捷。利用这项技术，网页内容可以根据用户的操作自动更新，而无需重新加载整个页面。
- 跨浏览器兼容性：JavaScript 与所有现代浏览器都兼容。因此，使用 HTML、CSS 和 JavaScript 构建的网页能够在不同的浏览器上正常运行，确保了用户体验的一致性。
先决条件
- HTML 的基本知识：了解 HTML 标签的基础用法，例如添加按钮和创建表单。
- CSS 的基本知识：熟悉 CSS 的基本概念，如 ID 选择器、类选择器和元素选择器。
- 代码编辑器：可以使用 VS Code 或 Atom 等代码编辑器，也可以选择在线 JavaScript 编译器，如果不想在本地安装软件。
如何在 HTML 中使用 JavaScript
有三种主要方法可以将 JavaScript 代码添加到 HTML 中。下面我们将详细探讨每种方法及其最适合的应用场景。
#1. 在 <script> 和 </script> 标签之间嵌入代码
这种方法允许将 JavaScript 代码直接包含在 HTML 文件中。让我们创建一个项目文件夹，来演示如何使用这种方法。可以使用以下命令开始：
mkdir javascript-html-playground cd javascript-html-playground
创建两个文件：index.html 和 style.css。
将以下初始代码添加到 HTML 文件：
<html>
<head>
<meta charset="utf-8" />
<title>My Webpage</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">姓名:</label>
<input type="text" id="name" />
<br />
<label for="email">邮箱:</label>
<input type="email" id="email" />
<br />
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>
<br />
<input type="submit" value="提交" />
</form>
</div>
</body>
</html>
将以下代码添加到 CSS 文件：
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
这将呈现一个简单的带有表单的网页，类似于下图：
现在，我们添加一段简单的 JavaScript 代码，当点击提交按钮时，会弹出“已提交”的消息。更新后的 HTML 代码如下：
<html>
<head>
<meta charset="utf-8" />
<title>My Webpage</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">姓名:</label>
<input type="text" id="name" />
<br />
<label for="email">邮箱:</label>
<input type="email" id="email" />
<br />
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>
<br />
<input type="submit" value="提交" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("已提交");
}
</script>
</body>
</html>
当点击提交按钮时，会看到类似这样的弹出窗口：
在 <script> … </script> 标签之间嵌入 JavaScript 代码的优点
- 快速实现：在同一个文件中操作可以节省时间，因为可以直接从 HTML 代码中引用 JavaScript 代码。
- 代码易于阅读：<script> 标签的存在将 HTML 代码与 JavaScript 代码分隔开，使代码更易于阅读和调试。
在 <script> … </script> 标签之间嵌入 JavaScript 代码的缺点
- 代码难以复用：如果应用中有多个表单，则需要为每个表单创建单独的 JavaScript 代码。
- 影响性能：HTML 文档中大量的代码块会降低网页加载速度。
#2. 使用内联代码直接在 HTML 中使用 JavaScript 代码
除了将 JavaScript 代码放在 <script> …. </script> 标签中，还可以直接将其添加到 HTML 代码中。我们将使用相同的 HTML 代码和样式表（style.css）。
<html>
<head>
<meta charset="utf-8" />
<title>My Webpage</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">姓名:</label>
<input type="text" id="name" />
<br />
<label for="email">邮箱:</label>
<input type="email" id="email" />
<br />
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>
<br />
<input type="submit" value="提交" onclick="alert('内联提交')" />
</form>
</div>
</body>
</html>
当点击提交时，浏览器会出现一个显示“内联提交”的小窗口。
添加 JavaScript 作为内联代码的优点
- 快速实现：无需在不同的文档之间切换来编写 HTML 和 JavaScript 代码。
- 适用于小型应用：如果应用不需要太多的交互，内联 JavaScript 是一个理想的选择。
添加 JavaScript 作为内联代码的缺点
- 代码不可重用：如果应用有多个表单，则需要为每个表单重复编写 JavaScript 代码。
- 影响性能：HTML 文档中大量的代码块会降低加载速度。
- 代码可读性降低：随着代码库的增长，代码可读性会逐渐降低。
#3. 创建外部 JavaScript 文件
随着应用规模的扩大，你会发现直接将 JavaScript 代码添加到 HTML 文件不是一个好主意。当 HTML 文件中存在大量代码时，网页的加载速度也会变慢。
创建一个新的 script.js 文件来存放 JavaScript 代码。
在 HTML 文件中导入 script.js 文件：
<head>
<script src="script.js"></script>
</head>
更新后的 HTML 文件如下：
<html>
<head>
<meta charset="utf-8" />
<title>My Webpage</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="form-container">
<form>
<label for="name">姓名:</label>
<input type="text" id="name" />
<br />
<label for="email">邮箱:</label>
<input type="email" id="email" />
<br />
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>
<br />
<input type="submit" value="提交" />
</form>
</div>
</body>
</html>
将以下代码添加到 script.js 文件中：
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("外部 JS 文件提交");
});
});
这段 JavaScript 代码实现以下功能：
- 设置一个事件监听器，等待
DOMContentLoaded事件触发。 - 在
DOMContentLoaded事件触发后执行回调函数。 - 使用
querySelector方法选择表单。 - 使用
event.preventDefault()方法阻止在触发提交事件时的默认行为（刷新页面或跳转到新的页面）。 - 一旦触发提交事件，会弹出消息 “外部 JS 文件提交”。
HTML 中的 JavaScript：最佳实践
- 压缩文件大小：文件越大，在浏览器加载所需的时间就越长。压缩是指在不改变其含义或性能的前提下，删除源代码中所有不必要的字符。可以使用诸如 Yahoo YUI Compressor 和 HTMLMinifier 等工具来创建更小的代码库。
- 保持代码整洁：这将使代码更易于阅读和维护。可以使用 Prettier 等扩展来组织代码。
- 使用外部库：如果库可以执行应用中的特定任务，则无需从头编写代码。但是，请避免在同一项目中同时使用多个实现相同目标的库。
- 优化 JavaScript 的放置位置：如果打算将 JavaScript 代码添加到 HTML 文件中，请确保将其放在 HTML 代码之后。在
</body>标签之前，将 JavaScript 放在<script>标签之间。这确保了 HTML 内容（例如文本、图像和表格）在 JavaScript 之前加载，从而提高加载速度。
总结
现在，您应该能够自如地将 JavaScript 与 HTML 结合使用来构建交互式网页。选择哪种技术取决于您所创建的 Web 应用的性质。例如，在构建小型应用时，可以使用内联代码。另一方面，大型应用则需要一个外部 JavaScript 文件，可以将其导入 HTML 文件中。
探索更多可用的 JavaScript 表格库，让您的开发更加高效。