[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현

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입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현 본문

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

[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현

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

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

학습 목표

4칙연산 연산자를 사용해 본다.
프로그램을 실행해 콘솔에 값이 출력되는 것을 경험한다.
프로그램을 실행해 html에 값이 출력되는 것을 경험한다.
github에 프로젝트를 업로드하고 웹에서 확인한다.
영어 타이핑을 연습한다. - 200~300타는 되도록.

요구사항

구구단에서 2단과 3단을 계산하고 화면에 출력한다.
예를 들어 2단은 2 곱하기 1 계산후 계산 값을 출력, 2 곱하기 2 계산 후 계산 값을 출력 ... 2곱하기 9까지 반복. 3단은 같은 과정을 반복
프로그램 1: 처음에는 콘솔에 출력하는 프로그램을 작성한다.
프로그램 2: 두번째는 html 화면에 출력하는 프로그램을 작성한다.
각 프로그램 작성후 커밋을 한다.

****************
동영상을 둘로 나눌 것.
이렇게 과제를 안내하는 영상(1)과
라이브 코딩 영상(2)

(1)을 본 뒤,
스스로 문제를 풀어보고 나서, 잘 안 되거나 도움이 필요한 경우
혹은 다 풀어본 뒤 선생님은 나와 다르게 어떻게 코딩했는지 보기 위해서 (2)를 보면 된다.

결과물

gugudan1.html 과 gugudan2.html 을 커밋한 저장소

힌트

구글에서 "프로그래밍 4칙 연산"와 같은 키워드로 검색해 곱셈 방법을 찾아 구현한다.
계산 결과를 console.log()를 이용해 출력한다.
계산 결과를 document.write()를 이용해 출력한다.
html 줄바꿈 태그를 검색해 본다.

유용한 단축키

각자의 에디터에 비슷한 기능이 있으니, 검색해 보고 사용법을 익히자.

한 줄 복사하기: shift + alt + 아래 화살표

학습 참고 강좌 - 생활코딩 WEB2 Javascript 6.데이터타입 - 문자열과 숫자

www.youtube.com/watch?v=P8C8VNiM33A&feature=youtu.be

보고 정리한 내용 :

2020/10/07 - [Keep Going!/Javascript 자바스크립트] - 참조 강좌 ) 생활코딩 WEB2 Javascript 6.데이터타입 - 문자열과 숫자

참조 강좌 ) 생활코딩 WEB2 Javascript 6.데이터타입 - 문자열과 숫자

※이 문서는 bibi6666667.tistory.com/54 의 참조 문서입니다. [인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현 비비의 초원 Bibi's grassland⛺ [인프런] Javascript입문 - 구구단 2, 3단 계..

bibi6666667.tistory.com

코딩 구현

console.log 버전 (2단, 3단)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 - 2단과 3단 출력하기</h2>
<script>
    console.log('구구단 : 2단 입니다.');
    console.log('2 * 1 = ' + 2 * 1);
    console.log('2 * 2 = ' + 2 * 2);
    console.log('2 * 3 = ' + 2 * 3);
    console.log('2 * 4 = ' + 2 * 4);
    console.log('2 * 5 = ' + 2 * 5);
    console.log('2 * 6 = ' + 2 * 6);
    console.log('2 * 7 = ' + 2 * 7);
    console.log('2 * 8 = ' + 2 * 8);
    console.log('2 * 9 = ' + 2 * 9);

    console.log('구구단 : 3단 입니다.');
    console.log('3 * 1 = ' + 3 * 1);
    console.log('3 * 2 = ' + 3 * 2);
    console.log('3 * 3 = ' + 3 * 3);
    console.log('3 * 4 = ' + 3 * 4);
    console.log('3 * 5 = ' + 3 * 5);
    console.log('3 * 6 = ' + 3 * 6);
    console.log('3 * 7 = ' + 3 * 7);
    console.log('3 * 8 = ' + 3 * 8);
    console.log('3 * 9 = ' + 3 * 9);


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

document.write 버전 (2단, 3단)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>구구단 - 2단과 3단 출력하기</h2>
<script>
    document.write('<h3>구구단 : 2단 입니다.</h3>');
    document.write('2 * 1 = ' + 2 * 1 + '<br>');
    document.write('2 * 2 = ' + 2 * 2 + '<br>');
    document.write('2 * 3 = ' + 2 * 3 + '<br>');
    document.write('2 * 4 = ' + 2 * 4 + '<br>');
    document.write('2 * 5 = ' + 2 * 5+ '<br>');
    document.write('2 * 6 = ' + 2 * 6+ '<br>');
    document.write('2 * 7 = ' + 2 * 7+ '<br>');
    document.write('2 * 8 = ' + 2 * 8+ '<br>');
    document.write('2 * 9 = ' + 2 * 9+ '<br>');

    document.write('<h3>구구단 : 3단 입니다.</h3>');
    document.write('3 * 1 = ' + 3 * 1+ '<br>');
    document.write('3 * 2 = ' + 3 * 2+ '<br>');
    document.write('3 * 3 = ' + 3 * 3+ '<br>');
    document.write('3 * 4 = ' + 3 * 4+ '<br>');
    document.write('3 * 5 = ' + 3 * 5+ '<br>');
    document.write('3 * 6 = ' + 3 * 6+ '<br>');
    document.write('3 * 7 = ' + 3 * 7+ '<br>');
    document.write('3 * 8 = ' + 3 * 8+ '<br>');
    document.write('3 * 9 = ' + 3 * 9+ '<br>');


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

알아둬야 할 내용 - 에디터 단축키를 활용해 더 빠르고 효율적으로 코딩하기.

파이참 단축키

- 참고 (roby.tistory.com/entry/%ED%8C%8C%EC%9D%B4%EC%B0%B8Pycham-%EB%8B%A8%EC%B6%95%ED%82%A4)

** 코드 한 줄 아래에 복붙 단축키 = Ctrl + d
** 블럭 단위 선택 = ctrl + w

**찾기(및 바꾸기), ( Ctrl + F | Ctrl + H )

**찾기 및 바꾸기의 기본 단축키는 Ctrl + R 이다(Replace).

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

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

[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 공부시작(20.10.01) (0)	2020.10.07
[인프런] Javascript입문 - 연습문제2(소수 판별 프로그램) (0)	2020.10.07
[인프런] Javascript 입문 - 반복문1 (0)	2020.10.06

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

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현 본문

[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현

학습 목표

요구사항

결과물

힌트

유용한 단축키

학습 참고 강좌 - 생활코딩 WEB2 Javascript 6.데이터타입 - 문자열과 숫자

코딩 구현

알아둬야 할 내용 - 에디터 단축키를 활용해 더 빠르고 효율적으로 코딩하기.

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

티스토리툴바