8/31 TIL

최준호·2022년 8월 31일

<목차>

계산기 js기능구현에 사용되는 method, function 학습
계산기 js 기능구현
+작성 후기

이벤트 리스너 등록하기

특정 dom요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다.

DOM객체.addEventListener(이벤트명, 실행할 함수명, 옵션)

const a = document.querySelector('a');
  a.addEventListener('click', showConsole);
  function calculator() {
  	console.log("");
  }

<예시>

계산기js기능구현에 작성되었던 속성

1) textContent

textContent 속성을 활용하면 간단하게 입력된 내용을 변경할 수 있다.

계산기 js기능구현

const display = document.querySelector('.calculator__display--for-advanced'); 
// calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let firstNum, operatorForAdvanced, previousKey, previousNum;
// 첫번째 숫자, 연산자, 방금 누른 키, 두번째 숫자
//firstNum = 첫번째 입력했었던 숫자들을 담는 변수
//operatorForAdvaced = 기호를 담는 변수
//previousKey = 이전에 내가 입력했던것이 어떤건지 담는 변수
//previousNum = 연산한 결과를 담는 변수
buttons.addEventListener('click', function (event) {
  // 버튼을 눌렀을 때 작동하는 함수입니다.

  const target = event.target; 
  // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; 
  // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; 
  // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.

1. 계산기 숫자버튼 동작시키기

if (target.matches('button')) {
    if (action === 'number') {
      // 처음에 0이 있을 때,
      if (display.textContent === '0' || previousKey === 'operator') {
        display.textContent = buttonContent;
      } else {
        display.textContent = display.textContent + buttonContent;
      }
      previousKey = 'number';
    }

2. 연산자버튼 작동시키기

if (action === 'operator') {
      firstNum = display.textContent;
      operatorForAdvanced = buttonContent;
      previousKey = 'operator';

3. Enter버튼 작동시키기

if (action === 'calculate') {
      previousNum = display.textContent;
      display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
      previousKey = 'calculate';
    }

4. AC로 초기화하기

if (action === 'clear') {
      display.textContent = '0';
      firstNum = undefined;
      operatorForAdvanced = undefined;
      previousNum = undefined;
      previousKey = 'clear';
    }