软件工程作业——实现一个简单的图形化计算器

102101618李涵

已于 2023-09-29 17:12:02 修改

阅读量307

点赞数 1

文章标签：软件工程

于 2023-09-26 17:32:57 首次发布

本文链接：https://blog.csdn.net/m0_67391063/article/details/133317628

版权

这个作业属于哪个课程	<班级的链接>
这个作业要求在哪里	https://bbs.csdn.net/forums/ssynkqtd-05?spm=1001.2014.3001.6685
这个作业的目标	完成一个具有可视化界面的计算器
其他参考文献	https://www.cnblogs.com/xinz/archive/2011/11/20/2255830.html

文章目录

1.界面展示

录屏颜色稍微有些失真，大家凑合看看，反正也不好看。
在这里插入图片描述

2.PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
Estimate	估计这个任务需要多少时间	8	8
Development	开发	120	240
Analysis	需求分析 (包括学习新技术）	300	500
Design Spec	生成设计文档	10	20
Design Review	设计复审	5	5
Coding Standard	代码规范 (为目前的开发制定合适的规范)	0	0
Design	具体设计	120	180
Coding	具体编码	120	120
Code Review	代码复审	100	100
Test	测试（自我测试，修改代码，提交修改）	180	240
Reporting	报告	120	150
Test Repor	测试报告	120	150
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	30
Size Measurement	测试报告	1243	1753

3.解题思路描述

要求实现一个具有图形化界面简易计算器,本次作业可以自选语言，由于计算器需要实现的功能并不复杂（实际实现的时候发现不是这样的QAQ），因此为了让界面更加好看，直接使用择 html + css + js 来实现。本意是要实现一个界面好看的计算器，但是发现对于非美术专业的同学来说过于困难，在改了多个版本后放弃。
由于是初次接触前端语言，因此在计算器中尝试了很多粗糙的功能，完成了一部分动画。由于本次作业要求公布时间较晚（发现并不是我理解的简单计算器），在处理科学计算的部分，我引用了iPhone自带计算器件的处理思路，在进行科学计算时，先对屏幕上的数据进行基本运算。
尽管处处充满了妥协，但是对于初次接触来说，只能这样啦（先偷个懒），省去了括号匹配以及处理符号之间优先级等较多问题，基本运算交给JavaScript自带的eval处理，由于Javascript计算部分三角函数时存在精度问题，本计算器在进行相关计算时，保留一定的小数位数。
作业要求提交html文件，使用软件打包html文件使得其可以以exe文件形式被分享。

4.代码介绍与展示

计算器主体框架展示

</head>

<body>

<div class="background">

<h1>这是一个非常普通的计算器</h1>

<button onclick="myFunction()"class="switch">switch</button>

</div>

<div class = "box" id = "calculator">

<div class="button_box">

<form name="form">

<input class="textview" id="textview" placeholder="请别太难QAQ">

</form>

<table>

<tr>

<td><input class="button" type="button" value="%" id="el1" style="display: none;"onclick="calculate('baifen')"></td>

<td><input class="button" type="button" value="sin" id="el2" style="display: none;"onclick="calculate('sin')"></td>

<td colspan=2><input class="button" style="width:106" type="button"type="button" value="AC" onclick="clean()"></td>

<td><input class="button" type="button" value="<" onclick="back()"></td>

<td><input class="button" type="button" value="/" onclick="calculate('/')"></td>

</tr>

<tr>

<td><input class="button" type="button" value="log10" id="el3" style="display: none;" onclick="calculate('duishu')"></td>

<td><input class="button" type="button" value="cos" id="el4" style="display: none;"onclick="calculate('cos')"></td>

<td><input class="button" type="button" value="9" onclick="calculate(9)"></td>

<td><input class="button" type="button" value="8" onclick="calculate(8)"></td>

<td><input class="button" type="button" value="7" onclick="calculate(7)"></td>

<td><input class="button" type="button" value="*" onclick="calculate('*')"></td>

</tr>

<tr>

<td><input class="button" type="button" value="x^2" id="el5" style="display: none;" onclick="calculate('pinfang')"></td>

<td><input class="button" type="button" value="tan" id="el6" style="display: none;"onclick="calculate('tan')"></td>

<td><input class="button" type="button" value="4" onclick="calculate(4)"></td>

<td><input class="button" type="button" value="5" onclick="calculate(5)"></td>

<td><input class="button" type="button" value="6" onclick="calculate(6)"></td>

<td><input class="button" type="button" value="-" onclick="calculate('-')"></td>

</tr>

<tr>

<td><input class="button" type="button" value="√" id="el7" style="display: none;" onclick="calculate('kaifang')"></td>

<td><input class="button" type="button" value="cot" id="el8" style="display: none;"onclick="calculate('cot')"></td>

<td><input class="button" type="button" value="1" onclick="calculate(1)"></td>

<td><input class="button" type="button" value="2" onclick="calculate(2)"></td>

<td><input class="button" type="button" value="3" onclick="calculate(3)"></td>

<td><input class="button" type="button" value="+" onclick="calculate('+')"></td>

</tr>

<tr>

<td><input class="button" type="button" value="x!" id="el9" style="display: none;"onclick="calculate('jiecheng')"></td>

<td><input class="button" type="button" value="x^y" id="el10" style="display: none;"onclick="calculate('**')"></td>

<td colspan=2><input class="button" style="width:106" type="button" value="0" onclick="calculate(0)"></td>

<td><input class="button" type="button" value="." onclick="calculate('.')"></td>

<td><input class="button" type="button" value="=" onclick="calculate('=')"></td>

</tr>

</table>

</div>

</div>

<script src="calculator.js"></script>

</body>

</html>

实现switch切换简洁/科学模式

function myFunction() {

var elements = [document.getElementById("el1"), document.getElementById("el2"), document.getElementById("el3"),

document.getElementById("el4"), document.getElementById("el5"), document.getElementById("el6"),

document.getElementById("el7"), document.getElementById("el8"), document.getElementById("el9"),

document.getElementById("el10")]

  

var x = document.getElementById("myDIV")

elements.forEach(function(x){

if (x.style.display === "none") {

x.style.display = "block"

enlargeTextView()

}

else {

x.style.display = "none"

shrinkTextView()

}

})

}//用于switch变换的函数

4.性能分析与改进

在设计过程，由于水平实在有限，简化了计算机的很多操作过程，避开了很多算法问题，但时仍然对计算器进行了一部分改进与优化，下面这个函数改善了输入出错的频率，在连续输入时，第二个操作符会自动覆盖第一个操作符，与此同时，计算器保留了删除纠错的功能。基本运算部分大都交换给JavaScript自带的eval函数处理。

这段代码对连续字符输入情况进行了一定程度的处理

function insert_ch(char){

var text = document.form.textview.value

var len = text.length

if(text[len-1]<'0'||text[len]>'9'){

document.form.textview.value = text.substring(0,text.length-1)

}

document.form.textview.value += char

}

5.单元测试与改进

这个测试部分确实浪费了不少时间，通过对部分资料的学习，使用npm在项目中部署jest对核心计算单元进行测试，由于Javascript在调用html中的模块部分对测试函数是隐藏的（不知道怎么解决），只能对稍作调整计算单元的镜像进行测试，测试的部分比较繁琐，对自己的计算器也比较有数，没有太为难它。
测试代码部分展示

const { calculate } = require('./cal')

test('基本输入1',()=>{

expect(calculate('1')).toBe('1')

})

test('归零/清空',()=>{

expect(calculate('AC')).toBe('')

})

test('基本输入*',()=>{

expect(calculate('*')).toBe('*')

calculate('AC')

})

test('连续输入两个运算符',()=>{

calculate('0')

calculate('*')

expect(calculate('*')).toBe('0*')

测试结果及代码覆盖率展示
在这里插入图片描述

6.异常处理

关于异常处理，在本次计算器中对无法计算的部分使用try/catch语句处理异常情况

function equal(){
try{
	var exp = document.form.textview.value
if(exp){
	document.form.textview.value = eval(exp)
}}
catch{
document.form.textview.value = "error"
}}

7.总结与收获

在软件工程课程中，我选择了一个具有实际应用价值的项目——开发一个简易的科学计算器。通过这个项目，我旨在提高自己的编程技能，加深对前端开发的理解，以及强化软件工程的原则和实践。这个项目的目标是创建一个能在浏览器中运行的简易科学计算器，支持基本数学运算（加、减、乘、除）和科学计算（平方、平方根、指数、对数）。为了完成这个项目，我首先定义了计算器的功能和界面，然后使用HTML和CSS创建了用户界面，最后使用JavaScript实现了计算器的功能。
在项目中，我有些地方做得不够好。首先，我在项目的早期没有充分规划好项目的架构和功能，导致在后期开发过程中出现了一些重复性和混乱。其次，我在处理用户输入的过程中，没有考虑到一些可能的异常情况，如空输入和错误输入，导致在某些情况下程序会出错，这些都为后续的调整，带来了一定的麻烦，在未来的项目中，我会更加注重规划和异常处理。
通过这个项目，我不仅提高了自己的编程技能，也对软件工程的原则和实践有了更深入的了解。在未来，我会将在这个项目中获得的经验应用到其他软件开发项目中，尤其是前端开发和数学计算相关的项目。
通过这个软件工程课程中的项目，我不仅提高了自己的编程技能和前端开发能力，也深化了自己对软件工程原则和实践的理解。我意识到一个成功的项目需要细致的规划和设计，同时也需要注重异常处理和用户体验。在未来的学习和工作中，我会更加注重这些方面，努力提高自己的软件开发能力。

8.gitcode项目地址

gitcode项目地址

102101618李涵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
软件工程作业——实现一个简单的图形化计算器

这个作业属于哪个课程<班级的链接>这个作业要求在哪里https://bbs.csdn.net/forums/ssynkqtd-05?spm=1001.2014.3001.6685这个作业的目标完成一个具有可视化界面的计算器其他参考文献https://www.cnblogs.com/xinz/archive/2011/11/20/2255830.html文章目录1.界面展示2.PSP表格3.解题思路描述4.代码介绍与展示4.性能分析与改进5.单元测试与改
复制链接

扫一扫