2025 / 01 / 07

오늘은 지금까지 배운 내용을 활용해서 간단한 계산기를 만들었습니다.

• prompt로 숫자1 / 숫자2 / 연산자를 입력받고 계산 결과 값을 화면에 출력하는 계산기

---

💌 계산기 만들기

계산기 제작 순서

• 변수 초기화
• 사용자에게 숫자를 입력 받기
• 사용자에게 연산자를 입력 받기
• 계산에 사용할 함수 정의하기
• 함수를 호출해 계산 진행하기
• 결과 출력하기

1. 변수 초기화

변수 초기화

let A = 0; // 연산 결과를 저장할 변수 A를 0으로 초기화

• A는 계산 결과를 저장하는 변수입니다. 시작할 때는 0으로 설정해둡니다.

---

2. 숫자 입력 받기

사용자에게 숫자 입력 받기

let Num1 = parseFloat(prompt("숫자 1 ")); // 사용자에게 '숫자 1'을 입력 받음

while (isNaN(Num1)) {
    alert("숫자 다시 입력 좀"); // 숫자가 아닌 값을 입력한 경우 경고
    Num1 = parseFloat(prompt("숫자 1 "));
}


let Num2 = parseFloat(prompt("숫자 2 "));

while (isNaN(Num2)) {
    alert("숫자 다시 입력 좀");
    Num2 = parseFloat(prompt("숫자 2 "));
}

• 사용자가 입력할 값은 prompt() 함수를 통해 입력받습니다.
• parseFloat() 함수를 사용하여 입력된 값을 숫자(float)로 변환합니다.
• 만약 숫자가 아니면 반복문을 통해 다시 입력받습니다.

---

3. 연산자 입력 받기

사용자에게 연산자를 입력 받기

let cal; // 연산자를 저장할 변수 cal 선언

while (true) {
    cal = prompt("연산자 "); // 사용자에게 연산자 입력 받기
    if (cal === "+" || cal === "*" || cal === "-" || cal === "/" || cal === "%") {
        break; // 유효한 연산자가 입력되면 루프 종료
    } else {
        alert("연산자 다시 입력 좀?"); // 올바르지 않은 연산자 입력 시 경고
    }
}

• while문을 사용하여 유효한 연산자가 입력될 때까지 반복합니다.

---

4. 함수 정의

계산에 사용할 함수 정의하기

// 덧셈 함수
function sum() {
    return Num1 + Num2; // Num1과 Num2의 합을 반환
}

// 곱셈 함수
function multiply() {
    return Num1 * Num2; // Num1과 Num2의 곱을 반환
}

// 뺄셈 함수
function minus() {
    return Num1 - Num2; // Num1에서 Num2를 뺀 값을 반환
}

// 나누기 함수
function divide() {
    return Num1 / Num2; // Num1을 Num2로 나눈 값을 반환
}

// 나머지 함수
function remain() {
    return Num1 % Num2; // Num1을 Num2로 나눈 나머지를 반환
}

• 연산에 필요한 함수들을 각각 정의해줍니다.

---

5. 계산 진행

함수를 호출해 계산 진행하기

if (cal == "+") {
    A = sum(); // 덧셈
} else if (cal == "*") {
    A = multiply(); // 곱셈
} else if (cal == "-") {
    A = minus(); // 뺄셈
} else if (cal == "/") {
    if (Num2 !== 0) {
        A = divide(); // 나누기
    } else {
        alert("0으로 못함"); // 0으로 나누는 경우 경고
        A = "오류"; // 오류 메시지
    }
} else if (cal == "%") {
    A = remain(); // 나머지 연산
}

• 연산자가 +, -, *, /, % 중 어떤 것인지에 따라 각각 적절한 계산 함수를 호출합니다.

---

6. 출력

결과 출력하기

document.write(`Num1 = ${Num1}<br>`); // 첫 번째 숫자 출력
document.write(`Num2 = ${Num2}<br>`); // 두 번째 숫자 출력
document.write(`${Num1} ${cal} ${Num2} = ${A}`); // 계산식과 결과 출력

• 계산이 끝나면 결과를 화면에 출력합니다.
• document.write( )를 사용해 HTML 페이지에 결과를 바로 출력할 수 있습니다.

---

💌 전체 코드

