1번
<body>
<h1>간이 계산기</h1>
첫번째 값 : <input type="number" id="num1" value="10"><br>
두번째 값 : <input type="number" id="num2" value="5"><br>
<button id="plus" onclick="plus()">+</button>
<button id="minus" onclick="minus()">-</button>
<button id="multip" onclick="multip()">*</button>
<button id="division" onclick="division()">/</button>
<button id="remainder" onclick="mod()">%</button>
<br><br>
계산결과: <span id="resultBox"></span> const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const resultBox = document.getElementById("resultBox");
console.log(num1);
console.log(num2);
function plus(){
/* const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const resultBox = document.getElementById("resultBox"); */
resultBox.innerHTML=Number(num1.value)+Number(num2.value);
}
function minus(){
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const resultBox = document.getElementById("resultBox");
resultBox.innerHTML=Number(num1.value)-Number(num2.value);
}
function multip(){
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const resultBox = document.getElementById("resultBox");
resultBox.innerHTML=Number(num1.value)*Number(num2.value);
}
function division(){
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const resultBox = document.getElementById("resultBox");
resultBox.innerHTML=Number(num1.value)/Number(num2.value);
}
function mod(){
const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const resultBox = document.getElementById("resultBox");
resultBox.innerHTML=Number(num1.value)%Number(num2.value);
}가장 먼저 생각하고 작성해본 계산기
작성하면서도 "수행은 하겠지만 너무 모잘라 보인다"라고 생각했다.
문제점
1) 너무 길다 (코드의 중복이 많다)
2) 각각 수행이 각각 다른 함수를 호출하는게 많이 미련해보인다
3) 전역변수 왜 호출이 안되지...?(정상적으로 선언한거같은데 null값으로 호출된다)전체적으로 코드의 길이, 반복성이 문제가된다고 생각해 가장 다음으로 switch-case를 사용하려 햇는데 클릭한 연산식의 값을 뭘로 가져가지하면서 엄청 고민했는데 그냥 호출하는 함수에 값을 전달하면 되는거였다...왜 생각 못했는지 미련하다...킹치네
2번 (매개변수로 전달)
<h1>간이 계산기 스위치로 가져오기</h1>
첫번째 값 : <input type="number" id="num3" ><br>
두번째 값 : <input type="number" id="num4" ><br>
<button onclick="sum('+')">+</button>
<button onclick="sum('-')">-</button>
<button onclick="sum('*')">*</button>
<button onclick="sum('/')">/</button>
<button onclick="sum('%')">%</button>
<br><br>
계산결과: <span id="resultBox2"></span>function sum(op){
const num3 = Number(document.getElementById("num3").value);
const num4 = Number(document.getElementById("num4").value);
let res = 0; //결과 저장용 변수.
console.log(num3);
console.log(num4);
switch(op){
case '+' : res = num3 + num4; break;
case '-' : res = num3 - num4; break;
case '*' : res = num3 * num4; break;
case '/' : res = num3 / num4; break;
case '%' : res = num3 % num4; break;
}
document.getElementById("resultBox2").innerText = res;
}op로 클릭된 버튼의 매개변수를 전달받아. 스위치로 수행하는 모습
매개변수로 전달 받는걸 생각 못한게 너무 원통하다.
3번 (매개변수 간략화)
<h1>간이 계산기</h1>
첫번째 값 : <input type="number" id="num1" ><br>
두번째 값 : <input type="number" id="num2" ><br>
<button onclick="sum(this)">+</button>
<button onclick="sum(this)">-</button>
<button onclick="sum(this)">*</button>
<button onclick="sum(this)">/</button>
<button onclick="sum(this)">%</button>
<br><br>
계산결과: <span id="resultBox"></span>function sum(op){
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
//eval("코드 형식 문자열")
// 작성된 문자열을 js 코드로 해석되는 함수.
//문제가 많음
//해결 방법 : new Function () 사용
//document.getElementById("resultBox").innerText = eval(num1+ op +num2);
oper = op.innerText;
document.getElementById("resultBox").innerText
= new Function("return "+num1+ oper +num2)();
// 이 한줄이 함수
}eval이라는 방식도 있다 문자열을 코드로 인식해 수행하는 함수
하지만 해킹의 위협에 커 사용을 지양한다.
매개변수로 전달받은 op에서 해당 HTML코드의 작성된 값만 뽑아서 oper에 저장하는 과정이필요.
스위치 수행할 필요없이 그냥 바로 new Function으로 수행하면된다
이 때 new Function에서 "return " 구분 작성 필요
