怎么在静态网页模板中加入js

要在静态网页模板中加入JavaScript，你可以使用内部脚本、外部脚本、或内联事件处理程序。 内部脚本适用于小型项目，外部脚本适用于大型项目和代码重用，而内联事件处理程序可以简化特定事件的处理。

内部脚本、外部脚本、内联事件处理程序，是将JavaScript引入静态网页的三种主要方法。下面将详细介绍内部脚本的方法。

一、内部脚本

内部脚本是指将JavaScript代码直接嵌入到HTML文件的<script>标签中。这样做的好处是可以直接在HTML文件中查看和编辑JavaScript代码，适用于小型项目。

1.1 在`<head>`标签中加入JavaScript

在<head>标签中添加JavaScript代码，可以确保在页面内容加载之前执行JavaScript代码。例如，初始化某些全局变量或设置页面的初始状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态网页模板</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('文档已完全加载并解析');
        });
    </script>
</head>
<body>
    <h1>欢迎来到我的静态网页</h1>
</body>
</html>

在上面的代码中，JavaScript代码被包含在<head>标签内的<script>标签中，并在DOMContentLoaded事件触发时执行。

1.2 在`<body>`标签的底部加入JavaScript

在<body>标签的底部添加JavaScript代码，可以确保在页面内容加载完成之后再执行JavaScript代码。这种方式适用于需要操作页面内容的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态网页模板</title>
</head>
<body>
    <h1>欢迎来到我的静态网页</h1>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('文档已完全加载并解析');
        });
    </script>
</body>
</html>

在上面的代码中，JavaScript代码被包含在<body>标签的底部，并在DOMContentLoaded事件触发时执行。

二、外部脚本

外部脚本是指将JavaScript代码存储在独立的文件中，并通过<script>标签的src属性将其引入到HTML文件中。这样做的好处是代码的可维护性和重用性更高，适用于大型项目。

2.1 创建外部JavaScript文件

首先，创建一个新的JavaScript文件，例如script.js，并在其中编写JavaScript代码。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('文档已完全加载并解析');
});

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

在HTML文件的<head>标签或<body>标签的底部，通过<script>标签的src属性引入外部JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态网页模板</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>欢迎来到我的静态网页</h1>
</body>
</html>

或者：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态网页模板</title>
</head>
<body>
    <h1>欢迎来到我的静态网页</h1>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，外部JavaScript文件script.js被引入到HTML文件中，并在页面加载时执行。

三、内联事件处理程序

内联事件处理程序是指直接在HTML元素的事件属性中编写JavaScript代码。这样做的好处是可以简化特定事件的处理，但不推荐用于复杂的项目。

3.1 在HTML元素中添加内联事件处理程序

在HTML元素的事件属性中编写JavaScript代码，例如在按钮的onclick属性中编写代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态网页模板</title>
</head>
<body>
    <h1>欢迎来到我的静态网页</h1>
    <button onclick="alert('按钮被点击')">点击我</button>
</body>
</html>

在上面的代码中，按钮的onclick属性中包含JavaScript代码，当按钮被点击时，会弹出一个提示框。

四、总结

在静态网页模板中加入JavaScript，有多种方法可以选择，包括内部脚本、外部脚本、内联事件处理程序。每种方法都有其优缺点，选择适合项目需求的方法。对于大型项目，推荐使用外部脚本，以提高代码的可维护性和重用性。对于小型项目或特定事件处理，可以使用内部脚本或内联事件处理程序。

通过这些方法，可以轻松地在静态网页模板中加入JavaScript，实现动态交互效果和功能。在实际开发中，建议结合使用这些方法，以获得最佳的开发体验和效果。