[인프런]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. 26. 18:20

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

조건문

학습 목표

프로그래밍의 조건문을 경험한다.

요구사항

사용자에게 2개의 숫자 값과 사칙연산 기호(+, -, *, /) 중 하나를 입력 받는다.
사용자가 입력한 사칙연산 기호에 따라 사칙연산을 계산한 후 결과를 출력한다.
예를 들어 사용자는 값 2와 4 입력하고 곱셈(*) 기호를 입력하면 2 * 4의 결과인 8을 출력해야 한다.

힌트

사칙연산 기호가 무엇인지에 따라 사칙연산을 실행하고 결과를 출력한다.
조건문(if/else if/else)을 사용해 구현한다.
문자열 비교를 위해 === 연산자를 사용할 수 있다.

if (op === '+') {
//code here 
} else if 
//...

추가 학습하기

== 과 ===의 차이
switch 와 case를 사용해서 구현해 보자.

내가 짠 코드

- if, else if, else 버전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>계산기 - 조건문 사용</h1>
- 2개의 숫자와 사칙연산 기호(+ - * /)를 입력하면 계산결과를 출력합니다.<br>
숫자 1 : <input type="number" id="num1"> <br>
숫자 2 : <input type="number" id="num2"> <br>
사칙연산 : <input type="text" id="symbol"> <br>
<button onclick="calc()">계산하기</button>
<div id="result"></div>

<script>
function calc() {
    var str1 = document.getElementById("num1").value;
    var str2 = document.getElementById("num2").value;
    var num1 = Number(str1);
    var num2 = Number(str2);
    var symbol = document.getElementById("symbol").value;
    var result = 0;
    if (symbol === "+") {
        result = num1 + num2;
    } else if (symbol === "-"){
        result = num1 - num2;
    } else if (symbol === "*") {
        result = num1 * num2;
    } else if (symbol === "/") {
        result = num1 / num2;
    } else {
        result = "+(더하기), -(빼기), *(곱하기), /(나누기)중 하나를 입력하십시오"
    }
    document.getElementById("result").innerHTML = "계산결과 : "+result;
}
</script>
</body>
</html>

- switch-case 버전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>계산기 - 조건문 사용</h1>
- 2개의 숫자와 사칙연산 기호(+ - * /)를 입력하면 계산결과를 출력합니다.<br>
숫자 1 : <input type="number" id="num1"> <br>
숫자 2 : <input type="number" id="num2"> <br>
사칙연산 : <input type="text" id="symbol"> <br>
<button onclick="calc()">계산하기</button>
<div id="result"></div>

<script>
function calc() {
    var str1 = document.getElementById("num1").value;
    var str2 = document.getElementById("num2").value;
    var num1 = Number(str1);
    var num2 = Number(str2);
    var symbol = document.getElementById("symbol").value;
    var result = 0;
    switch (symbol) {
        case "+" :
            result = num1 + num2;
            break;
        case "-" :
            result = num1 - num2;
            break;
        case "*" :
            result = num1 * num2;
            break;
        case "/" :
            result = num1 / num2;
            break;
        default :
            result = "사칙연산 칸에는 +(더하기), -(빼기), *(곱하기), /(나누기)중 하나를 입력하십시오";
    }
    document.getElementById("result").innerHTML = "계산결과 : "+result;
}
</script>
</body>
</html>

해설

* 연산자 (Operator) : 연산을 수행하기 위해 사용되는 문자.
(참고 : jhnyang.tistory.com/185 연산자란?, 연산자 종류 )
-> 변수명으로는 op로 줄여 부른다.

-if문 버전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div>
    첫 번째 수 : <input type="text" id="n1"><br>
    연산자 : <input type="text" id="op"><br>
    두 번째 수 : <input type="text" id="n2"><br>
    <button onclick="calc()">실행</button>
</div>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    function calc() {
        var str1 = document.getElementById("n1").value;
        var str2 = document.getElementById("n2").value;
        var op = document.getElementById("op").value;
        var n1 = Number(str1);
        var n2 = Number(str2);

        var out = document.getElementById("output");
        var str = "";
        if (op === "+") {
            str += "더하기 : " + (n1 + n2) + "<br>";
        } else if (op === "-") {
            str += "빼기 : " + (n1 - n2) + "<br>";
        } else if (op === "*") {
            str += "곱하기 : " + (n1 * n2) + "<br>";
        } else if (op === "/") {
            str += "나누기 : " + (n1 / n2) + "<br>";
        } else {
            str += "연산자에는 사칙연산자만 입력해 주세요."
        }
        out.innerHTML = str;
    }

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

-switch-case 버전

❓ switch-case를 사용하는 이유?
if문이 너무 많아서!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div>
    첫 번째 수 : <input type="text" id="n1"><br>
    연산자 : <input type="text" id="op"><br>
    두 번째 수 : <input type="text" id="n2"><br>
    <button onclick="calc()">실행</button>
</div>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    function calc() {
        var str1 = document.getElementById("n1").value;
        var str2 = document.getElementById("n2").value;
        var op = document.getElementById("op").value;
        var n1 = Number(str1);
        var n2 = Number(str2);

        var out = document.getElementById("output");
        var str = "";
        switch (op) {
            case "+" :
                str += "더하기: " + (n1 + n2) + "<br>";
                break;
            case "-" :
                str += "빼기: " + (n1 - n2) + "<br>";
                break;
            case "*" :
                str += "곱하기: " + (n1 * n2) + "<br>";
                break;
            case "/" :
                str += "나누기: " + (n1 / n2) + "<br>";
                break;
        }
        out.innerHTML = str;
    }

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

