한자리 계산기

드디어...

오늘 계산기 코딩을 해보는 날이었다.

기능을 가지는 함수를 만들어보기는 했지만 직접 결과물을 만들어 내는 것은 처음이었기에 기대되기도 했다.

우선 한자리수 계산기부터 만들기 시작했다.

그런데 한자리수 계산기 처음부터 막혔다.

자바스크립트만 사용하는 것이 아니라 HTML과 CSS가 같이 있는 것은 처음이라 변수부터 이해가 되지 않았었다.

같이 실습하는 페어분께 많은 도움을 받았다.

진짜 어려웠던 한자리 계산기를 만들고 난 후

두자리 이상 계산기를 만드는 큰산을 만났다.

아직 완전하게 만들어지지는 않았지만 그러기 위해서는 코드의 의미를 좀 더 알아야겠다는 생각이 들었다.

function calculate(n1, operate, n2) {
  let result = 0;
  if(operate === '+') {
    result = Number(n1) + Number(n2);
  }
  else if(operate === '-') {
    result = Number(n1) - Number(n2);
  }
  else if(operate === '*') {
    result = Number(n1) * Number(n2);
  }
  else if(operate === '/') {
    result = Number(n1) / Number(n2);
  }
  return String(result);
}

이 한자리수 계산기 함수를 이용해서 버튼에 반응하는 두자리수 계산기를 만들어야 했다.

저 코드 위에 미리 선언되어있던

const document.querySelector();

이 많은 변수들의 의미를 해석하는데 몇시간이 걸렸다.;;

아직 HTML과 CSS문법이 서툴러서 하나하나 대응해서 찾다보니 오랜 시간이 걸렸다.

한자리 계산기는 도움을 받아서 한거라 다시 혼자 하려니 하나도 생각이 안났다.

MDN에서 document.querySelector()을 찾아봤다.

Document.querySelector()

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

예제
클래스를 만족하는 첫 번째 요소 검색
아래 예제는 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환합니다.

var el = document.querySelector(".myclass");

선택된 클래스나 id의 첫번째 elementfmf 반환하는 의미였다.

또 궁금한 것은 .textContent 였다.

Node.textContent

Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.

참고: textContent와 HTMLElement.innerText가 자주 혼동되곤 하지만, 두 속성에는 몇 가지 중요한 차이점이 있습니다.

구문

let text = someNode.textContent
someOtherNode.textContent = string

텍스트 컨텐츠를 표현할때 사용하는 메소드 였다.

내일은 더 공부하고 나서 두자리수 계산기 꼭 완성해야겠다.