html里js代码怎么写的

在HTML中编写JavaScript代码的方式有多种，如通过内联脚本、内部脚本以及外部脚本等方式。 其中，最推荐的方式是使用外部脚本文件，这样可以提高代码的可维护性和重用性。具体方式包括：在HTML标签的<script>元素中直接编写JavaScript代码、通过src属性引入外部JS文件、以及在事件属性中嵌入JavaScript代码。使用外部脚本文件可以让代码更易于管理和调试。

一、内联脚本

内联脚本是指直接在HTML标签的<script>元素中编写JavaScript代码。这种方式适合于少量的脚本代码，或者需要立即执行的简单任务。

<!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>
    <h1>Hello, World!</h1>
    <script>
        document.write("This is an inline script example.");
    </script>
</body>
</html>

二、内部脚本

内部脚本是指在HTML文档的<head>或<body>部分通过<script>标签编写JavaScript代码。这种方式适合于中等量的脚本代码。

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

三、外部脚本

外部脚本是通过<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"></script>
</head>
<body>
    <h1>External Script Example</h1>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

script.js内容：

function showMessage() {
    alert("Hello from external script!");
}

四、事件属性中的脚本

事件属性中的脚本是将JavaScript代码直接嵌入到HTML标签的事件属性中。这种方式适合于非常短的代码片段。

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

五、使用模块化的JavaScript

现代JavaScript支持模块化编程，可以通过<script type="module">标签来引入模块化的JavaScript代码。这种方式适合于大型项目，能够更好地组织和管理代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Script Example</title>
    <script type="module">
        import { showMessage } from './module.js';
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelector('button').addEventListener('click', showMessage);
        });
    </script>
</head>
<body>
    <h1>Module Script Example</h1>
    <button>Click Me</button>
</body>
</html>

module.js内容：

export function showMessage() {
    alert("Hello from module script!");
}

六、总结

通过上述的几种方式，您可以根据项目的需求选择最合适的方式来编写JavaScript代码。无论是内联脚本、内部脚本还是外部脚本，它们各有优缺点。外部脚本文件和模块化编程是最推荐的方式，因为它们有助于代码的可维护性和重用性。

此外，在团队协作和项目管理中，使用一些项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助更好地管理和协调代码的开发过程。这些工具不仅可以提高团队的工作效率，还可以确保项目的顺利进行。