Web-Dev-Beginner

Appearance

Homework2: JavaScript 和 Git 实践 ​

作业目标： ​

  1. 掌握通过 JavaScript 实现用户交互的基础操作。
  2. 熟悉 Git 的基本操作，包括提交代码和版本控制。
  3. 通过 GitHub 提交代码，并思考如何使用 Git 实现“时光倒流”。

任务 1：加法计算器 ​

描述： ​

在这个任务中，你需要创建一个简单的加法计算器，用户输入两个数字，点击按钮后显示这两个数字的和。

要求： ​

  1. HTML 页面中需要包含两个输入框和一个按钮。
  2. 当用户输入两个数字后，点击按钮会弹出两个数字的和，使用 alert() 显示结果。
  3. 不需要验证输入的有效性，本任务纯粹进行加法运算。

提示： ​

  • 使用 document.getElementById() 获取输入框的值：

    javascript
    let num1 = document.getElementById('num1').value;

  • 使用 parseFloat() 将字符串转换为数字以进行加法计算：

    javascript
    let num1 = parseFloat(num1);

任务 2：验证输入的加法计算器 ​

描述： ​

在任务 2 中，基于任务 1 的加法计算器进行扩展。你需要确保用户输入的两个值是有效的数字。如果用户输入不是数字或没有输入任何内容，应在控制台输出错误，并且不弹出结果。

要求： ​

  1. 检查用户输入的内容是否为有效数字。如果其中一个输入无效，在 控制台 输出错误信息，阻止结果弹出。
  2. 如果输入有效，继续计算并显示结果。

提示： ​

  • 使用 isNaN() 函数来检测输入是否为数字：

    javascript
    if (isNaN(num1) || isNaN(num2)) {
  console.error("请输入有效的数字");
}

任务 3：将项目提交到 GitHub ​

描述： ​

在 Lab 中，我们已经为调查问卷项目创建了一个 GitHub 仓库。在这个任务中，你需要将加法计算器的代码也提交到相同的 GitHub 仓库。

要求： ​

  1. 将加法计算器的 HTML 和 JavaScript 文件提交到Lab 中已经创建的 GitHub 仓库，不需要新建仓库。

  2. 每次提交时，请写出有意义的提交信息，描述你所做的更改。

    • 例如，提交加法计算器时，你可以使用类似 "feat: 添加加法计算器功能" 的提交信息。

  3. 提交到远程仓库后，确保你已经推送到 GitHub，并提供 GitHub 仓库的链接作为作业的一部分。

提示： ​

  • 在项目文件夹中使用 git add . 将文件添加到暂存区。
  • 使用 git commit -m "提交信息" 来提交文件，并确保提交信息清晰描述更改。
  • 推送更改到远程仓库时，使用 git push origin main。

思考题：凉风青叶的困惑 ​

凉风青叶的公司老板突然改了主意，决定不再需要将她的个人介绍页面挂在公司的网站上，而是要求将这个页面发布在 LinkedIn 上。青叶顿时感到一阵慌乱，因为她已经把所有的代码提交到了公司网站的 GitHub 仓库中。项目已经集成了个人页面，现在她不知道如何撤回这部分改动。青叶感到有些无助，焦急地向你发消息：“我已经把个人页面提交到仓库了，老板现在说不需要了，我该怎么办？难道我需要从头开始删除这些文件吗？我真的不想手动删除所有改动，然后再重来。”

你顿时想起，自己迟早也会面对类似的“时光倒流”需求。比如说，假设你之前创建了一个加法计算器，现在公司决定不再需要这个功能，只保留调查问卷。你可以使用 Git 恢复项目到仅包含调查问卷的状态，而不必手动删除代码或追踪那些冗余的改动。请你解答青叶的困惑，并解释如何用 Git 实现这个“时光倒流”的操作。

image

  • Git 的版本管理可以帮助你恢复到之前的某个版本，仿佛时光倒流一样。请思考使用 Git 的哪一个命令能够实现这一功能，并解释它是如何帮助你恢复项目到以前的状态的。
  • 请考虑 git reset 和 git checkout 等命令的作用。

总结 ​

本次作业从简单的 JavaScript 加法计算器到输入验证，以及如何将代码提交到 GitHub，涵盖了核心的前端交互和版本管理技能。最后，通过思考题，你将进一步理解 Git 在版本控制中的强大作用，尤其是在项目需求变动时如何恢复到之前的版本。

认真完成每个任务，并将你的项目推送到 GitHub，作为本次作业的提交部分。期待看到你们的作品！有能力的同学可以在完成任务后，编写css来美化一下问卷，并将这一改动提交。