자바스크립트 사용해서 간단한 계산기를 만들 수 있다.

먼저 if문을 이용한 소스이다.

• html 코드 및 화면

<h3>계산기</h3>
<label for="">값1<input type="number" id="num1"></label>
<label for="">값2<input type="number" id="num2"></label>
<label for="">연산자<input type="text" id="operate"></label>
<label for="">결과<input type="text" id="result"></label>
<button onclick="calc()">계산하기</button>
<button onclick="reset()">초기화</button>

계산기

값1 : 값2 : 연산자 : 결과 : 계산하기 초기화

1. 값1, 값2에 입력하고 싶은 숫자를 입력
2. 연산자 input태그에 (+,-,*,/) 계산하고 싶은 연산자 입력
3. 아래 계산하기 버튼 클릭시 결과 input태그에 값이 나온다.
4. 초기화 버튼 클릭 시 모든 input태그의 value값을 초기화 한다.

• 자바스크립트 코드

 const calc = () => { // 계산하기 버튼
 	let num1 = Number(document.querySelector('#num1').value);
    let num2 =  Number(document.querySelector('#num2').value);
    let operate = document.querySelector('#operate').value;
    let result = document.querySelector('#result');
    let nums;
    
    if (operate == '+') {
    	nums = num1 + num2;
        } else if (operate == '-') {
        	nums = num1 - num2;
        } else if (operate == '*') {
        	nums = num1 * num2;
        } else if (operate == '/') {
        	nums = num1 / num2;
        } else {
       		nums = '모르겟어요';
        }
        	result.value = nums;
     }

 const reset = () => { // 초기화 버튼
 	document.querySelector('#num1').value = '';
    document.querySelector('#num2').value = '';
    document.querySelector('#operate').value = '';
    document.querySelector('#result').value = '';
 }

헷갈렸던 점은 input태그의 value값을 가져와서 정의하는게 이해하기 어려웠다. 계속 반복하면서 선택자를 정의하고 가져오는것을 익힐 수 있었다.

if문을 변형시켜 switch문으로 작성한 코드이다.

 const calc = () => {
  	let num1 = parseFloat(document.getElementById('num1').value);
    let num2 = parseFloat((document.getElementById('num2').value));
    let operate = document.getElementById('operate').value;
    let result = document.getElementById('result');

    switch (operate) {
    	case '+':
     		result = num1 + num2;
        	break;
      	case '-':
        	result = num1 - num2;
            break;
        case '*':
        	result = num1 * num2;
        	break;
        case '/':
        result = num1 / num2;
        break;
     }
	 document.getElementById('result').value = result;
  }

• html 코드와 초기화버튼은 동일하여 생략했다.
• num1, num2를 감싸는 선택자에 Number()함수가 아닌 parseFloat(함수)를 사용하였다.
• parseFloat은 '문자열 전체를 Number 형태로 변환하는데' 초점을 두고 있고, Number은 '문자열에 있는 숫자를 Number 형태로 변환한다.

Number(): 숫자 외의 문자가 포함된 문자열이나 빈 문자열을 변환하면 NaN을 반환합니다.

parseFloat(): 문자열의 시작이 숫자가 아니라면 NaN을 반환하며, 빈 문자열도 NaN으로 처리합니다.

console.log(Number("123"));       // 123
console.log(Number("123abc"));    // NaN
console.log(Number(""));           // 0

console.log(parseFloat("123"));    // 123
console.log(parseFloat("123abc")); // 123
console.log(parseFloat(""));        // NaN

문자열을 숫자로 변환할 때, 숫자로 시작하는 부분만을 고려하고 나머지 부분은 무시하려면 Number()를 사용하는 것이 좋고. 만약 소수점 이하의 숫자를 포함하여 전체 문자열을 파싱하려면 parseFloat()를 사용하는 것이 낫다.

결론

• if 문을 연습한 것처럼 switch문도 반복해서 사용하는 연습이 필요할 것 같다.