[인프런]Javascript입문 - 계산기 마지막 - 한 줄로 입력받아 처리

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
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. 17:57

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

학습 목표

문자열의 조작과 리스트의 사용을 경험한다.

요구사항

사용자가 입력한 문자열 값에 따라 사칙연산을 수행할 수 있는 계산기를 구현해야 한다.
문자열 계산기는 사칙연산의 계산 우선순위가 아닌 입력 값에 따라 계산 순서가 결정된다. 즉, 수학에서는 곱셈, 나눗셈이 덧셈, 뺄셈 보다 먼저 계산해야 하지만 이를 무시한다.
예를 들어 "2 + 3 * 4 / 2"와 같은 문자열을 입력할 경우 2 + 3 * 4 / 2 실행 결과인 10을 출력해야 한다.
입력은 텍스트로 한 줄로 받고 숫자와 연산자 사이는 스페이스로 분할한다. 2 + 3 * 5 처럼 입력을 받아 처리한다.
입력과 출력은 html의 input과 div 태그를 사용한다.

힌트

문자열의 split(" ")을 이용하면 요구사항대로 구현할 수 있다.

도전과제

공백 없이 입력을 받아본다.
일반 계산기처럼 버튼 UI를 이용해 구현한다.
CSS를 예쁘게 입혀본다.

내가 짠 코드

- 첫 날 구현한 코드에서 그동안 배운 것들을 응용해봤다. (객체, 프로퍼티, 메소드 사용 등)

👾 디버깅
⚠ Uncaught TypeError: Cannot read property 'Value' of null
-> 자바스크립트가 html보다 먼저 실행되어서 나타나는 오류라고.
코드에서 자바스크립트 부분을 가능한 문서 아래 부분으로 옮기고 다시 실행하니, 더 이상 위와 같은 에러는 뜨지 않는다.
(기존 <head>태그 내에 있던 <script></script> 부분을 <body></body>내로 옮겼다.)
참고 : sir.kr/cm_free/941891

자바스크립트 오류 질문입니다. > SIR

안녕하세요. 아래 소스가 익스에서는 이상없는데 크롬에서 Uncaught TypeError: Cannot read property 'Value' of null 이라는 오류가 있다고 나오네요. 그리고 InitAmt();도 혹시 문제가 있는지요.

sir.kr

-다소 불친절한 프로그램이지만 작동은 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> 계산기 프로그램 1 </h1>
계산식을 입력하세요.<br>
- 숫자와 연산자 사이에는 꼭 "띄어쓰기"를 해 주세요.<br>
- 더하기는 +, 빼기는 -, 곱하기는 *, 나누기는 /로 입력해 주세요.<br>
- 계산식의 앞부터 순서대로 계산합니다. <br>
- 다시 계산하려면 새로고침(F5)을 누르세요.<br>
<input type="text" id="input">
<button onclick="main()">계산하기</button>
<div id="result"></div>

  <script>
        var input = {};
        var calculator = {};
        var output = {};

        var main = function () {
            input.putArr();
            calculator.classify();
            calculator.calculate();
            output.print();
        }

        input.Arr = [];
        input.putArr = function () {
            var input = document.getElementById("input").value;
            this.Arr = input.split(" ");
            console.log("arr : " + this.Arr);
            return this.Arr;
        }

        calculator.numArr = [];
        calculator.symArr = [];
        calculator.classify = function () {
            var arr = input.putArr();
            for (var i = 0; i < arr.length; i++) {
                if (isNaN(Number(arr[i])) === true) {
                    this.symArr.push(arr[i]);
                } else {
                    this.numArr.push(arr[i]);
                }
            }
            console.log(this.numArr);
            console.log(this.symArr);
        }

        calculator.result = 0;
        calculator.calculate = function () {
            result = this.numArr[0];
            for (var j = 0; j < this.numArr.length - 1; j++) {
                if (this.symArr[j] === "+") {
                    result = Number(result) + Number(this.numArr[j + 1]);
                }
                if (this.symArr[j] === "-") {
                    result = Number(result) - Number(this.numArr[j + 1]);
                }
                if (this.symArr[j] === "*") {
                    result = Number(result) * Number(this.numArr[j + 1]);
                }
                if (this.symArr[j] === "/") {
                    result = Number(result) / Number(this.numArr[j + 1]);
                }
            }
            console.log(j, result);
            return result;
        }

        output.out = document.getElementById("result"); // div객체
        output.print = function () {
            var result = calculator.calculate();
            this.out.innerHTML = "계산결과 : " + result;
        }

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

해설

HTML ) p 와 div의 차이
p는 paragraph의 약자로 문단을 나눌 때 쓰인다. - 주로 문서의 내용 기준.
div는 division의 약자로 문서의 영역을 나눌 때 - 주로 논리적 단위 기준.

코딩을 하면서 불필요한 부분은..
- 주석처리하고 나중에 지우기보다는, 그때그때 지우는 게 좋다.
- 어차피 커밋만 했다면 복구할 수 있고, 지우지 않고 남겨놓은 코드가 새로 짠 코드와 충돌을 일으킬 수 있기 때문.

