[SEB TIL] 22.05.06 계산기 만들기

01 기초

만들어 둔 목업에 맞게 html, css부터 만들고 class 다 지정해둬서 작업할 때 편했다!

 

1-1 기본 구조

익명함수 안에서 모든 기능을 구현하는 방식 (변수 선언, 외부함수 선언은 별개)

 

button.addEventLIstener( 'click' ,  function(event){

 (if event.target.classname === number){

    기능

 }

 (if event.target.classname === operator){

    기능

 }

 (if event.target.classname === enter){

    기능

 }

 })

 

1-2 화면 상 값 변경하기

• 직접 html node를 끌어와 새 값 대입
• 외부 함수에 인자를 넘겨줘서 -> 함수 실행 후 그 결과로 값 바꾸기

1-3 조건 나누어 생각하기

• firstnum 입력
  • 화면에 0 이 떠 있는 경우 : 새로 입력한 값이 표시됨
  • 화면에 값이 있는 경우 : 새로 입력한 값 뒤에 다시 입력한 값이 붙음
• 연산자 입력
  • 지금까지 화면에 떠 있는 수를 firstnum에 저장
• secondnum 입력
• 계산 : 계산 function에 인자값 firstnum, operator, secondnum 넣음
• AC버튼 : 입력한 값 모두 초기화 (재할당)

innertext, innerhtml -> innertext 사용하는 것을 권장. 여기서는 textContent 활용

return : 함수 실행 후 어떤 걸 밖으로 반환해줄 지 정하는 것, if문에서는 필요 없음

02 advanced

숫자칸, 연산자 칸 따로 있지 않고 창에 쭉 표시되므로

연산자 입력 여부 확인해서 firstnum 입력 종료하고 secondnum 입력 시작하려면

변수에 정보를 담아야 함

 --> previouskey = 'number' 또는 'operator'

 

 

---

회고

지짜 어려워따 ㅎㅎㅎㅎㅎㅎㅎ 어린애가 된 거 같았다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

advanced까지는 더듬더듬 했는데 nightmare 가니까 생각해야 되는 조건이 너무 많아서 if문이 엉망진창이 되고..

통과하지 않아야 될 조건이 통과되는데 왜인지 모르겠고.. function이 꼬이는데 어디서부터 손대야 될지 모르는 상황이 ㅎㅎㅎㅎ

 

하나 배운 건 '언제나 더 좁고 특정적이고 통과하기 어려운 조건을 상위에 두고 거르자'는 거

레퍼런스 받아서 연구하고 왜 못 풀었는지 다시 기록해야겠다.