用HTML&JavaScript写计算器给【导航】出来的【新大陆】?

  • 写计算器？?
  • 如何实现？?
  • 1. 布局?
  • 2. 交互准备?
  • 3. 交互分解?
  • 4. 获取第一个数?
  • 5. 获取第二个数?
  • 6. 获取运算符?
  • 7. 运算?
  • 8.输出?
  • 9. 运行?
  • 10. Debug?
  • 11. 【新大陆】闪亮登场?
  • 12. Debuging?
  • 13. 数值转化?
  • 思考?
  • 越努力越幸运
  • 复杂可以变得【***简单***】，困难可以变得【***容易***】
  • 时光真是XX
  • Debug？


写计算器？?

今天老师让用HTML&JavaScript写一个如下图的计算器

hbuilderx 如何开启javascript_html

如何实现？?

这几天学习编程，对编程思维最大的感触就是对编程问题如何进行解析，达尔文说生物进化是从简单到复杂，而我想对一个编程问题解析就需要【退化】（从复杂到简单—），也就是将复杂的问题拆解成一个个简单的小问题。这也让我想起了地理学，一个地理环境是由许多的地理要素组成，虽然可以把它拆解成一个个地理要素，但整体是要大于部分之和的，也就是说一个个简单的要素会相互产生关系，所以，最后整体实际是除了要素个体，还有要素的关系，这个关系应该是比要素还要多，这也就是复杂的原因所在吧。

所以我们将这个问题拆解，一步一步来

1. 布局?

先用HTML画出这个界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
	</head>
	<body>
		<h1>欢迎您使用计算器</h1>
		第一个数：<input type="text"/>
		<br />
		第二个数：<input type="text"/>
		<br />
		运算器选择：<select>
						<option>+</option>
						<option>-</option>
						<option>*</option>
						<option>/</option>
					</select>
		<br />
		<input type="button" value="运算"/>
		<div></div>
	</body>
</html>

2. 交互准备?

因为需要交互，所以弄个JavaScript文件，并稍稍修改HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<script src="operation.js"></script>
	</head>
	<body>
		<h1>欢迎您使用计算器</h1>
		第一个数：<input type="text" id="1num"/>
		<br />
		第二个数：<input type="text" id="2num"/>
		<br />
		运算器选择：<select id="ope">
						<option value="0">+</option>
						<option value="1">-</option>
						<option value="2">*</option>
						<option value="3">/</option>
					</select>
		<br />
		<input type="button" value="运算" onclick="opration()"/>
		<div id="mdiv"></div>
	</body>
</html>

3. 交互分解?

JavaScript中需要实现五个功能

function operation(){
	//1.获取第一个数
	
	//2.获取第二个数
	
	//3.获取运算符
	
	//4.运算
	
	//5.输出
}

4. 获取第一个数?

//1.获取第一个数
	var num1 = document.getElementById("1num").value;

5. 获取第二个数?

//2.获取第二个数
	var num2 = document.getElementById("2num").value;

6. 获取运算符?

//3.获取运算符
	var oper = document.getElementById("ope").value;

7. 运算?

//4.运算
	var result;
	switch(oper){
		case 0:result = num1 + num2;break;
		case 1:result = num1 - num2;break;
		case 2:result = num1 * num2;break;
		case 3:result = num1 / num2;break;
	}

8.输出?

//5.输出
	document.getElementById("mdiv").innerHTML=result;

9. 运行?

看起来代码似乎写完了，那咱们运行一下

hbuilderx 如何开启javascript_html_02


下图为运行结果

hbuilderx 如何开启javascript_html_03


发现结果并不符合期望，问题到底出在哪？怎么找问题？

10. Debug?

先检查代码是否出现低级错误，比如标点符号、大小写等，但程序运行有结果，说明应该没有低级错误。发现HTML和JavaScript的代码调试不像Java那样简单，Java可以利用IDE设置breakpoint帮忙分析，但我用的HBuilderX这个HTML的IDE发现并没有这种功能（可能因为我是菜鸟，没找到，我也是昨天才开始学HTML和JavaScript并接触HBuildX的），那怎么办？

