MSM8994의 화룡점정 블로그

[JS] 사칙연산 계산 (Form, 함수 사용) 본문

코딩

[JS] 사칙연산 계산 (Form, 함수 사용)

msm8994 2018. 7. 25. 16:30

자바스크립트를 통해 인터넷 접속 필요없는 계산기를 만들어 보겠습니다.

먼저 폼을 만듭니다. 결과가 표시될 입력칸에 읽기 전용 속성을 readonly 키워드로 넣었습니다.

<form name="calc">
	<input type="text" name="left" />
	?
	<input type="text" name="right" />
	<br /><!-- 줄바꿈 -->
	<input type="button" value="계산하기" onClick="calcNow()"/>
	<br />
	더하기 <input type="text" name="result_plus" readonly /><br />
	빼　기 <input type="text" name="result_minus" readonly /><br />
	곱하기 <input type="text" name="result_multiply" readonly /><br />
	나누기 <input type="text" name="result_divide" readonly /><br />
	나머지 <input type="text" name="result_mod" readonly /><br />
	<input type="reset" value="초기화"/>
</form>

계산하기 버튼을 눌렀을 때 onClick에 지정한 calcNow()함수를 참조하도록 합니다. 
<input type="button" value="계산하기" onClick="calcNow()"/>


이제 calcNow()함수를 <script></script> 사이에 선언합니다.
calc 폼의 left, right, result_plus, result_minus...의 입력칸을 참조하기 위해서
calc.left 같은식으로 참조하고, 그 객체가 입력란이므로 value 속성을 호출해 값을 사용합니다.

// form name의 경우 getElementById(string)나 getElementsByName(string) 같은거 필요없다
// (form 이름).(input 이름).value 으로 값을 읽거나 쓸 수 있다.
calc.result_minus.value = calc.left.value - calc.right.value;


더하기는 문자열을 붙이는 기능도 하기 때문에 Number(문자열)이라는 변환 함수를 통해 수로 바꿔야 합니다.

// + 연산자는 문자열을 합치는데에도 쓰이기 때문에 수로 변환해주는 Number(string)이 필요하다
calc.result_plus.value = Number(calc.left.value) + Number(calc.right.value);


코드의 가독성을 높이기 위해 함수를 활용하기로 하였습니다.
함수는 function 키워드로 선언하며 Java나 C처럼 반환/매개변수 자료형을 명시하지는 않습니다.
값을 반환하려면 return 문을 사용합니다.


function calc_plus(left, right){
	// 더하기
	// + 연산자는 문자열을 합치는데에도 쓰이기 때문에 수로 변환해주는 Number(string)이 필요하다
	// return 문은 호출한 함수로 이 값을 돌려준다
	return Number(left) + Number(right);
}


함수 호출은 간단합니다. 이름(매개변수)로 하시면 됩니다.

calc.result_plus.value = calc_plus(calc.left.value, calc.right.value);


이제 꾸밀 차례입니다. type="text" 인 input 태그를 골라 스타일을 지정합니다. <style></style> 안에 넣어주세요.

input[type=text]{ /* input 태그 중 type="text"인 것만 선택*/
	
	width: 145px;
	padding: 5px;
	
	background-color: #e7e7e7;
	border: 1px solid silver;
}
다른 태그도 꾸미고 다른 코드도 완성하면 됩니다.


결과

초기화를 누르거나 처음 페이지가 열렸을 때


수를 입력하고 계산하기를 누르면 아래와 같이 됩니다.


윗 칸에 2와 7을 입력하고 계산하기를 눌렀다.



전체 소스코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>001 계산기</title>
		<style>
			input[type=text]{ /* input 태그 중 type="text"인 것만 선택*/
				
				width: 145px;
				padding: 5px;
				
				background-color: #e7e7e7;
				border: 1px solid silver;
			}
			
			input[type=button]{
				width: 300px;
				padding: 5px;
				
				background-color: black;
				color: white;
				border: 1px solid silver;
			}
			input[type=reset]{
				width: 400px;
				padding: 5px;
				
				background-color: green;
				color: white;
				border: 1px solid silver;
			}
		</style>
		<script>
			function calcNow(){
				// form name의 경우 getElementById(string)나 getElementsByName(string) 같은거 필요없다
				// (form 이름).(input 이름).value 으로 값을 읽거나 쓸 수 있다.
				calc.result_plus.value = calc_plus(calc.left.value, calc.right.value);
				// 아래에 정의한 calc_minus함수 사용
				calc.result_minus.value = calc_minus(calc.left.value, calc.right.value);
				calc.result_multiply.value = calc_multiply(calc.left.value, calc.right.value);
				calc.result_divide.value = calc_divide(calc.left.value, calc.right.value);
				calc.result_mod.value = calc_mod(calc.left.value, calc.right.value);
			}
			function calc_plus(left, right){
				// 더하기
				// + 연산자는 문자열을 합치는데에도 쓰이기 때문에 수로 변환해주는 Number(string)이 필요하다
				// return 문은 호출한 함수로 이 값을 돌려준다
				return Number(left) + Number(right);
			}
			function calc_minus(left, right){
				// 빼기
				return left - right;
			}
			function calc_multiply(left, right){
				// 곱하기
				return left * right;
			}
			function calc_divide(left, right){
				// 나누기
				return left / right;
			}
			function calc_mod(left, right){
				// 나머지 구하기
				return left % right;
			}
		</script>
	</head>
	<body>
		<form name="calc">
			<input type="text" name="left" />
			?
			<input type="text" name="right" />
			<br /><!-- 줄바꿈 -->
			<input type="button" value="계산하기" onClick="calcNow()"/>
			<br />
			더하기 <input type="text" name="result_plus" readonly /><br />
			빼　기 <input type="text" name="result_minus" readonly /><br />
			곱하기 <input type="text" name="result_multiply" readonly /><br />
			나누기 <input type="text" name="result_divide" readonly /><br />
			나머지 <input type="text" name="result_mod" readonly /><br />
			<input type="reset" value="초기화"/>
		</form>
	</body>
</html>


'코딩' 카테고리의 다른 글

[JS] Math.random() 을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기  (3) 2018.07.27
[JS] 구구단 퀴즈 (Form 사용)  (0) 2018.07.26
[JAVA] Math.random()을 활용한 중복이 없는 임의의 수 6개짜리 배열에 담기  (0) 2018.07.24
[JAVA] Calendar 객체와 SimpleDateFormat으로 얻은 날짜 문자열을 비교하기  (0) 2018.07.23
[C#] Getter와 Setter를 손쉽게! 속성을 써보자  (0) 2018.07.20
'코딩' Related Articles more
Comments