怎么在html中引入自己写的js

在HTML中引入自己写的JS文件，核心步骤包括：创建JS文件、将JS文件保存到项目目录、在HTML文件中使用script标签引入JS文件、确保JS文件路径正确、在HTML文件中适当位置调用JS函数。让我们详细展开其中的一个步骤——在HTML文件中使用<script>标签引入JS文件。

在HTML文件中使用<script>标签引入JS文件是最关键的一步。这个标签可以放在HTML文件的 <head> 部分或者 <body> 部分，但最好的做法是放在 <body> 部分的末尾。这是因为如果把JS文件放在 <head> 部分，浏览器在加载JS文件时会暂停渲染HTML内容，从而影响页面的加载速度。而如果把JS文件放在 <body> 末尾，浏览器会先渲染HTML内容，然后再加载和执行JS文件，从而提高页面加载速度和用户体验。

一、创建JS文件

首先，你需要创建一个JS文件。例如，你可以在项目的根目录下创建一个名为 main.js 的文件。在这个文件中，你可以编写你需要的JavaScript代码。

// main.js
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('Document is ready!');
});

二、将JS文件保存到项目目录

确保你创建的JS文件保存到项目的目录结构中。对于简单的项目，你可以将JS文件保存在根目录或者一个专门的 js 目录中。

/my-project /index.html /js /main.js

三、在HTML文件中使用<script>标签引入JS文件

在HTML文件中，通过 <script> 标签引入你写的JS文件。你可以在 <body> 部分的末尾添加这一标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <!-- 引入JS文件 -->
    <script src="js/main.js"></script>
</body>
</html>

四、确保JS文件路径正确

在 <script> 标签中的 src 属性指定了JS文件的路径。这个路径可以是相对路径或者绝对路径。上例中使用的是相对路径 js/main.js，表示JS文件在当前目录的 js 文件夹中。如果JS文件在其他位置，你需要根据实际路径进行调整。

五、在HTML文件中适当位置调用JS函数

根据你编写的JS代码，你可能需要在HTML文件中适当位置调用JS函数。例如，如果你在 main.js 中定义了一个名为 init 的函数，你可以在HTML文件中调用它。

// main.js
function init() {
    console.log('Init function called');
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <!-- 调用JS函数 -->
    <script>
        init();
    </script>
    <!-- 引入JS文件 -->
    <script src="js/main.js"></script>
</body>
</html>

总结

通过以上步骤，你可以在HTML文件中成功引入自己编写的JS文件。核心步骤包括：创建JS文件、将JS文件保存到项目目录、在HTML文件中使用<script>标签引入JS文件、确保JS文件路径正确、在HTML文件中适当位置调用JS函数。这种方法不仅结构清晰，而且可以提高页面加载速度和用户体验。

怎么在html中引入自己写的js

相关问答FAQs：