제로초 JS - 계산기 만들기

3-1 계산기 순서도 그리기

• 이벤트에 따라 별개의 순서도가 나온다.
  

3-2 계산기 구현하기 (상수와 변수)

• HTML

<div class="calc">
    <div>
        <input type="number" id="input">
        <button id="clear">C</button>
    </div>
    <div>
        <button id="plus">+</button>
        <button id="minus">-</button>
        <button id="divide">/</button>
        <button id="multiple">x</button>
    </div>
    <div>
        <button id="answer">=</button>
        <input readonly type="number" id="result">
        <!-- readonly 는 읽기전용을 뜻한다. -->
    </div>
    <script>
    </script>
</div>

• Javascript

<script>
    const numberInput = document.querySelector('#input');
    const clearButton = document.querySelector('#clear');
    const plusButton = document.querySelector('#plus');
    const minusButton = document.querySelector('#minus');
    const divideButton = document.querySelector('#divide');
    const multipleButton = document.querySelector('#multiple');
    const answerButton = document.querySelector('#answer');
    const resultInput = document.querySelector('#result');

    let temp; //임시값
    let operator; //연산자
    //처음값은 정해져 있지않고 나중에 바뀌게 된다. 따라서 const가 아닌 let을 써준다.

    plusButton.addEventListener('click', () => {
        if(numberInput.value){
            temp = numberInput.value
            operator = '+'
        }
    });
	.
	.
  	.
	.
</script>

3-3 null과 else if

• null : 자바스크립트에서의 null은 '존재하지 않는 값', '비어 있는 값', '알 수 없는 값'을 나타낸다. 밑의 예제처럼 입력받은 값을 빈 공간으로 반환할 때도 사용할 수 있다.
• else if : else if는 유사하지만 약간의 차이가 있는 복수의 조건을 처리할 때 사용한다. else를 사용하고 또다시 if절을 만들지 않고 코드를 간편하게 줄일 수 있다.

clearButton.addEventListener('click', () => {
    numberInput.value = ''
    temp = null
    operator = null
});

answerButton.addEventListener('click', () => {
    if(operator){
        if(numberInput.value){
            if(operator === '+'){
                resultInput.value = temp + numberInput.value
            } else if(operator === '-'){
                resultInput.value = temp - numberInput.value
            } else if(operator === '*'){
                resultInput.value = temp * numberInput.value
            } else if(operator === '/'){
                resultInput.value = temp / numberInput.value
            }
        }
    }else{
        if(numberInput.value){
            resultInput.value = temp
        }
    }
});

3-4 자료형과 형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동변환된다. 이런 과정을 "형 변환(type conversion)"이라고 한다. 이 외에, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있다.

1) 문자형으로 변환 : string(value)

• alert메서드는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 한다.
  만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다.

2) 숫자형으로 변환 : Number(value)

• 숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 발생한다.

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

3) 불린형으로 변환 : Boolean(value)

• 문자열 '0'과 '' 공백은 불린형으로 변환 시 True가 됩니다.

3-5 버그 해결해나가기

• 만든 프로그램을 구동하며 버그 해결해나가기
• 버그가 아직 존재하지만 계산기 프로그램 완성!
  

출처 : https://ko.javascript.info/type-conversions