11. 【新大陆】闪亮登场?

这里当然还是需要借助工具，这个【新大陆】便是浏览器。这里以Chrome为例，当然，其他浏览器也一样的，咱们需要调出浏览器的开发者工具【快捷键F12】，然后找到console界面，然后通过手动在JavaScript代码中设置【breakpoint】

hbuilderx 如何开启javascript_运算符_04

12. Debuging?

咱们再JavaScript代码中设置【breakpoint】的方法主要是同console.log()和console.log(typeof())这两个方法，演示如下

/1.获取第一个数
	var num1 = document.getElementById("1num").value;
	console.log(num1);
	console.log(typeof(num1));

再次运行时发现console界面出现下图效果

hbuilderx 如何开启javascript_运算符_05


这是什么意思呢？

console.log(num1)是将num1的值打印，当然结果可知num1=1，但是要注意，console.log(typeof(num1))是将num1的类型打印，按理说num1的类型应该是number，但显示却是string，那这表示什么意思？？？说明document.getElementById(“1num”).value返回的是一个string类型，所以在后面的运算中是以string进行运算的，由于我在定义result时并没有初始化，说明result应该undefine型数据，oper应该也是string型数据（因为document.getElementById(“1num”).value返回的是一个string类型），所以最后result并没有赋值，依然是undefine型数据，所以程序输出结果为undefined。当然这些都同时推论，接下来就来验证一下咱们的推论

//3.获取运算符
	var oper = document.getElementById("ope").value;
	console.log("oper值为："+oper);
	console.log("oper类型为："+typeof(oper));
	//4.运算
	var result;
	console.log("运算前result值为："+result);
	console.log("运行前result类型为："+typeof(result));
	switch(oper){
		case 0:result = num1 + num2;break;
		case 1:result = num1 - num2;break;
		case 2:result = num1 * num2;break;
		case 3:result = num1 / num2;break;
	}
	//5.输出
	document.getElementById("mdiv").innerHTML=result;
	console.log("运算后result值为："+result);
	console.log("运行后result类型为："+typeof(result));

hbuilderx 如何开启javascript_运算符_06


结果符合推理，那接下来怎么解决呢？

13. 数值转化?

我们可以看到是因为变量类型发生了改变导致计算结果出了问题，那么只要将变量的类型转换到对应的类型即可

//1.获取第一个数
	var num1 = parseInt(document.getElementById("1num").value);
	/* console.log(num1);
	console.log(typeof(num1)); */
	//2.获取第二个数
	var num2 = parseInt(document.getElementById("2num").value);
	//3.获取运算符
	var oper = parseInt(document.getElementById("ope").value);

hbuilderx 如何开启javascript_HTML_07

思考?

当然，这个程序还有很多地方需要优化，比如输入值的限制、一些重复代码的提取等等，这里咱就不过多讲了，接下需要总结一下我的思考。

越努力越幸运

坦白讲，老师在上课时并没讲如何调式HTML和JavaScript，这是自己“胡乱”撞出来的，这中间当然受挫了n+1次，但庆幸自己没有放弃，并且幸运的找到了问题的根源，所以啊，我想生活中的大多数幸运应该是自己不断努力的结果，坚持到底！

“This game is not over until I win."?

复杂可以变得【简单】，困难可以变得【容易】

如上所言，复杂的背后可能几乎都是简单的堆积，复杂和困难大多时候可能是自己的心理障碍，所以一定要慢慢转变看待问题的心态和角度，但具体如何转变呢，我想可能需要给自己定下目标，给自己期望，这样才有动力去做。

时光真是XX

想想自己一生能有多长呢，看看自己眼下的正在做的事，希望自己能坚持下去，实现梦想！

Debug？

我=?/0；