html里面怎么加载js的变量

在HTML里面加载JS的变量，可以通过直接在HTML文件中嵌入JavaScript代码、使用外部JavaScript文件、通过事件属性绑定JS代码、以及利用模板引擎等方法来实现。其中，直接在HTML中嵌入JavaScript代码是最常见和直观的方法。接下来，我将详细介绍这些方法，并提供示例代码和实践建议。

一、直接在HTML文件中嵌入JavaScript代码

1.1 内联JavaScript代码

在HTML文件的<script>标签中直接嵌入JavaScript代码，这种方法简单直观，适用于小规模的脚本。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        var message = "This is a message from JavaScript";
        document.write(message);
    </script>
</body>
</html>

在上述代码中，<script>标签内的JavaScript代码直接在HTML中运行，并将变量message的内容显示在页面上。

1.2 使用事件属性绑定JavaScript代码

可以在HTML标签的事件属性（如onclick, onload等）中嵌入JavaScript代码，这种方法适用于简单的交互逻辑。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Attribute JavaScript Example</title>
</head>
<body>
    <button onclick="alertMessage()">Click Me</button>
    <script>
        function alertMessage() {
            var message = "Button clicked!";
            alert(message);
        }
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，会触发alertMessage函数，并弹出一个提示框显示变量message的内容。

二、使用外部JavaScript文件

将JavaScript代码放在外部文件中，并在HTML文件中通过<script>标签引用。这种方法有助于分离HTML和JavaScript代码，便于代码维护和复用。以下是一个示例：

2.1 创建外部JavaScript文件

创建一个名为script.js的外部JavaScript文件，内容如下：

var message = "This is a message from an external JavaScript file";
function showMessage() {
    document.write(message);
}

2.2 在HTML文件中引用外部JavaScript文件

在HTML文件中，通过<script>标签引用外部JavaScript文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

当用户点击按钮时，会调用外部JavaScript文件中的showMessage函数，并显示变量message的内容。

三、使用模板引擎加载JS变量

在复杂的Web应用中，通常会使用模板引擎（如EJS、Handlebars等）来加载动态内容，包括JavaScript变量。以下是一个使用EJS模板引擎的示例：

3.1 安装和配置EJS

首先，确保你已经安装了Node.js和Express框架。然后，安装EJS模板引擎：

npm install ejs

在Express应用中配置EJS：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

3.2 创建EJS模板文件

创建一个名为index.ejs的模板文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        var message = "<%= message %>";
        document.write(message);
    </script>
</body>
</html>

3.3 在Express路由中传递变量

在Express路由中传递变量到EJS模板：

app.get('/', (req, res) => {
    res.render('index', { message: 'This is a message from EJS' });
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

当用户访问根路径时，EJS模板会将服务器端传递的变量message嵌入到HTML中，并在页面上显示。

四、结论

通过上述方法，可以在HTML中加载和使用JavaScript变量。每种方法都有其适用的场景和优缺点，选择合适的方法可以提高代码的可读性、可维护性和复用性。直接在HTML文件中嵌入JavaScript代码适用于简单的场景，使用外部JavaScript文件有助于代码的分离和维护，而使用模板引擎则适用于复杂的Web应用。无论选择哪种方法，都应遵循代码规范和最佳实践，以确保代码的质量和性能。