JavaScript：让页面产生交互

先认识“输入—处理—输出”#

用户点击按钮是输入；JavaScript 判断任务是否完成是处理；页面更新文字是输出。绝大多数程序都可以先按这个思路拆开。

语言基础#

const 与 let；字符串、数字、布尔值、null、undefined；
数组和对象；
条件、循环、函数；
作用域；
模块 import/export；
错误和 try/catch。

const task = {
  id: 1,
  title: "完成 JavaScript 练习",
  completed: false
};

function toggleTask(item) {
  return { ...item, completed: !item.completed };
}

函数先返回新对象，会比到处直接修改共享数据更容易理解和排错。

DOM 与事件#

DOM 是浏览器把 HTML 转换成的可操作对象树。

<button id="complete-button" type="button">标记完成</button>
<p id="status" aria-live="polite">尚未完成</p>

const button = document.querySelector("#complete-button");
const status = document.querySelector("#status");

button.addEventListener("click", () => {
  status.textContent = "已经完成";
});

优先使用 textContent 写入普通文字。把用户输入直接交给 innerHTML 可能造成跨站脚本风险。

数组方法#

const pending = tasks.filter(task => !task.completed);
const titles = tasks.map(task => task.title);
const current = tasks.find(task => task.id === 3);

先能用循环解决，再理解 map、filter、find、reduce，不要只背写法。

异步与网络请求#

async function loadTasks() {
  const response = await fetch("/api/tasks");
  if (!response.ok) {
    throw new Error("加载失败：" + response.status);
  }
  return response.json();
}

try {
  const tasks = await loadTasks();
  renderTasks(tasks);
} catch (error) {
  showError("任务暂时无法加载，请稍后再试。", error);
}

网络请求可能慢、失败或返回无效数据。界面需要加载、成功、空数据和失败四种状态。

表单与数据校验#

客户端校验改善体验，但不能替代后端校验。前端可以提示“标题不能为空”，后端仍要重新检查，因为请求可以绕过网页直接发送。

浏览器存储#

localStorage 适合少量、非敏感的字符串数据。对象需要转成 JSON 保存和读取。不要保存密码、长期 Token 或重要隐私数据。

需要理解#

值与引用、浅拷贝；
事件冒泡与事件委托；
Promise 和事件循环的基本直觉；
日期与时区；
防抖、节流；
模块与包的区别；
XSS、CORS、Cookie 的基本概念。

常见错误#

忘记检查 response.ok；
把字符串 "1" 和数字 1 混用；
页面元素还没出现就操作 DOM；
重复绑定事件；
使用全局变量保存所有状态；
只写成功情况，没有错误和空状态；
把前端隐藏按钮当作权限控制。

动手项目：任务清单#

实现新增、完成、删除、筛选和本地保存。刷新后数据还在；输入为空时显示就近错误；只用键盘可以完成所有操作；每个操作在控制台没有错误。

完成标准#

能使用对象、数组、函数和条件拆分需求。
能监听事件并安全更新 DOM。
能处理异步请求的加载、成功、空和失败状态。
能使用开发者工具查看错误和断点。
关闭教程后可以重新完成任务清单。