05. 간이 계산기
1) 기본
1
2
3
4
5
6
7
8
9
[html]
첫 번째 값 : <input type = "number" id = "num1"> <br>
두 번째 값 : <input type = "number" id = "num2"> <br>
<button onclick = "plus()"> + </button>
<button onclick = "min()"> - </button>
<button onclick = "mul()"> * </button>
<button onclick = "div()"> / </button>
<button onclick = "mod()"> % </button> <br><br>
계산 결과 : <span id="result"></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
[js]
const num1 = document.getElementById("num1");
// value값을 불러오지 않는 이유는 해석순서에 의해서 입력값을 받기도 전에
// 빈칸의 value값이 상수에 저장되고, 그 값으로 함수들이 계산을 하기 때문에
// NaN(Not a Number) 발생한다
const num2 = document.getElementById("num2");
const result = document.getElementById("result");
function plus(){
result.innerText = parseInt(num1.value) + Number(num2.value);
}
// parseInt() : 함수 vs Number() : 형변환 자료형
function min(){
result.innerText = Number(num1.value) - Number(num2.value);
}
function mul(){
result.innerText = Number(num1.value) * Number(num2.value);
}
function div(){
result.innerText = Number(num1.value) / Number(num2.value);
}
function mod(){
result.innerText = Number(num1.value) % Number(num2.value);
}
2) 파라미터 이용하기
1
2
3
4
5
6
7
8
9
[html]
첫 번째 값 : <input type = "number" id = "num1"> <br>
두 번째 값 : <input type = "number" id = "num2"> <br>
<button onclick = "cal('+')"> + </button>
<button onclick = "cal('-')"> - </button>
<button onclick = "cal('*')"> * </button>
<button onclick = "cal('/')"> / </button>
<button onclick = "cal('%')"> % </button> <br><br>
계산 결과 : <span id="result"></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[js]
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const result = document.getElementById("result");
function cal(op){
const n1 = Number(num1.value);
const n2 = Number(num2.value);
switch(op){
case '+' : result.innerText = n1 + n2; break;
case '-' : result.innerText = n1 - n2; break;
case '*' : result.innerText = n1 * n2; break;
case '/' : result.innerText = n1 / n2; break;
case '%' : result.innerText = n1 % n2; break;
}
}
3) this 이용하기
1
2
3
4
5
6
7
8
9
[html]
첫 번째 값 : <input type = "number" id = "num1"> <br>
두 번째 값 : <input type = "number" id = "num2"> <br>
<button onclick = "cal(this)"> + </button>
<button onclick = "cal(this)"> - </button>
<button onclick = "cal(this)"> * </button>
<button onclick = "cal(this)"> / </button>
<button onclick = "cal(this)"> % </button> <br><br>
계산 결과 : <span id="result"></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[js]
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const result = document.getElementById("result");
function cal(btn){
// this는 클릭이 발생한 요소를 모두 가져온다
// console.log(btn);
// → <button onclick = "cal(this)"> + </button>
const n1 = Number(num1.value);
const n2 = Number(num2.value);
const op = btn.innerText;
// 클릭버튼에 작성된 text를 읽어온다 (+, -, *, /, %)
switch(op){
case '+' : result.innerText = n1 + n2; break;
case '-' : result.innerText = n1 - n2; break;
case '*' : result.innerText = n1 * n2; break;
case '/' : result.innerText = n1 / n2; break;
case '%' : result.innerText = n1 % n2; break;
}
}
4) new Function() 이용하기
1
2
3
4
5
6
7
8
9
[html]
첫 번째 값 : <input type = "number" id = "num1"> <br>
두 번째 값 : <input type = "number" id = "num2"> <br>
<button onclick = "cal(this)"> + </button>
<button onclick = "cal(this)"> - </button>
<button onclick = "cal(this)"> * </button>
<button onclick = "cal(this)"> / </button>
<button onclick = "cal(this)"> % </button> <br><br>
계산 결과 : <span id="result"></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[js]
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const result = document.getElementById("result");
function cal(btn){
const n1 = Number(num1.value);
const n2 = Number(num2.value);
const op = btn.innerText;
// eval("코드 형식의 문자열")
// - 매개변수의 문자열을 JS 코드로 해석/수행하는 함수
// - 속도가 느림 + 보안 이슈로 인해 사용 지양(사용 피하기)
// result.innerText = eval(n1 + op + n2);
// new Function() 사용
result.innerText = new Function("retrun " + n1 + op + n2)();
// return하고 한 칸 띄어주기
}