Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
관리 메뉴

Kim's Programming

HTML - 반복문 본문

Programming/HTML

HTML - 반복문

Programmer. 2015. 8. 23. 17:07

반복문


    • 반복하여 특정 문구를 100번 출력한다고 했을 때는 최소 100줄의 코드를 쳐야 가능합니다. 하지만 반복문을 이용하면 특정한 조건하에서 여러번 반복하기 때문에 몇줄 안되는 코드를 이용 100개를 손쉽게 출력을 할 수 있습니다.

    • 다음은 특정 문구를 5번 출력하는 2가지 방법입니다. 반복문을 사용하면은 통채로 입력하는 것 보다 보기도 좋고 코드도 간단해 집니다.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      document.write(" 반복문을 반복하기위해 씁니다.");
      document.write(" 반복문을 반복하기위해 씁니다.");
      document.write(" 반복문을 반복하기위해 씁니다.");
      document.write(" 반복문을 반복하기위해 씁니다.");
      document.write(" 반복문을 반복하기위해 씁니다.");
      -----------------------------------------반복문 미사용
      for(i=0;i<6;i++)
      {
          document.write(" 반복문을 반복하기위해 씁니다.")
      }
      -------------------------------------------반복문 사용
      		cs
    • 반복문에는 for문과 while문이 있으며 수행과정중 반복의 중단 또는 계속같이 반복 흐름 제어를 위한 break와 countinue가 있습니다.

for 문


    • for문은 반복횟수를 사용하여 특정 실행문을 반복 수행합니다. for문을 구성하기 위해서는 반복카운터변수의 설정이 필요합니다. 반복 카운터변수는 프로그램 수행 시 반복처리가 필요한 실행 문을 몇 회 반복했는지 기억하기위한 변수로 반드시 정수형 변수가 선언되어야 합니다. for문의 굴호안에는 세미콜론으로 구분되는 3개의 식이 있습니다. 첫번쨰 식은 반복 카운터 변수의 초기화식입니다. 두 번째 식은 계속 조건식인데 이 조건식은 매회 반복이 진행될 떄마다 참, 거짓 여부가 체크되며 참이면 계속 수행하고 거짓이면 반복을 중단하게됩니다. 이 조건식인데 이 조건식이 만족되면 반복을 계속하라는 의미라고 볼수 있습니다. for문에서는 계속조건식을 구성할 때 일반적으로 반복카운터 변수가 포함됩니다. 세 번째 식은 반복카운터변수의 증감을 표시하고 있습니다. 이 식도 반복이 진행되면서 실행이 됩니다. for문의 구성은 다음과 같이됩니다.
      var i;
      for(i=1;i=10;i++)
      {
          document.write("반복을 반복하기 위해 씁니다.");
      }

    • 다음소스는 반복처리되는 실행문에 반복카운터변수가 사용된 경우입니다. 실행 문에 반복카운터변수가 사용되면 다양한 기능의 프로그램을 작성할 수 있습니다. 아래 소스는 1에서 10까지 정수의 합계를 구하는 프로그램입니다. 처음 실행문이 수행되면 s=0+1이 저장되고, 두 번쨰 실행문이 수행되면 s=0+1+2=3이 저장됩니다. 같은 방식으로 실행문이 10회 수행되면 s=0+1+2+3+4+5+6+7+8+9+10=55가 저장되고 11회가 되는 순간 계속조건식이 거짓이 되어 프로그램이 종료되게 됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <HTML>
          <HEAD>
              <TITLE>
                  배열 객체
              </TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  s=3;
                  for(i=1;i<=10;i++)
                  {
                      s=s+i;
                  }
              document.write("<H3> 1부터 10까지의 합계</H3><P>");
              document.write("s=",s);
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
    • 지금까지는 반복카운트변수를 1씩 증가시켜왔으나 반복카운트변수는 감소시켜도 무방합니다. 이떄 반복카운트변수의 초기값과 계속조건식이 동시에 변경되어야합니다. 다음 소스는 1부터 10까지의 합을 구하는 프로그램이지만 반복카운트 변수를 계속 감소시켜나가는 방식으로 반복문을 구성하고 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <HTML>
          <HEAD>
              <TITLE>
                  배열 객체
              </TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  s=3;
                  for(i=10;i>=0;i--)
                  {
                      s=s+i;
                  }
              document.write("<H3> 1부터 10까지의 합계</H3><P>");
              document.write("s=",s);
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
      다음의 결과는 위와 같습니다.

    • 반복카운트변수는 항상 1씩 증가시키거나, 1씩 감소시킬 필요 없습니다. 2이상의 임의의 수만큼 증가시킬 수도 있습니다. 다음소스는 1~10까지의 자연수중 짝수의 합계를 구하는 프로그램입니다. 반복 루프가 돌때마다 2씩 증가됩니다. 2씩 증가되는 루프 소스는 다음과 같습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <HTML>
          <HEAD>
              <TITLE>
                  배열 객체
              </TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  s=0;
                  for(i=0;i<=10;i+=2)
                  {
                      s=s+i;
                  }
              document.write("<H3> 1부터 10까지의 짝수 합계</H3><P>");
              document.write("s=",s);
              </SCRIPT>
          </BODY>
      </HTML>
      		cs


    • 반복문은 배열과 함꼐 사용하게 되면 효과적입니다. 다음 예제는 원소가 4개인 travel이라는 1차원 배열에 여행국을 각각 저장해두고, for문을 이용하여 출력하는 소스입니다. 배열의 원소를 출력할 떄 반복문을 사용함으로써 소스를 간단하게 만들 수 있음을 알 수 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <HTML>
          <HEAD>
              <TITLE>
                  for문에서
              </TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  travel=new Array("프랑스","호주","아프리카","쿠바")
                  for(i=0;i<=travel.length -1; i++)
                  {
                      document.write("travel["+i+"]=" + travel[i] + "<BR>");
                  }
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
      결과는 다음과 같습니다.

