[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현 본문

프로그래밍/Javascript 자바스크립트

[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현

비비 bibi 2020. 10. 27. 15:11

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

학습 목표

함수를 경험한다.

리팩토링 : 함수를 이용해 코드를 깔끔하게 정리하는 것?
(구글링)
리팩토링이란
: 외부동작은 바꾸지 않으면서 내부구조를 개선하는 방법.
소프트웨어 시스템을 보다 이해하기 쉽게, 수정하기 쉽게 변경하는 프로세스.
리팩토링을 통해 가독성을 높이고, 유지보수를 편하게 한다.

요구사항

메인 함수, 사용자의 값을 입력하는 함수, 출력하는 함수 등 함수로 코드를 나누어 구현한다.
사용자의 값을 입력하는 구현은 첫 번째 숫자 값, 사칙연산 기호 및 quit, 두 번째 숫자 값 입력으로 나뉜다.

힌트

각 요구사항에 해당하는 함수를 하나씩 생성한 후 지금까지 main() 함수에서 구현하던 로직을 각 함수로 이동한다.
대략 다음과 같은 함수들로 나뉠 수 있다.

fucntion getFirstValue()
function getSecondValue() 
function getOperator()
function calculate() 
function print() 
function main()

내가 짠 함수

(반복문 정답 코드 활용)

-getValue(), calculate(), print(), main()으로 나누려고 했는데
getValue()에 prompt부분을, calculate()에 while문 안쪽 계산부분을 넣으려 하니
'중간오류'쪽 break;를 인식하지 못해서 오류가 나더라. 그래서 그냥 다시 합쳤다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    function getValue() {
        var n1 = Number(prompt("첫 번째 숫자를 입력해 주세요."));
        var op, n2;
        var result = n1;// 처음 결과값에 한 번만 n1을 넣어 while반복문 활용하기.
        var n = 2;
        while (true) { // 무한루프
            op = prompt("연산자를 입력해 주세요. q를 입력하면 종료됩니다.")
            if (op === 'q') {
                break;// break는 반복문(while) 전체를 빠져나간다.
            }
            n2 = Number(prompt(n + "번째 숫자를 입력해 주세요."));
            if (op === "+") {
                result += n2;
            } else if (op === "-") {
                result -= n2;
            } else if (op === "*") {
                result *= n2;
            } else if (op === "/") {
                result /= n2;
            } else {
                result = "중간오류";
                break;
            }
            n++;
        }
        print(result);
    }


    function print(result) {
        document.getElementById("output").innerHTML = "최종결과값은" + result + "입니다.";
    }

    function main() {
        getValue();
    }

    main();
</script>
</body>
</html>

해설

-'힌트'에 있는 모든 함수들로 코드를 나눈다.

- 각 함수에 return을 사용한다.

- 반복문에 오류가 나면 반복문을 여러 번 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    /*
    fucntion getFirstValue()
    function getSecondValue()
    function getOperator()
    function calculate()
    function print()
    function main()*/

    function getFirstValue() {
        var n1 = Number(prompt("첫 번째 숫자를 입력해 주세요."));
        return n1;
    }

    var n = 2;

    function getSecondValue() {
        var n2 = Number(prompt(n + "번째 숫자를 입력해 주세요."));
        n++;
        return n2;
    }

    function getOperator() {
        while (true) {
            var op = prompt("연산자를 입력해 주세요.");
            if (op === "+" || op === "-" || op === "*" || op === "/"
                || op === "q") {
                break;
            } else { // 사칙연산 외의 값을 넣으면..
                alert("올바른 연산자를 입력해 주세요.")
            }
        }
        return op;
    }

    function calculate(first, second, op) {
        var ret;
        switch (op) {
            case "+":
                ret = first + second;
                break;
            case "-":
                ret = first - second;
                break;
            case "*":
                ret = first * second;
                break;
            case "/":
                ret = first / second;
                break;
        }
        return ret;
    }

    function print(value) {
        return "최종 결과값은 " + value + "입니다.";
    }

    function main() {
        var result = getFirstValue();
        while(true) {
            var op = getOperator();
            if (op === "q") {
                break;
            }
            var num = getSecondValue();
            result = calculate(result,num,op);
        }
        var output = document.getElementById("output");
    output.innerHTML = print(result);
    }
    main();

</script>
</body>
</html>

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[Javascript] .split(), join()을 활용해 문자열을 여러 조건으로 나누기 (0)	2020.10.28
[인프런]Javascript입문 - 계산기 - 객체 활용 (0)	2020.10.28
[인프런]Javascript입문 - 문자열 계산기 - 조건문, 반복문 (0)	2020.10.26
[인프런]Javascript입문 - 계산기 구현(문자열 계산기 시작, 사칙연산 계산 및 출력, ) (0)	2020.10.26
[인프런] Javascript입문 - 추가로 공부할 것들(2) CSS (참고 강좌) (0)	2020.10.22

'프로그래밍/Javascript 자바스크립트' Related Articles

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현 본문

[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현

학습 목표

요구사항

힌트

내가 짠 함수

해설

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

티스토리툴바