조회 수 16534 추천 수 0 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

자바스크립트의 반복문은 3종류가 있다.

 

for문, while문, do-while문이다. 문법적인 문제는 넘어가고 여기에서는 반복문의 실행과정을 알아보고 이를 응용하는 방법을 알아보자.

 

아래의 기본적인 반복문을 보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
for(var i=0 ; i<5 ; i++)
{
    document.write(i);

// 줄바꿈
document.write("<BR>");

for(var i=0 ; i<5 ; i++)
{
    document.write('+');
}
</script>

 

위의 코드에서 css에 굴림체를 사용한 이유는 글자의 크기를 같게하여 +기호나 숫자 모두 같은 크기로 표현하기 위해서다.

반복횟수는 10회로 제한하였다.

 

실행결과를 보자.

 

jfor-01.png

 

위와 같이 10칸(0~9)에 +가 추가되었다.

 

이제 홀수번째칸에만 +를 짝수번째칸에는 -를 출력해보자.

 

홀수번째칸은 눈으로 보기에는 첫째칸이지만 위의 코드에서는 0이 홀수번의 첫 시작이다. 즉, 우리가 +를 출력해야 할 번호는 아래와 같다.

 

0, 2, 4, 6, 8 -> + 출력

1, 3, 5, 7, 9 -> - 출력

 

많은 프로그래머들이 실제 반복의 시작을 0으로 잡고 사용하고 있다. 이런이유는 반복하는 횟수가 코드상에 명확히 보이기 때문이다. 

 

for ( var i = 0 ; i < 10 ;  i++ )  ===> 10 회 반복을 코드상에서 바로 판독한다.

 

물론 1부터 시작하여도 된다. 그런 경우 아래와 같이 표기하며 된다.

 

for ( var i = 1 ; i < 11 ; i++ )   ===> 11로 표기하였지만 시작값이 1이므로 10회반복을 의미.

 

어떻게 표현할 지는 작성자의 마음이다. 그러나 많은 프로그래머들이 0을 시작점으로 사용하고 있다.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
    document.write('<BR>');

for(var i=0 ; i<10 ; i++)
{
    if( i % 2 == 0) {
        document.write('+');
    } else {
        document.write('-');
    }
}
</script>

 

실행결과는 아래와 같다.

 

jfor-02.png

 

이제 중첩 반복문을 작성해보자.

+대신 -를 출력해 보겠다.

 

중첩 반복문은 10 X 10회씩 반복시키겠다.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        document.write('-');
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

실행결과는 아래와 같다.

 

jfor-04.png

 

 

처음의 수평 0~9까지는 내부반복문(var j)의 수행결과이고 행으로 표시된 0~9는 외부반복문(var i)의 실행결과이다.

 

이제 대각선(10시에서 5시방향)으로 *를 찍어보자.  

 

  0 1 2 3 4 5 6 7 8 9
0 *                  
1   *                
2     *              
3       *            
4         *          
5           *        
6             *      
7               *    
8                 *  
9                   *

 

위와 같이 표시되어야한다. 즉, i == j 인 경우이다. 이를 프로그램으로 바꾸어보자.

 

    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        if (i==j) {
            document.write('*');
        } else {
            document.write('-');
        }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

if의 조건문에 i==j를 주었다.

 

결과는 아래와 같다.

 

jfor-05.png

 

이번에 2시에서 7시방향으로 대각선 *를 출력해보자.

 

  0 1 2 3 4 5 6 7 8 9
0                   *
1                 *  
2               *    
3             *      
4           *        
5         *          
6       *            
7     *              
8   *                
9 *                  

 

위와 같이 출력되어야 한다. 규칙을 발견해보자.

i = 9 일때 j = 0

i = 8 일때 j = 1

i = 7 일때 j = 2

......

i = 0 일때 j = 9

 

즉 i+j = 9 일때 *를 출력하면 된다. 이제 프로그램으로 작성해보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
       if (i+j==9) {
           document.write('*');
       } else {
           document.write('-');
       }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

출력결과를 확인해보자.

 

jfor-06.png

 

정상적으로 출력되었다.

 

그러면 X모양으로 *를 출력해보자.이 조건은 위의 예로 알고있다.

i == j 일때와 i+j == 9 때이다. 프로그램을 작성해보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        if (i==j || i+j==9) {
            document.write('*');
        } else {
            document.write('-');
        }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

실행결과는 아래와 같다.

 

jfor-07.png

 

정상적으로 출력되었다.

 

이번엔 위에 배운것들을 응용하여 아래와 같이 사각형 모양의 *를 그려보자.

 

  0 1 2 3 4 5 6 7 8 9
0 * * * * * * * * * *
1 *                 *
2 *                 *
3 *                 *
4 *                 *
5 *                 *
6 *                 *
7 *                 *
8 *                 *
9 * * * * * * * * * *

 

우선 맨위의 *는 j=0 일때이다.

첫 수직은 i=0 일때이다.

끝 수직은 i=9 일때이다.

마지막줄은 j=9 일때이다.

 

출력조건은 모두 나왔다.

 

j == 0 || i == 0 || i ==9 || j == 9

 

위의 조건으로 프로그래밍을 해보자.

 

<style>
* {
    font-family: "굴림체";
}
</style>

<script>
document.write('.');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
}
//줄바꿈
document.write('<BR>');
for(var i=0 ; i<10 ; i++)
{
    document.write(i);
    for(j=0 ; j<10 ; j++)
    {
        if (j == 0 || i == 0 || i == 9 || j == 9) {
            document.write('*');
        } else {
            document.write('-');
        }
    }
    document.write('<br>'); // 줄바꿈
}
</script>

 

