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

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

학습 목표

배열을 활용해 구구단을 구현하는 경험을 한다.
반복문으로 배열의 데이터를 처리한다.
2중 반복문을 사용해 본다.

요구사항

구구단 결과을 배열에 저장한 후 배열의 결과를 출력한다.

결과물

구구단을 콘솔에 출력하는 프로그램
구구단을 html에 출력하는 프로그램
github 저장소

힌트

2단을 구현하기 위해 배열을 생성한다.
for문을 돌면서 구구단 실행 결과를 배열에 저장한다.
배열의 크기 만큼 for 문을 통해 결과를 출력한다.

var results = []; var length = 9; for(var i=1; i <= length; i++) { // 계산 결과를 배열에 저장 } for(var i=1; i <= length; i++) { // 배열의 내용을 출력 }

var results = []; 
var length = 9; 
for(var i=1; i <= length; i++) {
// 계산 결과를 배열에 저장 
}

for(var i=1; i <= length; i++) {
// 배열의 내용을 출력 
}

학습 참고자료

배열

생활코딩의 관련자료를 참고해서 학습한다.

https://opentutorials.org/course/3085/18825

배열 - 생활코딩

소스코드 변경사항

opentutorials.org

추가 요구사항

2단에서 9단까지 전체를 출력하는데 많은 중복 코드가 발생한다.
반복문을 사용해 2단과 9단에 대한 중복을 제거한다.

힌트

반복문 안에 반복문을 사용할 수 있다. 이를 2중 반복문이라고 한다.

내가 짠 코드

- 구구단이 동작하고 화면에 결과가 잘 출력.

- 오류 : 2~9 사이 자연수만 골라서 입력받을 수가 없음.
2미만 9이상의 숫자가 들어왔을 경우 다시 입력하라는 창이 띄워지지만, 결과에서 오류가 남.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 : n단을 출력하기</h2>
<div id="results"></div>
<script>
    var gugudan = {};
    gugudan.dan = [];
    gugudan.results = [];
    gugudan.length = 9;

    gugudan.run = function () {
        var n = prompt("몇 단을 출력할까요? (2와 9 사이 자연수 입력)");
        if (n < 2 || n > 10) {
            this.dan.length = 0;
            prompt("2와 9 사이 자연수를 다시 입력해 주세요.")
        } else {
            this.dan.length = 0;
            this.dan.push(n);
            for (var i = 1; i <= this.length; i++) {
                var result = n * i;
                this.results.push(result);
            }
        }
    }

    gugudan.show = function () {
        var ret = "";
        ret += "<h2>" + this.dan + "출력</h2>\n";
        for (var i = 1; i <= this.length; i++) {
            var result = this.results[i - 1];
            ret += this.dan + " 곱하기 " + i + " 는 " + result + "<br>\n";
        }
        return ret;
    }

    gugudan.run();
    document.getElementById("results").innerHTML = gugudan.show();

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

구글링) 자바스크립트 배열 초기화
jamesdreaming.tistory.com/44

-> 두 번째 방법인 배열이름.length=0;으로 활용.

해설 (코딩-배열로 구구단 구현)

-> 배열'만' 사용해서 구현해야 하는 것이었음!! ㅠㅠㅠ
함수, 객체 사용하는 것은 뒤에 더 나옴.

-----------------

-배열도 객체이다(object)
-배열은 대괄호[], 객체는 중괄호{} 로 표시.

arr = []
배열.
arr[0] = 10
배열의 첫번째 값을 10으로 함.
arr.length = 1
배열의 길이를 알려줌. 배열의 길이 = 배열의 원소의 갯수

-----------------

이 사실들을 복습하고 구구단을 만들어 보자.

<전체 정답코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 전체 출력</h1>
<script>
    var result = []; // 비어 있는 배열
    for (var n = 2; n <= 9; n++) {

        // calculate
        for (var i = 1; i <= 9; i++) {
            result[i] = n * 1;
        }
        // print
        document.write("<h2>" + n + "단</h2>")
        for (var i = 1; i <= 9; i++) {
            var str = "";
            str += n;
            str += " 곱하기 ";
            str += i;
            str += " 는 "
            str += result[i];
            str += "<br>";
            document.write(str)
        }
    }
</script>
</body>
</html>

- 위와 같은 반복문에서 var i = 1; 로 시작하면,
배열의 특성상 0번째부터 시작하는데 0을 활용하지 못하게 된다.
따라서 가능하면 var i = 0;부터 시작하는 코드를 짜는 게 좋다.

-> 코드 짜는 순서.
아무 숫자나 한 단 구구단을 먼저 구현하고, 그것을 2~9까지 동일하게 적용해 구구단을 완성한다.

var result = []; // 비어 있는 배열
var n = 3 // 3단 먼저 구현
// calculate
for (var i = 1; i <= 9; i++) {
	result[i] = n * 1;
}
// print
document.write("<h2>" + n + "단</h2>")
for (var i = 1; i <= 9; i++) {
    var str = "";
    str += n;
    str += " 곱하기 ";
    str += i;
    str += " 는 "
    str += result[i];
    str += "<br>";
    document.write(str)
}

-> 3단을 출력하는 프로그램을 먼저 구현한다.
-> 잘 출력되면, 위의 코드를 2단~9단에도 적용한다. (= 반복문 사용)

var result = []; // 비어 있는 배열
    for (var n = 2; n <= 9; n++) {
        // calculate
        for (var i = 1; i <= 9; i++) {
            result[i] = n * 1;
        }
        // print
        document.write("<h2>" + n + "단</h2>")
        for (var i = 1; i <= 9; i++) {
            var str = "";
            str += n;
            str += " 곱하기 ";
            str += i;
            str += " 는 "
            str += result[i];
            str += "<br>";
            document.write(str)
        }
    }

-> 처음 개발했던 두 반복문(calculate, print) 전체를 2에서 9까지 반복한다.
-> 구구단 완성!

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

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

[인프런] Javascript입문 - 객체를 활용해 구구단 다시 구현(실습, 해설) (0)	2020.10.19
[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설) (0)	2020.10.19
[인프런] Javascript입문 - 연습문제3 정리와 피드백 (0)	2020.10.17
[인프런] Javascript 입문 - 연습문제3-1 (0)	2020.10.16
[인프런] Javascript입문 - 객체 1 (0)	2020.10.13

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