계산기
a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.첫번째 수 두번째 수 연산 결과
=
계산기 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>계산기</h2>
a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.
<br><br>
<button type="button" onclick="plus()">덧셈</button>
<button type="button" onclick="minus()">뺄셈</button>
<button type="button" onclick="multi()">곱셈</button>
<button type="button" onclick="div()">나눗셈</button>
<button type="button" onclick="rest()">나머지</button>
<br><br>
<input type="text" id="a" size="8">
<input type="text" id="oper" size="5">
<input type="text" id="b" size="8">
=
<input type="text" id="result" size="8">
<script type="text/javascript">
let a, b; // 전역변수
function setValue() {
a = parseInt(document.getElementById('a').value); // 입력값 받기
b = parseInt(document.getElementById('b').value);
}
function plus() {
setValue();
document.getElementById('oper').value = "+"; // 값 넣기
document.getElementById('result').value = a + b;
}
function minus() {
setValue();
document.getElementById('oper').value = "-"; // 값 넣기
document.getElementById('result').value = a - b;
}
function multi() {
setValue();
document.getElementById('oper').value = "*"; // 값 넣기
document.getElementById('result').value = a * b;
}
function div() {
setValue();
if(b == 0){ // 0 안됨
alert('계산할 수 없습니다');
return;
}
document.getElementById('oper').value = "/";
document.getElementById('result').value = a / b;
}
function rest() {
setValue();
if(b == 0){ // 0 안됨
alert('계산할 수 없습니다');
return;
}
document.getElementById('oper').value = "%";
document.getElementById('result').value = a % b;
}
</script>
</body>
</html>
설명
onclick : 클릭을 할 경우 해당 메소드로 이동한다.
parseInt : 연산을 하기 위해 입력값을 숫자형으로 변환한다.
나누기와 나머지는 두번째 수가 0이 들어올 경우 연산이 안되기 때문에 조건문을 걸어주어 return을 하게 한다.
'IT > JavaScript' 카테고리의 다른 글
| [Html+JavaScript] 식별자(==Access Attribute (접근 속성))/id/class/name (0) | 2021.06.07 |
|---|---|
| [Html+JavaScript]체크박스에 체크를 하면 금액이 포함되게 하기/Array/checked/form (0) | 2021.06.07 |
| [Html+JavaScript] 정답을 입력받고 경고창으로 정답 확인하기/조건문/alert (0) | 2021.06.06 |
| [Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert (0) | 2021.06.06 |
| [Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom) (0) | 2021.06.06 |