首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何将 JavaScript 文件引入到 HTML

如何将 JavaScript 文件引入到 HTML

作者头像
梦溪
发布2021-09-08 11:13:06
11.1K1
发布2021-09-08 11:13:06
举报
文章被收录于专栏:梦溪博客梦溪博客

介绍

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

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

本教程将介绍如何将 JavaScript 合并到您的 Web 文件中,包括内嵌到 HTML 文档中和作为一个单独的文件。

将 JavaScript 添加到 HTML 文档中

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

<script>标签可以放置在 <head>你的HTML的部分或 <body>段,这取决于当你想在JavaScript来负载上。

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

但是,如果您的脚本需要在页面布局中的某个点运行——比如 document.write用于生成内容时——您应该将它放在应该被调用的点,通常是在 <body>部分中。

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

索引.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 代码通常存在于一个或多个 jsHTML 文档中引用的文件中,类似于引用 CSS 等外部资产的方式。

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

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

为了演示如何将 JavaScript 文档连接到 HTML 文档,让我们创建一个小型 Web 项目。这将包括 script.jsjs/目录,style.csscss/目录中,并主要 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 项目目录中的 script.js文件 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>

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

样式文件

body {
    background-color: #0080ff;
}

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

我们可以在 <head>HTML 文档的部分中引用该 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 放在一个文件中,我们可以从其他网页以相同的方式调用它,并在一个位置更新它们

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021 年 09 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 将 JavaScript 添加到 HTML 文档中
  • 使用单独的 JavaScript 文件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档