[section 1] 계산기 구현하기

계산기 구현

textContent

text값을 가져오는 메소드
textContent는 css 는 고려되지않고 텍스트만 가져온다

textContent는 script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미한다.

element.textContent

element.matches( )

HTML에 동일한 요소이지만 클래스명, 아이디명 선택자가 다를 때

선택자를 이용해서 해당 요소를 찾게 도와주는 함수

element.matches('selector'); 

요소에 해당 선택자가 있는지 확인하고 true / false 를 반환한다.

HTML에서 요소 가져오기

const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담음
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담음

const타입의 calculator변수를 선언하고 document.querySelector를 통해 HTML에서 (.calculaor)의 클래스 요소들을 가져온다.

---

계산기 기초

• 숫자 버튼 입력

  if (target.matches('button')) {
    if (action === 'number') {
      if(display.textContent === '0' || previousKey === 'operator'){      //기존에 0 존재하면 대체하고, previousKey가 operator일때 다음숫자 값을 입력
        display.textContent = buttonContent;
      }
      else if(display.textContent !== '0'){   //기존에 숫자가 0이 아니면 그 뒤에 입력한 숫자를 추가
        display.textContent += buttonContent;
      }

• 연산자 버튼 입력

 if (action === 'operator') {
      firstNum = display.textContent    //firstNum에 화면에 표시된 숫자 저장(계산되기 이전의 숫자)
      operatorForAdvanced = buttonContent   //operatorForAdvanced 에 연산자 저장
      previousKey = 'operator';
    }

• AC(초기화버튼)눌렀을때

    if (action === 'clear') {   //AC버튼을 클릭하면 display값은 0이 되고, firstNum에 저장된 값과 operator가 없어짐, undeifned(정의되지않음)
      display.textContent = '0'
      firstNum = undefined
      previousNum = undefined
      operatorForAdvanced = undefined
      previousKey = 'clear'
    }

• Enter버튼 눌렀을때 결과값 출력(

//calculate함수 
function calculate(n1, operator, n2) {
  let result = 0;
  n1 = Number(n1);
  n2 = Number(n2);
  
  if(operator === '+'){
    result = n1 + n2
  }else if(operator === '-'){
    result = n1 - n2
  }else if(operator === '*'){
    result = n1 * n2
  }else if(operator === '/'){
    result = n1 / n2
  }
  
//calcutlate클래스(Enter버튼 클릭 시)
    if (action === 'calculate') {
      if(previousNum !== 'calculate'){    //이전키가 calculate(Enter)가 아닐때 
        previousNum = display.textContent     //화면에 보이는 숫자(계산되기 이전 숫자(두번째))를 previousNum에 저장
        display.textContent = calculate(firstNum,operatorForAdvanced,previousNum);
        previousKey = 'calculate'
      }
      else if(previousKey ==='calcutate'){      //이전키가 calculate(Enter)면  지금 화면에 보이는 숫자를 firstnum에 재할당 후 다시 계산
        firstNum = display.textContent;   //첫번째 숫자
        display.textContent = calculate(firstNum,operatorForAdvanced,previousNum);
      }
     }

계산기 심화

변수

previousKey = 이전에 입력한 숫자, 키(버튼)
firstNum= 연산자를 누르기 전에 숫자 첫번째 숫자
previousNum= 계산되기 이전의 숫자
operatorForAdvanced = 연산 기호를 할당

• 숫자 버튼 입력
  - 처음의 숫자가 0이면 처음 숫자를 버튼 누른 숫자로 바꾼다.
  - 처음의 숫자가 0이 아니면 그 다음 누른 숫자가 나타나게 한다.
  - 연산자 버튼을 누른 후 숫자 버튼을 누르면 누른 숫자만 나오게 한다.
  => 이전 키(previouskey)는 'number'이다

    if (action === 'number') {
      if(display.textContent === '0' || previousKey === 'operator'){      //기존에 0 존재하면 대체하고, previousKey가 operator일때 다음숫자 값을 입력
        display.textContent = buttonContent;
      }
      else if(display.textContent !== '0'){   //기존에 숫자가 0이 아니면 그 뒤에 입력한 숫자를 추가
        display.textContent += buttonContent;
      }
      if (previousKey === `operator`){    //previousKey가 operator일때 다음숫자 값을 입력
        display.textContent === buttonContent;
      }
      previousKey = 'number'
    }

• 연산자 버튼 입력
  - firstNum에 화면에 표시된 숫자를 먼저 저장한다.
  - operatorForAdvanced에 누른 연산자 기호를 저장한다.
  => 이전 키(previouskey)는 'operator'이다.

  if (action === 'operator') {
      firstNum = display.textContent    //firstNum에 화면에 표시된 숫자 저장(계산되기 이전의 숫자)
      operatorForAdvanced = buttonContent   //operatorForAdvanced 에 연산자 저장
      previousKey = 'operator';
    }

• AC(초기화버튼)눌렀을때
  - 계산시 할당을 숫자와 연산자를 다 초기화한다.
  - 화면은 0으로 초기화한다.

         if (action === 'clear') {   //AC버튼을 클릭하면 display값은 0이 되고, firstNum에 저장된 값과 operator가 없어짐, undeifned(정의되지않음)
      display.textContent = '0'
      firstNum = undefined
      previousNum = undefined
      operatorForAdvanced = undefined
      previousKey = 'clear'
    }

• Enter버튼 눌렀을때 결과값 출력(calculate)
  - enter키를 계속눌렀을때(연속적인계산) 고려

    if (action === 'calculate') {
      if(previousNum !== 'calculate'){    //이전키가 calculate(Enter)가 아닐때 
        previousNum = display.textContent     //화면에 보이는 숫자(계산되기 이전 숫자(두번째))를 previousNum에 저장
        display.textContent = calculate(firstNum,operatorForAdvanced,previousNum);
        previousKey = 'calculate'
      }
      else if(previousKey ==='calcutate'){      //이전키가 calculate(Enter)면  지금 화면에 보이는 숫자를 firstnum에 재할당 후 다시 계산
        firstNum = display.textContent;   //첫번째 숫자
        display.textContent = calculate(firstNum,operatorForAdvanced,previousNum);
      }
     }
  }