결과는 아래와 같다.

 

jfor-08.png

 

정상적으로 출력되었다.

 

우리는 복잡해 보이는 과정이라도 차분히 생각하여 일정한 규칙을 발견하고 응용하면 보다 나은 코드를 작성할 수 있다.

이러한 과정은 한번에 딱 되는 것이 아니다. 

차분히 생각하는 과정과 연습이 필요하다.

한번에 안된다고 낙심할 필요가 전혀 없다.

?
  • ?
    KKMS 2016.02.25 20:27

    <style>
    * {
        font-family: "굴림체";
    }
    </style>
    <script>
    var count = parseInt(prompt("홀수입력"));
    var baseLine = (count-1) / 2 ;
    document.write('.');
    for(var i=0 ; i<count ; i++)
    {
        document.write(i);
    }
    //줄바꿈
    document.write('<br>');
    for(var i=0 ; i<count ; i++)
    {
        document.write(i);
        for(j=0 ; j<count ; j++)
        {
           if ( 
                   j == baseLine ||
                   i == baseLine ||
                   ( i+j >= baseLine && i < baseLine && j < baseLine ) || // 4사분면
                   ( i-j <= baseLine && i > baseLine && j < baseLine ) || // 3사분면
                   ( i+j <= baseLine * 3 && i > baseLine && j > baseLine ) || // 2사분면
                   ( j-i <= baseLine && i < baseLine && j > baseLine ) // 1사분면
              ) {
               document.write('*');
           } else {
               document.write('-');
           }
        }
        document.write('<br>'); // 줄바꿈
    }
    </script>

  • ?
    KKMS 2016.05.20 12:30

    <script>
    var loopCount = parseInt(prompt('홀수'));
    var baseLine = parseInt(loopCount/2);
    var sideEffect=0;
    var decSideEffect=0;

    for(var i=0; loopCount>i; i++) {

        for(var j=0; loopCount>j; j++){
            if(
                i==baseLine || 
                j==baseLine || 
                j>=baseLine-sideEffect && j<baseLine || 
                j<=baseLine+sideEffect && j>baseLine
                ){
                document.write('*');
            } else {
                document.write('-');
            }
        }

            if(sideEffect >= baseLine){
                sideEffect--;
                decSideEffect=1;
            } else {
                if(decSideEffect ==1){
                    sideEffect--;
                } else {
                    sideEffect++;
                }
            }
        document.write('<br>');
    }
    </script>


List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83949
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24265
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
» HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3