Homework2: JavaScript 和 Git 实践
作业目标:
- 掌握通过 JavaScript 实现用户交互的基础操作。
- 熟悉 Git 的基本操作,包括提交代码和版本控制。
- 通过 GitHub 提交代码,并思考如何使用 Git 实现 “时光倒流”。
任务 1:加法计算器
描述:
在这个任务中,你需要创建一个简单的加法计算器,用户输入两个数字,点击按钮后显示这两个数字的和。
要求:
- HTML 页面中需要包含两个输入框和一个按钮。
- 当用户输入两个数字后,点击按钮会弹出两个数字的和,使用
alert()
显示结果。 - 不需要验证输入的有效性,本任务纯粹进行加法运算。
提示:
使用
document.getElementById()
获取输入框的值:javascriptlet num1 = document.getElementById('num1').value;
1使用
parseFloat()
将字符串转换为数字以进行加法计算:javascriptlet num1 = parseFloat(num1);
1
任务 2:验证输入的加法计算器
描述:
在任务 2 中,基于任务 1 的加法计算器进行扩展。你需要确保用户输入的两个值是有效的数字。如果用户输入不是数字或没有输入任何内容,应在控制台输出错误,并且不弹出结果。
要求:
- 检查用户输入的内容是否为有效数字。如果其中一个输入无效,在 控制台 输出错误信息,阻止结果弹出。
- 如果输入有效,继续计算并显示结果。
提示:
使用
isNaN()
函数来检测输入是否为数字:javascriptif (isNaN(num1) || isNaN(num2)) { console.error("请输入有效的数字"); }
1
2
3
任务 3:将项目提交到 GitHub
描述:
在 Lab 中,我们已经为调查问卷项目创建了一个 GitHub 仓库。在这个任务中,你需要将加法计算器的代码也提交到相同的 GitHub 仓库。
要求:
将加法计算器的 HTML 和 JavaScript 文件提交到 Lab 中已经创建的 GitHub 仓库,不需要新建仓库。
每次提交时,请写出有意义的提交信息,描述你所做的更改。
- 例如,提交加法计算器时,你可以使用类似
"feat: 添加加法计算器功能"
的提交信息。
- 例如,提交加法计算器时,你可以使用类似
提交到远程仓库后,确保你已经推送到 GitHub,并提供 GitHub 仓库的链接作为作业的一部分。
提示:
- 在项目文件夹中使用
git add .
将文件添加到暂存区。 - 使用
git commit -m "提交信息"
来提交文件,并确保提交信息清晰描述更改。 - 推送更改到远程仓库时,使用
git push origin main
。
思考题:凉风青叶的困惑
凉风青叶的公司老板突然改了主意,决定不再需要将她的个人介绍页面挂在公司的网站上,而是要求将这个页面发布在 LinkedIn 上。青叶顿时感到一阵慌乱,因为她已经把所有的代码提交到了公司网站的 GitHub 仓库中。项目已经集成了个人页面,现在她不知道如何撤回这部分改动。青叶感到有些无助,焦急地向你发消息:“我已经把个人页面提交到仓库了,老板现在说不需要了,我该怎么办?难道我需要从头开始删除这些文件吗?我真的不想手动删除所有改动,然后再重来。”
你顿时想起,自己迟早也会面对类似的 “时光倒流” 需求。比如说,假设你之前创建了一个加法计算器,现在公司决定不再需要这个功能,只保留调查问卷。你可以使用 Git 恢复项目到仅包含调查问卷的状态,而不必手动删除代码或追踪那些冗余的改动。请你解答青叶的困惑,并解释如何用 Git 实现这个 “时光倒流” 的操作。
- Git 的版本管理可以帮助你恢复到之前的某个版本,仿佛时光倒流一样。请思考使用 Git 的哪一个命令能够实现这一功能,并解释它是如何帮助你恢复项目到以前的状态的。
- 请考虑
git reset
和git checkout
等命令的作用。
总结
本次作业从简单的 JavaScript 加法计算器到输入验证,以及如何将代码提交到 GitHub,涵盖了核心的前端交互和版本管理技能。最后,通过思考题,你将进一步理解 Git 在版本控制中的强大作用,尤其是在项目需求变动时如何恢复到之前的版本。
认真完成每个任务,并将你的项目推送到 GitHub,作为本次作业的提交部分。期待看到你们的作品!有能力的同学可以在完成任务后,编写 css 来美化一下问卷,并将这一改动提交。