这个作业属于哪个课程 | <班级的链接> |
---|---|
这个作业要求在哪里 | 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实现了计算器的功能。
在项目中,我有些地方做得不够好。首先,我在项目的早期没有充分规划好项目的架构和功能,导致在后期开发过程中出现了一些重复性和混乱。其次,我在处理用户输入的过程中,没有考虑到一些可能的异常情况,如空输入和错误输入,导致在某些情况下程序会出错,这些都为后续的调整,带来了一定的麻烦,在未来的项目中,我会更加注重规划和异常处理。
通过这个项目,我不仅提高了自己的编程技能,也对软件工程的原则和实践有了更深入的了解。在未来,我会将在这个项目中获得的经验应用到其他软件开发项目中,尤其是前端开发和数学计算相关的项目。
通过这个软件工程课程中的项目,我不仅提高了自己的编程技能和前端开发能力,也深化了自己对软件工程原则和实践的理解。我意识到一个成功的项目需要细致的规划和设计,同时也需要注重异常处理和用户体验。在未来的学习和工作中,我会更加注重这些方面,努力提高自己的软件开发能力。