자바스크립트 실습문제 2_220921

<aside> 📢 [ 코멘트 ] 올려주신 실습문제 확인해봤습니다. 잘하셨는데, 연산불가표시가 뜬후에 다시 정상적인 코드를 실행하게되면 빨간배경이 그대로 남아있게 되네요! 요부분만 수정해주시면 문제없겠습니다.

</aside>

자바스크립트로 간단한 계산기 만들기

사용자가 계산할 숫자 두 개를 입력하고 연산자도 선택하게 한다. ’=’ 버튼을 누르면 오른쪽에 계산 결과가 나오며 계산 결과가 나오는 창은 읽기만 가능하다. 이때, 나누기는 수가 0일 때 계산 결과 창의 배경이 빨갛게 변하며 ‘연산 불가’라는 하연 글자가 들어간다. 위 조건은 / 연산과 % 연산 모두 동일하다.

자바의 경우, 0으로 나누면 에러가 뜨며 종료되었지만 자바스크립트는 NaN 또는 ±infinity를 값으로 내며 모두 Number이다. ±infinity는 ==로 비교할 수 있고 NaN는 isNaN(변수명)으로 확인할 수 있다. 모든 연산 경우에 대한 결과 값을 확인해 본 후 조건을 적용하는 것을 추천한다!

문제 풀이

기본적인 계산기 틀을 만든다.

<body>
		<div id="calc">
        <input type="number" id="num1">

        <select name="oper" id="oper">
            <option value="plus">+</option>
            <option value="minus">-</option>
            <option value="multi">*</option>
            <option value="div">/</option>
            <option value="remain">%</option>
        </select>

        <input type="number" id="num2">

        <button onclick="calcTest();">=</button>

        <input type="text" id="result" disabled>
    </div>
</body>

마지막 결과가 출력되는 아이디가 result인 텍스트 input 요소는 읽기 전용이므로 사용자가 접근하지 못하도록 disabled 속성을 추가하였다.

Untitled

기능 구현은 자바스크립트를 통해 함수를 만들어 구현하였다.(빨간 밑줄은 코멘트에 대한 수정)

<body>
		<script>
        function calcTest() {
            let oldNum1 = document.querySelector("#num1").value;
            let oldNum2 = document.querySelector("#num2").value;

            let num1 = oldNum1*1;
            let num2 = oldNum2*1;

            let num3 = 0;

            let op = document.querySelector("#oper").value;
            switch(op) {
                case "plus" : num3 = num1+num2; break;
                case "minus" : num3 = num1-num2; break;
                case "multi" : num3 = num1*num2; break;
                case "div" : if(num2===0) {
                        redBack();
                        return;
                    } else { num3 = num1/num2;
                    } break;
                case "remain" : if(num2===0) {
                        redBack();
                        return;
                    } else {
                        num3 = num1%2;
                    } break;
            }
            result.value = num3;
						reBack();
        }

        function redBack() {
            let r = document.getElementById("result");
            r.value = "연산불가";
            r.style.backgroundColor = "red";
            r.style.color = "white";
        }

				function reBack() {
            let r = document.getElementById("result");
            r.style.backgroundColor = "white";
            r.style.color = "black";
        }
    </script>
</body>

자바스크립트 형식으로 css를 변경하려면 .getElementById와 같은 getElement 함수로만 변경 가능하다. .querySelector 함수로 하면 제대로된 기능 구현이 되지 않는다.