如何在HTML中使用JavaScript创建交互式网页
HTML、CSS和JavaScript是前端开发中使用的三种主要语言。HTML是一种标记语言，而CSS是一种样式语言。
JavaScript是一种面向对象的编程语言，主要用于创建Web和移动应用的客户端。由于其灵活性和易于理解，这种开源的动态语言已经成为最常用的一种语言之一。
使用HTML5和CSS3可以创建静态网站。但是，要向这样的网站添加交互性，必须使用浏览器理解的编程语言，如JavaScript。
本文将解释为什么需要在HTML中使用JavaScript，以及向HTML添加JavaScript代码的不同方法和结合这两种语言的最佳实践。
为什么在HTML中使用JavaScript至关重要
- 添加交互性：交互性是指实时响应用户输入/操作而不重新加载浏览器。例如，您可以创建一个每次点击时增加一的计数器。另一个例子是，每次用户点击提交按钮时，都会显示反馈消息告诉用户他们的反馈已发送。
- 客户端验证：您可以使用JavaScript捕获表单上的正确数据。例如，您可以使用这种编程语言通过电子邮件格式、密码长度和字符组合来验证用户在注册页面上的输入。
- DOM操作：JavaScript提供了文档对象模型（DOM），可以轻松地动态更改网页内容。有了这种技术，页面内容会根据用户输入的自动更新，而无需重新加载网页。
- 跨浏览器兼容性：JavaScript与所有现代浏览器兼容。因此，使用HTML、CSS和JavaScript创建的Web页面将在不同的浏览器上完美运行。
先决条件
- 基本了解HTML：您了解基本的HTML tags，可以使用HTML添加按钮和创建表单。
- 基本了解CSS：您了解CSS概念，如id、class和元素选择器。
- 代码编辑器：您可以使用类似VS Code或Atom的代码编辑器。如果您不想在系统上安装软件，还可以使用在线编辑器。
如何在HTML中使用JavaScript
您可以使用三种主要方法将JavaScript代码添加到HTML中。我们将探讨每种方法及其最佳适用场景。
#1. 在标签之间嵌入代码
这种方法允许您在同一个文件（HTML文件）中同时使用JavaScript和HTML代码。我们可以创建一个项目文件夹来演示它的工作原理。您可以使用以下命令开始：
mkdir javascript-html-playground
cd javascript-html-playground创建两个文件；index.html和style.css
将以下起始代码添加到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: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}当网页被渲染时，你将得到以下结果；
我们现在可以添加一个简单的JavaScript代码，当你点击提交按钮时，它会显示“submitted”。具有JavaScript的重构HTML代码将是；
当你点击提交按钮时，你将得到类似于以下结果；
在标签之间嵌入JavaScript代码的优点
- 实施快速： 在同一文件中工作可以节省时间，因为您可以从同一文件中引用HTML代码的JavaScript代码。
- 易于阅读的代码： 存在标签
- 使代码难以重用： 如果您的应用中有多个表单，这意味着您将为每个表单创建JavaScript代码。
- 降低性能： HTML文档中的大型代码块可能会降低加载速度。
#2. 通过直接在HTML中使用JavaScript代码的内联代码
不需要将上述JavaScript代码包含在标签中，而是直接将其添加到HTML代码中。我们将使用相同的HTML代码和样式表（style.css）。
当你点击提交按钮时，浏览器上会出现一个带有“inline submit”字样的小窗口。
在内联代码中添加JavaScript的优点
- 实施快速： 您无需从一个文档转到另一个文档来编写HTML和JavaScript代码。
- 适用于小型应用： 如果您有一个不需要太多交互性的小型应用程序，内联JavaScript是一个理想的选择。
在内联代码中添加JavaScript的缺点
- 代码不可重复使用： 如果您的应用程序有多个表单，则需要为每个表单创建JavaScript代码。
- 降低性能： HTML文档中的大型代码块可能会降低加载速度。
- 代码可读性： 随着代码库的不断增长，代码可读性降低。
#3. 创建一个外部JavaScript文件
随着应用程序的不断发展，您会注意到直接将JavaScript代码添加到HTML文件中并不是一个好主意。当您的HTML文件上有大量代码时，您的网页加载速度也很慢。
创建一个新文件
script.js来存放您的JavaScript代码。在HTML文件中导入script.js文件；
新更新的HTML页面将包含以下代码；
将以下代码添加到script.js文件中；
document.addEventListener("DOMContentLoaded", function() { const form = document.querySelector("form"); form.addEventListener("submit", function(event) { event.preventDefault(); alert("external JS sheet submit"); }); });这个JavaScript代码做了以下几点；
- 我们有一个事件监听器，等待
DOMContentLoaded事件的触发。 - 在
DOMContentLoaded事件触发后，执行回调函数。 - 代码使用querySelector来选取一个表单。
- 我们使用
event.preventDefault()来阻止DOM在提交事件被触发时选择默认行为（刷新页面或导航到新页面）。 - 一旦提交事件被触发，就会触发消息“external JS sheet submit”。
HTML中的JavaScript最佳实践
- 压缩文件大小：文件大小越大，加载到浏览器上所需的时间就越长。压缩可以删除source code中的所有不必要的字符，而不改变其含义或性能。您可以使用Yahoo YUI Compressor和HTMLMinifier等工具来创建紧凑的代码库。
- 保持代码有序：这将使您的代码易于阅读和维护。您可以使用像Prettier这样的扩展来组织您的代码。
- 使用外部库：如果库可以为您的应用程序执行某个任务，就没有必要从头开始编写代码。但是，避免在同一个项目中使用多个实现相同目标的库。
- 优化JavaScript放置位置：如果您打算将JavaScript代码添加到HTML文件中，请确保它位于HTML代码之后。将JavaScript放置在标签之间，紧接着是标签的结束。这样确保了HTML内容（如文本、图片和表格）在JavaScript之前首先加载，从而提高加载速度。
总结
您现在可以舒适地使用JavaScript与HTML创建交互式网页。您将使用的合并这两种技术的方法将取决于您正在创建的Web应用程序的性质。例如，当创建一个小型应用程序时，您可以使用内联代码。另一方面，一个大型应用程序需要一个外部的JavaScript文件，您将其导入到HTML文件中。
查看可以立即使用的JavaScript table libraries。
