[인프런]Javascript입문 - 계산기

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			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	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 계산기 - 객체 활용 본문

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

[인프런]Javascript입문 - 계산기 - 객체 활용

비비 bibi 2020. 10. 28. 13:07

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

학습 목표

프로그래밍에서 객체를 경험한다.

요구사항

사용자의 값을 입력하는 객체, 사칙연산을 구현하는 객체, 출력하는 객체를 이용해서 프로그램을 구현한다.
main 함수를 사용한다.
전역변수가 있다면 모두 객체 안으로 넣기.

힌트

input = {}
input.getFirstValue = function();
input.getSecondValue= function();
intput.getOperator = function(); 

output = {} 
output.print = function(); 

calculator = {} 
calculator.calculate = function();

내가 짠 코드

- 계산은 잘 되는데, "n번째 수를 입력하세요" 에서 n++ 를 해도 카운팅이 안 된다. (계속 2번째 수를 입력하라고 나옴)
혼자 디버깅 해보려다 너무 오래 걸려서 그냥 해설을 보기로..

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

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

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

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

    calculator.calculate = function (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;
        }
        console.log("return : " + ret);
        return ret;
    }

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

    function main() {
        var num1 = input.getFirstValue(); // 첫 번째 값
        console.log("num1 : " + num1);
        var result = num1;
        var n = 2;
        while(true) {
            var op = input.getOperator(); // 연산자
            console.log("operator : " + op);
            if (op === "q") {
                break;
            }
            var num2 = input.getSecondValue(n); // 두 번째 값
            console.log("num2 : " + num2)
            result = calculator.calculate(result, num2, op);
        }
        var exit = document.getElementById("exit");
        exit.innerHTML = output.print(result);
    }

    main();

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

해설

this 사용.
-> 메소드(객체 안의 함수) 내에서 객체의 멤버변수에 접근할 때 this를 사용한다.
※ 속성(객체의 변수) = 멤버변수

var n = 2; 는 의미를 살려 count로 변수명을 바꾸고, 객체 input의 속성으로 넣어 준다.

function foo() {
} // 이 때는 ;가 필요없지만,
var foo = function() {
}; // 이렇게 함수 선언 할 때와
객체.메서드이름 = function() {
}; // 메서드 선언 할 때는 ;가 필요하다 (일단 외우기)

객체 = 문장의 주어
메서드 = 문장의 동사
파라미터(매개변수) = 문장의 목적어/보어
느낌으로 코드를 읽으면 된다.
예를 들어..
input.getFirstValue(); -> input아, 첫 번째 값을 가져와 줘.
calculator.calculate(result,num,op) -> calculator야, (result, num, op)를 가지고 calculate해 줘.

❗ 출력하는 부분 var output = document.getElementById("output")
-> 객체 output의 속성 output.out으로 전환.
대신 output.print 부분에 this.out.innerHTML 로 활용.
이렇게 하면 main()의 마지막 부분을 output.print(result);로 간단히 코딩 가능.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    var input = {count : 2};// var n = 2; -> 의미를 살려 count로 이름을 바꾼 후, input의 속성으로 넣는다.

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

    input.getSecondValue = function() {// input이라는 객체의 속성 count이므로, this.count로 사용.
        var n2 = Number(prompt(this.count + "번째 숫자를 입력해 주세요."));
        this.count++;
        return n2;
    };

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

    var calculator = {};
    calculator.calculate = function(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;
    };

    var output = {};
    output.out = document.getElementById("output"); // div객체
    output.print = function(value) {
        this.out.innerHTML = "최종 결과값은 " + value + "입니다.";
    };

    function main() {
        var result = input.getFirstValue();
        while(true) {
            var op = input.getOperator();
            if (op === "q") {
                break;
            }
            var num = input.getSecondValue();
            result = calculator.calculate(result,num,op);
        }
        output.print(result);
    }
    main();
</script>
</body>
</html>

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

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

[인프런]Javascript입문 - 계산기 마지막 - 한 줄로 입력받아 처리 (0)	2020.10.28
[Javascript] .split(), join()을 활용해 문자열을 여러 조건으로 나누기 (0)	2020.10.28
[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현 (0)	2020.10.27
[인프런]Javascript입문 - 문자열 계산기 - 조건문, 반복문 (0)	2020.10.26
[인프런]Javascript입문 - 계산기 구현(문자열 계산기 시작, 사칙연산 계산 및 출력, ) (0)	2020.10.26

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