课六：JavaScript基础

一、核心知识点

• JavaScript基础语法：
  • 变量声明：let/const/var（推荐let/const）
  • 数据类型：数字、字符串、布尔值、对象、数组、null/undefined
  • 运算符：算术(+ - * / %)、赋值(=)、比较(== ===)、逻辑(&& || !)
  • 流程控制：if-else、switch、for/while循环
• 函数：
  • 函数声明/表达式、箭头函数
  • 参数、返回值、作用域
• DOM操作：
  • 获取元素：getElementById、querySelector/querySelectorAll
  • 事件绑定：addEventListener
  • 修改元素：textContent、innerHTML、style、classList
• 事件处理：
  • 常用事件：click、keydown、load
  • 事件对象、事件委托

二、实操实例

实例名称

简易计算器（支持加减乘除、取余、清空、删除）

实例目标

制作一个功能完整的网页计算器，掌握JavaScript变量、函数、DOM操作、事件处理等核心技能。

三、详细实现步骤

📁 步骤1：创建文件结构

📄 步骤2：编写HTML结构

🎨 步骤3：编写CSS样式

⚙️ 步骤4：编写JavaScript逻辑

▶️ 步骤5：运行与验证

1. 直接在上方演示区点击按钮，验证所有功能：
   • 数字输入：点击0-9和小数点，显示区域正确显示
   • AC清空：点击AC，显示重置为0，状态清空
   • DEL删除：点击DEL，删除最后一个字符
   • 运算功能：支持+、-、×、÷、%运算，结果正确
   • 异常处理：除数为0时显示"错误"，避免多个小数点
2. 也可以将代码复制到本地运行，进一步调试和学习。

四、关键注意事项

• 变量声明：使用let声明可变变量，避免全局变量污染。
• DOM操作：页面加载完成后再获取元素（使用DOMContentLoaded事件）。
• 事件处理：使用事件委托（统一处理所有按钮点击），减少事件绑定数量。
• 数据验证：处理小数点重复输入、除数为0等异常情况。
• 小数精度：使用toFixed()处理JavaScript浮点运算精度问题。
• 用户体验：点击运算符后自动重置显示，提升操作流畅性。