[인프런] Javascript입문 - 연습문제3 정리와 피드백

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입문 - 연습문제3 정리와 피드백 본문

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

[인프런] Javascript입문 - 연습문제3 정리와 피드백

비비 bibi 2020. 10. 17. 23:51

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

//////////////↑정답 코드///↓내가 쓴 코드////////////

정답 코드 본문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>소수 찾기</title>
</head>
<body>
    <h1>소수 목록들</h1>
    <div id = "result"></div>
    <script>
        var numbers = {};
        numbers.all = [];
        numbers.prime = [];

        numbers.isPrime = function(number) {
            for (var i = 2; i < number; i++) {
                if (number % i == 0) {
                    return false;
                }
            }
            return true;
        };

        numbers.addAllNumber = function(max_num) {
            for (var i = 2; i <= max_num; i++) {
                   this.all.push(i);
            }
        };

        numbers.calcPrimes = function() {
            for (var i = 0; i < this.all.length; i++) {
                var n = this.all[i];
                if (this.isPrime(n)) {
                    this.prime.push(n);
                }
            }
        };

        numbers.getAllPrimeNumbers = function() {
            var ret = "";
            ret += "<h2>전체 소수의 갯수:" + this.prime.length + "</h2>\n";
            for (var i = 0; i < this.prime.length; i++) {
                ret += (i+1) + "번째 소수: " + this.prime[i] + "<br>\n";
            }
            return ret;
        };

        numbers.addAllNumber(10000);
        numbers.calcPrimes();
        document.getElementById('result').innerHTML = numbers.getAllPrimeNumbers();

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

var numbers = {};
numbers.all = [];
numbers.prime = [];
        
//////////////↑정답 코드///↓내가 쓴 코드////////////

numbers = {}; // 객체
numbers.all = []; //속성)숫자 배열
numbers.prime = []; //속성)소수 배열

- 객체 선언할 때 var 를 붙이자.

numbers.isPrime = function(number) {
    for (var i = 2; i < number; i++) {
      if (number % i == 0) {
           return false;
      }
    }
    return true;
};
        
//////////////↑정답 코드///↓내가 쓴 코드////////////
        
numbers.isPrime = function (number) {
    for (var i = 1; i < number; i++) {
      if (number % i === 0) {
      }
    }
};

numbers.isPrime 은 어떤 숫자가 소수인지 아닌지를 판단하는 메서드.

( ❗ 1은 소수가 아니다. 따라서 2부터 소수테스트를 하고, 인수도 2부터 시작함.)
(var i = 2;)

for - i는 number미만, 2 이상의 1씩 증가하는 수.(2,3,4,5..)

if - (number를 i로 나눈 나머지가 0이면) 소수가 아니다.
즉 1과 자기 자신 외에 나누어떨어지는 인수가 있다 = 소수가 아니다.
따라서 false를 반환 return false;

i는 number미만, 2 이상의 1씩 증가하는 수 (2,3,4,5..) 모두에 대해
i로 나눈 나머지가 0이 아니면
즉 위의 반복문&조건문 모두에 부합하지 않아 false가 반환되지 않으면
리턴값으로 true를 반환함. return true;
( ❗ 그렇기 때문에 return true;는 for문, if문 바깥에 있음!! for문에도 if문에도 해당되지 않아야만 소수이므로)

numbers.addAllNumber = function(max_num) {
            for (var i = 2; i <= max_num; i++) {
                   this.all.push(i);
            }
        };

//////////////↑정답 코드///↓내가 쓴 코드////////////

numbers.addAll = function (max_num) {
            for (var i = 1; i < max_num; i++) {
                this.all[i] = i;
            }
        };

numbers.addAllNumber 은 number.all이라는 프로퍼티 (배열)에 1부터 10000사이의 모든 숫자를 집어넣는 메서드.

( ❗ 1은 소수가 아니다. 따라서 1이 아닌 2 이상의 숫자에 대해 소수테스트를 함.)
(var i = 2;)

- 10000(max_num)에 대해서도 소수테스트를 해야 하므로 i <= max_num; 이다.

- 2부터 10000까지 모든 자연수를 numbers.all이라는 배열에 넣는다. this.all.push(i)

※ this.all[i] = i; 로도 같은 배열을 만들 수 있긴 하다!

numbers.calcPrimes = function() {
    for (var i = 0; i < this.all.length; i++) {
        var n = this.all[i];
        if (this.isPrime(n)) {
        	this.prime.push(n);
        }
    }
};

//////////////↑정답 코드///↓내가 쓴 코드////////////

numbers.addPrime = function () {
};// 메서드)소수라면 소수 배열에 추가

numbers.calcPrimes은
numbers.isPrime(number)에서 소수로 판단된 숫자들을
numbers.prime이라는 프로퍼티 (소수 배열) 에 넣는 메서드이다.

