如何将 JavaScript 添加到 HTML 页面

这篇具有很好参考价值的文章主要介绍了如何将 JavaScript 添加到 HTML 页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

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

在处理 Web 文件时,JavaScript 需要与 HTML 标记一起加载和运行。这可以通过两种方式实现:要么内联在 HTML 文档中,要么作为浏览器将与 HTML 文档一起下载的单独文件运行。

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

将 JavaScript 添加到 HTML 文档中

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

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

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

但是,如果您的脚本需要在页面布局的某个特定点运行(例如在使用 document.write 生成内容时),则应将其放在应调用它的位置,通常在 <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>
 
</body>
 
</html>

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

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

这将使网页显示一个警报,其中包含当前日期,无论用户何时加载该站点。

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

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

<!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>

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

!JavaScript Alert Example

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

<!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 文档的输出将类似于以下内容:

!JavaScript Date Example

小型或仅在一个页面上运行的脚本可以在 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 模板:

<!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>

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

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> 部分中:

<!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;
}

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

<!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 Date with CSS Example

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

结论

本教程介绍了如何将 JavaScript 集成到您的 Web 文件中,包括内联到 HTML 文档中以及作为单独的 .js 文件。

从这里,您可以学习如何使用 JavaScript 开发者控制台以及如何在 JavaScript 中编写注释。文章来源地址https://www.toymoban.com/news/detail-851686.html

到了这里,关于如何将 JavaScript 添加到 HTML 页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包