앞에서 작성한 코드를 전체로 작성한 것입니다.

	<script>
        let A = 0; // 연산 결과를 저장할 변수 A를 0으로 초기화

        // 숫자 1 입력 받기
        let Num1 = parseFloat(prompt("숫자 1 ")); // 사용자에게 '숫자 1'을 입력 받음

        // 입력 값이 숫자가 아니면, 숫자만 입력하도록 반복
        while (isNaN(Num1)) {
            alert("숫자 다시 입력 좀"); // 숫자가 아닌 값을 입력한 경우 경고
            Num1 = parseFloat(prompt("숫자 1 ")); // 다시 숫자 입력 받기
        }

        // 숫자 2 입력 받기
        let Num2 = parseFloat(prompt("숫자 2 ")); // 사용자에게 '숫자 2'를 입력 받음

        // 입력 값이 숫자가 아니면, 숫자만 입력하도록 반복
        while (isNaN(Num2)) {
            alert("숫자 다시 입력 좀"); // 숫자가 아닌 값을 입력한 경우 경고
            Num2 = parseFloat(prompt("숫자 2 ")); // 다시 숫자 입력 받기
        }

        // 연산자 입력 받기
        let cal; // 연산자를 저장할 변수 cal 선언

        // 연산자가 올바르게 입력될 때까지 반복
        while(true){
            cal = prompt("연산자 "); // 사용자에게 연산자 입력 받기
            // 입력받은 연산자가 +, -, *, /, % 중 하나일 경우에만 반복문 종료
            if(cal === "+" || cal === "*" || cal === "-" || cal === "/" || cal === "%"){
                break; // 유효한 연산자가 입력되면 루프 종료
            } else {
                alert("연산자 다시 입력 좀?"); // 올바르지 않은 연산자 입력 시 경고
            }
        }

        // 덧셈 함수
        function sum(){
            return Num1 + Num2; // Num1과 Num2의 합을 반환
        }

        // 곱셈 함수
        function multiply(){
            return Num1 * Num2; // Num1과 Num2의 곱을 반환
        }

        // 뺄셈 함수
        function minus(){
            return Num1 - Num2; // Num1에서 Num2를 뺀 값을 반환
        }

        // 나누기 함수
        function divide(){
            return Num1 / Num2; // Num1을 Num2로 나눈 값을 반환
        }

        // 나머지 함수
        function remain(){
            return Num1 % Num2; // Num1을 Num2로 나눈 나머지를 반환
        }


        // 연산자에 따라 적절한 계산 함수 호출
        if(cal == "+"){

            A = sum(); // 덧셈

        } else if(cal == "*"){

            A = multiply(); // 곱셈

        } else if(cal== "-"){

            A = minus(); // 뺄셈

        } else if(cal == "/"){

            // 나누기 연산에서, 0으로 나누는지 확인
            if (Num2 !== 0) {  
                A = divide(); // 나누기
            } else {
                alert("0으로 못함"); // 0으로 나누는 경우 경고
                A = "오류"; // 오류 메시지 반환
            }

        } else if(cal == "%"){

            A = remain(); // 나머지 연산

        } else {

            // 만약 유효한 연산자가 아닐 경우
            alert("연산자 다시 입력 좀");
            A = "잘못된 연산자"; // 잘못된 연산자 입력 시 오류 메시지

        } 

        // 결과를 콘솔에 출력
        console.log("결과: " + A);
        
        // HTML 페이지에 결과를 출력
        document.write(`Num1 = ${Num1}<br>`); // 첫 번째 숫자 출력
        document.write(`Num2 = ${Num2}<br>`); // 두 번째 숫자 출력
        document.write(`${Num1} ${cal} ${Num2} = ${A}`); // 계산식과 결과 출력

        
    </script>

---

4일차 후기

• 학교에서 여러 번 만들어 봤던 계산기인데 그래도 헷갈리는 부분이 있었습니다.
• 함수를 사용하고 호출하는 방식을 사용하면서 C# 세미나가 생각났고, 오늘 만든 내용을 벨로그에 정리하며 다시 한번 학습할 수 있었습니다.
• UI / UX 에 대해 배웠는데 곧 포트폴리오 와이어프레임 제작에 들어갈 것 같습니다.
• 코드를 작성해보며 분명 미숙한 부분도 있겠지만 차근차근 공부하겠습니다! (˶• ﻌ •˶)