课堂笔记：HTML5 表单与 JavaScript 基础交互（简易计算器）
主要内容：搭建简易计算器前台页面，并实现加减乘除的基础交互逻辑。
一、前台页面搭建（HTML5）
1. 页面结构分析
计算器由以下部分组成：
标题：加粗、换行显示（“简易计算器”）。
输入区域：两个文本框（用于输入数字）。
操作区域：四个按钮（加、减、乘、除）。
结果区域：一个文本框（用于显示计算结果）。
整体布局：所有内容包裹在一个带边框的容器中。
2. 核心 HTML 标签
功能 | 标签 | 说明 |
|---|---|---|
容器 | <div> | 用于包裹整体内容，方便统一加样式 |
标题 | <h3> | 默认加粗、换行 |
文本框 | <input type="text"> | 单行文本输入 |
按钮 | <button> | 双标签，内容写在标签之间 |
3. 样式调整（CSS）
边框：为 div容器添加 border（如：1px solid blue）。
尺寸：调整 div的 width，避免过窄。
间距：使用 padding调整内容与边框的内边距，提升视觉效果。
按钮样式：单独为按钮设置 width、height，使其更美观。
二、JavaScript 交互逻辑
1. 基本思路
1.获取用户输入（两个文本框中的值）。
2.执行计算（根据点击的按钮执行对应运算）。
3.输出结果（将计算结果写入结果文本框）。
2. 事件绑定
使用 onclick事件绑定函数，例如：
<button onclick="add()">+</button>
3. 获取页面元素（DOM 操作）
重点掌握两种获取元素的方法：
方法 | 语法 | 说明 |
|---|---|---|
getElementById | document.getElementById("id名") | 通过 ID 获取单个元素 |
querySelector | document.querySelector("#id名") | ES6 方法，ID 前需加 # |
注意：
使用 querySelector获取 ID 时，选择器需写成 "#id"。
获取的是标签本身，要读取或设置输入框的值，需要使用 .value属性。
4. 数据类型转换
从文本框获取的值默认为 字符串类型。
进行数学运算前，需转换为数值类型，例如：
Number(number1)
否则，“+” 会被当作字符串拼接而非加法运算。
5. 除法特殊处理
需判断除数是否为 0。
若除数为 0，提示错误信息；否则正常计算。
示例逻辑：
if (number2 == 0) {
// 显示错误提示
} else {
// 执行除法运算并显示结果
}
三、关键注意事项
1.单标签写法
2.如 <input>、<br>，注意斜杠前是否需加空格，避免影响后续 JS 交互。
3.函数定义与调用
4.在 HTML 中使用 onclick="函数名()"进行调用。
在 <script>标签中定义具体函数逻辑。
5.代码结构
HTML 负责页面结构。
CSS 负责样式。
JavaScript 负责交互行为，通常写在页面底部或外部文件中。
四、课后任务建议
1.独立完成简易计算器的 HTML 结构与样式。
2.使用 getElementById或 querySelector实现加减乘除功能
重点练习：
数据获取（.value）
类型转换（Number()）
条件判断（除法中判断除数是否为 0）
