JavaScript 입문 : 계산기 만들기 - 결과 계산, switch문을 if문으로, Clear 적용

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

▒ 계산결과 출력

 

1. 순서도 

 

이제는 계산결과를 출력하기 위해 등호 버튼을 눌렀을때 순서도를 다시 볼 필요가 생겼습니다. 간단하게 생각하는게 이제 도움이 되더라구요. 

 

계산을 하기 위해서 연산자 다음에 계산되는 수 (편의상 두번째 수)가 존재하는냐 존재하지 않느냐를 구분해 줘야 합니다. 존재하지 않으면 경고를 내보내고 존재하면 사직연산에 대한 게산을 하면 됩니다. 

 

다행히 자바스크립트가 작동되는 브라우저에서 확인해 보면 브라우저 자체에서 계산이 되도록 설계가 되어있기 때문에 일반 사칙연산을 진행하면 됩니다. 

계산결과 순서도

 

2. 사칙연산 코딩

 

if문을 사용하여 연산자 이후 나오는 두번째 수 여부에 따라 계산을 합니다. 특히 이번에는 Switch문으로 각 case별로 코딩을 하도록 하겠습니다.

 

현재 설정된 숫자에 대한 변수 (numFirst와 numSecond)는 더하기 연산을 적용할 때 문자열로 해석이 된다고 합니다. 따라서 숫자로 적용하기 위하여 정수화 시키는 parseInt를 앞에 붙혀줍니다. 

 

나머지 연산 (빼기, 곱하기, 나누기)은 정수화 시킬 필요가 없다고 하네요. 자체로 정수화가 되서 숫자열로 인식한다고 하는데 편하게 전체에다 parseInt를 붙혔습니다. 

 

 

만일 두번째 수를 입력하지 않고 등호를 클릭한 경우 다음과 같이 경고창도 잘 반영이 되었습니다. 

 

 

 

▒ Switch 문을 if문으로 

 

아직 저는 완전 초보이고 (물론 다른일로 시간도 없거니와) 하나하나 이해를 하면서 진도를 나가니 상당히 시간이 걸리기도 합니다만, 이해를 하지 못한 상태에서 다음 강좌를 듣는다는게 의미가 없기때문에 천천히 공부를 해 가고 있긴합니다만...

 

위 if문내 switch문으로 사칙연산을 했는데 이 switch문을 다시 if문으로 반영해 보면서 눈에 익히도록 하는게 좋을 듯 합니다. 

 

보통 if문은 if ~ else문으로 되어 있습니다. 사칙연산과 같이 케이스가 여러가지인 경우 if ~ else if ~ else ~문으로 구분이 됩니다. 

2021.11.15 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : if ~ else 문, else if 문, 중첩 if 문

JavaScript 입문 : if ~ else 문, else if 문, 중첩 if 문

 

아래 그림과 같이 switch문을 if문으로 변경해서 실행해 보았습니다. 문제없이 연산이 되긴하는데 강의에는 정답이 없어서 확인은 못해봤지만 프로그램이라는게 하나만 정답이 있는 것은 아니겠죠.

 

 

▒ Clear 계산

 

사칙연산이 문제없이 되었으면 계산한 값을 초기화 시키는 Clear에 대한 함수를 적용할 차례입니다.

 

최초 시작한 처음 코딩을 그대로 적용합니다. 물론 변수를 새로 설정하는 것이 아니라 전체 변수의 값을 빈값으로 설정하면 됩니다. 

 

 

일단 여기까지가 기본적 계산기를 작동하게 코딩을 하였습니다. 단, 현재까지 문제점은 단순하게 2개만 사칙연산이 다능하고 연달아 계산이 안되는 점 그리고 처음 시작할 때 -3 같이 숫자를 붙힐 수 없는 점 아직까지는 마우스로만 계산을 하고 최종 계산시 엔터키를 사용할 수 없다는 점등이 보이네요. 차츰 업그레아드 시켜야 될 듯 합니다.