JavaScript实战案例
# JavaScript实战案例：构建一个简单的待办事项应用
## 引言
JavaScript是一种广泛应用于网页开发的脚本语言，它使得网页变得动态和交互式。通过JavaScript，我们可以创建复杂的用户界面，实现数据验证、异步操作以及与后端服务器的通信等功能。本文将通过一个简单的待办事项应用的实战案例，介绍如何使用JavaScript来增强网页的功能性和用户体验。
## 简介
待办事项应用是一种常见的Web应用，用户可以在其中添加、删除和标记完成的任务。在本实战案例中，我们将构建一个基本的待办事项应用，用户可以通过表单添加任务，并通过按钮标记任务为已完成。
## HTML结构
首先，我们需要创建一个简单的HTML页面，包含一个表单用于输入任务，以及一个列表用于显示所有任务。
```html
待办事项应用
待办事项应用
```
## JavaScript逻辑
接下来，我们将编写JavaScript代码来处理表单提交和任务列表的更新。
```javascript
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
// 添加任务到列表
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const taskText = taskInput.value.trim();
if (taskText) {
const listItem = document.createElement('li');
listItem.textContent = taskText;
listItem.addEventListener('click', function() {
listItem.classList.toggle('completed');
});
taskList.appendChild(listItem);
taskInput.value = ''; // 清空输入框
}
});
});
```
### 代码解析
1. **事件监听**：我们使用`DOMContentLoaded`事件确保DOM完全加载后再绑定事件。
2. **阻止默认提交**：在表单提交时，使用`event.preventDefault()`阻止表单的默认提交行为，这样就不会刷新页面。
3. **获取元素**：通过`getElementById`获取表单、输入框和列表元素。
4. **添加任务**：当表单提交时，从输入框获取任务文本，创建一个新的列表项，并设置其文本内容为任务文本。
5. **标记完成**：为每个任务项添加点击事件，当任务被点击时，切换其`completed`类，从而改变任务项的样式以表示任务已完成。
## CSS样式
为了让任务列表更加美观，我们可以添加一些简单的CSS样式。
```css
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
margin-bottom: 20px;
}
#task-input {
padding: 10px;
width: 200px;
}
button {
padding: 10px 20px;
margin-left: 10px;
}
#task-list {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
}
li.completed {
background-color: #eee;
}
```
## 结论
通过上述步骤，我们成功构建了一个简单的待办事项应用。这个应用展示了如何使用JavaScript来处理用户输入、更新DOM元素以及添加交互功能。在实际开发中，JavaScript可以用来实现更复杂的功能，如表单验证、数据存储、用户认证等。希望这个实战案例能够帮助你更好地理解JavaScript的应用。
## 参考资料
- [MDN Web Docs](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
- [W3Schools](https://www.w3schools.com/js/)