将 JavaScript 文件链接到 HTML 文件

Sushant Poudel 2023年2月19日 2021年10月30日
  1. 使用 <script> 标签和 src 属性将外部 JavaScript 链接到 HTML
  2. 使用 <script> 标签将内部 JavaScript 链接到 HTML
将 JavaScript 文件链接到 HTML 文件

本文将讨论两种将 JavaScript 文件链接到 HTML 文件的方法。在第一个过程中,我们将创建一个 JavaScript 文件并在外部链接这些文件。在第二个过程中,我们将 JavaScript 代码插入到 HTML 文档中。

使用 <script> 标签和 src 属性将外部 JavaScript 链接到 HTML

在此方法中,我们使用 <script> 标记中的 src 属性将 JavaScript 文件链接到 HTML 文件。src 属性用于指定外部文件的 URL 或文件位置。如果我们希望在一个网站的多个页面上使用相同的 JavaScript,我们必须创建一个外部 JavaScript 文件,而不是一次又一次地编写相同的文件。我们将 <script> 写在 HTML 的 <head> 标签内。使用 .js 扩展名保存脚本文件后,我们使用 <script> 标签中的 src 属性引用它。

例如,创建两个文件,一个 HTML 和一个 JavaScript 文件。在 JS 文件中编写一些 JavaScript,在 HTML 文件中编写一些 HTML。在分别命名这两个文件后,不要忘记使用 .html.js 扩展名,同时保存它们。将这两个文件放在同一个文件夹中。在 HTML 文件中 <script> 标签的 src 属性中写入 JavaScript 文件名。例如,如果你的文件名是 hello.js,请编写 <script src="hello.js"> </script>

下面的示例说明了一种将 JavaScript 文件链接到 HTML 文件的方法。我们在 HTML 文件中写了 This is HTML,在 JavaScript 文件中写了 This is write from JavaScript。正如我们在下面输出部分的两个文本中看到的那样,它证明 JavaScript 与 HTML 相关联。

示例代码:

<html>
 <head>
 <script src="hello.js"> </script>
 </head>
 
 <body>
 <p> This is HTML</p>
 </body>

</html>
document.write("This is written from JavaScript");

输出:

使用 <script> 标签将内部 JavaScript 链接到 HTML

与第一种方法不同,我们使用 <script> 标签在 HTML 文件中添加 JavaScript 代码。<script> 标签用于添加客户端脚本。我们可以在 HTML 文件中的 <script> 标签内部编写 JavaScript。当我们运行 HTML 文件时,我们将看到加载的 JavaScript。

例如,在 HTML 的 <p> 标签中写入文本 This is HTML。然后,打开 <script> 标记并使用 document.write 键入消息 This is written from JavaScript。然后,关闭脚本标记。

我们可以看到用 HTML 和 JavaScript 编写的文本都显示在下面的输出中。它证明 HTML 和 JavaScript 已经链接。

例子:

<html>
    <head>
    </head>
    <body>
        <p> This is HTML </p>
    </body>
    <script>
        document.write("This is written from JavaScript");
    </script>
</html>

输出:

Hi, I am a programmer.
This is written from JavaScript
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn