js文件怎么在html中引入

在HTML中引入JavaScript文件有多种方法，下面将介绍几种常见的方式。

1、使用<script>标签

最常见的方式是使用<script>标签将JavaScript代码直接嵌入到HTML文件中，这种方式适用于较小的JavaScript代码片段或函数。

<!DOCTYPE html>
<html>
<head>
    <title>引入JavaScript文件示例</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <button onclick="alert('Hello, World!')">点击我</button>
    <!-在这里引入JavaScript文件 -->
    <script src="myScript.js"></script>
</body>
</html>

在上面的示例中，我们在<body>标签内使用<script>标签引入了一个名为"myScript.js"的外部JavaScript文件，当用户点击按钮时，会弹出一个包含"Hello, World!"的警告框。

2、使用外部文件链接

另一种方式是将JavaScript代码保存在一个单独的文件中，并在HTML文件中使用src属性引用该文件，这种方式适用于较大的JavaScript代码或多个JavaScript文件的情况。

创建一个名为"myScript.js"的JavaScript文件，并将以下代码保存在其中：

function sayHello() {
    alert('Hello, World!');
}

在HTML文件中使用<script>标签引用该文件：

<!DOCTYPE html>
<html>
<head>
    <title>引入JavaScript文件示例</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <button onclick="sayHello()">点击我</button>
    <!-在这里引入JavaScript文件 -->
    <script src="myScript.js"></script>
</body>
</html>

在上面的示例中，我们创建了一个名为"myScript.js"的外部JavaScript文件，并在HTML文件中使用src属性引用该文件，当用户点击按钮时，会调用"myScript.js"文件中定义的"sayHello"函数，弹出一个包含"Hello, World!"的警告框。

3、延迟加载JavaScript文件

我们希望在页面加载完成后再加载JavaScript文件，以提高页面加载速度，可以使用async和defer属性来实现延迟加载。

<!DOCTYPE html>
<html>
<head>
    <title>引入JavaScript文件示例</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <button onclick="alert('Hello, World!')">点击我</button>
    <!-在这里引入JavaScript文件 -->
    <script async src="myScript.js"></script> <!-异步加载 -->
    <script defer src="myScript.js"></script> <!-延迟加载 -->
</body>
</html>

在上面的示例中，我们使用了两个不同的属性来延迟加载JavaScript文件。async属性表示脚本将在文档解析完毕后异步执行，而defer属性表示脚本将在文档解析完毕后延迟执行，这两种方式都可以提高页面加载速度。

4、动态加载JavaScript文件

我们需要根据用户的交互或条件动态地加载JavaScript文件，可以使用AJAX技术来实现动态加载，以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态加载JavaScript文件示例</title>
    <script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-引入jQuery库 -->
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <button id="loadScript">点击我</button>
    <div id="content"></div> <!-用于显示加载的内容 -->
    <script type="text/javascript">
        $(document).ready(function() { // 当文档加载完成后执行以下代码块
            $("loadScript").click(function() { // 当点击按钮时执行以下代码块

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/261770.html

js文件怎么在html中引入

相关推荐

发表回复