用html怎么调用js

在HTML中调用JavaScript的方法有多种，主要包括内联脚本、嵌入式脚本、外部脚本。其中，外部脚本的使用最为普遍，因为它有助于将结构与行为分离，使代码更为整洁和易于维护。下面将详细介绍这些方法，并重点讲解外部脚本的使用。

一、内联脚本

内联脚本是指直接在HTML元素的事件属性中编写JavaScript代码。常见的事件属性包括onclick、onmouseover等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script Example</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>

内联脚本的优点是简单易用，适用于处理简单的事件。然而，它不利于代码的复用与维护，因此在复杂项目中不推荐使用。

二、嵌入式脚本

嵌入式脚本是在HTML文档的<script>标签内直接编写JavaScript代码。这种方法将JavaScript代码与HTML结构分离，但仍在同一个文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded Script Example</title>
    <script>
        function showAlert() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

嵌入式脚本适用于中小型项目，但对于大型项目，外部脚本更为推荐。

三、外部脚本

外部脚本是指将JavaScript代码保存在独立的.js文件中，并通过<script>标签引入。这种方法将JavaScript代码与HTML完全分离，使代码更为模块化和易于管理。

1、如何引入外部脚本

使用<script>标签的src属性来引入外部JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
    <script src="script.js" defer></script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

文件 script.js 的内容：

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

2、外部脚本的优点

代码复用、易于维护、提高加载速度是外部脚本的主要优点。多页面可以共享同一个JavaScript文件，修改一次即可应用到所有页面。利用浏览器缓存机制，外部脚本文件只需加载一次，提高了页面加载速度。

四、进阶内容

1、脚本加载顺序

默认情况下，脚本在HTML解析时同步加载，可能会阻塞页面渲染。通过defer和async属性可以控制脚本加载和执行的时机。

defer：脚本会在HTML解析完毕后执行，按顺序执行。
async：脚本会尽快执行，不保证执行顺序。

<script src="script.js" defer></script>
<script src="analytics.js" async></script>

2、模块化加载

在现代JavaScript开发中，模块化加载是非常重要的一环。通过<script type="module">标签可以加载ES6模块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Example</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

文件 main.js 的内容：

import { showAlert } from './module.js';
document.querySelector('button').addEventListener('click', showAlert);

文件 module.js 的内容：

export function showAlert() {
    alert('Hello, Module!');
}

五、总结

在HTML中调用JavaScript的方法有多种，最为推荐的是使用外部脚本，因为它有助于代码的复用、易于维护和提高加载速度。同时，了解脚本的加载顺序和模块化加载可以帮助我们在大型项目中更好地管理代码。

通过合理使用JavaScript的各种加载方式，可以使我们的网页更为高效和易于维护。在实际项目中，我们可以根据具体需求选择合适的加载方式，并结合现代技术如ES6模块化来优化代码结构。

相关问答FAQs：

1. 如何在HTML中调用JavaScript？

JavaScript是一种用于为网页添加交互性和动态功能的编程语言。要在HTML中调用JavaScript，您可以使用以下方法之一：

使用<script>标签：在HTML文档的<head>或<body>部分中添加<script>标签，并将JavaScript代码写在<script>标签中。例如：

<script>
    // 在这里编写您的JavaScript代码
</script>

外部JavaScript文件：将JavaScript代码保存到一个外部文件中，然后使用<script>标签的src属性将其链接到HTML文档中。例如：

<script src="yourScript.js"></script>

请注意，JavaScript代码应放在<script>标签中，以确保浏览器正确解析和执行代码。

2. 在HTML中如何调用外部的JavaScript文件？

要在HTML中调用外部的JavaScript文件，您可以使用<script>标签的src属性将文件链接到HTML文档中。例如：

<script src="yourScript.js"></script>

其中，yourScript.js是您保存JavaScript代码的文件名。

请确保外部的JavaScript文件位于正确的路径下，并且在HTML中正确指定了文件的路径和文件名。

3. 如何在HTML中调用JavaScript函数？

要在HTML中调用JavaScript函数，您可以使用以下步骤：

在JavaScript代码中定义函数。例如：

function yourFunction() {
    // 在这里编写您的函数代码
}

在HTML中的适当位置使用<script>标签调用函数。例如：

<button onclick="yourFunction()">点击此处调用函数</button>

在上面的示例中，当用户点击按钮时，yourFunction()函数将被调用。

请确保将JavaScript代码放在<script>标签中，并将函数调用放在适当的HTML元素上，以确保正确执行函数。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3908371