코딩교육/웹프로그래밍

[왕 초보 코딩/프로그래밍] HTML/CSS/Javascript 사용한 계산기 예제(소스코드 o)

욜로제이드 2022. 4. 7. 23:04

HTML CSS 강의를 진행하다가 갑자기, 특강 요청이 왔다.

그래서 급. 준비한 예제.
Javascript 기본 개념들 넘어가고, 바로 함수와 객체 정보를 불러와 값들을 계산하는 예제이다.


총 3단계로 구현하였고, 중간에 주석이나, CSS가 덜 써진 부분이나, 예외처리를 안한 부분도 있다.


(HTML, CSS, Javascript) 가 어색한 나에게 남의 코드는 어려워서(?) 그냥 쉽게 예제를 만들어봤고,
완성된 코드는 아니며, 이 코드를 수정해서 계산기를 완성 할수 있도록 만들어놨다.

javascript 함수를 연습하고 싶은 사람들은 참고해서 만들어 보면 좋을것 같다.





1. 두 수를 입력받아, 사칙연산하기(더하기만 구현)

계산기 1번 예제



더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>계산기</title>
	<style>
		input[type="text"]
		{
			text-align: right;
			width: 50px;
		}
		div
		{
			text-align: center;
			line-height: 2em;
		}
		input[type="button"]
		{
			width: 60px;
			height: 30px;
			background-color: #0E639CFF;
			border-radius: 10px;
			color: white;
			font-weight: 600;
		}
	</style>
	<script language="javascript">

		function calc_plus()
		{
			var a = document.getElementById('num1');
			var b = document.getElementById('num2');
			var answer = document.getElementById('answer');

			answer.value = parseInt(a.value) + parseInt(b.value);
		}

		function calc_minus()
		{

		}

		function calc_multifly()
		{

		}

		function calc_divide()
		{
			
		}
	</script>
</head>
<body>
	<div class="display">
		첫번째 숫자를 입력해주세요. <input type="text" id="num1"><br>
		두번째 숫자를 입력해주세요. <input type="text" id="num2"><br>
		<input type="button" value="더하기" onclick="calc_plus();">
		<input type="button" value="빼기" onclick="calc_minus();">
		<input type="button" value="곱하기" onclick="calc_multiply();">
		<input type="button" value="나누기" onclick="calc_divide();"><br>
		결과 : <input type="text" id="answer" style="width: 200px;">
	</div>
</body>
</html>


(추가) ↑ 위의 소스코드에... 곱하기 함수 이름을 ... 잘못 쓴 오타가 발견되었다... 어쩐지 구현을 해도 안되더라니...하하... 참고해서 수정을 해야한다...


2. 계산기 모양을 디자인하여, 두 수의 사칙연산 계산(더하기만 구현)

계산기 2번 예제

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>계산기</title>
	<style>
		.display	/*div*/
		{
			width: 300px;
			text-align: center;
			line-height: 2em;
			position: relative;
		}

		input[type="text"]
		{
			text-align: right;
			width: 100%;
			height: 40px;
			padding-right: 10px;
			box-sizing: border-box;
			margin-bottom: 1.5em;
		}

		input[type="button"]
		{
			width: 70px;
			height: 30px;
			background-color: #0E639CFF;
			border-radius: 10px;
			color: white;
			font-weight: 600;
			font-size: 1.5em;
			padding: 0;
		}
	</style>
	<script language="javascript">
		var operator = "";
		var tempNumber = 0;
		var initFlag = 0;

		function inputNumber(e)
		{
			var a = document.getElementById('num1');
			if(initFlag == 1)
			{
				a.value = "";
				initFlag = 0;
			}
			
			a.value = a.value + e.value;
		}

		function evtOperator(e)
		{
			var a = document.getElementById('num1');

			operator = "+";
			//temp_Number = ParseInt(a.value);
			tempNumber = a.value;
			a.value = "";
		}

		function calculator(e)
		{
			var a = document.getElementById('num1');
			

			if(a.value == "" || initFlag == 1)
			{
				a.value = "0";
			}

			if(operator == "+")
			{
				a.value = parseInt(tempNumber) + parseInt(a.value);
			}

			//새로운 계산하기 위해 초기화
			initFlag = 1;
			tempNumber = 0;

		}
	</script>
