静态网页怎么加js

在静态网页中加入JavaScript的三种常见方法是：内联脚本、内部脚本、外部脚本。 内联脚本将JavaScript代码直接嵌入到HTML元素中，内部脚本在HTML文件的<head>或<body>中加入<script>标签，外部脚本则通过引用外部的.js文件。使用外部脚本更有利于代码的维护和重用。下面将详细介绍这三种方法。

一、内联脚本

内联脚本是最简单的方式，直接在HTML元素的事件属性中编写JavaScript代码。例如，可以在一个按钮的onclick事件中加入JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联脚本示例</title>
</head>
<body>
    <button onclick="alert('按钮被点击了！')">点击我</button>
</body>
</html>

在这个示例中，当用户点击按钮时，会弹出一个提示框。这种方法虽然简单，但不建议在复杂项目中使用，因为它会使HTML和JavaScript代码混合在一起，降低代码的可维护性。

二、内部脚本

内部脚本将JavaScript代码放在<script>标签中，可以放置在HTML文件的<head>或<body>部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部脚本示例</title>
    <script>
        function showAlert() {
            alert('按钮被点击了！');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">点击我</button>
</body>
</html>

在这个示例中，JavaScript代码被封装在一个名为showAlert的函数中，然后通过按钮的onclick事件调用。这种方法比内联脚本更清晰，但在大型项目中，仍然可能导致HTML文件过于冗长。

三、外部脚本

外部脚本是最推荐的方式，将JavaScript代码放在独立的.js文件中，然后在HTML文件中通过<script>标签引用该文件。

首先，创建一个名为script.js的文件，并添加以下内容：

function showAlert() {
    alert('按钮被点击了！');
}

接下来，在HTML文件中引用这个外部脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部脚本示例</title>
    <script src="script.js" defer></script>
</head>
<body>
    <button onclick="showAlert()">点击我</button>
</body>
</html>

在这个示例中，JavaScript代码被放在一个独立的文件中，通过<script src="script.js" defer></script>标签引用。使用defer属性确保脚本在HTML完全解析之后执行。这种方法不仅提高了代码的可维护性，还可以在多个HTML文件中重用相同的JavaScript代码。

四、使用事件监听器

除了直接在HTML中使用事件属性外，还可以使用JavaScript中的事件监听器来处理事件。这种方法更加灵活，有助于保持HTML和JavaScript的分离。

首先，创建一个名为script.js的文件，并添加以下内容：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myButton').addEventListener('click', function() {
        alert('按钮被点击了！');
    });
});

接下来，在HTML文件中引用这个外部脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听器示例</title>
    <script src="script.js" defer></script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

在这个示例中，JavaScript代码在DOM完全加载之后，为按钮添加了一个点击事件监听器。这种方法使HTML更加简洁，同时增强了代码的可读性和可维护性。

五、动态脚本加载

在某些情况下，你可能需要根据特定条件动态加载JavaScript脚本。可以使用JavaScript中的createElement方法来创建并加载脚本标签。

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = function() {
        if (callback) callback();
    };
    document.head.appendChild(script);
}
loadScript('script.js', function() {
    console.log('Script loaded and executed.');
});

在HTML文件中引用这个动态加载脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态脚本加载示例</title>
    <script src="dynamicLoader.js" defer></script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

在这个示例中，dynamicLoader.js文件中的loadScript函数用于动态加载script.js文件。加载完成后，会执行回调函数。这种方法在需要根据条件加载脚本时非常有用。

六、模块化JavaScript

随着前端技术的发展，模块化JavaScript已经成为一种流行的代码组织方式。使用ES6模块，可以更好地管理和重用代码。

首先，创建一个名为module.js的文件，并添加以下内容：

export function showAlert() {
    alert('按钮被点击了！');
}

接下来，在HTML文件中引用这个模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块化JavaScript示例</title>
    <script type="module">
        import { showAlert } from './module.js';
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('myButton').addEventListener('click', showAlert);
        });
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

在这个示例中，module.js文件导出了showAlert函数。在HTML文件中，通过import语句引入这个模块，并在DOM加载完成后为按钮添加了点击事件监听器。模块化JavaScript提高了代码的重用性和可维护性，非常适合大型项目。

七、使用JavaScript框架和库

在实际开发中，使用JavaScript框架和库可以大大提高开发效率和代码质量。常见的框架和库包括React、Vue.js和Angular等。这些工具不仅提供了更强大的功能，还促进了代码的模块化和组件化。

使用React

React是一个用于构建用户界面的JavaScript库。以下是一个简单的React示例：

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    const showAlert = () => {
        alert('按钮被点击了！');
    };
    return (
        <button onClick={showAlert}>点击我</button>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

在HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React示例</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

使用React，可以将用户界面分解成可重用的组件，提高代码的可维护性和可测试性。

使用Vue.js

Vue.js是另一个流行的JavaScript框架，以下是一个简单的Vue.js示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <button @click="showAlert">点击我</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                showAlert() {
                    alert('按钮被点击了！');
                }
            }
        });
    </script>
</body>
</html>

Vue.js提供了简洁的语法和灵活的组件系统，非常适合构建复杂的用户界面。

八、结论

在静态网页中加入JavaScript有多种方法，包括内联脚本、内部脚本和外部脚本。推荐使用外部脚本和模块化JavaScript，以提高代码的可维护性和重用性。对于大型项目，可以考虑使用JavaScript框架和库，如React和Vue.js，以进一步提高开发效率和代码质量。无论采用哪种方式，保持HTML和JavaScript代码的分离都是一个好的实践，有助于提高代码的可读性和维护性。