[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현

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입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현 본문

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

[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현

비비 bibi 2020. 10. 7. 16:54

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

학습 목표

변수를 경험한다.
영어 타이핑을 연습한다.
사용자의 입력을 받는 방법을 알아본다.

요구사항

구구단에서 4단과 5단을 계산한 결과 값을 변수에 저장한 후 저장한 변수 값을 출력한다.
4와 5는 결정하면 바뀌지 않는 값이다. 따라서 4단과 5단에 해당하는 상수 값으로 만든 후 프로그램을 구현한다.
예를 들어 4단은 4 곱하기 1 계산 결과 값을 i라는 변수에 저장하고, i라는 변수에 저장한 결과 값을 출력한다.
사용자가 입력한 숫자 값에 해당하는 단을 출력한다.
- 예를 들어 사용자가 4라는 숫자를 입력하면 4단 전체를 계산해 출력한다.
콘솔 버전과 웹 버전 두 개를 작성한다.

결과물

gugudan3.html
gugudan4.html
두 코드를 커밋한 깃허브 저장소 링크

힌트

다음과 같이 변수에 값을 저장하고 출력한다.

var result; 
result = 4 * 1; 
console.log(result);

4단을 구현하는 경우 4라는 값은 변하지 않는다. 4라는 값을 변수로 만든다.

var num4 = 4; 
var result = num4 * 1;

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

var num = prompt("몇 단을 출력하실 건가요?");
console.log(num);

학습 참고 자료

: 생활코딩 -WEB2 JavaScript - 7.변수와 대입 연산자.

https://youtu.be/absJhWQAS40

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

참조 강좌 ) 생활코딩 -WEB2 JavaScript - 7.변수와 대입 연산자.

※ 이 문서는 bibi6666667.tistory.com/55의 참조 문서입니다. [인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현 비비의 초원 Bibi's grassland⛺ [인프런] Javascript입문 - 4,5단 구현(값 입..

bibi6666667.tistory.com

코딩 구현

내가 푼 코드

gugudan3.html (콘솔 버전)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 4단, 5단 - 콘솔 버전</h2>
<script>
    var num = Number(prompt('구구단 4단이나 5단을 출력합니다. 4단은 "4", 5단은 "5"를 입력해 주세요'));
    var result = num * 1
    if (num === 4){
        console.log(num + ' * 1 = ' + (num * 1));
        console.log(num + ' * 2 = ' + (num * 2));
        console.log(num + ' * 3 = ' + (num * 3));
        console.log(num + ' * 4 = ' + (num * 4));
        console.log(num + ' * 5 = ' + (num * 5));
        console.log(num + ' * 6 = ' + (num * 6));
        console.log(num + ' * 7 = ' + (num * 7));
        console.log(num + ' * 8 = ' + (num * 8));
        console.log(num + ' * 9 = ' + (num * 9));
    } else if (num === 5){
        console.log(num + ' * 1 = ' + (num * 1));
        console.log(num + ' * 2 = ' + (num * 2));
        console.log(num + ' * 3 = ' + (num * 3));
        console.log(num + ' * 4 = ' + (num * 4));
        console.log(num + ' * 5 = ' + (num * 5));
        console.log(num + ' * 6 = ' + (num * 6));
        console.log(num + ' * 7 = ' + (num * 7));
        console.log(num + ' * 8 = ' + (num * 8));
        console.log(num + ' * 9 = ' + (num * 9));
    } else {
        console.log('이 페이지에서는 4단과 5단만 출력할 수 있습니다.')
    }
</script>
</body>
</html>

gugudan4.html (웹 버전)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 4단, 5단 - 콘솔 버전</h2>
<script>
    var num = Number(prompt('구구단 4단이나 5단을 출력합니다. 4단은 "4", 5단은 "5"를 입력해 주세요'));
    if (num === 4){
        document.write(num + ' * 1 = ' + (num * 1)+'<br>');
        document.write(num + ' * 2 = ' + (num * 2)+'<br>');
        document.write(num + ' * 3 = ' + (num * 3)+'<br>');
        document.write(num + ' * 4 = ' + (num * 4)+'<br>');
        document.write(num + ' * 5 = ' + (num * 5)+'<br>');
        document.write(num + ' * 6 = ' + (num * 6)+'<br>');
        document.write(num + ' * 7 = ' + (num * 7)+'<br>');
        document.write(num + ' * 8 = ' + (num * 8)+'<br>');
        document.write(num + ' * 9 = ' + (num * 9)+'<br>');
    } else if (num === 5){
        document.write(num + ' * 1 = ' + (num * 1)+'<br>');
        document.write(num + ' * 2 = ' + (num * 2)+'<br>');
        document.write(num + ' * 3 = ' + (num * 3)+'<br>');
        document.write(num + ' * 4 = ' + (num * 4)+'<br>');
        document.write(num + ' * 5 = ' + (num * 5)+'<br>');
        document.write(num + ' * 6 = ' + (num * 6)+'<br>');
        document.write(num + ' * 7 = ' + (num * 7)+'<br>');
        document.write(num + ' * 8 = ' + (num * 8)+'<br>');
        document.write(num + ' * 9 = ' + (num * 9)+'<br>');
    } else {
        document.write('이 페이지에서는 4단과 5단만 출력할 수 있습니다.')
    }
</script>
</body>
</html>

오답노트

정답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 - 웹 버전(정답)</h2>
<script>
    var num = Number(prompt('구구단을 출력합니다. 원하는 숫자를 입력해 주세요'));
    document.write("<h4>구구단"+ num +"단</h4>")
    document.write(num + ' * 1 = ' + (num * 1)+'<br>');
    document.write(num + ' * 2 = ' + (num * 2)+'<br>');
    document.write(num + ' * 3 = ' + (num * 3)+'<br>');
    document.write(num + ' * 4 = ' + (num * 4)+'<br>');
    document.write(num + ' * 5 = ' + (num * 5)+'<br>');
    document.write(num + ' * 6 = ' + (num * 6)+'<br>');
    document.write(num + ' * 7 = ' + (num * 7)+'<br>');
    document.write(num + ' * 8 = ' + (num * 8)+'<br>');
    document.write(num + ' * 9 = ' + (num * 9)+'<br>');

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

- 굳이 if문 사용하지 않음. 4단과 5단만이 아닌 모든 숫자의 구구단 가능.
- 구구단 n단 이라는 소제목 추가.

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

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

[인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝! (0)	2020.10.07
[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 공부시작(20.10.01) (0)	2020.10.07
[인프런] Javascript입문 - 연습문제2(소수 판별 프로그램) (0)	2020.10.07

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

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현 본문

[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현

학습 목표

요구사항

결과물

힌트

학습 참고 자료

: 생활코딩 -WEB2 JavaScript - 7.변수와 대입 연산자.

코딩 구현

내가 푼 코드

오답노트

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

티스토리툴바