将 JavaScript 文件链接到 HTML 文件

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

将 JavaScript 文件链接到 HTML 文件

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文将讨论两种将 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");

输出：

This is written from JavaScript
This is HTML

使用 `<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

上一篇：在另一个 HTML 文件中包含一个 HTML 文件

下一篇：在 HTML 中嵌入 PDF

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享