在这篇笔记中，我将向大家展示如何使用JavaScript实现一个简单的待办清单应用。通过以下步骤逐步来构建这个项目，从而探讨基本的JavaScript编程概念和实践方法。
1. 项目概述
这个项目的目标是创建一个能够添加、编辑、完成和删除任务的待办清单应用。用户可以输入任务的描述，然后可以在列表中看到所有任务，并可以对其进行操作。
2. HTML 结构
首先应用需要一个简单的HTML结构来构建应用的用户界面。要创建一个输入框、一个添加按钮和一个任务列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="taskInput" placeholder="Enter a task...">
<button id="addTask">Add Task</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>
3. JavaScript 逻辑
编写JavaScript代码，实现待办清单的逻辑：
- 首先我们需要引用待办列表的UL元素和添加按钮：
const taskList = document.getElementById('taskList');
const addTaskButton = document.getElementById('addTask');
- 接下来定义一个数组来存储任务的数据：
let tasks = [];
- 然后可以为添加按钮添加一个点击事件监听器，以便在用户点击时添加任务到列表中：
addTaskButton.addEventListener('click', () => {
const taskInput = document.getElementById('taskInput');
const taskDescription = taskInput.value.trim();
if (taskDescription !== '') {
tasks.push({ description: taskDescription, completed: false });
taskInput.value = '';
updateTaskList();
}
});
在这里，从输入框中获取任务描述，将任务对象添加到数组中，然后更新任务列表。
- 现在编写一个函数来更新任务列表：
function updateTaskList() {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const taskItem = document.createElement('li');
taskItem.innerHTML = `
<input type="checkbox" id="task${index}" ${task.completed ? 'checked' : ''}>
<label for="task${index}">${task.description}</label>
<button class="deleteTask" data-index="${index}">Delete</button>
`;
taskList.appendChild(taskItem);
});
const deleteButtons = document.querySelectorAll('.deleteTask');
deleteButtons.forEach(button => {
button.addEventListener('click', (event) => {
const index = event.target.getAttribute('data-index');
tasks.splice(index, 1);
updateTaskList();
});
});
}
这个函数会首先清空任务列表，然后为每个任务创建一个 li 元素，包括一个复选框用于标记任务完成，任务描述和一个删除按钮。同时，我们添加了删除按钮的点击事件监听器，以便在点击时从数组中删除任务，并更新任务列表。
- 最后，为复选框添加一个监听器，以便在任务完成状态发生变化时更新任务对象：
taskList.addEventListener('change', (event) => {
if (event.target.type === 'checkbox') {
const index = event.target.id.substring(4);
tasks[index].completed = event.target.checked;
}
});
4. 总结
通过这个项目示例，本篇笔记探讨了如何使用JavaScript创建一个简单的待办清单应用。这里涵盖了HTML结构的构建、JavaScript的基本逻辑和DOM操作。同时还实现了添加、编辑、删除任务以及标记任务完成的功能。这个项目展示了如何在实际应用中进行逻辑设计和用户界面交互。
通过这个项目，我了解了如何结合HTML、CSS和JavaScript创建一个完整的应用，以及如何运用创造性思维解决问题。不过这个示例只是一个起点，将来可以进一步扩展，添加更多功能和优化用户体验。在实际开发中，持续学习和实践是不断提升的关键。
