📌  相关文章
📜  如何在 html 中添加 javascript - Javascript (1)

📅  最后修改于: 2023-12-03 15:38:16.621000             🧑  作者: Mango

如何在 HTML 中添加 JavaScript

在 HTML 中添加 JavaScript 非常简单，只需要在 HTML 文件中使用 <script> 标签就可以了。

1. 在 HTML 中直接添加 JavaScript

在 HTML 文件中可以使用 <script> 标签直接添加 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>JavaScript 示例</h1>
    <script>
        alert('Hello, World!');
    </script>
</body>
</html>

上面的代码会在页面加载时弹出一个对话框，显示 "Hello, World!"。注意，JavaScript 代码必须放在 <script> 标签内部。

在实际开发中，我们一般会把 JavaScript 代码放在一个 .js 文件中，然后在 HTML 文件中使用 <script> 标签引用这个文件。

2. 在 HTML 中引用外部 JavaScript 文件

在 HTML 文件中使用 <script> 标签引用外部 JavaScript 文件非常简单。只需要在 <script> 标签中指定 JavaScript 文件的 URL 就可以了，例如：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>JavaScript 示例</h1>
    <script src="main.js"></script>
</body>
</html>

注意，使用外部 JavaScript 文件时，JavaScript 代码必须放在 .js 文件中，不能放在 HTML 文件中。另外，引用外部 JavaScript 文件时，如果 URL 中没有指定协议，浏览器会默认使用当前页面的协议，例如，如果当前页面是通过 HTTPS 访问的，那么引用的 JavaScript 文件也必须使用 HTTPS 协议来访问。

3. 在 HTML 中添加内部 JavaScript 代码

除了在 <script> 标签中添加 JavaScript 代码和引用外部 JavaScript 文件外，还可以在 HTML 元素中使用 on 属性添加内部 JavaScript 代码。例如：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>JavaScript 示例</h1>
    <button onclick="alert('Hello, World!')">点击按钮</button>
</body>
</html>

上面的代码会在页面中添加一个按钮，当用户点击按钮时，会弹出一个对话框，显示 "Hello, World!"。注意，使用内部 JavaScript 代码时，必须使用双引号将 JavaScript 代码包裹起来。