</head>
<body>
<div class="display">
	<input type="text" id="num1">
	<input type="button" value="7" onclick="inputNumber(this);">
	<input type="button" value="8" onclick="inputNumber(this);">
	<input type="button" value="9" onclick="inputNumber(this);">
	<input type="button" value="/" onclick="">
	<input type="button" value="4" onclick="inputNumber(this);">
	<input type="button" value="5" onclick="inputNumber(this);">
	<input type="button" value="6" onclick="inputNumber(this);">
	<input type="button" value="*" onclick="">
	<input type="button" value="1" onclick="inputNumber(this);">
	<input type="button" value="2" onclick="inputNumber(this);">
	<input type="button" value="3" onclick="inputNumber(this);">
	<input type="button" value="-" onclick="">
	<input type="button" value="0" onclick="inputNumber(this);">
	<input type="button" value="." onclick="inputNumber(this);">
	<input type="button" value="+" onclick="evtOperator(this);">
	<input type="button" value="=" onclick="calculator(this)">


	<!--<input type="button" value="더하기" onclick="calculator(this);"><br>-->
</div>
</body>
</html>


3. 2에서 디자인한 계산기에서 여러 수의 사칙연산 계산(더하기만 구현)

계산기 3번 예제

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>계산기</title>
	<style>
		.display
		{
			width: 300px;
			text-align: center;
			line-height: 2em;
			position: relative;
		}

		input[type="text"]
		{
			text-align: right;
			width: 100%;
			height: 40px;
			padding-right: 10px;
			box-sizing: border-box;
			margin-bottom: 1.5em;
		}

		input[type="button"]
		{
			width: 70px;
			height: 30px;
			background-color: #0E639CFF;
			border-radius: 10px;
			color: white;
			font-weight: 600;
			cursor: pointer;
			font-size: 1.5em;
			padding: 0;
		}
	</style>
	<script language="javascript">
		var operator = "";
		var tempNumber = "";
		var initFlag = 0;


		function inputNumber(e)
		{

			var a = document.getElementById('num1');
			if(initFlag == 1)
			{
				a.value = "";
				initFlag = 0;
			}
			
			a.value = a.value + e.value;
		}

		function evtOperator(e)
		{
			var a = document.getElementById('num1');

			if(operator != "")
			{
				tempNumber = parseInt(tempNumber) + parseInt(a.value);
			}
			else
			{
				operator = e.value;
				tempNumber = a.value;
			}

			a.value = "";

		}

		function calculator(e)
		{
			var a = document.getElementById('num1');
			

			if(a.value == "" || initFlag == 1)
			{
				a.value = "0";
			}

			if(operator == "+")
			{
				a.value = parseInt(tempNumber) + parseInt(a.value);
			}

			//새로운 계산하기 위해 초기화
			initFlag = 1;
			tempNumber = 0;

		}

		function msg()
		{
			window.alert("정수계산만 가능합니다.");
		}
	</script>
</head>
<body>
<div class="display">
	<h1>계산기</h1>
	<p>programmed by 김경민</p>
	<input type="text" id="num1">
	<input type="button" value="7" onclick="inputNumber(this);">
	<input type="button" value="8" onclick="inputNumber(this);">
	<input type="button" value="9" onclick="inputNumber(this);">
	<input type="button" value="/" onclick="">
	<input type="button" value="4" onclick="inputNumber(this);">
	<input type="button" value="5" onclick="inputNumber(this);">
	<input type="button" value="6" onclick="inputNumber(this);">
	<input type="button" value="*" onclick="">
	<input type="button" value="1" onclick="inputNumber(this);">
	<input type="button" value="2" onclick="inputNumber(this);">
	<input type="button" value="3" onclick="inputNumber(this);">
	<input type="button" value="-" onclick="">
	<input type="button" value="0" onclick="inputNumber(this);">
	<input type="button" value="." onclick="msg()">
	<input type="button" value="+" onclick="evtOperator(this);">
	<input type="button" value="=" onclick="calculator(this)">


	<!--<input type="button" value="더하기" onclick="calculator(this);"><br>-->
</div>
</body>
</html>

 

(추가) 여기서 사칙연산의 우선순위가 적용되지 않았다.

혹시 추가를 하려거든

1. 사칙연산 우선순위

2. 괄호 기능

3. 소수 계산 (정수만 입력 가능. 결과는 소수도 나옴)

이런 것들을 추가로 계산해주면 좋을 것 같다.

 

반응형

'코딩교육 > 웹프로그래밍' 카테고리의 다른 글

웹 프로그래밍을 위한 Visual Code 다운로드 및 설정  (0) 2022.03.13

'코딩교육/웹프로그래밍'의 다른글

  • 현재글[왕 초보 코딩/프로그래밍] HTML/CSS/Javascript 사용한 계산기 예제(소스코드 o)

관련글

댓글

티스토리툴바