【JavaScript】3.1 项目实践：制作一个简单的网页应用
文章目录
-
- 项目需求
- HTML结构
- JavaScript逻辑
-
- 添加待办事项
- 标记待办事项
- 删除待办事项
- 保存待办事项
- 总结
在此章节中，我们将学习如何使用JavaScript创建一个简单的网页应用。这将是一个待办事项列表应用，用户可以添加新的待办事项，标记已完成的事项，以及删除事项。通过这个项目，我们将学习如何使用JavaScript操作DOM，处理事件，以及使用localStorage进行数据存储。
项目需求
我们的待办事项列表应用需要满足以下需求：
- 用户可以在输入框中输入待办事项，然后点击添加按钮，将待办事项添加到列表中。
- 用户可以点击待办事项旁边的复选框，将待办事项标记为已完成。
- 用户可以点击待办事项旁边的删除按钮，将待办事项从列表中删除。
- 用户关闭浏览器后，待办事项列表的状态应该被保存下来，用户再次打开浏览器时，应该能看到之前的待办事项。
HTML结构
首先，我们需要创建HTML页面的基本结构。我们需要一个输入框，一个添加按钮，以及一个待办事项列表。
DOCTYPE html>
<html>
<head>
<title>Todo Listtitle>
head>
<body>
<input id="todoInput" type="text" placeholder="What needs to be done?">
<button id="addButton">Addbutton>
<ul id="todoList">ul>
<script src="app.js">script>
body>
html>
在这个HTML文件中，我们有一个input元素用于输入待办事项，一个button元素用于添加待办事项，以及一个ul元素用于显示待办事项列表。我们还包含了一个外部的JavaScript文件app.js，这个文件将包含我们的应用逻辑。
JavaScript逻辑
接下来，我们需要编写JavaScript代码来实现应用的逻辑。我们首先需要获取HTML元素的引用，然后对这些元素进行操作。
var todoInput = document.getElementById('todoInput');
var addButton = document.getElementById('addButton');
var todoList = document.getElementById('todoList');
添加待办事项
我们需要监听添加按钮的点击事件。当点击事件发生时，我们创建一个新的待办事项，并添加到列表中。
addButton.addEventListener('click', function() {
var todoText = todoInput.value; // 获取待办事项的文本
todoInput.value = ''; // 清空输入框
var todoItem = document.createElement('li'); // 创建一个新的li元素
todoItem.textContent = todoText; // 设置li元素的文本
var checkbox = document.createElement('input'); // 创建一个新的input元素
checkbox.type = 'checkbox'; // 设置input元素的类型为checkbox
todoItem.prepend(checkbox); // 将checkbox添加到li元素的前面
var deleteButton = document.createElement('button'); // 创建一个新的button元素
deleteButton.textContent = 'Delete'; // 设置button元素的文本
todoItem.append(deleteButton); // 将button添加到li元素的后面
todoList.append(todoItem); // 将li元素添加到列表中
});
在这个代码中，我们首先获取待办事项的文本，然后清空输入框。然后，我们创建一个新的li元素，并设置其文本。我们还创建了一个复选框和一个删除按钮，并添加到li元素中。最后，我们将li元素添加到列表中。
标记待办事项
我们需要监听复选框的点击事件。当点击事件发生时，我们将待办事项标记为已完成。
todoList.addEventListener('change', function(event) {
if (event.target.type === 'checkbox') {
var checkbox = event.target;
var todoItem = checkbox.parentElement;
todoItem.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
}
});
在这个代码中，我们监听了列表的change事件。当复选框的状态改变时，change事件会被触发。我们检查事件的目标是否是复选框，如果是，我们获取复选框和其父元素（即li元素），然后根据复选框的状态来修改li元素的样式。
删除待办事项
我们需要监听删除按钮的点击事件。当点击事件发生时，我们将待办事项从列表中删除。
todoList.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
var button = event.target;
var todoItem = button.parentElement;
todoList.removeChild(todoItem);
}
});
在这个代码中，我们监听了列表的click事件。当删除按钮被点击时，click事件会被触发。我们检查事件的目标是否是按钮，如果是，我们获取按钮和其父元素（即li元素），然后从列表中删除li元素。
保存待办事项
我们需要使用localStorage来保存待办事项的状态。当添加、标记或删除待办事项时，我们需要更新localStorage。
首先，我们需要在页面加载时，从localStorage中读取待办事项的状态，并更新列表。
window.addEventListener('load', function() {
var todos = JSON.parse(localStorage.getItem('todos')) || [];
for (var i = 0; i < todos.length; i++) {
var todo = todos[i];
createTodoItem(todo.text, todo.completed);
}
});
在这个代码中，我们监听了load事件。当页面加载时，我们从localStorage中读取待办事项的状态，然后用这些状态来创建待办事项。
然后，我们需要在添加、标记或删除待办事项时，更新localStorage。
function updateLocalStorage() {
var todos = [];
var todoItems = todoList.children;
for (var i = 0; i < todoItems.length; i++) {
var todoItem = todoItems[i];
var text = todoItem.textContent;
var completed = todoItem.querySelector('input').checked;
todos.push({ text: text, completed: completed });
}
localStorage.setItem('todos', JSON.stringify(todos));
}
在这个函数中，我们遍历待办事项列表，然后将每个待办事项的文本和完成状态保存到一个数组中。然后，我们将这个数组转换为JSON字符串，并保存到localStorage中。
我们需要在添加、标记或删除待办事项的事件处理函数中，调用这个函数。
addButton.addEventListener('click', function() {
// ...
updateLocalStorage();
});
todoList.addEventListener('change', function(event) {
// ...
updateLocalStorage();
});
todoList.addEventListener('click', function(event) {
// ...
updateLocalStorage();
});
总结
通过这个项目，我们学习了如何使用JavaScript来创建一个简单的网页应用。我们学习了如何操作DOM，处理事件，以及使用localStorage进行数据存储。这是一个很好的实践项目，通过它我们可以更好地理解和应用JavaScript的基本概念。
在接下来的章节中，我们将深入学习更多关于JavaScript的知识。希望你在学习的过程中能够找到乐趣，并且通过学习JavaScript，开启你的编程之旅！