반복문

학습 목표

프로그래밍 중 반복문을 경험한다.
무한루프를 사용해 본다.

요구사항

prompt()를 이용해서 구현한다.
한 번에 2개의 숫자 값만 사칙연산을 하는 것이 아니라 여러 개의 사칙연산이 가능해야 한다.
앞 단계에서 계산한 결과 값은 이후 연산의 첫번째 값으로 사용해야 한다.
- 예를 들어 4 + 2 * 3의 순서로 값을 입력하면 먼저 4 + 2가 계산되고 결과 값 6과 3의 곱셈을 통해 18의 계산 결과가 나와야 한다.
사칙연산 기호 대신 "q"라는 문자를 입력하면 최종 계산 결과를 출력하고 프로그램을 종료한다.

힌트

값을 입력 받을 때 while 반복문을 사용한다.
while(true)와 같이 구현하면 무한히 값을 입력받을 수 있다.
while(true)로 실행하고 있는 프로그램을 종료하려면 break 키워드를 사용하면 된다. 즉, "quit"이라는 문자열을 입력하는 경우 break를 사용해 프로그램을 종료할 수 있다.

내가 짠 코드

- 미완성 (제대로 동작하지 않음)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>계산기 - 반복문</h1>
<div id="result"></div>
<script>
    var numArr = [];
    var symArr = [];
    var result = 0;

    function calculate() {
        while (true) {
            var num = Number(prompt("계산식에 들어갈 숫자를 입력하세요."));
            numArr.push(num);
            var sym = prompt("계산식에 들어갈 연산자(+-*/)를 입력하세요. p를 입력하면 종료됩니다.");
            symArr.push(sym);
            document.getElementById("result").innerHTML = result;
            if (sym === "p") {
                break;
            }
        }
        console.log(numArr, symArr);


        if (symArr[0] === "+") {
            result += numArr[0] + numArr[0 + 1];
            console.log(numArr[0] + "더하기" + numArr [0 + 1] + "=" + result);
        } else if (symArr[0] === "-") {
            result += numArr[0] - numArr[0 + 1];
            console.log(numArr[0] + "빼기" + numArr [0 + 1] + "=" + result);
        } else if (symArr[0] === "*") {
            result += numArr[0] * numArr[0 + 1];
            console.log(numArr[0] + "곱하기" + numArr [0 + 1] + "=" + result);
        } else if (symArr[0] === "/") {
            result += numArr[0] / numArr[0 + 1];
            console.log(numArr[0] + "나누기" + numArr [0 + 1] + "=" + result);
        } else {
            document.getElementById("result").innerHTML = "연산자에는 + - * / 중 하나만 넣어주세요";
        } // 0번쨰, 1번째 사칙연산 끝

        for (var i = 2; i < numArr.length; i++) {
            // 이제 결과 & 2번째, 결과& 3번쨰 .. 계산해야
            if (symArr[i] === "+") {
                result += result + numArr[i + 1];
            } else if (symArr[0] === "-") {
                result += result - numArr[i + 1];
            } else if (symArr[0] === "*") {
                result += result * numArr[i + 1];
            } else if (symArr[0] === "/") {
                result += result / numArr[i + 1];
            } else {
                document.getElementById("result").innerHTML = "연산자에는 + - * / 중 하나만 넣어주세요";
            }
        }
    }

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

해설

- 반복문을 돌 때는..
[숫자1, 연산자1, 숫자2, 연산자 2..] -> 를 반복하면 안 된다! -> 이것이 내 코드의 문제점,..
숫자1 을 받은 뒤, [연산자1, 숫자2, 연산자2, 숫자3, 연산자3, 숫자4]..->를 반복해야 한다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div id="output">여기에 결과가 들어갑니다.</div>
<script>
    function main() {
        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++;
        }

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

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

처음에 result = n1을 한 이유 : 처음 입력받은 숫자를 result값으로 넣어서, 아래의 while반복문을 계속 활용하기 위해.

if (op === 'q') { break; } 가 op바로 밑에 있는 이유 : op(연산자)값으로 q를 입력받으면 즉시 반복문을 종료하기 위해.

상당히 난이도가 있는 문제였다. (처음 푼 문제 같은 느낌)

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

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

[인프런]Javascript입문 - 계산기 - 객체 활용 (0)	2020.10.28
[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현 (0)	2020.10.27
[인프런]Javascript입문 - 계산기 구현(문자열 계산기 시작, 사칙연산 계산 및 출력, ) (0)	2020.10.26
[인프런] Javascript입문 - 추가로 공부할 것들(2) CSS (참고 강좌) (0)	2020.10.22
[인프런]Javascript입문 - DOM으로 버튼 추가 (0)	2020.10.22

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

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 문자열 계산기 - 조건문, 반복문 본문

[인프런]Javascript입문 - 문자열 계산기 - 조건문, 반복문

조건문

학습 목표

요구사항

힌트

추가 학습하기

내가 짠 코드

해설

반복문

학습 목표

요구사항

힌트

내가 짠 코드

해설

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

티스토리툴바