如何将JavaScript添加到HTML

来自菜鸟教程
跳转至:导航、​搜索

介绍

JavaScript,也缩写为 JS,是一种用于 Web 开发的编程语言。 作为与 HTML 和 CSS 并列的 Web 核心技术之一,JavaScript 用于使网页具有交互性并构建 Web 应用程序。 遵循通用显示标准的现代 Web 浏览器通过内置引擎支持 JavaScript,无需额外的插件。

处理 Web 文件时,需要加载 JavaScript 并与 HTML 标记一起运行。 这可以在 HTML 文档中内联或在浏览器将与 HTML 文档一起下载的单独文件中完成。

本教程将介绍如何将 JavaScript 合并到您的 Web 文件中,既可以内嵌到 HTML 文档中,也可以作为单独的文件。

将 JavaScript 添加到 HTML 文档中

您可以通过使用包裹 JavaScript 代码的专用 HTML 标签 <script> 在 HTML 文档中添加 JavaScript 代码。

<script> 标记可以放置在 HTML 的 <head> 部分或 <body> 部分中,具体取决于您希望何时加载 JavaScript。

通常,JavaScript 代码可以进入文档 <head> 部分,以保持它们包含在 HTML 文档的主要内容之外。

然而,如果你的脚本需要在页面布局中的某个点运行——比如使用 document.write 生成内容时——你应该把它放在应该调用它的点,通常在 [ X210X] 部分。

让我们考虑以下浏览器标题为 Today's Date 的空白 HTML 文档:

索引.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 
</body>
 
</html>

目前,该文件仅包含 HTML 标记。 假设我们想在文档中添加以下 JavaScript 代码:

let d = new Date();
alert("Today's date is " + d);

这将使网页能够显示带有当前日期的警报,而不管用户何时加载站点。

为了实现这一点,我们将在 HTML 文件中添加一个 <script> 标记以及一些 JavaScript 代码。

首先,我们将在 <head> 标记之间添加 JavaScript 代码,指示浏览器在加载页面的其余部分之前运行 JavaScript 脚本。 我们可以在 <title> 标签下面添加 JavaScript,例如,如下所示:

索引.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>
 
<body>
 
</body>
 
 
 
</html>

加载页面后,您将收到类似于以下内容的警报:

如果我们要修改 HTML 正文中显示的内容,我们需要在 <head> 部分之后实现它,以便它显示在页面上,如下例所示:

索引.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
  
  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>
 
</body>
 
</html>

通过 Web 浏览器加载的上述 HTML 文档的输出类似于以下内容:

较小的脚本或仅在一个页面上运行的脚本可以在 HTML 文件中正常工作,但对于较大的脚本或将在许多页面上使用的脚本,这不是一个非常有效的解决方案,因为包含它可能会变得笨拙或难以阅读并理解。 在下一节中,我们将讨论如何处理 HTML 文档中的单独 JavaScript 文件。

使用单独的 JavaScript 文件

为了适应更大的脚本或将在多个页面中使用的脚本,JavaScript 代码通常存在于一个或多个 js 文件中,这些文件在 HTML 文档中被引用,类似于引用 CSS 等外部资产的方式。

使用单独的 JavaScript 文件的好处包括:

  • 分离 HTML 标记和 JavaScript 代码,使两者更直接
  • 单独的文件使维护更容易
  • 缓存 JavaScript 文件后,页面加载速度更快

为了演示如何将 JavaScript 文档连接到 HTML 文档,让我们创建一个小型 Web 项目。 它将由 js/ 目录中的 script.jscss/ 目录中的 style.css 和根目录中的主 index.html 组成。项目。

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

我们可以从上一节中的之前的 HTML 模板开始:

索引.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 
</body>
 
</html>

现在,让我们将显示日期为 <h1> 标头的 JavaScript 代码移动到 script.js 文件中:

脚本.js

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

我们可以将此脚本的引用添加到 <body> 部分,使用以下代码行:

<script src="js/script.js"></script>

<script> 标签指向我们 Web 项目的 js/ 目录下的 script.js 文件。

让我们在 HTML 文件的上下文中考虑这一行,在这种情况下,在 <body> 部分中:

索引.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 

<script src="js/script.js"></script>

</body> 
 
</html>

最后,让我们通过在 <h1> 标题中添加背景颜色和样式来编辑 style.css 文件:

样式.css

body {
    background-color: #0080ff;
}
 
h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

我们可以在 HTML 文档的 <head> 部分中引用该 CSS 文件:

索引.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 

<script src="js/script.js"></script>

</body>
 
</html>

现在,有了 JavaScript 和 CSS,我们可以将 index.html 页面加载到我们选择的 Web 浏览器中。 我们应该看到一个类似于以下内容的页面:

现在我们已经将 JavaScript 放在了一个文件中,我们可以从其他网页以相同的方式调用它,并在一个位置更新它们

结论

本教程介绍了如何将 JavaScript 合并到您的 Web 文件中,既可以内嵌到 HTML 文档中,也可以作为单独的 .js 文件。

从这里,您可以了解如何使用 JavaScript 开发者控制台如何在 JavaScript 中编写注释。