가장 어려울 줄 알았는데 생각보다 간단하다.
numbers.isPrime에서 리턴값이 true인 숫자들만 numbers.prime에 넣으면 된다.
근데 리턴값이 true인걸 어떻게 판별해서 넣나?.. 하고 한참 고민했는데
this.isPrime(n)의 리턴값 자체가 true이면 이 자체가 if문의 조건식이 되는 거였다. '0'...!!

-for
i는 0부터 this.all.length(numbers.all이라는 숫자 배열의 길이만큼 = 배열 처음부터 끝까지!) 까지 1씩 증가하며 반복.
n이라는 변수를 this.all의 [i]번째 값으로 한다.

-if
만약 n의 소수 판별 결과(numbers.isPrime의 리턴값)가 true이면 -> (this.isPrime(n))
numbers.prime이라는 배열의 맨 끝에 n을 넣는다.
(반대로 this.isPrime(n)의 결과가 false이면, 조건문이 false이므로 곧바로 조건문을 빠져나간다.)
❗ 이런 코딩은 numbers.isPrime()의 리턴값을 true/fasle로 정해 두었기 때문에 가능한 것!

numbers.getAllPrimeNumbers = function() {
            var ret = "";
            ret += "<h2>전체 소수의 갯수:" + this.prime.length + "</h2>\n";
            for (var i = 0; i < this.prime.length; i++) {
                ret += (i+1) + "번째 소수: " + this.prime[i] + "<br>\n";
            }
            return ret;
        };
        
//////////////↑정답 코드///↓내가 쓴 코드////////////

 numbers.getAllPrimes = function () {
           
        };// 메서드) 소수 전체 가져오기

numbers.getAllPrimeNumbers는 계산된 전체 소수의 갯수와 n번째 소수 정보들을 출력해 주는 메서드이다.

ret 이라는 비어 있는 값을 만든다. var ret = "";
ret 에 "<h2>전체 소수의 갯수:"+this.prime.length+"</h2>\n";을 더한 것을 ret으로 한다.
(전체 소수의 갯수 = numbers.prime 배열의 길이 이므로)

numbers.prime 의 전체 소수를 모두 출력해야 하므로 반복문을 사용한다.

-for
0번째부터 세야 하므로 0으로 시작. var i = 0;
반복이 끝나는 건 numbers.prime의 길이-1까지이므로 i<this.prime.length;
( ❗ 소수 배열의 1번째부터 끝까지 === 0 번째에서 끝-1까지.
그렇기 때문에 i<=this.prime.length;가 아닌 i<this.prime.length;이다.
<= 를 사용해도 같은 결과가 나오지만, 정확한 코드가 아니므로 지양하자.)
ret 에 (i+1) + "번째 소수: " + this.prime[i] + "<br>\n"; 를 더한 것을 ret으로 한다.

반복문이 끝나면 ret를 출력한다.

❓ \n (역슬래시 n)이란?
줄바꿈의 기능을 한다.

numbers.addAllNumber(10000);
numbers.calcPrimes();
document.getElementById('result').innerHTML = numbers.getAllPrimeNumbers();

/// 내가 짠 코드 - 없음

마무리 코드.
만든 메서드들을 실행해 결과를 출력한다.

numbers.addAllNumber(number)에 10000을 입력해 실행한다.
numbers.calcPrimes()을 실행한다.
웹 문서의 'result'란에 numbers.getAllPrimeNumbers()의 결과값을 출력한다.

❓ .innerHTML이란 ?
선택한 영역 내에서 html 코드를 삽입한다는 의미이다.
보통 document.getElementById("~").innerHTML = 실행할 html코드; 형태로 많이 쓰인다.
id값이 "~"인 영역에 우항의 html코드를 실행하라는 의미.

👾한 줄씩 따라 친 완성 코드가 동작하지 않아서 디버깅.

- numbers.addAllNumber 코드 중
this.all.push(i);를
this.all.push = i 이렇게 써 놓았다. ㅋㅋㅠㅠ..

앞으로 위와 같은 객체지향 프로그래밍에 더 익숙해져야겠다!!

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

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

[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설) (0)	2020.10.19
[인프런] Javascript입문 - 배열로 구구단 다시 구현 (실습 - 해설 및 참고자료, 배열초기화) (0)	2020.10.18
[인프런] Javascript 입문 - 연습문제3-1 (0)	2020.10.16
[인프런] Javascript입문 - 객체 1 (0)	2020.10.13
[인프런] Javascript입문 - 함수2 (함수와 리턴값 return) (0)	2020.10.12

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

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 연습문제3 정리와 피드백 본문

[인프런] Javascript입문 - 연습문제3 정리와 피드백

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

티스토리툴바