반복문 - for,while,do while.....

for 문

for문은 어떤 조건이 만족될 때까지 자바스크립트 코드 블록을 반복시킨다. 보통 반복될 횟수가 정해져 있을 때 for문을 사용한다. for문에 대한 문법은 다음과 같다:

for (초기값 설정</FONT> color="teal" 조건</FONT> color="teal" 증감식) {         문장;         ....... }

"초기값 설정"은 제일 처음 단 한 번만 실행된다. 보통 이 값은 반복 횟수를 결정짓는 카운터에 해당하는 변수를 초기화 시킬 때 사용한다. "조건" 부분에는 자바스크립트 문장을 반복시킬지 말지를 결정하는 조건식이 들어간다. "증감식"에는 카운터 변수가 얼마큼씩 증가하거나 감소할지를 적어준다. 예를 들어, 1부터 10까지의 제곱을 구하는 스크립트를 작성한다면 다음과 같다:

<script-x language="javascript-x"> <!--         for (i=1</FONT> color="teal" i<11</FONT> color="teal" i++) {                 document.write(i + "*" + i + " = " + i*i + "<br>");         } //--> </script-x>

---

while 문

while문도 어떤 조건이 만족될 때까지 자바스크립트 코드 블록을 반복시킨다. 보통 for문이 반복될 횟수를 짐작할 수 있을 때 사용한다면 while문은 반복될 횟수를 짐작하기 어려울 때 사용한다. while문에 대한 문법은 다음과 같다:

while (조건) {         문장;         ....... }

while문은 "조건"이 참(true)일 때만 자바스크립트 문장을 실행시킨다. 앞에서 살펴본 for문의 예제, 1부터 10까지의 제곱을 구하는 스크립트를 while문을 이용하여 작성한다면 다음과 같다:

<script-x language="javascript-x"> <!--         i=1;         while (i<11) {                 document.write(i + "*" + i + " = " + i*i + "<br>");                 i++;         } //--> </script-x>

---

do...while 문

do...while문도 while문과 동일하다. 먼저 do...while문의 문법을 먼저 살펴 보고 while문과의 차이점을 살펴 보자:

do {         문장;         ....... } while (조건)

do...while문과 while문의 차이점은 do...while문은 자바스크립트 문장을 무조건 한 번 수행하고 나서 반복 조건식을 조사하는 반면, while문은 조건식을 일단 조사한 후 자바스크립트 문장을 실행시킬지 말지를 결정한다는 것이다. 또한 while문은 모든 자바스크립트 버전에서 지원하지만 do...while문은 넷스케이프 및 익스플로러 4 이상에서 지원한다. 앞에서 살펴본 예제, 1부터 10까지의 제곱을 구하는 스크립트를 do...while문을 이용하여 작성한다면 다음과 같다:

<script-x language="javascript-x"> <!--         i=1;         do {                 document.write(i + "*" + i + " = " + i*i + "<br>");                 i++;         } while (i<11) //--> </script-x>

---

break/continue 문

break와 continue는 반복문의 흐름을 변경시킬 수 있는 문장이다. 이 두 문장은 반복문 안에서 사용된다. break와 continue의 차이점은 다음과 같다:

• break : 반복문 실행을 중단하고 반복문이 다 끝나고 나오는 문장으로 흐름을 이동시키는 역할을 한다.
• continue : 반복문이 실행되다가 continue를 만나면 continue 이후의 문장은 실행시키지 않고 반복문의 제일 처음으로 그 흐름을 이동시키는 역할을 한다.

다음 예는 앞에서 나온 예에서 i가 3일 때 continue를 실행시키고, i가 5일 때 break를 실행시키는 예이다:

<script-x language="javascript-x"> <!--         for (i=1</FONT> color="teal" i<11</FONT> color="teal" i++) {                 if (i == 3)                         continue; // i가 3일 때는 아래 문장들이 실행 안된다.                 if (i == 5)                         break; // i가 5일 때 반복문은 중단된다.                 document.write(i + "*" + i + " = " + i*i + "<br>");         }         alert("반복문이 끝났습니다!!"); //--> </script-x>

---

for...in 문

for...in 문을 이해하려면 객체에 대한 개념을 먼저 이해해야 한다. 이 장에서는 for...in 문을 어떻게 사용하는지 정도를 살펴 보고 나중에 객체에 대한 공부를 마친 후 다시 for...in 문을 살펴 보기 바란다.

for...in 문은 참조하는 객체 속에 있는 속성들의 갯수를 몰라도 모두 참조할 수 있도록 해준다. 다음은 사각형 객체를 하나 생성하여 생성자를 통해 속성들을 초기화한 후 for...in 문을 통해 rectanle 객체에 있는 모든 속성들을 출력하는 예이다:

<script-x language="javascript-x"> <!--         // rectangle은 생성자 역할을 한다         function rectangle(width, height, innercolor) {                 this.width = width;                 this.height = height;                 this.innercolor = innercolor;         }         myRectangle = new rectangle(50, 30, "red");                 for (var prop in myRectangle) {                 document.write(myRectangle[prop]+"<br>");         } //--> </script-x>

---

with 문

개체의 메소드나 속성을 반복해서 사용할 때 with 문을 사용하면 코드의 가독성을 높일 수 있다. 다음은 with문의 문법이다:

with (개체명) {         메소드명 또는 속성명; }

with 문을 사용한 간단한 예는 다음과 같다:

with (document) {     write("with 문 안에서 write를 사용하고 있습니다!");     bgColor="#efefef";     write("물론 이것은 아주 간단한 예입니다"); }