티스토리 뷰

코딩 공부/생활 코딩

생활 코딩 - 반복문

찬찬잉 2021. 8. 16. 19:49

반복문 (영어로 자료를 검색해야할 경우 영어로 아래와 같이 검색하면된다.

1. loop

2. iterate 

 

인간은 반복적인 작업을 못하기에 결함을 대신하기 위해 컴퓨터를 활용하자.

반복문과 조건문을 활용해서 컴퓨터 프로그램을 만들어가는 것이다.

 

while / for 두가지다 ~~ 하는 동안의 뜻을 가지고있다.

 

while 문법


while(조건, boolean) { //참일 경우 반복해서 아래의 코드가 실행된다. true -> false
      반복해서 실행할 코드
}

반복적으로 coding everybody를 출력하고있다가 강제로 멈추는 명령어가 나온다. (이런것을 무한루프라고한다.)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        while(true){
            document.write("coding everybody <br />")
        }
    </script>
</body>
</html>

이제 무한루프에 빠지지 않도록하는방법.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        var i = 0;
        while(i < 10){
            document.write("coding everybody" + i + " <br />");
            i = i + 1;
        }
    </script>
</body>
</html>

10번 출력되고 멈춘다. 참이 거짓이 되면서 9번에서 마지막 실행되고 10번째에서 거짓이되면서 꺼진다.

 

for문 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        for( var i = 0; i < 10; i = i + 1 ) {
            document.write("coding everybody" + i + "<br />");
        }
    </script>
</body>
</html>

실행 결과

coding everybody0
coding everybody1
coding everybody2
coding everybody3
coding everybody4
coding everybody5
coding everybody6
coding everybody7
coding everybody8
coding everybody9

구성 요소를 쪼갠다. 

for ( var i = 0; i < 10; i = i + 1 ) 블럭 후에 코드가 실행된다.

코드가 끝난후 빠져나가서 실행을 종료한다.

 

i = i + 1;  / i++; 같은 의미이다.

하지만 ++i는 다른의미이다.


i++ / ++i 거의 비슷하다. 기존의 값을 사용하는 것과 아닌것의 차이다.

 

변수는 무엇을 써도 상관이없다.

 

반복문의 효용 -> 없다면 얼마나 불편할까?

 

반복문이 없다면? 열번 출력해라를 for문으로 편하게 출력하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
        document.write("coding everybody <br />")
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        /* document.write("coding everybody 1 <br />")
        document.write("coding everybody 2 <br />")
        document.write("coding everybody 3 <br />")
        document.write("coding everybody 4 <br />")
        document.write("coding everybody 5 <br />")
        document.write("coding everybody 6 <br />")
        document.write("coding everybody 7 <br />")
        document.write("coding everybody 8 <br />")
        document.write("coding everybody 9 <br />")
        document.write("coding everybody 10 <br />") */

        for(var i=0; i < 10; i++) {
        document.write("coding everybody"+(i*2)+"<br/>");
        }
    </script>
</body>
</html>

반복문의 제어

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        for(var i=0; i < 10; i++) {
            if(i === 5){
                break; //브레이크를 통해 반복문을 언제든지 중단시킬 수 있다.
            }
            document.write("coding everybody"+i+"<br/>");
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        for(var i=0; i < 10; i++) {
            if(i === 5){
                continue; //브레이크를 통해 반복문을 언제든지 중단시킬 수 있다.
            }
            document.write("coding everybody"+i+"<br/>");
        }
    </script>
</body>
</html>
coding everybody0
coding everybody1
coding everybody2
coding everybody3
coding everybody4
coding everybody6 // 5에서 중단되고 6부터 다시 실행된다.
coding everybody7
coding everybody8
coding everybody9

반복문의 중첩

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 생활코딩</title>
</head>
<body>
    <script>
        for(var i=0; i < 10; i++) {
            for(var j = 0; j<10; j++){ //i는 문자가 된다. 문자열과 문자열의 결합
                document.write("coding everybody" + i + j + "<br />");
            }
        }
    </script>
</body>
</html>

디버그, 디버거 사용방법 f12

breakpoints에서 걸려서 출력

 

'코딩 공부 > 생활 코딩' 카테고리의 다른 글

생활 코딩 - 배열  (1) 2021.08.17
생활 코딩 - 함수  (0) 2021.08.16
생활 코딩 - 조건문  (0) 2021.08.15
생활 코딩 - 비교  (0) 2021.08.15
생활 코딩 - 줄바꿈과 여백  (0) 2021.08.15

UP NEXT : 코딩 공부/생활 코딩

댓글
© 2022 chanchaning