[인프런] Javascript - 구구단 추가 미션, 학습 마무리 조언 (실습-나의 풀이 공유) 구구단 응용버전 : xy단 출력하기

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 - 구구단 추가 미션, 학습 마무리 조언 (실습-나의 풀이 공유) 구구단 응용버전 : xy단 출력하기 본문

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

[인프런] Javascript - 구구단 추가 미션, 학습 마무리 조언 (실습-나의 풀이 공유) 구구단 응용버전 : xy단 출력하기

비비 bibi 2020. 10. 19. 16:35

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

학습 목표

지금까지 학습한 내용을 활용해 한 단계 더 난이도가 있는 문제를 구현하는 경험을 한다.

최종 요구사항

참고자료, 교재, 인터넷의 도움 없이 백지 상태에서 구구단을 구현한다.
사용자가 입력한 값에 따라 크기가 다른 구구단을 계산해 출력한다.
예를 들어 사용자가 "8,7"과 같은 문자열을 입력하면 팔칠단을 구현한다. 팔칠단은 2 * 1 ... 2 * 7, 3 * 1 ... 3 * 7, ... , 8 * 1 ... 8 * 7 까지 구현하는 것을 의미한다.
html, css, DOM 등을 배워서 조금 더 예쁜 화면을 만들어 본다.

힌트

사용자가 입력한 값을 문자열(string)로 받는다.
사용자가 입력한 값을 쉼표(,)를 기준으로 분리한다.
쉼표를 기준으로 분리한 문자열을 숫자로 변환한다.
2중으로 반복문(for 또는 while)을 실행해 곱셈 결과를 화면에 출력한다.

학습 마무리 조언

지금까지 과정에서 자신 없는 부분, 이해가 되지 않는 부분을 정리하고 해당 부분을 집중 연습한다.
전체 과정을 반복 연습한다. 단, 반복 연습할 때 힌트를 조금씩 줄여가면서 연습한다.
각 단계 내용 중 자신이 이해한 부분과 이해하지 못한 부분을 정리한다. 이해하지 못한 부분은 다른 미션을 구현하면서 이해하기 위해 노력한다.
새롭게 등장하는 용어들에 대해 자신이 이해한 수준으로 정리하는 연습을 한다. 반드시 100% 이해하지 못해도 괜찮다.

내가 작성한 코드(나의 풀이)

- 구현하는 데는 성공!
- 사용자가 입력한 값을 "숫자,숫자" 로 받아서 split하는 건 실패했다. (split 사용방법 까먹음..)
대신 prompt()를 사용했다.
- 참고자료, 구글링 없이 완전히 내 힘만으로 개발하는 연습을 많이 해야겠다.

-> 'xy단 출력하기' 버튼을 누르면 팝업 창이 뜨고, 차례로 2~9사이 자연수를 입력하면 그에 맞는 xy단을 출력해 준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xydan</title>
</head>
<body>
<h1>구구단 : 추가 미션 및 마무리</h1>
팝업 창에 2부터 9까지의 자연수를 두 번 입력하면, xy단을 출력합니다.<br>
<button onclick="xydan.main()">xy단 출력하기!</button>
<script>
    var xydan = {};
    xydan.X = 0;
    xydan.Y = 0;
    xydan.ret = [];

    // 계산 : x*1, x*2 ... x*y 까지 계산.
    xydan.calculate = function (x, y) { // 2부터 y까지 곱셈
        this.ret = [];
        for (var i = 1; i <= y ; i++) {
            var result = x * i;
            this.ret.push(result);
        }
        return this.ret;
    }

    // 출력
    xydan.print = function (x, y) {
        document.write("<h4>"+ x + "단</h4>")
        for (var i = 0; i < y; i++) {
            document.write(x + "*" + (i+1) + "=" + this.ret[i] + "<br>");
        }
    }

    // 메인 : calculate,print를 2부터 x까지 반복
    xydan.main = function () {
        var x = this.X;
        var y = this.Y;
        x += Number(prompt("(2~9 사이의 자연수 입력) 어떤 숫자로 구구단을 출력할까요?"));
        y += Number(prompt("(2~9 사이의 자연수 입력) 몇 단까지 구구단을 출력할까요?"));
        document.write("<h2>" + x + y + "단</h2>")
        for (var i = 2; i <= x; i++) {
            xydan.calculate(i, y);
            xydan.print(i, y);
        }
    }


</script>


</body>
</html>

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

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

[인프런] Javascript입문 - 조건문2: switch-case , if문과 비교, switch-case 조건 범위로 설정하기 (0)	2020.10.20
[인프런] Javascript입문 - 배열과 문자열 2 - .concat(), .join(), .split(), .indexOf(), .lastIndexOf(), .slice(), .splice() (0)	2020.10.19
[인프런] Javascript입문 - 객체를 활용해 구구단 다시 구현(실습, 해설) (0)	2020.10.19
[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설) (0)	2020.10.19
[인프런] Javascript입문 - 배열로 구구단 다시 구현 (실습 - 해설 및 참고자료, 배열초기화) (0)	2020.10.18

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

Bibi's DevLog 🤓🍎

[인프런] Javascript - 구구단 추가 미션, 학습 마무리 조언 (실습-나의 풀이 공유) 구구단 응용버전 : xy단 출력하기 본문

[인프런] Javascript - 구구단 추가 미션, 학습 마무리 조언 (실습-나의 풀이 공유) 구구단 응용버전 : xy단 출력하기

학습 목표

최종 요구사항

힌트

학습 마무리 조언

내가 작성한 코드(나의 풀이)

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

티스토리툴바