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

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

[실습] 계산기 구현하기

이번 실습을 통해 계산기를 구현해 볼 것이다.

문자열 계산기 시작

시작하기

계산기 프로그래밍에 대한 요구사항
계산기 구현을 통해 경험하게 될 내용

요구사항

사용자가 입력한 값에 따라 사칙연산을 계산할 수 있는 계산기를 구현한다.
- 예를 들어 "2 + 3 * 4 / 2"와 같은 순서로 값을 입력하는 경우 실행 결과 값인 10을 출력해야 한다.
  (사칙연산 우선순위와 상관없이, 우선은 앞->뒤 순서대로 계산하는 프로그램 만들 것)
사용자가 입력할 수 있는 값의 수는 제한되어 있지 않다.
나눗셈의 결과 값은 정수로 값이 떨어지지 않더라도 정수 값만 사용하는 것으로 한다.

계산기 구현을 통해서 뭘 경험하게 되는가?

계산기 프로그램을 구현하고 실행하는 방법
사용자 값을 입력받는 방법(input)
계산 결과를 HTML에 출력하는 방법(output)
변수, 데이터 타입, 반복문, 조건문을 사용하는 방법
함수, 배열, 메소드, 클래스를 활용해 프로그래밍하는 방법

라이브 코딩 소스 저장소(해설)

https://github.com/honux77/js-playground 미리 보지 말고 먼저 풀고 나서 볼 것을 권장한다.

honux77/js-playground

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

github.com

사칙연산 계산 및 출력

학습 목표

간단한 개발 환경을 구축을 경험한다.
프로그램을 실행하고 브라우져에서 값이 출력되는 것을 경험한다.

요구사항

calculator.html 을 만든다.
main() 함수를 만들고 호출한다.
아무 값이나 사칙연산(덧셈, 뺄셈, 곱셈, 나눗셈)을 통해 계산한 결과 값을 출력하는 프로그램을 구현한다.
구현한 프로젝트를 github에 푸시한다.

힌트

덧셈 = +, 뺄셈 = -, 곱셈 = *, 나눗셈 = / 으로 구현한다.

나의 답안 (문자열 계산기)

- 동작은 한다!
- 오류 발견 : 한 자리 숫자만 계산 가능..ㅠㅠ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr = [];
        var numArr = [];
        var symArr = [];
        var result = 0;

        var main = function () {
            var input = document.getElementById("input").value;
            arr = input.split("");
            console.log("arr배열 : " + arr);
            classify();
        }

        var classify = function(){
            for (var i = 0; i < arr.length; i++) {
                if (isNaN(Number(arr[i])) === true) {
                    symArr.push(arr[i]);
                } else {
                    numArr.push(arr[i]);
                }
            }
            calculate();
        }

        var calculate = function(){
            result = numArr[0];
            console.log(result);
            for (var j = 0; j < numArr.length-1; j++) {
                if (symArr[j] === "+"){
                    result = Number(result) + Number(numArr[j+1]);
                };
                if (symArr[j] === "-"){
                    result = Number(result) - Number(numArr[j+1]);
                };
                if (symArr[j] === "*"){
                    result = Number(result) * Number(numArr[j+1]);
                };
                if (symArr[j] === "/"){
                    result = Number(result) / Number(numArr[j+1]);
                };
                console.log(j, result);
            }
            // 5+4-3*2/1 계산하기.
            // 5+4 = 9 numArr[0] symArr[0] numArr[1]
            // 9-3 = 6 result symArr[1] numArr[2]
            // 6*2 = 12 result symArr[2] numArr[3]
            // 12/1 = 12 result symArr[3] numArr[4]
            // numArr 0번째 symArr0번째 numArr1번쨰
            //위의 결과값 symArr1번째 numArr2번째
            //위의 결과값 symArr2번째 numArr3번째
            //..
            print();
        }

        var print = function () {
            var resultP = document.getElementById("result");
            resultP.innerHTML = "계산결과 : " + result;
        }

        main();


    </script>
</head>
<body>
<h1> 계산기 프로그램 1 </h1>
계산식을 입력하세요.<br>
- 더하기는 +, 빼기는 -, 곱하기는 *, 나누기는 /로 입력<br>
- 계산식의 앞부터 순서대로 계산합니다. <br>
<input type="text" id="input">
<button onclick="main()">계산하기</button>
<p id="result"></p>
</body>
</html>

해설(정답 코드)

너무 간단해서 놀랐다.. 그냥 임의의 값을 +-*/ 해서 콘솔창에 찍으면 되는 거였음!
(내가 만든건 최종 문제였다)
- 사칙연산 계산기 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>문자열 계산기 구현하기</h1>
<div id="output"></div>
<script>
    function main() {
        console.log("Calculator1");
        var out = document.getElementById("output"); // <div> 객체 가져오기
        out.innerHTML = "계산기 구현하기";
        console.log(10+3);
        console.log(10-3);
        console.log(10*3);
        console.log(10/3);
    }
    main();
