Javascript _계산기

자바스크립트를 이용한 간단한 계산기 만들기다.
음수까지 표현하는 코드를 추가했다.

📃 계산기 코드

HTML

 <input readonly id="operator">
    <input readonly type="text" id="result">
    <div class="row">
        <button id="num-7">7</button>
        <button id="num-8">8</button>
        <button id="num-9">9</button>
        <button id="plus">+</button>
    </div>
    <div class="row">
        <button id="num-4">4</button>
        <button id="num-5">5</button>
        <button id="num-6">6</button>
        <button id="minus">-</button>
    </div>
    <div class="row">
        <button id="num-1">1</button>
        <button id="num-2">2</button>
        <button id="num-3">3</button>
        <button id="divide">/</button>
    </div>
    <div class="row">
        <button id="clear">C</button>
        <button id="num-0">0</button>
        <button id="calculate">=</button>
        <button id="multiply">x</button>
    </div>

Javascript

<script>
        let numOne = '';
        let operator = '';
        let numTwo = '';
        const $operator = document.querySelector('#operator');
        const $result = document.querySelector('#result');
        const onClickNumber = (event) => {
            if (!operator) {
                numOne += event.target.textContent;
                $result.value += event.target.textContent;
                return;
            }
            if (!numTwo) {
                $result.value = '';
            }
            numTwo += event.target.textContent;
            $result.value += event.target.textContent;
        };
        document.querySelector('#num-0').addEventListener('click', onClickNumber);
        document.querySelector('#num-1').addEventListener('click', onClickNumber);
        document.querySelector('#num-2').addEventListener('click', onClickNumber);
        document.querySelector('#num-3').addEventListener('click', onClickNumber);
        document.querySelector('#num-4').addEventListener('click', onClickNumber);
        document.querySelector('#num-5').addEventListener('click', onClickNumber);
        document.querySelector('#num-6').addEventListener('click', onClickNumber);
        document.querySelector('#num-7').addEventListener('click', onClickNumber);
        document.querySelector('#num-8').addEventListener('click', onClickNumber);
        document.querySelector('#num-9').addEventListener('click', onClickNumber);

        const onClickOperator = (op) => () => {
            if(op === '-'){  // 음수 표현 코드
                if(!numOne){
                    numOne += op;
                    $result.value = op;
                    return;
                } else if (numOne && !operator){
                    operator = op;
                    $operator.value = op;
                    return;
                }
            }
            if(numTwo) {
                switch (operator) {
                    case '+':
                        $result.value = parseInt(numOne) + parseInt(numTwo);
                        break;
                    case '-':
                        $result.value = numOne - numTwo;
                        break;
                    case '*':
                        $result.value = numOne * numTwo;
                        break;
                    case '/':
                        $result.value = numOne / numTwo;
                        break;
                    default:
                        break;
                }
                numOne = $result.value;
                numTwo = '';
            }
            if (numOne) {
                operator = op;
                $operator.value = op;
            } else {
                alert('먼저 숫자를 입력하세요.');
            }
        };
        document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
        document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
        document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
        document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));
        document.querySelector('#calculate').addEventListener('click', () => {
            if (numTwo) {
                switch (operator) {
                    case '+':
                        $result.value = parseInt(numOne) + parseInt(numTwo);
                        break;
                    case '-':
                        $result.value = numOne - numTwo;
                        break;
                    case '*':
                        $result.value = numOne * numTwo;
                        break;
                    case '/':
                        $result.value = numOne / numTwo;
                        break;
                    default:
                        break;
                }
                $operator.value = '';
                numOne = $result.value;
                operator = '';
                numTwo = '';
            } else {
                alert('먼저 숫자를 입력하세요.');
            }
        });
  		// switch문을 if문으로 바꿨을 때
        // document.querySelector('#calculate').addEventListener('click', () => {
        //     if (numTwo) {
        //         if (operator === '+') {
        //             $result.value = parseInt(numOne) + parseInt(numTwo);
        //         } else if (operator === '-') {
        //             $result.value = numOne - numTwo;
        //         } else if (operator === '*') {
        //             $result.value = numOne * numTwo;
        //         } else if (operator === '/') {
        //             $result.value = numOne / numTwo;
        //         }
        //         $operator.value = '';
        //         numOne = $result.value;
        //         operator = '';
        //         numTwo = '';
        //     } else {
        //         alert('먼저 숫자를 입력하세요.')
        //     }
        // });
        document.querySelector('#clear').addEventListener('click', () => {
            numOne = '';
            operator = '';
            numTwo = '';
            $operator.value = '';
            $result.value = '';
        });
    </script>



📕새로 배운 것 정리
input 태그의 속성


readonly - input 태그를 읽기 전용으로 설정해주는 속성

입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있다.


★★고차함수★★

함수가 함수를 반환 할 수 있다.

반환된 함수는 다른 변수에 저장할 수 있고 변수에 저장된 함수를 다시 호출할 수도 있다.

함수를 만드는 함수를 고차 함수(high order function)라고 한다.
const func = () => {
  return () => {
    console.log('hello');
  };
};

//func 함수는 hello라는 문자열을 console.log 하는 함수를 찍어 내는 공장

const innerFunc = func();
innerFunc(); // hello
반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다.

즉, 바꾸고 싶은 자리를 매개변수로 만들면 된다.
const func = (msg) => {
  return () => {
    console.log(msg);
  };
};
func 함수를 호출하면, func 함수에 넣은 매개변수를 console.log 하는 함수가 반환된다.
const innerFunc1 = func('hello');
const innerFunc2 = func('javascript');
const innerFunc3 = func();
innerFunc1(); // hello
innerFunc2(); // javascript
innerFunc3(); // undefined
함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다.
const func = (msg) => {
  return () => {
    console.log(msg);
  };
};

// {}와 return 생략

const func = (msg) => () => {
  console.log(msg);
};



if문 중첩 제거


if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.
짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.
else를 제거한다(이때 중첩 하나가 제거된다).
다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다.

function test() { 
  let result = ''; 
  if (a) { 
    if (!b) { 
      result = 'c'; } 
    } 
  } else { 
    result = 'a'; 
  } 
  result += 'b'; 
  return result; 
}
  result += 'b';

return result;  를 if와 else 내부에 넣고

분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.

그 다음 else를 제거한다(이때 중첩 하나가 제거된다).
    function test() {
      let result = '';
      if (!a) {
        result = 'a';
        result += 'b';
        return result;
      }
      if (!b) {
        result = 'c';
      }
      result += 'b';
      return result;
    }



+ 새로 배운 함수)
parseInt() - 문자열을 정수로 바꿔주는 함수




출처 - 이 포스트는 제로초님의 youtube - ES2021 자바스크립트 강좌를 참고하여 작성하였습니다.
                
                    
        
    
    
    
    
    
                
                

                
                
                    
                        
                            

                            
                            Author And Source
                            


                            이 문제에 관하여(Javascript _계산기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
                                
                                https://velog.io/@tuna7797/Javascript-계산기
                            

                            
                            
                                저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
                            
                            
                                
                                
                                

                                
                                

                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)

Javascript _계산기

📃 계산기 코드

HTML

Javascript

📕새로 배운 것 정리

input 태그의 속성

★★고차함수★★

if문 중첩 제거

+ 새로 배운 함수)

Author And Source

좋은 웹페이지 즐겨찾기