[공부] 계산기 만들기 <이전자료>

여기서 중요한것은 연산자를 누르면 계산이 완료되게 하는 것이다 

그리고 숫자가 나란히 나오도록 하는 것도 중요하다 

 

 

 

 

if문 심화 

 

예를 들어 

  appendOperator(operator) {
    if (this.operatorChek) return;
    if (this.equalsCheck) this.equalsCheck = false;
    this.displayContent += operator;
    
    this.operatorChek = true;
    this.secondClick = false;
    this.onlyDisplayContent = "";
    

  }

 

첫줄은 this.operatorChek 가 true이면 return됨으로 이 function (class안에서는 function안써도 됌 )자체가 끝나버림

빠른 return으로 더 가독성 좋게만듦 효율성도 좋아짐 

 

두번째줄은  첫번째줄과 다르다 뭐가?

this.equalsCheck  true 이면 옆에 써진 것이 발동되고

다음으로 넘어간다 ( 저런식으로 한문장을 쓸때는 중괄호를 생략 할 수 있다. 하지만 중괄호 생략하지 않는게 좋다는 사람도 있음 )

첫번째줄처럼 function이 끝나지가 않고 계속 진행이 된다.

 

eval함수 

 compute() {
    if (this.operatorChek) return;
    this.displayContent = eval(
      this.displayContent.replace("\u00D7", "*").replace("\u00F7", "/")
    );
    this.equalsCheck = true;
    
    
    this.onlyDisplayContent = "";
    this.secondClick = true;
   
  }

 

eval함수를 쓰면  23+24*24*5+4-3 이런 것을 한번에 계산해주는 유용한 함수이다.

대신  x  or 나누기 부호가  *,/ 외에는 인식을 못한다 

그래서 replace를 써준 것 이다.

 

class 생성 

class Calculator {
  constructor() {
    this.displayElement = displayElement;
    this.operatorChek = true;
    this.equalsCheck = false;
    this.displayContent = "";
    this.secondClick = true;
    this.clear();
    this.onlyDisplay = displayElement;
    this.onlyDisplayContent = "";    
  }
  clear() {
    this.displayContent = "";
    this.displayElement.value = 0;
    this.operatorChek = true;
    this.onlyDisplayContent = "";
  }
  compute() {
    if (this.operatorChek) return;
    this.displayContent = eval(
      this.displayContent.replace("\u00D7", "*").replace("\u00F7", "/")
    );
    this.equalsCheck = true;
    
    
    this.onlyDisplayContent = "";
    this.secondClick = true;
   
  }  
  appendOperator(operator) {
    if (this.operatorChek) return;
    if (this.equalsCheck) this.equalsCheck = false;
    this.displayContent += operator;
    
    this.operatorChek = true;
    this.secondClick = false;
    this.onlyDisplayContent = "";    
  }
  appendNumber(number) {
    if (this.equalsCheck) {
      this.displayContent = number;
      this.equalsCheck = false;
     
      this.operatorChek = false;
    } else {
      this.displayContent += number;
    }
    this.operatorChek = false;        
  }
  Second(){
    if(this.secondClick) return;
    this.displayContent = eval(
      this.displayContent.replace("\u00D7", "*").replace("\u00F7", "/")
    );
    this.updateDisplay();    
  }  
  updateDisplay() {
  this.displayElement.value = this.displayContent;  
  }
  onlyDisplaygo(number) {  
  this.onlyDisplayContent += number;
  this.displayElement.value = this.onlyDisplayContent;
  }
}

블로그에는 

class Calculator {

  constructor(displayElement) {         이런식으로 해줬는데 굳이 그럴필요 없을듯 받아오는 값이 없으니

 

 

object생성

const buttons = document.querySelectorAll("button");
const displayElement = document.querySelector(".buttonInput");
const calculButton = document.querySelector(".calculBton")
const calbox = document.querySelector(".calbox")
const calculText = document.querySelector(".clacul-text")


const calculator = new Calculator();

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    switch (button.dataset.type) {
      case "operator":
        calculator.Second();
        calculator.appendOperator(button.innerText);

        break;
      case "ac":
        calculator.clear();
        break;
      case "equals":
        calculator.compute();
        calculator.updateDisplay();
       
        break;

      default:
        calculator.appendNumber(button.innerText);
        calculator.onlyDisplaygo(button.innerText);
        break;
    }
  });
});

해석

일단 object이름은 calculator로 하고 

틀은 Calculator() 로 하겠습니다. 

 

 

버튼s 마다 적용합니다 button.addEventListener 클릭이 눌리면  에로우함수를 실행합니다 

함수내용은

swich  어떤 버튼의 타입이눌리냐에따라 실행하는 case가 다릅니다.

 

operator가 눌리면

 calculator 라는 object의 틀인 Calculator 안에 있는 메소드중 second();함수와 appendOperator함수를 실행하는데

appendOperator함수를 실행할때는 파라미터로 button.innerText를 가져가세요 그리고 break 끝 

 

나머지도 그런식으로 이해하고

default 는 그외에 라는 뜻이다. 

 

 

 

 

 

참고 블로그

kanhi.tistory.com/2

자바스크립트 계산기 만들기 1: 계산기 꾸미기, 계산식 입력