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

这个作业属于哪个课程<班级的链接>
这个作业要求在哪里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表格

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划1010
Estimate估计这个任务需要多少时间88
Development开发120240
Analysis需求分析 (包括学习新技术)300500
Design Spec生成设计文档1020
Design Review设计复审55
Coding Standard代码规范 (为目前的开发制定合适的规范)00
Design具体设计120180
Coding具体编码120120
Code Review代码复审100100
Test测试(自我测试,修改代码,提交修改)180240
Reporting报告120150
Test Repor测试报告120150
Postmortem & Process Improvement Plan事后总结, 并提出过程改进计划3030
Size Measurement测试报告12431753

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项目地址

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值