</script>
</body>
</html>

값 입력 및 사칙연산 - 변수

학습 목표

사용자가 값을 입력하는 경험을 한다.
프로그래밍에서 변수를 사용하는 경험을 한다.

요구사항

사용자로부터 2개의 숫자 값을 입력 받은 후 2개의 숫자 값을 활용해 사칙연산을 계산한다.
계산한 결과 값을 화면에 출력한다.

힌트

사용자에게 숫자 값을 입력 받는 방법은 prompt() 또는 html input 객체를 사용하는 방법이 있다.
가능하면 input 태그를 사용해 보자.

내가 짠 코드

- 잘 동작한다! :D

🔤 영단어
- 더하다 : add, 빼다 : subtract, 곱하다 : multiply, 나누다 : divide
- (방정식 읽을 때) + : plus, - : minus, * : time, / : divided by

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>계산기-값 입력 및 사칙연산(변수)</h1>
<ul>
    <li>사용자로부터 2개의 숫자 값을 입력 받은 후 2개의 숫자 값을 활용해 사칙연산을 계산한다.</li>
    <li>계산한 결과 값을 화면에 출력한다.</li>
</ul>
- 임의의 숫자 X와 Y를 입력해 주세요.<br>
- 원하는 버튼을 누르면 사칙연산을 해 드립니다.<br>
X = <input type="number" id="inputX"> <br>
Y = <input type="number" id="inputY"> <br>
X를 Y로.. <br>
<button onclick="plus()">더하기</button>
<button onclick="minus()">빼기</button>
<button onclick="times()">곱하기</button>
<button onclick="divide()">나누기</button> <br>
계산 결과 : <span id="result"></span>

<script>
function plus() {
    var X = Number(document.getElementById("inputX").value);
    var Y = Number(document.getElementById("inputY").value);
    var result = document.getElementById("result");
    result.innerHTML = X + Y;
}

function minus() {
    var X = Number(document.getElementById("inputX").value);
    var Y = Number(document.getElementById("inputY").value);
    var result = document.getElementById("result");
    result.innerHTML = X - Y;
}

function times() {
    var X = Number(document.getElementById("inputX").value);
    var Y = Number(document.getElementById("inputY").value);
    var result = document.getElementById("result");
    result.innerHTML = X * Y;
}

function divide() {
    var X = Number(document.getElementById("inputX").value);
    var Y = Number(document.getElementById("inputY").value);
    var result = document.getElementById("result");
    result.innerHTML = X / Y;
}
</script>
</body>
</html>

정답 코드

<!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="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 n1 = Number(str1);
        var n2 = Number(str2);

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

        out.innerHTML = str;
    }

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

document.getElementById("ABC").innerHTML = "문서에 적기";
- document : 해당 웹문서를 가리킴
- getElementById("ABC") : id값이 "ABC"인 element(요소)를 가져오기. (아래에선 div 객체)
- .innerHTML : 이 객체의 속성의 값을
- = "문서에 적기" : "문서에 적기"로 바꿔라.

-> Javascript는 HTML을 객체로 취급하여, HTML을 제어하기 위해 만들어진 언어이다 !!!

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

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

[인프런]Javascript입문 - 계산기 - 함수로 사칙연산 구현 (0)	2020.10.27
[인프런]Javascript입문 - 문자열 계산기 - 조건문, 반복문 (0)	2020.10.26
[인프런] Javascript입문 - 추가로 공부할 것들(2) CSS (참고 강좌) (0)	2020.10.22
[인프런]Javascript입문 - DOM으로 버튼 추가 (0)	2020.10.22
[인프런] Javascript입문 - DOM과 HTML (요소/태그/엘리먼트, 속성, 블록 태그/인라인 태그, html과 JS 분리, JS로 DOM 제어하고 값 바꾸기) (0)	2020.10.22

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

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 계산기 구현(문자열 계산기 시작, 사칙연산 계산 및 출력, ) 본문

[인프런]Javascript입문 - 계산기 구현(문자열 계산기 시작, 사칙연산 계산 및 출력, )

[실습] 계산기 구현하기

문자열 계산기 시작

시작하기

요구사항

계산기 구현을 통해서 뭘 경험하게 되는가?

라이브 코딩 소스 저장소(해설)

사칙연산 계산 및 출력

학습 목표

요구사항

힌트

나의 답안 (문자열 계산기)

해설(정답 코드)

값 입력 및 사칙연산 - 변수

학습 목표

요구사항

힌트

내가 짠 코드

정답 코드

-> Javascript는 HTML을 객체로 취급하여, HTML을 제어하기 위해 만들어진 언어이다 !!!

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

티스토리툴바