공부/JavaScript

javascript 예제 - 계산기

bumcrush 2019. 9. 10. 11:07
반응형

javascript 예제 - 계산기 / javascript 계산기 / javascript 연습문제


 

자바스크립트 연습할 겸 예제로 만든 간단한 계산기

 

문제 아이디어는 이 분 것을 참고

https://sourcestudy.tistory.com/210?category=194956

 

 

 

 

1. 간단 버전

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>계산기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1>Calculator1</h1>
숫자1 : <input type="text" id="number1">
숫자2 : <input type="text" id="number2">
<br><br>
연산 : <input type="radio" name="chk_info" value="plus" checked>+
<input type="radio" name="chk_info" value="minus">-
<input type="radio" name="chk_info" value="gop">*
<input type="radio" name="chk_info" value="nanugi">/
<br><br>
결과 : <input type="text" id="resultNum" readonly/>
<br><br>
<input type="button" value="계산" name="go" onclick="goFunc()">
<input type="button" value="취소" name="cancel">
<script>
function goFunc(){
var num1 = number1.value;
var num2 = number2.value;
var buho = document.querySelector('input[name="chk_info"]:checked').value;
var result;
if(buho =='plus'){
result = parseInt(num1)+parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
} else if(buho=='minus') {
result = parseInt(num1)-parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
} else if(buho=='gop') {
result = parseInt(num1)*parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
} else {
result = parseInt(num1)/parseInt(num2);
alert(result);
document.getElementById("resultNum").value = result;
}
}
</script>
</body>
</html>

 

2. 리팩토링, night & day 모드 버튼 추가

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>계산기</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1>Calculator 01
<input type="button" value="Night" id="chgcolor" onclick="changeColor()">
</h1>
숫자1 : <input type="text" id="number1">
숫자2 : <input type="text" id="number2">
<br><br>
연산 : <input type="radio" name="chk_info" value="plus" checked>+
<input type="radio" name="chk_info" value="minus">-
<input type="radio" name="chk_info" value="gop">*
<input type="radio" name="chk_info" value="nanugi">/
<br><br>
결과 : <input type="text" id="resultNum" readonly/>
<br><br>
<input type="button" value="계산" name="go" onclick="goFunc()">
<input type="button" value="취소" name="cancel">
<script>
function goFunc(){
var num1 = number1.value;
var num2 = number2.value;
var buho = document.querySelector('input[name="chk_info"]:checked').value;
var result;
if(buho =='plus'){
result = parseInt(num1)+parseInt(num2);
resultPresetation(result);
} else if(buho=='minus') {
result = parseInt(num1)-parseInt(num2);
resultPresetation(result);
} else if(buho=='gop') {
result = parseInt(num1)*parseInt(num2);
resultPresetation(result);
} else {
result = parseInt(num1)/parseInt(num2);
resultPresetation(result);
}
}
function resultPresetation(result){
alert(result);
document.getElementById("resultNum").value = result;
}
function changeColor(){
if(document.getElementById('chgcolor').value=="Night"){
document.querySelector('body').style.color="powderblue";
document.querySelector('body').style.backgroundColor="black";
document.getElementById('chgcolor').value="Day";
} else {
document.querySelector('body').style.color="black";
document.querySelector('body').style.backgroundColor="white";
document.getElementById('chgcolor').value="Night";
}
}
</script>
</body>
</html>
반응형