<!-- TODO: practice_240813.js 파일을 4_JS\resources\js\ 경로에 복사한 후 연결 -->
<script src="../../resources/js/practice_240813.js"></script>
<!-- TODO: practice_240813.css 파일을 4_JS\resources\css\ 경로에 복사한 후 연결 -->
<link href="../../resources/css/practice_240813.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="header">
<h2>간단한 계산기</h2>
</div>
<div class="content">
<input type="number" id="num1">
<select id="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
</select>
<input type="number" id="num2">
<!-- TODO: = 버튼 클릭 시 결과를 #result 요소에 출력 -->
<input type="button" value="=" onclick="calculator();">
<input type="number" id="result" readonly>
</div>
</div>
</body>
</html>
function calculator() {
const num1El = document.getElementById("num1");
const num2El = document.getElementById("num2");
const op = document.getElementById("op").value;
const result = document.getElementById("result");
const num1 = parseInt(num1El.value);
const num2 = parseInt(num2El.value);
let total = 0;
switch(op) {
case '+':
total = num1 + num2;
break;
case '-':
total = num1 - num2;
break;
case '*':
total = num1 * num2;
break;
case '/':
if (num2 == 0) {
alert('0으로 나눌 수 없습니다. 다시 시도해주세요!');
num2El.focus();
return;
}
total = num1 / num2;
break;
case '%':
if (num2 == 0) {
alert('0으로 나눌 수 없습니다. 다시 시도해주세요!');
num2El.focus();
return;
}
total = num1 % num2;
break;
}
result.value = total;
}
const op = document.getElementById("op").value;
js에 op에 value가 설정이 되어있다 설정 되어 있지 않으면
result 값은 0이 나온다
case '/':
if (num2 == 0) {
alert('0으로 나눌 수 없습니다. 다시 시도해주세요!');
num2El.focus();
return;
}
focus() 메서드는 특정 HTML 요소에 포커스를 설정합니다
주로 입력 필드에 사용되며 해당 요소가 포커스를 받으면 사용자의 입력이
그 필드로 직접 전달됩니다
사용자가 0으로 나누기를 시도할 경우, 경고 메세지를 표시한 후 num2 입력 필드에
포커스가 자동으로 돌아갑니다
num2El은 num2를 참조한다.
포커스는 사용자가 입력 필드로 다시 클릭하거나 탭할 필요 없이 즉시
num2 값을 수정할 수 있다
<body>
<div class="wrap">
<div class="header">
<h2>간단한 계산기</h2>
</div>
<div class="content">
<input type="number" id="num1">
<select id="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
</select>
<input type="number" id="num2">
<!-- TODO: = 버튼 클릭 시 결과를 #result 요소에 출력 -->
<input type="button" value="=" onclick="calculator();">
<input type="number" id="result" readonly>
</div>
</div>
</body>
result 읽기 전용 옵션을 준다.