[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현

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입문 - 6,7단 구현(반복문) & 코딩 구현 본문

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

[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현

비비 bibi 2020. 10. 7. 17:58

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

학습 목표

반복문을 경험한다.
반복문,조건문(제어문)은 컴퓨터에게 여러 복잡한 일을 시킬 수 있는, 굉장히 중요한 도구다.

✅같은 코드를 반복하고 있다 = 코딩을 잘못 하고 있다는 뜻이다.
-> 반복문, 함수를 통해 반복을 제거해 깔끔한 코딩을 하는 연습을 해야 한다.
** var === variable 즉 변수라는 뜻.

✅변수명은 중요하다.
- 의미있는 변수명을 사용하고,
- 개발자들끼리 약속한 규칙을 따르는 것이 좋다(= 컨벤션convention)

요구사항

지금까지 2 ~ 5단까지 구현하기 위해 단순, 반복적인 작업이 많았다.
이 같은 단순, 반복적인 작업을 변수와 반복문을 활용해 제거하면서 6단과 7단을 구현한다.

결과물

gugudan5.html
gugudan6.html
github 업로드(커밋 / 푸시) 도 꼭 할 것!

힌트

while 반복문을 사용한다.

var i = n ;
// 1. i라는 변수 초기화.
while(조건식condition) {
// 2. 조건식이 참인지 검사
코드 블록 code block
// 3. 원하는 코드블록 실행
i++;
// 4. 값을 증감
}

var i = 1;
while (i < 10) {
  // 곱셈 결과 출력 
  // i 값을 1 증가 
}

for 반복문을 사용한다.

for (1.변수 초기화 ; 2.조건식 ; 4.값을 증감 ) {
3. 원하는 코드블록 실행
}

for (var i = 0; i <10; i++) {
// 곱셈 결과 출력 
}

학습 참고자료

반복문

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration

루프와 반복

루프는 어떤 것을 반복적으로 시행할때 빠르고 간편한 방법을 제공합니다. JavaScript Guide의 이 쳅터는 JavaScript 에서 사용가능한 서로다른 반복문을 소개합니다.

developer.mozilla.org

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

참고 자료 ) Javascript의 반복문(loop) - mozilla 문서

※ 이 문서는 bibi6666667.tistory.com/56의 참조 문서입니다. [인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현 비비의 초원 Bibi's grassland⛺ [인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩..

bibi6666667.tistory.com

내가 짠 코드

gugudan5.html (while문, 콘솔 버전)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>구구단 6,7단 - 반복문 사용(while문), 콘솔 버전</h1>
    <script>
        var num = Number(prompt('구구단을 출력합니다. 숫자를 입력해 주세요'));
        //받은 숫자에 1~9를 곱해 출력한다.
        var one = 1;
        while (one <= 9) {
            console.log(num + "*" + one + "=" + (num * one));
            one++;
        }
    </script>
</body>
</html>

gugudan5.html (for 문, 웹 버전)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 6,7단 - 반복문 사용(for문), 웹 버전</h1>
<script>
    var num = Number(prompt('구구단을 출력합니다. 숫자를 입력해 주세요'));
    //받은 숫자에 1~9를 곱해 출력한다.
    for (var i = 1; i <= 9; i++ ) {
        document.write(num + "*" + i + "=" + (num * i) + "<br>");
    }
</script>
</body>
</html>

오답노트

개발자들은 부등식을 표현할 때,
i <= 9 보다는 1 < 10 을 선호하는 편이다.
변수명은 one보다 i 같은 약자가 좋다.

++ 심화과정 : prompt() 대신 <input>으로 구구단 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 6,7단 - 반복문 사용(for문), 웹 버전</h1>
<h2>html input창을 추가해보기</h2>
출력할 단수 : <input type="text" id="num" value=""> <br>
<button onclick="runGugudan()">출력</button>
<script>
    function runGugudan() {
        var strnum = document.getElementById("num").value;
        var num = Number(strnum);
        document.write('<h2>구구단' + num + '단</h2>');
        //받은 숫자에 1~9를 곱해 출력한다.
        for (var i = 1; i <= 9; i++) {
            document.write(num + "*" + i + "=" + (num * i) + "<br>");
        }
    }
</script>
</body>
</html>

<input type="text" id="num" value="">
html의 input 태그 중 텍스트를 입력받을 수 있는 타입.
id = 고유한 값.

<button onclick="runGugudan()">출력</button>
<button>버튼이름</button> : 버튼을 만드는 태그.
onclick="함수명" : 버튼 클릭시 해당 함수를 실행.

function runGugudan() { }
runGugudan이라는 이름의 함수를 만든 것.
만들어 두었던 조건문을 함수 중괄호 안에 넣는다.

document.getElementById("num").value;
document. = html문서에서.
getElementById("id값")= "id값"인 요소를 가져와라.
.value : 그 요소의 값을 가져와라.

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

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

참조 강좌 ) 생활코딩 WEB2 Javascript 6.데이터타입 - 문자열과 숫자 (0)	2020.10.07
[인프런]Javascript입문 - 8,9단(값 입력 및 조건문) & 코딩 구현 (구구단 최종) // 1장 끝! (0)	2020.10.07
[인프런] Javascript입문 - 4,5단 구현(값 입력 및 변수) & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 구구단 2, 3단 계산 및 출력 & 코딩 구현 (0)	2020.10.07
[인프런] Javascript입문 - 공부시작(20.10.01) (0)	2020.10.07

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

Bibi's DevLog 🤓🍎

[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현 본문

[인프런]Javascript입문 - 6,7단 구현(반복문) & 코딩 구현

학습 목표

요구사항

결과물

힌트

학습 참고자료

반복문

내가 짠 코드

오답노트

++ 심화과정 : prompt() 대신 <input>으로 구구단 출력하기

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

티스토리툴바