软件工程实践第一次作业-CSDN博客

本文链接：https://blog.csdn.net/daidaidai___/article/details/133280761

软件工程实践第一次作业

作业基本信息

这个作业属于哪个课程	<班级的链接>
这个作业要求在哪里	https://bbs.csdn.net/topics/617294583
这个作业的目标 <写上具体方面>	完成一个具有可视化界面的科学计算器
其他参考文献 …	https://www.cnblogs.com/xinz/archive/2011/10/22/2220872.html

0.Gitcode项目地址

项目代码链接

1.PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）

Planning	计划	20	30
• Estimate	• 估计这个任务需要多少时间	20	15
Development	开发	420	480
• Analysis	• 需求分析 (包括学习新技术）	120	150
• Design Spec	• 生成设计文档	10	10
• Design Review	• 设计复审	10	10
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	15	20
• Design	• 具体设计	30	20
• Coding	• 具体编码	80	120
• Code Review	• 代码复审	20	30
• Test	• 测试（自我测试，修改代码，提交修改）	60	80
Reporting	报告	20	20
• Test Repor	• 测试报告	40	50
• Size Measurement	• 计算工作量	20	20
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	20	15
合计		905	1070

2.界面展示

在这里插入图片描述

3.解题思路描述

要实现一个可视化的计算器有着许多的方法，我的第一反应是可以利用Python或者html，css和javascript来进行实现。Python 的语法简单明了，易于理解和编写，有大量的第三方库和工具，可以快速构建应用程序，但是Python制作的计算器界面相对简洁，缺少一定的美感，缺乏观赏性。再加上对于上述的两中语言，我的接触都相对较少。html，css和javascript作为主流的前端开发工具，我对此也是非常感兴趣。因此为了追求相对更为有美感的界面和自身的兴趣，我选择了用html，css和javascript来进行开发。

1.HTML
使用 div 元素和 class 属性来定义计算器的布局和样式，用到button来定义计算器的按钮操作，再定义屏幕显示界面。

2.CSS
运用CSS来对计算机的样式进行修改，调整，对其相应的背景颜色，字体大小，字体颜色等进行修改完善，使计算器的外观更为优美。

3.JavaScript
使用 JavaScript 来实现计算器的功能。在点击数字按钮时可以将数字添加到显示屏幕上中，在点击运算符按钮时执行相应的运算操作。实现清零运算，sin，cos等三角函数运算和幂运算等操作。

4.实现过程

1.先简单的利用html画出一个计算器的框架。使用 div和 class 来定义计算器的布局和样式。再用container 类用于包裹整个计算器。display-screen 类用于显示显示屏，button 类用于定义按钮的，btn-operator 类用于定义运算符按钮，btn-number 类用于定义数字按钮，btn-equal 类用于定义等号按钮。

2.对画出的计算器框架进行美化，可以使用color、background、box-shadow等属性来设置计算器的样式。可以使用 CSS 选择器来选择不同的元素，并为其设置相应的样式属性，如 background-color、color、font-size 等。

3.创建使用 JavaScript 来实现计算器的功能。在点击数字按钮时将数字添加到输入框中，点击运算符按钮时执行相应的运算操作等。用JavaScript中的内置函数来实现加法等基本四则运算，通过调用第三方库来实现sin，cos等更为复杂的计算，使用 innerHTML 属性来修改输入框中的值。

5.关键代码

1）HTML构造计算器框架

 <tr>
                        <td><button class="btn-operator" id="x^2">x^2</button></td>
                        <td><button class="btn-operator" id="x^3">x^3</button></td>
                        <td><button class="btn-operator" id="x^y">x^y</button></td>
                        <td><button class="btn-operator" id="clear">C</button></td>
                        <td><button class="btn-operator" id="/">&divide;</button></td>
                        <td><button class="btn-operator" id="*">&times;</button></td>
                        <td><button class="btn-operator" id="backspace"><</button></td>
                        
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="x!">x!</button></td>
                        <td><button class="btn-operator" id="√">√</button></td>
                        <td><button class="btn-operator" id="%">%</button></td>
                        <td><button class="btn-number" id="7">7</button></td>
                        <td><button class="btn-number" id="8">8</button></td>
                        <td><button class="btn-number" id="9">9</button></td>
                        <td><button class="btn-operator" id="-">-</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="e">e</button></td>
                        <td><button class="btn-operator" id="ln">ln</button></td>
                        <td><button class="btn-operator" id="log">log</button></td>
                        <td><button class="btn-number" id="4">4</button></td>
                        <td><button class="btn-number" id="5">5</button></td>
                        <td><button class="btn-number" id="6">6</button></td>
                        <td rowspan="2"><button class="btn-operator" id="jia">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="sin">sin</button></td>
                        <td><button class="btn-operator" id="cos">cos</button></td>
                        <td><button class="btn-operator" id="tan">tan</button></td>
                        <td><button class="btn-number" id="1">1</button></td>
                        <td><button class="btn-number" id="2">2</button></td>
                        <td><button class="btn-number" id="3">3</button></td>
                        
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="x^4">x^4</button></td>
                        <td><button class="btn-operator" id="x^5">x^5</button></td>
                        <td><button class="btn-operator" id="Π">Π</button></td>
                        <td><button class="btn-number" id="0">0</button></td>
                        <td><button class="btn-operator" id=".">.</button></td>
                        <td colspan="2"><button class="btn-equal" id="equal">=</button>
                    </tr>

2）实现计算器功能的js代码

function log(x) {
        const result = Math.log10(display.innerText).toFixed(6);
        display.innerText = result;
}
function ln(x) {
    const result = Math.log(x).toFixed(6);
    display.innerText = result;
    
}
function factorial(n) {
    if (n === 0 || n === 1) {
      return 1;
    } else {
      return n * factorial(n - 1);
    }
  }
function clear(){
    display.innerText = ''
}
function backspace(){
    let string = display.innerText.toString();
    display.innerText = string.substr(0, string.length - 1);
}
function sin(){
    const radians = display.innerText * Math.PI / 180;
    const result = Math.sin(radians).toFixed(6);
    display.innerText = result;
}
function cos(){
    const radians = display.innerText * Math.PI / 180;
    const result = Math.cos(radians).toFixed(6);
    display.innerText = result;
}
function tan(){
    const radians = display.innerText * Math.PI / 180;
    const result = Math.tan(radians).toFixed(6);
    display.innerText = result;
}
function x_2(){
    const result = display.innerText**2;
    display.innerText = result;
}
function x_3(){
    const result = display.innerText**3;
    display.innerText = result;
}
function x_4(){
    const result = display.innerText**4;
    display.innerText = result;
}
function x_5(){
    const result = display.innerText**5;
    display.innerText = result;
}
function x_y(){
    display.innerText += '**';
}
function jiecheng(){
    display.innerText = factorial(display.innerText) ;
}
function sqrt_2(){
    display.innerText = Math.sqrt(display.innerText) ;
}
function bf(){ 
    display.innerText = display.innerText*0.01;
}
function jia(){
    display.innerText += "+";
}
function sub(){
    display.innerText += "-";
}
function mul(){
    display.innerText += "*";
}
function div(){
    display.innerText += "/";
}
function number(item){
    display.innerText += item.id;
}
function dian(item){
    display.innerText += item.id;
}
function e(){
    display.innerText=Math.exp(1).toFixed(6)
}
function PI(){
    display.innerText=Math.PI.toFixed(6)
}
function equal(){   
    display.innerText = eval(display.innerText);    
}

6.性能改进

function log(x) {
        const result = Math.log10(display.innerText).toFixed(6);
        display.innerText = result;
}
function ln(x) {
    const result = Math.log(x).toFixed(6);
    display.innerText = result;
    
}
function sin(){
    const radians = display.innerText * Math.PI / 180;
    const result = Math.sin(radians).toFixed(6);
    display.innerText = result;
}
function cos(){
    const radians = display.innerText * Math.PI / 180;
    const result = Math.cos(radians).toFixed(6);
    display.innerText = result;
}
function tan(){
    const radians = display.innerText * Math.PI / 180;
    const result = Math.tan(radians).toFixed(6);
    display.innerText = result;
}

对于sin、cos、tan等三角函数，在计算时会出现精度丢失的问题。这是因为计算机中浮点数的表示和计算都是基于二进制的，而某些十进制小数在二进制下无法精确表示。为了保证相应的精度准确，我采用了限制其计算后的结果保留位数位数，以此来提高精度。

7.单元测试

在这里插入图片描述
运用了一些相对简单的样例进行测试，以上是得到单元测试的结果图，所有的测试函数均已通过且覆盖率达标。

8.异常处理

function equal(){
    display.innerText = eval(display.innerText);
    if(display.innerText=='Infinity') display.innerText='ERROR';  
}

在除法运算中，除数不可为零。对于在上述除以零所得到的Infinity结果，对其进行判定后输出"ERROR"。

9.心得体会

这是我第一次使用HTML、CSS、JavaScript来制作一个计算器。在这次作业中，我的编程能力得到了提高，对于前端的技术也有了更多的理解。了解了HTML、CSS、JavaScript三件套之间的相辅相成的作用。在制作计算器的过程中，我对于写代码过程中的逻辑思维和解决问题的能力得到了提高。总的来说，制作一个计算器是一项有挑战性的项目，但也是一次有益的学习和实践机会，让我对前端的知识有了更多的兴趣，学会了很多新的知识，收获颇丰，我相信这些经验和技能将对我的未来发展产生积极的影响。

…