ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 기본 - 반복문
    JavaScript/생활코딩 2018. 11. 15. 15:25



    반복문 - https://opentutorials.org/course/743/4728





    반복문 - 반복적인 작업(loop, iterate), 컴퓨터에게 반복적인 작업을 지시하는 방법이다.

                반복문에는 while, for 가 있다.


    반복문이 없다면? - 어떤 작업 코드가 짧은 테스트 코드일 경우 복사하여 사용할 수 있지만 코드가 만번, 혹은 그 이상 반복되어야 할 때    는 복사 작업이 힘들뿐 아니라 실수할 가능성이 많아 진다. 






    a. while


    while의 문법


    while(조건 boolean데이터타입){  //조건이 true면 중괄호 실행, false가 될때까지 실행한다.


    반복해서 실행할 코드

    }


    while의 조건이 true일 경우 코드가 무한루프로 실행되기 때문에 적절한 시기에 false 조건으로 바뀌도록 해야한다.





    예제


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>

    var i = 0; //반복문이 언제까지 실행될 것이냐에 대한 기준점

     

    while( i < 10 ) {        //true인경우 중괄호를 실행하고 false인 경우 중괄호를 실행하지 않는다.


     i = i + 1;

    document.write("hello " + i +  "<br>");

    }


    /*

    var i = 0; (초기화)

    i < 10 (반복조건)

    i = i + 1; (반복실행)


    위의 세가지 구성요소는 항상 필요한데 구성요소들이 한덩이가 아닌 세 구역에 나눠져 있다.

    만약 코드가 길어진다면 구성요소를 찾기 힘들며 실수할 가능성이 늘어나기 때문에 while문을 선호하지는 않는다.

    */


    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.

    경고창 답

    hello 1

    hello 2

    hello 3

    hello 4

    hello 5

    hello 6

    hello 7

    hello 8

    hello 9

    hello 10










    b. for


    for의 문법


    for (초기화; 반복조건; 반복실행){  //조건이 true면 중괄호 실행, false가 될때까지 실행한다.


    반복해서 실행할 코드

    }


    for는 초기화, 반복조건, 반복실행 세가지 구성요소들이 한덩이에 있다.

    for문에서 중요한 점은 반복실행을 적고나서 마지막에 ;(세미콜론)을 적으면 안된다.

    while보다 무조건 좋은 것은 아니지만 대부분의 반복문에서는 for문을 사용한다.





    예제2


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>

    for (var i = 0;  i < 10;  i++){  //처음조건인 초기화는 처음 한번만 실행된다. 중괄호가 실행되면 초기화가 아닌 반복조건으로 간다.

          // i++는 실행 후 그 다음조건(다음코드)에서 1이 증가하고

          // ++i 는 실행 할때 1이 증가한다.

          // 변수는 iterate의 약자인 i를 사용하나 다른 문자를 사용해도 무관하다. i를 사용하는 것은 그냥 관습적인 것이다.


    document.write("hello " + i +  "<br>");

    }


    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.

    경고창 답

    hello 0

    hello 1

    hello 2

    hello 3

    hello 4

    hello 5

    hello 6

    hello 7

    hello 8

    hello 9









    c. 반복문의 제어



    • break

    반복작업을 중간에 중단하려고 할 때 사용하는 것.



    예제3


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>


    for(var i = 0; i < 10; i++){

        if(i === 5) { // i의 값이 5가 되면 중괄호 안의 break가 실행되면서 if문 밖에 있는 for문을 빠져나가게 된다.

            break;

        }

        document.write('coding everybody'+i+'<br />');

    }


    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.

    경고창 답

    coding everybody0

    coding everybody1

    coding everybody2

    coding everybody3

    coding everybody4




    • continue

    반복작업을 특정한 순간에만 중단하고 그 이후에는 반복작업이 계속 진행되고 싶게 할 때 사용하는 것.



    예제4


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>


    for(var i = 0; i < 10; i++){

    if(i === 5) {  // i의 값이 5가 되면 중괄호 안의 continue가 실행되며 if문 밖으로 나가서 그 다음 구문을 실행하는 것이 아니라 반복문의 i++인 반복실행이 실행된다.

    continue;

    }

    document.write('coding everybody'+i+'<br />');

    }

    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.

    경고창 답

    coding everybody0

    coding everybody1

    coding everybody2

    coding everybody3

    coding everybody4

    coding everybody6

    coding everybody7

    coding everybody8

    coding everybody9










    d. 반복문의 중첩



    변수 i, j를 사용하여 반복문으로 00, 01, 02, ~ 99 까지 페이지에 나타내보자.


    예제5


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>


    for(var i = 0; i < 10; i++){

    for(var j = 0; j < 10; j++){

    document.write('coding everybody'+i+j+'<br />'); 

    // i, j는 숫자데이터형식이기 때문에 i+j를 하면 원하는 값이 나오지 않는다고 생각하지만 앞,뒤에 있는 ' '사이의 문자열들과 결합하면 i,j는 문자데이터형식으로 변하기 때문에 문제 없다.

    }

    }

    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 document.write의 결과가 페이지에 나타난다.

    경고창 답

    coding everybody00

    coding everybody01

    coding everybody02

    coding everybody03

    coding everybody04

    ....

    coding everybody99






    예제5의 코드 실행과정은 개발자도구에서 디버거를 통해 확인 할 수 있다.



    댓글

Designed by Tistory.