EverGiver

반복문 본문

Front-End (웹)/자바스크립트

반복문

친절한개발초보자 2022. 1. 23. 13:23
728x90
for 문 사용하기

 

for(초깃값; 조건; 증가식) {
	실행할 명령
}

- 초기값 : 카운터 변수를 초기화한다. 초기값은 0이나 1부터 시작한다.
- 조건 : 명령을 반복하기 위해 조건을 체크한다. 이 조건을 만족해야 그다음에 오는 명령을 실행할 수 있다.

- 증가식 : 명령을 반복한 후 실행한다. 보통 카운터 변수를 1 증가시키는 용도로 사용한다.
- for 문은 초깃값 → 조건 → 명령 → 증가식 순서로 진행된다.

 

중첩된 for 문 사용하기

 

for 문 안에 다른 for 문을 넣어 사용하는 경우 중첩된 for 문이라고 한다.

<script>
    var i, j;

    for (i = 1; i <= 9; i++) {
        document.write("<h3>" + i + "단</h3>");
        for (j = 1; j <= 9; j++) {
            document.write(i +" X " + j + " = " + i*j + "<br>");
        }
    }
</script>

 

cf) document.write() 처리하기
    1. 한 번에 처리
       - 띄어 쓰면 안 된다.

document.write('<li><img src="img/new2.jpg"height="100"><p>제목 : 설날 사진1</p><span>출처 : 구글이미지</span></li>')

    2. 하나씩 처리

document.write('<li>')
    document.write('<img src="img/new1.jpg" height="100">')
    document.write('<p>제목 : 설날 사진 1</p>')
    document.write('<span>출처 : 구글이미지</span>')
document.write('</li>')

 

    3. 대입시킨다.

var new_img = '';

new_img += '<li>';
    new_img += '<img src="img/new1.jpg" height="100">';
    new_img += '<p>제목 : 설날 사진 1</p>';
    new_img += '<span>출처 : 구글이미지</span>';
new_img += '</li>';

document.write(new_img);

 

 whille 문과 do~while 문 사용하기

 

  • while 문
    - 조건이 true인 동안 명령을 반복한다.
    - 조건이 false라면 명령은 한 번도 실행하지 않을 수 있다.
    while(조건){
    	실행할 명령
    }​
  • do~while 문
    - while 문과 달리 조건이 맨 뒤에 붙는다.
    - do 문은 일단 명령을 한 번 실행한 후 while 문에서 조건을 체크한다.
    - 조건이 false라 하더라도 일단 명령은 최소한 한 번 실행된다.
    do{
    	실행할 명령
    } while(조건)
break 문과 continue 문 사용하기

 

반복문은 지정한 횟수만큼 명령을 반복할 때 사용한다. 하지만 특정 조건에서 반복문을 멈추어야 하거나, 반복문 중간에서 앞으로 되돌아가야 할 경우가 있다. 이럴 때 break 문과 continue 문이 필요하다.

  • 멈추는 break 문
    - 반복문에서 조건의 역할은 명령이 조건에 맞는지 체크하고 명령을 반복한다. 또한 조건 안에는 종료 조건도 포함되어 있다.
    - 종료 조건이 되기 전에 반복문을 빠져나와야 할 경우, break 문을 사용한다.
    - break 문은 단독으로 사용할 수도 있고 반복문을 끝낼 조건과 함께 사용할 수도 있다.
    break​
  • 건너뛰는 continue 문
    - 주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뛴다. 그리고 반복문의 맨 앞으로 되돌아가 다음 과정으로 넘어가도록 한다.
      (반복 과정을 한 차례 건너뛰게 한다.)
    continue​
728x90

'Front-End (웹) > 자바스크립트' 카테고리의 다른 글

함수  (0) 2022.01.29
배열  (0) 2022.01.25
조건문  (0) 2022.01.20
연산자  (0) 2022.01.16
자료형  (0) 2022.01.16
Comments