오늘 배운것들

오늘 배운것은 스프린트를 통하여 계산기의 로직을 제작해보고
그것을 통하여 조건문과 변수선언, 그리고 html에서 선언되어있는
태그의 클래스를 통해 정보의 전달방식과 onClick 이벤트를 통하여
js자체의 액션을 사용하는 법에 대하여 공부를 하였다.

연산을 해주는 함수

function calculate(n1, operator, n2) {
  let result = '';
   let fn = Number(n1); //누적된 문자열 숫자값을 정수로 치환
  let pn = Number(n2); // 위와 동일
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  if(operator === '+') {
    result = fn + pn;
  }if(operator === '-') {
    result = fn - pn;
  }if(operator === '*') {
    result = fn * pn;
  }if(operator === '/') {
    result = fn / pn;
  }
  return result;
}

calculate라는 3개의 파라미터를 요구하는 함수를 선언
이것은 js자체에서 이용하기위해 결과값을 도출하는 기능을 담당한다.
계산기에서 = 버튼을 누르면 실제로는 calculate() 함수를 호출하여 그답을
display 해주는 것이다.

그러면 js코드는 어떻냐 하면

buttons.addEventListener('click', function (event) {
  // 버튼을 눌렀을 때 작동하는 함수입니다.
  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  // ! 위 코드(Line 19 - 21)는 수정하지 마세요.
  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면
      // 아래 코드가 작동됩니다.
      console.log('숫자 ' + buttonContent + ' 버튼');
        previousKey += buttonContent;
        if (!isUsedOper) {
          if(firstNum === undefined){
            firstNum = String(buttonContent);
          } else {
            firstNum += String(buttonContent);
          }
        } else {
          if(previousNum === undefined){
            previousNum = String(buttonContent);
          } else {
            previousNum += String(buttonContent); 
          }
        }
    }
    if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
      previousKey += buttonContent;
      operator = buttonContent;
      isUsedOper = true;
    }
    if (action === 'decimal') {
      previousKey = 'decimal';
    }
    if (action === 'clear') {
      console.log('초기화 버튼');
      previousKey = '';
      isUsedOper = false;
    }
    if (action === 'calculate') {
      console.log('계산 버튼');
      previousKey =calculate(firstNum, operator, previousNum);
      console.log(calculate(firstNum, operator, previousNum));
      firstNum = undefined;
      previousNum = undefined;
    }
  } document.querySelector('.calculator__display').textContent = previousKey;
});

이런식으로 이루어 지는데 제일 밑쪽의 코드를 보면 계산기의 출력박스에 내용을 previousKey라는 변수에 담아서 출력을 한다. 어떻게 연계가 되었나 보면
.calculator__display 라는 클래스(.은 클래스, #은 id)를 인자값으로하여 querySelector(인자값).textContent 함수를 사용한것이다.