HTML、CSS 和 JavaScript 是前端开发中使用的三种主要语言。 HTML 是一种标记语言，而 CSS 是一种样式语言。
JavaScript 是一种面向对象的编程语言，主要用于创建 Web 和移动应用程序的客户端。 由于其灵活性和易于理解性，这种开源动态语言已成为最常用的编程语言之一。
使用 HTML5 和 CSS3，您可以创建静态网站。 但是，要向此类站点添加交互性，您必须使用浏览器能够理解的编程语言，例如 JavaScript。
本文将解释为什么需要将 JavaScript 与 HTML 一起使用，将 JavaScript 代码添加到 HTML 的不同方法，以及结合这两种语言的最佳实践。
为什么在 HTML 中使用 JavaScript 至关重要
- 添加交互性：交互性是在不重新加载浏览器的情况下实时响应用户输入/操作。 例如，您可以有一个计数器，它在每次被点击时加一。 另一个例子可以是一个响应，告诉用户他们每次点击提交按钮时他们的反馈已经发送。
- 客户端验证：您可以使用 JavaScript 来捕获表单上的正确数据。 例如，您可以使用此编程语言通过电子邮件格式、密码长度和要使用的字符组合来验证用户在注册页面上的输入。
- DOM 操作：JavaScript 提供文档对象模型 (DOM)，这使得动态更改网页内容变得容易。 有了这项技术，页面内容会根据用户输入自动更新，而无需重新加载网页。
- 跨浏览器兼容性：JavaScript 与所有现代浏览器兼容。 因此，使用 HTML、CSS 和 JavaScript 创建的网页将在不同的浏览器上完美运行。
先决条件
- 对 HTML 的基本了解：您了解基本的 HTML 标签，可以使用 HTML 添加按钮和创建表单。
- 基本了解 CSS：了解 id、class 和元素选择器等 CSS 概念。
- 代码编辑器：您可以使用代码编辑器，例如 VS Code 或 Atom。 如果您不想在系统上安装软件，也可以使用在线 JavaScript 编译器。
如何在 HTML 中使用 JavaScript
您可以使用三种主要方法将 JavaScript 代码添加到 HTML。 我们探索每种方法及其最适合的地方。
#1。 在 标签之间嵌入代码
这种方法使您可以在同一个文件（HTML 文件）中包含 JavaScript 和 HTML 代码。 我们可以从创建一个项目文件夹开始，我们将在其中演示它是如何工作的。 您可以使用这些命令开始；
mkdir javascript-html-playground cd javascript-html-playground
创建两个文件； index.html 和 style.css
将此起始代码添加到 HTML 文件；
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </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: 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 代码，当您单击提交按钮时，它会显示“已提交”。 使用 JavaScript 重构的 HTML 代码将是；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
当你点击提交按钮时，你会得到类似这样的东西；
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</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="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
新更新的 HTML 页面将具有此代码；
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </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 在触发提交事件时选择默认行为（刷新页面或导航到新页面）。
- 一旦触发提交事件，就会触发一条消息“外部 JS 工作表提交”。
HTML 中的 JavaScript：最佳实践
- 缩小文件大小：文件越大，在浏览器上加载所需的时间就越多。 缩小在不改变其含义或性能的情况下删除源代码中所有不需要的字符。 您可以使用 Yahoo YUI Compressor 和 HTMLMinifier 等工具来创建紧凑的代码库。
- 保持代码井井有条：这将使您易于阅读和维护。 您可以使用 Prettier 等扩展来组织您的代码。
- 使用外部库：如果库可以为您的应用执行特定任务，则无需从头开始编写代码。 但是，请避免在同一个项目中使用多个实现相同目标的库。
- 优化 JavaScript 放置：如果您打算将 JavaScript 代码添加到 HTML 文件中，请确保它位于 HTML 代码之后。 在关闭