web 5.6

课堂笔记：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）