用 JavaScript 扩展 HTML

*发表于 2021-12-1 12:13:55* · 发表于 2021-12-1 12:13:55

<!DOCTYPE html>
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
<p onclick="JavaScript:alert('Hey thanks!');">Click me!</p>
</body>
</html>

以上是 HTML 文档中 JavaScript 的基本示例。当您单击<p>元素的内容时，一些 JavaScript 会运行。

什么是 JavaScript？
JavaScript 是一种脚本语言，可用于扩展 HTML 文档。它使用条件语句、循环和函数等编程概念来提供潜在的复杂应用程序。

JavaScript 允许您向网页添加交互性。使用 JavaScript，您可以创建下拉菜单、向表单添加验证、显示日期等等。

为什么要使用 JavaScript？
JavaScript 可用于任何 HTML 无法单独提供的功能。虽然它确实可以代替HTML 用于许多事情，但对于 HTML 可以做的事情，使用 HTML 通常更好。换句话说，只有在 HTML 无法做到的情况下才使用 JavaScript。

下面是一些 JavaScript 可以派上用场的例子：

高级菜单（例如，下拉菜单、滑出菜单等）。
客户端表单验证。确保用户在将表单提交到服务器之前已正确完成表单。
设置 cookie。这可以帮助您的网站“记住”其用户的偏好，或者他们在上次访问期间查看的页面等。
AJAX 应用程序。您可以使用客户端 JavaScript 与服务器端脚本进行通信，以便根据用户的选择从数据库中提取数据。无需刷新整个页面即可更新页面的单个部分（通常需要在从服务器提取数据时完成）。例如，如果用户在表单上选择他们的国家/地区，则可以使用 JavaScript 动态填充地区字段中仅包含来自所选国家/地区的那些地区。这地区数据可能来自服务器上的数据库。
展示广告。大多数广告网络为发布商提供一段 JavaScript，他们可以将其添加到他们的页面中，以便展示来自广告网络的广告。广告网络可以根据用户的偏好、以前访问过的网站、以前点击过的广告、他们过去搜索过的内容等，为用户展示最合适的广告。当然，这假设广告网络可以访问那个数据。像谷歌这样的大型网络通常拥有这些信息，因为它们在网络上广泛存在。
页面分析。可以将 JavaScript 代码添加到您的网站，以跟踪访问者在您网站上的移动，例如访问者数量、访问的页面、在您的网站上停留的时间等。
以及更多…
将 JavaScript 与 HTML 集成
将 JavaScript 合并到 HTML 文档中的方法主要有以下三种：内联、嵌入式和外部。

排队
在上面的例子中，我们将 Javascript 直接放在 HTML 元素中。我们使用onclick事件处理程序内容属性来执行此操作，如下所示：

<p onclick="JavaScript:alert('Hey thanks!');">Click me!</p>
嵌入式
您还可以在<script>标签之间放置 JavaScript 。您可以编写多行 JavaScript 代码，只要它被<script>标签包围，它就会运行（只要它没有任何错误！）。

使用这种方法，我们可以创建自己的函数，然后将 JavaScript 代码放入该函数中。在触发特定事件之前，该函数不会运行。我们通过使用事件处理程序内容属性（例如，onclick事件处理程序）来选择该事件。

在以下代码示例中，我们将一个 JavaScript 函数放入<head>并从 HTML 代码中调用该函数。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function myFunction() {
// JavaScript goes here...
}
</script>
</head>
<body>
<p onclick="JavaScript:myFunction();">Click me!</p>
</body>
</html>
外部 JavaScript 文件
HTML 还提供了链接到外部 JavaScript 文件的能力（而不是将代码包含在 HTML 文档中）。这样，您可以将所有 JavaScript 代码放在不同的文件中（通常带有.js扩展名）。这允许您将 JavaScript 代码与 HTML 代码分开，并避免 HTML 文档变得太长。通常，HTML 文档越长，更新就越困难。

使用外部 JavaScript 文件的另一个好处是浏览器通常会缓存外部文件。换句话说，浏览器将在本地保存该文件的副本，并且每次用户从您的网站请求另一个页面时，浏览器都不需要再次下载它（假设这些页面也链接到同一个 JavaScript 文件）。这可以节省带宽，并且可以为访问多个页面的访问者以及回访者加速您的页面。这是因为 JavaScript 文件仍本地存储在他们的浏览器中 - 不需要每次访问您网站上的页面时都下载它。

现在，如果您的所有 JavaScript 代码都嵌入到您的 HTML 文档中（即不在外部 JavaScript 文件中），则每次您的用户访问您网站上的新页面时，都需要再次下载所有 JavaScript。如果您有大量 JavaScript，这可能会显着增加页面下载时间。

话虽如此，有时将 JavaScript 直接嵌入 HTML 可以更好地提高性能。如果您有许多外部 JavaScript 文件，则尤其如此。每个需要下载的外部文件都可以为下载增加一点时间。

事件处理程序内容属性
无论您使用哪种方法，您几乎总是以相同的方式触发 JavaScript；使用事件处理程序内容属性。

这些是 HTML 代码和 JavaScript 代码之间的连接。它们使您能够准确指定 JavaScript 何时运行，而不是在页面加载后立即运行。也就是说，您实际上可能希望在页面加载后立即运行一些 JavaScript。这可以。你也可以那样做。只是，在大多数情况下，您只希望在给定事件上运行脚本（例如用户单击元素等）。

客户端与服务器端
JavaScript 通常在客户端运行——它在用户的浏览器（或其他用户代理）中运行。这意味着 JavaScript 代码会在用户请求页面时下载一次，然后从用户端运行。虽然它只下载一次，但它可以在整个用户会话中运行多次。并且可以根据用户在会话期间的操作来触发脚本的不同部分。

这与在服务器端运行的脚本形成对比。服务器端脚本不会下载到用户的计算机。相反，它在服务器上运行。服务器端脚本语言的示例包括 PHP、ColdFusion、Python、ASP。实际上，JavaScript 也可以运行在服务器端，但最常用的是客户端。

客户端脚本往往比服务器端脚本更快、响应更快。这是因为不需要像服务器端脚本那样调用服务器。客户端脚本在浏览器中运行，浏览器立即响应。由于客户端和服务器之间的延迟，调用服务器端脚本通常感觉较慢（即使服务器端脚本在服务器上运行得非常快）——用户的请求必须通过互联网传输到服务器，然后一旦脚本已在服务器上运行，结果必须通过 Internet 传回给用户。虽然这可能只需要一秒钟左右，但一秒钟感觉像是很长时间——尤其是当客户端脚本通常会在几毫秒内响应时。

尽管客户端脚本有很多好处，但服务器端脚本是 Web 开发的重要组成部分。大多数现代网站将结合使用客户端脚本和服务器端脚本。服务器端脚本可以处理表单、查询数据库、实施安全措施，以及更多您不会（和/或不能）在客户端执行的操作。

但是，让我们不要超越自己。从这个页面要记住的主要事情是，您可以使用客户端 JavaScript 轻松扩展您的 HTML 文档。并且 HTML 通过<script>元素和事件处理程序内容属性允许这样做。

用 JavaScript 扩展 HTML

相关帖子