正文

怎么在html文件中添加js

技术帮
技术帮 V管理员 /112阅读/0评论
0625

在日常的前端开发中,HTML和JavaScript是密不可分的两个部分，掌握如何在HTML文件中添加JS，是每个前端开发者必备的技能，我就来给大家详细讲解一下这个过程，让小白也能轻松上手。

我们需要创建一个HTML文件,这很简单，只需用文本编辑器（如Sublime Text、Visual Studio Code等）新建一个文件，并命名为“index.html”即可，在文件中输入以下基础代码：

<!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>
</body>
</html>

我们要在这个HTML文件中添加JS,主要有以下三种方法：

内部脚本

在HTML文件中,可以直接在<body>标签内部添加<script>标签，然后在其中编写JavaScript代码。

<body>
    <h1>这是一个标题</h1>
    <script>
        // 这里写JS代码
        document.write('Hello, World!');
    </script>
</body>

这种方法简单直接,适合于小段代码的编写，但如果JS代码较多，会导致HTML文件显得杂乱无章，不便于后期维护。

怎么在html文件中添加js

外部脚本

当JavaScript代码较为复杂时,我们可以将其写在一个单独的.js文件中，然后在HTML文件中引入这个.js文件，具体步骤如下：

创建一个名为“main.js”的JavaScript文件，并在其中编写代码：

// main.js
document.write('Hello, World!');
  1. 在HTML文件中,使用<script>标签引入这个.js文件：
<body>
    <h1>这是一个标题</h1>
    <script src="main.js"></script>
</body>

注意：在引入.js文件时，需要将src属性的值设置为.js文件的路径，js文件与HTML文件在同一个目录下，只需写文件名即可。

异步加载

在某些情况下,为了提高页面加载速度，我们需要异步加载JavaScript，这时，可以使用async或defer属性。

<body>
    <h1>这是一个标题</h1>
    <script async src="main.js"></script>
</body>

当使用async属性时，浏览器会异步加载main.js文件，不会阻塞页面渲染，一旦main.js文件加载完成，就会立即执行其中的代码。

怎么在html文件中添加js

另一种方式是使用defer属性：

<body>
    <h1>这是一个标题</h1>
    <script defer src="main.js"></script>
</body>

与async不同，当使用defer属性时，浏览器会等待整个页面加载完成后再执行main.js文件中的代码。

注意事项

  • 在使用外部脚本时,请确保.js文件的路径正确，否则会导致脚本无法加载。
  • 如果同时使用内部脚本和外部脚本,请将它们放在合适的位置，避免出现执行顺序问题。
  • 异步加载虽然可以提高页面加载速度,但也要根据实际情况选择使用async或defer。

通过以上三种方法,我们就可以在HTML文件中灵活地添加JavaScript代码了，掌握这些技巧，相信你在前端开发的道路上会越走越远，希望这篇文章能对你有所帮助，如果你有任何疑问，欢迎在评论区留言交流！