项目实践：构建实际 JavaScript 项目提升编程技能

天天向上

发布： 2025-02-08 00:19:53

原创

797 人浏览过

通过项目实践，你将更好地理解 JavaScript 的应用，并提升实际开发能力。本章节将带你一步步完成多个项目，从简单的网页应用到后端开发，帮助你巩固所学的 JavaScript 技能。

1. 构建一个简单的网页应用

通过构建一个待办事项应用（To-do List），你将掌握如何使用 JavaScript 和 DOM 操作实现用户交互、数据存储和网页更新。

实现待办事项应用（To-do List）

功能要求：
用户可以添加、编辑、删除待办事项。
用户可以标记任务是否完成。
数据持久化（使用 localStorage 存储任务数据）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To-do List</title>
</head>
<body>
  <h1>To-do List</h1>
  <input type="text" id="taskInput" placeholder="Enter a new task">
  <button onclick="addTask()">Add Task</button>
  <ul id="taskList"></ul>

  <script>
    // 获取任务列表和输入框元素
    const taskList = document.getElementById('taskList');
    const taskInput = document.getElementById('taskInput');

    // 从 localStorage 获取已保存的任务
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];

    // 渲染任务列表
    function renderTasks() {
      taskList.innerHTML = '';
      tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.innerHTML = `${task.text} <button onclick="deleteTask(${index})">Delete</button>`;
        taskList.appendChild(li);
      });
    }

    // 添加新任务
    function addTask() {
      if (taskInput.value.trim() !== '') {
        tasks.push({ text: taskInput.value });
        localStorage.setItem('tasks', JSON.stringify(tasks));
        taskInput.value = '';
        renderTasks();
      }
    }

    // 删除任务
    function deleteTask(index) {
      tasks.splice(index, 1);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      renderTasks();
    }

    // 初始渲染任务列表
    renderTasks();
  </script>
</body>
</html>

这个简单的应用展示了如何使用 JavaScript 和 DOM 操作构建互动页面，并结合 localStorage 实现数据持久化。

2. 使用 Ajax 获取和显示数据

通过 Ajax，你可以实现与服务器的异步通信，并将获取的数据动态更新到网页上，而无需重新加载页面。

实现 Ajax 请求

使用原生 JavaScript 的 XMLHttpRequest 或现代的 fetch() 方法，你可以从服务器请求数据，并通过 DOM 操作将数据显示在网页上。

// 使用 fetch() 请求数据
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    const postList = document.getElementById('postList');
    data.forEach(post => {
      const li = document.createElement('li');
      li.textContent = post.title;
      postList.appendChild(li);
    });
  })
  .catch(error => console.error('Error:', error));

<ul id="postList"></ul>

此代码示例展示了如何通过 Ajax 获取数据并动态更新网页内容，适用于从 API 获取数据并展示的场景。

3. 与服务器交互（通过 REST API）

你可以通过 RESTful API 与后端进行数据交互。现代 JavaScript 提供了 fetch() 和 Axios 等库，使与服务器的通信更加简便。

通过 REST API 获取数据

假设你有一个 REST API，它提供了待办事项的 CRUD（创建、读取、更新、删除）操作。

// 获取待办事项列表
fetch('https://api.example.com/todos')
  .then(response => response.json())
  .then(data => console.log(data));

发送 POST 请求创建新任务

// 创建新任务
const newTask = { text: "New task" };

fetch('https://api.example.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newTask),
})
  .then(response => response.json())
  .then(data => console.log(data));

通过与服务器的交互，你能够构建更复杂的动态网页，增强应用的功能。

4. 构建一个互动网页

互动网页不仅仅是展示信息，还需要根据用户操作实时更新页面内容。

使用 DOM 动态更新网页内容

JavaScript 提供了丰富的 API 用于动态更新网页内容。例如，通过事件监听器捕捉用户输入或点击事件，然后修改 DOM 内容。

document.getElementById('button').addEventListener('click', () => {
  document.getElementById('message').textContent = 'Button clicked!';
});

制作图形界面和动画（CSS + JS）

JavaScript 与 CSS 结合，可以制作各种动画效果。你可以使用 requestAnimationFrame() 来实现平滑的动画效果。

let startTime;

function animate(time) {
  if (!startTime) startTime = time;
  const progress = time - startTime;

  // 动画逻辑
  document.getElementById('box').style.transform = `translateX(${progress / 10}px)`;

  if (progress < 1000) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

这个动画会在 1 秒钟内将一个元素从屏幕的左侧移动到右侧。

5. 使用 Node.js 做后端开发

Node.js 是一个强大的 JavaScript 运行环境，使得开发者能够使用 JavaScript 编写后端代码。通过使用 Node.js，你可以创建服务器、处理请求并与数据库交互。

搭建简单的 Node.js 服务器

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, Node.js!');
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

这个简单的 Node.js 服务器会在 localhost:3000 上运行，响应每个请求。

6. 使用 Express.js 框架构建 API

Express.js 是 Node.js 上的一个流行框架，可以帮助你更轻松地构建 API 和路由。

const express = require('express');
const app = express();
const port = 3000;

app.get('/todos', (req, res) => {
  res.json([{ id: 1, text: 'Learn JavaScript' }]);
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

这个简单的 API 返回一个包含待办事项的 JSON 数据。

7. 与数据库交互（例如 MongoDB）

Node.js 和 Express 可以与数据库进行交互，MongoDB 是一个常用的 NoSQL 数据库，适合与 Node.js 一起使用。

与 MongoDB 进行交互

首先，安装 mongoose 库来简化与 MongoDB 的交互。

npm install mongoose

然后，你可以通过 mongoose 连接到数据库，并执行基本的 CRUD 操作。

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/todolist', { useNewUrlParser: true, useUnifiedTopology: true });

const taskSchema = new mongoose.Schema({ text: String });
const Task = mongoose.model('Task', taskSchema);

// 获取所有任务
Task.find().then(tasks => console.log(tasks));

// 添加新任务
const newTask = new Task({ text: 'Learn MongoDB' });
newTask.save().then(() => console.log('Task saved!'));

通过 Node.js 和 MongoDB，你可以构建一个全栈 JavaScript 应用，支持动态数据存储和管理。

小结

在这一章节中，你通过多个实践项目，掌握了 JavaScript 在前端和后端开发中的实际应用。你学会了如何构建简单的网页应用、如何与服务器交互以及如何使用 Node.js 做后端开发，真正将所学的理论知识应用到实际开发中。这些项目实践将为你成为一名全栈 JavaScript 开发者奠定坚实的基础。