- Js에서도 switch문 작성 가능
- this : 이벤트가 발생한 요소 자체
button onclick의calculate(this)
-->calculate(btn)에서 btn은 클릭된 버튼 요소 - eval("코드형식문자열") : 작성된 문자열을 JS코드로 해석
but, 속도 + 보안 이슈로 사용 지양
==> new Function(return할 코드)() 사용
계산기 v1_1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습문제1</title>
</head>
<body>
<h1>간이계산기 만들기</h1>
첫번째 값: <input type="text" id="num1"> <br>
두번째 값: <input type="text" id="num2"> <br>
<button onclick="plus()">+</button>
<button onclick="minus()">-</button>
<button onclick="multiple()">*</button>
<button onclick="divide()">/</button>
<button onclick="mod()">%</button>
<br><br>
계산결과: <span id="result"></span>
<script>
// 전역변수로 input 요소 접근
const num1 = document.getElementById("num1") ;
const num2 = document.getElementById("num2") ;
// 결과 출력할 요소
const result = document.getElementById("result");
// Number(문자열) : 문자열을 number타입으로 변환
// console.log(Number(num1.value) + Number(num2.value))
function plus(){result.innerHTML=Number(num1.value) + Number(num2.value)};
function minus(){result.innerHTML=Number(num1.value) - Number(num2.value)};
function multiple(){result.innerHTML=Number(num1.value) * Number(num2.value)};
function divide(){result.innerHTML=Number(num1.value) / Number(num2.value)};
function mod(){result.innerHTML=Number(num1.value) % Number(num2.value)};
</script>
</body>
</html>계산기v1_2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습문제1</title>
</head>
<body>
<h1>간이계산기 만들기</h1>
첫번째 값: <input type="text" id="num1"> <br>
두번째 값: <input type="text" id="num2"> <br>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
<button onclick="calculate('%')">%</button>
<br><br>
계산결과: <span id="result"></span>
<script>
function calculate(op){
// op에는 =,-,*,/,% 중 하나가 전달되어짐
// input에 입력된 값을 얻어와 바로 number타입으로 변환
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
// 결과 저장용 변수
let res = 0;
switch(op){
case '+' : res = num1 + num2; break;
case '-' : res = num1 - num2; break;
case '*' : res = num1 * num2; break;
case '/' : res = num1 / num2; break;
case '%' : res = num1 % num2; break;
}
// span 태그에 결과 출력
document.getElementById("result").innerHTML=res;
}
</script>
</body>
</html>계산기v1_3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습문제1</title>
</head>
<body>
<h1>간이계산기 만들기</h1>
첫번째 값: <input type="text" id="num1"> <br>
두번째 값: <input type="text" id="num2"> <br>
<!--
함수 호출 시 매개변수 this
-> 이벤트가 발생한 요소 자체를 의미한다.
(여기서는 클릭된 연산자 버튼을 의미)
-->
<button onclick="calculate(this)">+</button>
<button onclick="calculate(this)">-</button>
<button onclick="calculate(this)">*</button>
<button onclick="calculate(this)">/</button>
<button onclick="calculate(this)">%</button>
<br><br>
계산결과: <span id="result"></span>
<script>
function calculate(btn){
// btn에는 클릭된 this(클릭된 버튼 요소)가 전달되어짐
// console.log(btn);
const op = btn.innerText; // 버튼의 내용(+, -, *, /, %)를 얻어옴
// input에 입력된 값을 얻어와 바로 number타입으로 변환
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
// 결과 저장용 변수
let res = 0;
switch(op){
case '+' : res = num1 + num2; break;
case '-' : res = num1 - num2; break;
case '*' : res = num1 * num2; break;
case '/' : res = num1 / num2; break;
case '%' : res = num1 % num2; break;
}
// span 태그에 결과 출력
document.getElementById("result").innerHTML=res;
}
</script>
</body>
</html>계산기v1_4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습문제1</title>
</head>
<body>
<h1>간이계산기 만들기</h1>
첫번째 값: <input type="text" id="num1"> <br>
두번째 값: <input type="text" id="num2"> <br>
<!--
함수 호출 시 매개변수 this
-> 이벤트가 발생한 요소 자체를 의미한다.
(여기서는 클릭된 연산자 버튼을 의미)
-->
<button onclick="calculate(this)">+</button>
<button onclick="calculate(this)">-</button>
<button onclick="calculate(this)">*</button>
<button onclick="calculate(this)">/</button>
<button onclick="calculate(this)">%</button>
<br><br>
계산결과: <span id="result"></span>
<script>
function calculate(btn){
// btn에는 클릭된 this(클릭된 버튼 요소)가 전달되어짐
// console.log(btn);
const op = btn.innerText; // 버튼의 내용(+, -, *, /, %)를 얻어옴
// input에 입력된 값을 얻어와 바로 number타입으로 변환
const num1 = Number(document.getElementById("num1").value);
const num2 = Number(document.getElementById("num2").value);
// eval("코드 형식 문자열")
// -> 작성된 문자열을 JS 코드로 해석
// -> 속도 + 보안 이슈가 있어서 사용 지양
// span 태그에 결과 출력
// document.getElementById("result").innerHTML=eval(num1 + op + num2);
document.getElementById("result").innerHTML= new Function("return " + num1 + op + num2)();
}
</script>
</body>
</html>
개발 일지