자바스크립트 eval();
: 자바스크립트의 내장함수로, 문자열을 코드로 인식하게 하는 함수이다.
eval( string );
예를 들어.. eval("2+2"); -> "2+2"가 문자열임에도 코드로 인식해 4라는 결과를 출력한다.
우리는 배우는 단계니까 이 함수는 쓰지 않도록 한다!
참고 : www.codingfactory.net/11024

JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제

www.codingfactory.net

👉해설에서는 .push(), .pop() (맨 뒤에 넣기 / 빼기) 및 .unshift(), shift() (맨 앞에 넣기 / 빼기) 를 활용한다.
: input값을 .split(" "); 으로 배열로 만든 뒤,
.shift() 를 통해 배열의 맨 앞에서부터 값을 하나씩 빼서 연산함.
.shift()를 하면 배열 안의 값을 하나씩 뽑아 쓰기 때문에 배열의 길이가 하나씩 줄어들고,
그렇기 때문에 반복문을 사용할 필요도, 배열 초기화할 필요도 없음.
-> 이 방식이 코드의 길이도 줄이고, 복잡함도 덜해서 더 나은 것 같다.

NaN이란?
Not a Number의 약자로, 숫자가 아니라는 뜻.
NaN은 연산이 불가능하다.
예를 들어 10 * "a" 를 연산하면 결과로 NaN이 나온다.

※ 수업을 들으면서 똑같이 따라 쳤는데, 이상하게 동작이 안 된다. 콘솔창조차 안 떠서 디버깅도 못 하겠다. 왜 그럴까?ㅠㅠ 무한루프 함수에 문제가 있는 것 같긴 한데
호눅스님의 원본 정답코드는 여기에..

github.com/honux77/js-playground/blob/f983af9e961a709006fa3faeab1e2eed26892746/calculator/calculator7.html

honux77/js-playground

자바스크립트 플레이그라운드 공부용 . Contribute to honux77/js-playground development by creating an account on GitHub.

github.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div>
    <input type="text" id="input">
    <button onclick="calc()">확인</button>
</div>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    var input = {};

    input.init = function (str) {
        this.list = str.split(" ");
    }; // str을 넣으면 쪼개서 저장?

    input.empty = function(){
        return this.list.legnth === 0;
    };

    input.getValue = function () {
        var str = this.list.shift();
        var n = Number(str);
        return n;
    }; // getFirst, getSecond가 같은 방식으로 동작하기 떄문에 getValue로 통합.

    input.getOperator = function () {
        var op = this.list.shift();
        if (op === "+" || op === "-" || op === "*" || op === "/") {
            return op;
        } else { // 사칙연산 외의 값을 넣으면..
            return "$";
        }
    };

    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;
            default :// 사칙연산 기호 외의 값을 넣으면 계산하지 않기.
            return NaN;
        }
        return ret;
    };

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

    function calc() {
        var str = document.getElementById("input").value;
        input.init(str);
        var result = input.getValue();
        while (!input.empty()) { // input.empty가 비어있지 않으면.
            var op = input.getOperator();
            var second = input.getValue();
            result = calculator.calculate(result, second, op);
        }
        output.print(result);
    }
</script>
</body>
</html>

input.init = function(str) { // 배열 초기화 : input.list에 str을 split(" ")한 배열을 넣는다.
            this.list = str.split(" ");
        };

이렇게 메서드와 속성(배열)을 동시에 정의해도 잘 되는구나..

input.empty = function() {
	return this.list.length == 0;
};
        
//

function calc() {
    var str = document.getElementById('input').value;
    input.init(str);
    var result = input.getValue();
    while (!input.empty()) {
        var op = input.getOperator();
        var second = input.getValue();
        result = calculator.calculate(result, second, op);
    }
    output.print(result);
}

input.empty라는 메서드를 정의하고 리턴값으로 input.list.length == 0;을 넣었다.
그래서 아래 calc()내의 while문에서는 input.empty()가 아닐 때(!)
즉 input.list.length가 0이 아닐 때 로 while 조건문을 주었다.
!input.empty(); -> true(input.list에 요소가 있을 때) -> while문 무한루프
!input.empty(); -> false(input.list에 요소가 없을 때) -> while문 탈출

** GUI계산기 구현하기 -> 다음 강의내용을 듣는 게 지금은 더 중요할 것 같아서 우선 스킵하기로! **

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

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

[인프런]Javascript입문 - 재귀의 기초 (0)	2020.10.31
[인프런]Javascript - 변수의 스코프(전역 변수, 지역 변수, 자동 전역 변수, 매개변수의 스코프, for문 안의 스코프, const와 let, 호이스팅, 클로져) (0)	2020.10.30
[Javascript] .split(), join()을 활용해 문자열을 여러 조건으로 나누기 (0)	2020.10.28
[인프런]Javascript입문 - 계산기 - 객체 활용 (0)	2020.10.28
[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현 (0)	2020.10.27

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

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 계산기 마지막 - 한 줄로 입력받아 처리 본문

[인프런]Javascript입문 - 계산기 마지막 - 한 줄로 입력받아 처리

학습 목표

요구사항

힌트

도전과제

내가 짠 코드

해설

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

티스토리툴바