for문 이중으로 해서 구성 할 수도 있습니다.

while문

    • while문은 일정조건이 충족되는 한 계속 수행되는 반복문을 말합니다. while문은 반복카운터변수 없이도 수용될 수 있습니다. for문과의 차이를 쉽게 비교할 수 있도록 주소와 성명을 10회 출력하는 프로그램을 while문의 구분을 사용하여 작성하면 다음 소스의 구조와 같습니다. while문의 괄호 안에는 for문과는 달리 오직 한 개의 식이 있습니다. 이 식은 계속 조건인데 for문에서와 같이 매회 반복이 진행될 때마다 참, 거짓 여부가 체크되어 참이면 계속 수행하고 거짓이면 반복을 중단하게 됩니다. 즉 이 조건식이 만족되면 반복을 계속하라는 의미라고 볼 수 있습니다. for문에서는 계속 조건식을 구성할 때 항상 반복카운터변수를 사용하는데 반해 while문의 계속 조건식에는 반드시 반복카운터 변수가 포함 될 필요가 없습니다. 예를 들어 일정한 시간 이내에 있는 한 실행 문을 반복하는 경우를 while문으로 표현할 수 있는데, 이 경우는 반복카운터 변수가 필요 없게 됩니다.

      1
      2
      3
      4
      5
      6
      i =1;
      while(i<=10)
      {
          document.write("이번엔 while반복문 입니다. ");
          i=i+1;
      }
      		cs
    • 한편 while문장의 변형으로 do~while문장이 있습니다. while문장이 반복문의 시작 시 반복의 시작 시 반복의 계속조건이 체크되는데 비해 do~while문장은 반복문의 끝 부분에서 반복의 계속 조건이 체크됩니다. 그러므로 do~while문장에서는 최소 한번은 반복문이 실행됩니다. do~while문의 구문은 다음과 같습니다. 그림에서와 같이 반복처리가 필요한 실행 문들은 do로 시작하는 중괄호 안에 위치하고 있으며, while문과 계속 조건식은 마지막에 나타납니다.

      1
      2
      3
      4
      5
      6
      7
      i =1;
      while(i<=10)
      do
      {
          document.write("이번엔 while반복문 입니다. ");
          i=i+1;
      }while(i<=10)
      		cs
    • 다음의 소스는 1부터 10까지의 정수의 합계를 구하는 프로그램입니다. 처음 실행문이 수행되면 s=0+1=1이 저장되고, 두번째 실행문이 s=0+1+2=3이 저장됩니다. 같은 방식으로 실행문이 10회 수행되면 s = 0+1+2+3+4+5+6+7+8+9+10=55가 저장되고 11회가 되는 순간 계속조건식이 거짓이 되어 프로그램이 종료됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <HTML>
          <HEAD>
              <TITLE>
                  while문
              </TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  s=0; i=1;
                  while(u<=10)
                  {
                      s=s+i;
                      i=i+1;
                  }
                  document.write("s=" +s)
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
      결과는 다음과 같습니다.

    • 1~10까지 자연수 중 짝수의 합계를 구하는 프로그램을 do~while문을 이용하여 작성한 것입니다. 처음 실행문이 수행되면 s=0+2=2가 저장되고 두 번째 실행문이 수행되면 s=0+2+4+6이 저장됩니다. 같은 방식으로 실행문이 5회 수행되면 s=0+2+4+6+8+10=30으로 저장되고 이떄 i=12가 되어 계속조건식이 거짓이 되므로 프로그램이 종료됩니다. 위의 짝수를 더하는 것과 결과는 같습니다.
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <HTML>
          <HEAD>
              <TITLE>
                  while문
              </TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
                  s=0; i=2;
                  do
                  {
                      s=s+i;
                      i=i+2;
                  }while(i<=10)
                  document.write("s=" +s)
              </SCRIPT>
          </BODY>
      </HTML>
      		cs

break와 continue

    • 반복문 실행 중 반복문을 빠져 나와야 하는 경우에 break문이 사용됩니다. 즉 계속 조건식을 만족하여 반복이 계속 진행되는 과장에서 임의로 반복을 종료시키고자 할 때 break문이 사용됩니다. 다음 소스는 break문의 사용 예를 토대로 그 기능을 설명하고 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      k=1
      while(true)
      {
          document.write("while 문입니다");
          if(k>=10) break;
          k=k+1;
      }
      document.write("빠져나옴");
      		cs
    • 한편, continue문은 break문과 달리 반복문을 탈출하는 것이 아니라, 반복문의 증감식으로 이동하여 계속 반복문을 실행합니다. 다음 소스는 continue문의 기능이 설명됩니다..


      1
      2
      3
      4
      5
      6
      7
      8
      k=1
      for(int i=1 ; i<=100 ; i++)
      {
          k=k+1;
          document.write("이것이 출력이 될까요?");
          if(k>10)continue;
          document.write("더이상 인쇄는 되지 않습니다.");
      }
      		cs









저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 자바스크립트(JavaScript) 객체  (0) 2015.08.24
HTML - 함수와 이벤트  (0) 2015.08.23
HTML - 조건문, 배열  (2) 2015.08.23
HTML - 변수, 상수, 자료형, 연산자  (0) 2015.08.23
HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
'Programming/HTML' Related Articles more