JavaScript案例

## JavaScript案例：构建一个简单的待办事项应用 ### 引言 JavaScript 是一种广泛应用于网页开发的脚本语言。它允许开发者创建动态、交互式的网页应用。本文将通过一个简单的待办事项应用的开发案例，介绍如何使用 JavaScript 来实现前端逻辑和用户交互。 ### HTML 结构 首先，我们需要一个基本的 HTML 页面结构来承载我们的待办事项应用。 ```html

待办事项列表

添加

``` ### JavaScript 功能实现 接下来，我们将编写 JavaScript 代码来实现待办事项的添加、删除和标记完成等功能。 ```javascript // app.js // 存储待办事项的数组 let todos = []; // 添加待办事项 function addTodo() { const input = document.getElementById('todoInput'); const todo = input.value.trim(); if (todo) { todos.push({ text: todo, completed: false }); input.value = ''; renderTodos(); } } // 渲染待办事项列表 function renderTodos() { const list = document.getElementById('todoList'); list.innerHTML = ''; todos.forEach((todo, index) => { const li = document.createElement('li'); li.textContent = todo.text; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = todo.completed; checkbox.onclick = () => toggleComplete(index); const deleteBtn = document.createElement('button'); deleteBtn.textContent = '删除'; deleteBtn.onclick = () => deleteTodo(index); li.appendChild(checkbox); li.appendChild(deleteBtn); list.appendChild(li); }); } // 切换待办事项完成状态 function toggleComplete(index) { todos[index].completed = !todos[index].completed; renderTodos(); } // 删除待办事项 function deleteTodo(index) { todos.splice(index, 1); renderTodos(); } ``` ### 代码解析 1. **HTML 结构**：我们创建了一个简单的页面结构，包括一个输入框用于添加待办事项，一个按钮用于提交，以及一个无序列表用于显示待办事项。 2. **JavaScript 功能实现**： - `addTodo` 函数：从输入框获取待办事项内容，将其添加到 `todos` 数组中，并重新渲染待办事项列表。 - `renderTodos` 函数：遍历 `todos` 数组，动态生成 HTML 元素并添加到列表中。 - `toggleComplete` 函数：切换指定待办事项的完成状态，并重新渲染列表。 - `deleteTodo` 函数：从 `todos` 数组中删除指定索引的待办事项，并重新渲染列表。 ### 运行效果 将上述 HTML 和 JavaScript 代码保存为文件，并在浏览器中打开 HTML 文件。你将看到一个简单的待办事项应用，可以添加、删除和标记完成待办事项。 ### 总结 通过本案例，我们学习了如何使用 JavaScript 实现一个基本的待办事项应用。这个过程涉及 HTML 结构的搭建、JavaScript 功能的实现以及用户交互的设计。希望这个案例能帮助你更好地理解 JavaScript 在网页开发中的应用。