[인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝!

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
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입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝! 본문

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

[인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝!

비비 bibi 2020. 10. 7. 20:33

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

학습 목표

사용자가 값을 입력 받는 방법을 경험한다.
데이터 타입을 이해한다.
조건문을 이해한다.

요구사항

사용자가 입력한 숫자 값에 해당하는 단을 출력한다.
- 예를 들어 사용자가 8이라는 숫자를 입력하면 8단 전체를 계산해 출력한다.
사용자가 2 이상, 9 이하가 아닌 값을 입력하는 경우 "2이상, 9이하의 값만 입력할 수 있습니다."라는 메시지를 출력한다. (if 문)
콘솔 버전, 웹 버전 두 가지로.

힌트

사용자에게 숫자 값을 입력 받는 방법

var n = prompt('블라블라')

입력한 숫자 값이 2이상, 9이하인지 확인

if (number < 2) { 
	// 사용자에게 에러 메시지 출력 
} else if (number > 9) {
	// 사용자에게 에러 메시지 출력 
} else {
	// number에 해당하는 구구단 계산 결과 출력 
}

학습 참고 자료

생활코딩 : WEB2 Javascript - 16. 조건문

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

조건문 - 생활코딩

조건문 문법 소스코드 변경사항 <

opentutorials.org

보고 정리한 내용 : bibi6666667.tistory.com/61

참조 강좌 ) 생활코딩 : WEB2 Javascript - 16. 조건문

※ 이 문서는 bibi6666667.tistory.com/57의 참조 문서입니다. [인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) 비비의 초원 Bibi's grassland⛺ [인프런]Javascript입문 - 8,9단(..

bibi6666667.tistory.com

나의 답안

gugudan7.html(콘솔 버전)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 출력 프로그램 - 콘솔 버전</h2>
<script>
    var num = Number(prompt('2 이상, 9이하의 숫자를 입력하세요'));
    if (num >= 2 && num <= 9 ){
        for (var i = 1; i <= 9; i++) {
            console.log(num + "*" + i + "=" + (num * i));
        }
    } else {
        console.log('2 이상, 9 이하의 값만 입력할 수 있습니다.')
    }
</script>
</body>
</html>

gugudan8.html(웹 버전)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 출력 프로그램 - 웹 버전</h2>
<script>
    var num = Number(prompt('2 이상, 9이하의 숫자를 입력하세요'));
    if (num >= 2 && num <= 9 ){
        for (var i = 1; i <= 9; i++) {
            document.write(num + "*" + i + "=" + (num * i) + "<br>");
        }
    } else {
        document.write('2 이상, 9 이하의 값만 입력할 수 있습니다.')
    }
</script>
</body>
</html>

오답노트

- if문 반대로 사용
if (n < 2 || n > 9) {2이상 9이하가 아닐 때 실행할 코드} else {2이상 9 이하일 때 실행할 코드};

- for문에서
console.log(n + "*" + i + "=" + n * i); 부분을
var ret = n * i ;
console.log(n + "*" + i + "=" + ret); 의 두 줄로 치환.

심화과정 : prompt 대신 input창 만들고, 버튼 누르면 함수로 구구단 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 출력 프로그램 - 웹 버전(+개선)</h2>
출력할 단 : <input type="text" id="num">
<button onclick="runGugudan()">출력하기</button>
<script>
    function runGugudan() {
        var strN = document.getElementById("num").value;
        console.log(strN);
        var num = Number(strN);
        if (num >= 2 && num <= 9) {
            document.write("<h3>" + num + "단</h3>")
            for (var i = 1; i <= 9; i++) {
                var ret = num * i;
                document.write(num + "*" + i + "=" + ret + "<br>");
            }
        } else if (num < 2 || num > 9) {
            document.write('2 이상, 9 이하의 숫자만 입력할 수 있습니다.')
        } else {
            document.write('숫자만 입력할 수 있습니다.')
        }
    }


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

1장 끝!

왕초보 단계 졸업 : 함수를 잘 다룰 수 있을 때!

초보 단계 졸업 : 객체를 잘 다룰 수 있을 때!

이제 다음 단계는 왕초보 탈출을 위한 함수 공부이다. :D

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

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

참조 강좌 ) 생활코딩 -WEB2 JavaScript - 7.변수와 대입 연산자. (0)	2020.10.07
참조 강좌 ) 생활코딩 WEB2 Javascript 6.데이터타입 - 문자열과 숫자 (0)	2020.10.07
[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현 (0)	2020.10.07

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

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝! 본문

[인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝!

학습 목표

요구사항

힌트

학습 참고 자료

생활코딩 : WEB2 Javascript - 16. 조건문

나의 답안

오답노트

심화과정 : prompt 대신 input창 만들고, 버튼 누르면 함수로 구구단 출력하기

1장 끝!

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

티스토리툴바