怎么在页面上写js

在页面上写JS的多种方法包括：在HTML文件中嵌入内联脚本、在外部文件中编写脚本并链接、使用模板引擎生成动态内容。最常用的方法是将JavaScript代码放在外部文件中，这样可以提高代码的可维护性、复用性和加载速度。

一、在HTML文件中嵌入内联脚本

在HTML文件中直接嵌入JavaScript代码是一种简单而直接的方法，适用于小规模的脚本。可以通过<script>标签将JavaScript代码直接嵌入到HTML文件的<head>或<body>部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript Example</title>
    <script>
        function showMessage() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

在上述代码中，JavaScript代码被嵌入在<script>标签内，并放置在<head>部分。点击按钮时，将调用showMessage函数，显示一个弹出消息框。

二、使用外部JavaScript文件

将JavaScript代码放在外部文件中是一个更好的实践，因为它提高了代码的可维护性和复用性。外部文件的扩展名通常为.js。可以通过<script>标签的src属性链接外部JavaScript文件。

外部JavaScript文件（example.js）：

function showMessage() {
    alert("Hello, World!");
}

HTML文件：

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

在这种方法中，JavaScript代码被放在example.js文件中，然后通过<script>标签的src属性引入到HTML文件中。

三、使用模板引擎生成动态内容

在动态网页开发中，通常会使用模板引擎（如EJS、Handlebars）来生成包含JavaScript代码的HTML页面。这种方法适用于需要动态内容的场景。

EJS模板文件（index.ejs）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
    <script>
        function showMessage() {
            alert("Hello, <%= message %>!");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

Node.js服务器代码：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
    res.render('index', { message: 'World' });
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在上述代码中，EJS模板引擎被用来动态生成HTML页面，其中包含JavaScript代码。

四、使用现代JavaScript框架和库

现代JavaScript框架和库（如React、Vue、Angular）提供了更强大和灵活的方式来在页面上写JavaScript代码。

使用React：

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    const showMessage = () => {
        alert("Hello, World!");
    };
    return (
        <button onClick={showMessage}>Click Me</button>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

在使用React时，JavaScript代码被直接写在组件中，通过事件处理函数来实现交互。

五、结合CSS和JavaScript进行动态交互

JavaScript不仅可以用来处理逻辑，还可以与CSS结合，实现动态的页面交互效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS and JavaScript Interaction</title>
    <style>
        .hidden {
            display: none;
        }
        .visible {
            display: block;
        }
    </style>
    <script>
        function toggleVisibility() {
            const element = document.getElementById('message');
            if (element.classList.contains('hidden')) {
                element.classList.remove('hidden');
                element.classList.add('visible');
            } else {
                element.classList.remove('visible');
                element.classList.add('hidden');
            }
        }
    </script>
</head>
<body>
    <button onclick="toggleVisibility()">Toggle Message</button>
    <div id="message" class="hidden">Hello, World!</div>
</body>
</html>

在这个示例中，通过JavaScript控制CSS类的添加和移除，可以实现元素的动态显示和隐藏。

六、使用项目管理系统进行前端开发

在团队合作中，使用项目管理系统可以提高开发效率和代码质量。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

PingCode提供了专业的研发项目管理功能，适用于大型项目的协作和管理。它支持需求管理、缺陷跟踪、任务分配等功能，可以帮助团队更好地规划和执行项目。

Worktile是一款通用项目协作软件，适用于各种类型的项目管理。它提供了任务管理、时间跟踪、文档协作等功能，帮助团队高效协作，提升工作效率。

七、调试和优化JavaScript代码

在编写JavaScript代码时，调试和优化是必不可少的环节。现代浏览器提供了强大的开发者工具，可以帮助开发者进行代码调试和性能优化。

调试JavaScript代码：

使用console.log：在代码中插入console.log语句，可以输出变量值和调试信息。
设置断点：在浏览器开发者工具中，可以设置断点，逐步执行代码，检查变量状态和执行流程。
查看网络请求：通过开发者工具的“网络”面板，可以查看网络请求的详细信息，检查请求和响应是否正确。

优化JavaScript代码：

减少DOM操作：频繁的DOM操作会导致性能问题，尽量减少DOM操作的次数。
使用事件委托：在处理大量相似的事件时，可以使用事件委托，减少事件处理器的数量。
避免全局变量：全局变量会增加命名冲突的风险，尽量使用局部变量或模块化的方式管理代码。

八、使用现代JavaScript特性

现代JavaScript（ES6及以上）引入了许多新特性，可以提高代码的可读性和可维护性。

箭头函数：

const showMessage = () => {
    alert("Hello, World!");
};

模板字符串：

const name = "World";
const message = `Hello, ${name}!`;
alert(message);

解构赋值：

const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name, age);

模块化：

// module.js
export const showMessage = () => {
    alert("Hello, World!");
};
// main.js
import { showMessage } from './module.js';
showMessage();

通过使用这些现代JavaScript特性，可以编写更简洁和高效的代码。

九、总结

在页面上写JavaScript代码的方法有很多种，可以根据具体需求选择合适的方法。将JavaScript代码放在外部文件中是一个常见的最佳实践，可以提高代码的可维护性和复用性。同时，结合项目管理系统，如PingCode和Worktile，可以提高团队的协作效率和项目管理水平。在实际开发中，调试和优化JavaScript代码也是必不可少的环节，可以通过浏览器开发者工具进行调试，并使用现代JavaScript特性提高代码质量。