작성자

freewebkorea

카테고리

비밀번호

제목

<H2>JavaScript 반복문</H2>
이 번 페이지 JavaScript 소개 부분에서 JavaScript로 어떤 것들을 할 수 있는가에 대한 설명으로 "단순히 반복되는 과정을 바로 이 넘... JavaScript에게 시키므로해서 단순 작업에서 해방 될 수 있습니다." 라고 한 부분에 대한 페이지가 되겠습니다. 물론 아무 것이나 모두 반복 시킬 수 있는 것은 아니고, 규칙을 정할 수만 있다면 얼마든지 반복시켜서 대신 작업을 하게 할 수 있다는거져. 페이지 목차 
<UL class=lineHeight>
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_looping.asp#for_statement">For Loop</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_looping.asp#while_statement">While Loop</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_looping.asp#do_while_statement">Do While Loop</A> 
<LI class=indexColor><A href="http://www.cadvance.org/doc/java/tutorial/js_looping.asp#table_maker">Table 자동 제조기</A> </LI></UL><A name=for_statement></A>
<HR class=grayHr>
 For 반복문 
For 문은 if 조건문과 함께 사실 상 가장 많이 사용되는 반복문이므로 잘 알아 둘 필요가 있습니다.사용법 
<DIV class=input>for (초기값; 조건; 증감식){ //초기값, 조건 증감식 사이를 semi-colon으로 구분해 줍니다. 실행 내용 } 사용예) for (i = 1; i &lt;= 6; i++){ // i 를 1 에서 시작해서 6보다 작거나 같을 때 까지 1씩 증가시켜라. 실행 내용 // 모두 6번에 걸쳐 내용이 실행 됨. } </DIV>for 반복문을 이용하여 H1 에서 H6 까지 출력 하기 <PRE class=input id=pre_1>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 for (i = 1; i &lt;= 6; i++)
 {
 document.write("&lt;h" + i + "&gt;제목 " + i + " 입니다.")
 document.write("&lt;/h" + i + "&gt;")
 } 
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(pre_1);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
i 의 초기값이 1(i = 1;) 이므로 첫 번째 루프에 1이 대입되고 i 가 6 이 될 때까지 계속 증가(i++)해서 아래와 같이 HTML Code를 작성한 것과 같습니다. &lt;h1&gt;제목 1 입니다.&lt;/h1&gt; &lt;h2&gt;제목 2 입니다.&lt;/h2&gt; . . &lt;h6&gt;제목 6 입니다.&lt;/h6&gt; 
<DIV class=note><IMG height=11 alt="" src="http://www.cadvance.org/images/icon/ico_note.gif" width=11> 주의 사항 for 반복문 사용시 주의해야 할 점이 있습니다. 그건 위의 소스 중에서 i &lt;= 6 이라는 조건인데, 첫 번째 만약 조건을 i &lt; 6 과 같이 준다면 for Loop를 다섯 번 실행하게 됩니다. i 가 6이 되면 조건을 만족 시키지 못하게 될테니까요. 그런데 문제는 i = 6으로 줄 때 발생하져. 이 조건은 i = 6 일 때만 만족하므로 1씩 증가해서 5가 될 때 까지는 내용을 한 번도 실행하지 않다가 i 가 6이 되는 순간 실행하게 되는데, 이 순간 조건을 만족시켰으므로 더 이상 1씩 증가하지 않으므로 i 의 값은 계속 6으로 남게되져. 그래서 7 번째 Loop 를 돌아서 조건이 만족되는지 확인하면, i 값이 여전히 6 이여서 조건을 만족시키므로 내용을 실행하고 다시 Loop를 돌아 8번째, 9번째..... 해서 무한대로 내용을 실행하게되져... 이른 바 무한 Loop라는 거에 빠지게 됩니다. 그리고 이럴 때 IE 사용자들은 다음과 같은 경고창을 보게 됩니다. "이 페이지에 있는 스크립트로 인해..... 스크립트의 실행을 멈추시겠습니까?" 이 때 예를 선택하면 스크립트가 멈추고, 아니요를 하면 얼마 후 같은 경고창이 다시 나오게 됩니다. CPU에 엄청 무리를 주게 되니까 조건을 줄 때 주의해야 하겠습니다. 위의 소스의 조건을 바꾸어서 실행해 보세요. </DIV> <A name=while_statement></A>
<HR class=grayHr>
 While 반복문 
while 반복문은 { } 속의 내용을 조건이 만족되는 동안(while) 반복 시키게 되며 사용법은 아래와 같습니다.사용법 
<DIV class=input>while (조건) { 실행 내용 } </DIV>while 반복문을 이용하여 H1 에서 H6 까지 출력 하기 <PRE class=input id=pre_2>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var i = 1 //변수 i 와 초기값 1을 지정합니다. 
 while ( i &lt;= 6) //조건식을 지정합니다.
 {
 document.write("&lt;h" + i + "&gt;제목 " + i + " 입니다.")
 document.write("&lt;/h" + i + "&gt;")
 i++ //증감식을 설정합니다.
 } 
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(pre_2);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> <A name=do_while_statement></A>
<HR class=grayHr>
 Do While 반복문 
Do While 반복문은 { } 속의 내용을 일단 1번 실행(Do)하고 조건이 만족되는 동안(while) 반복 시키게 되며 사용법은 아래와 같습니다.사용법 
<DIV class=input>do { 실행 내용 } while (조건) </DIV>Do While 반복문을 이용하여 H1 에서 H6 까지 출력 하기 <PRE class=input id=pre_3>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var i = 1 //변수 i 와 초기값 1을 지정합니다. 
 do {
 document.write("&lt;h" + i + "&gt;제목 " + i + " 입니다.")
 document.write("&lt;/h" + i + "&gt;")
 i++ //증감식을 설정합니다.
 } 
 while ( i &lt;= 6) //조건식을 지정합니다.
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(pre_3);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> <A name=table_maker></A>
<HR class=grayHr>
 Table 자동 제조기 
Table 자동 제조기는 무엇에 쓰는 물건이냐구요? 지금 부터 무엇을 하려고 하느냐 하면 JavaScript 소개에서 단순 작업으로 부터의 해방 이라고 한 말에 대한 예제가 되겠습니다. 어떻게 할 거냐 하면 코드를 실행하고 단추를 누르면 원하는 갯수 만큼의 열와 행이 자동으로 만들어지게 하려고 합니다. for 반복문을 이용해서 작업들어가기 전에 우선 Table의 특성에 대해 좀 살펴 봐야되겠습니다. 2행 3열의 Table의 소스 코드를 보도록 하져.2행 3열 Table <PRE class=input>&lt;table border="1" width="100%"&gt;
 &lt;tr align="center"&gt;
 &lt;td&gt;1행 1열&lt;/td&gt;
 &lt;td&gt;1행 2열&lt;/td&gt;
 &lt;td&gt;1행 3열&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr align="center"&gt;
 &lt;td&gt;2행 1열&lt;/td&gt;
 &lt;td&gt;2행 2열&lt;/td&gt;
 &lt;td&gt;2행 3열&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</PRE>
이 코드를 보면 Table Tag 속에서 tr 이 두번 반복되고, 2개의 tr Tag 속에서는 td가 각각 3번 반복되다는 사실을 알 수 있습니다. 흠~ 반복이라... 반복... 바로 이 페이지가 반복문을 배우는 페이지 아니겠습니까? 그런데 문제는 tr과 td가 반복되는 과정이 다르다는데 있져. 그래서 이 경우에는 tr을 반복시키는 for Loop와 td를 반복시키는 for Loop, 이렇게 2개의 for 반복문이 필요하게 되져. 50행 5열의 Table만드는 HTML 코드는 아래와 같습니다. 대입 변수col 과 row border 의 갯수를 조절하면 원하는 만큼의 Cell을 만들 수 있습니다. 실행창을 소스보기 한 후 필요한 부분에 복사해서 사용하시져.Table 자동 제조기 <PRE class=input id=pre_4>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;for 반복문을 이용한 Table 생성기&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 //makeTable(col, row, border) 이라는 이름으로 대입 변수가 3개인 Function 만들기
 function makeTable(row, col, border){ 
 document.write("&lt;table border=" + border + " align=center style=font-size:11px;&gt;n")
 for (var i=1; i &lt;= row; i++){ //tr 만드는 for 반복문 시작
 document.write("&lt;tr align="center"&gt;n")//tr 시작
 for (var j=1; j &lt;= col; j++){ //td 만드는 for 반복문 시작
 document.write("&lt;td width="120"&gt;"+ i +"행 "+ j +"열&lt;/td&gt;n")// td 만들기 시작
 } //td 만드는 for 반복문 끝
 document.write("&lt;/tr&gt;nn")
 } //tr 만드는 for 반복문 끝
 document.write("&lt;/table&gt;n") //Table 끝
} //Function 끝
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;!-- 아래의 makeTable(50, 5, 1)로 row에는 50이, col에는 5가 각각 대입된다. --&gt;
 &lt;button type="button" style="width:100; height:25; background-color:navy;
 color:white;" onclick="makeTable(50, 5, 1)"&gt;누르시져!&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(pre_4);open_window('../../include/code_executor.asp');"><IMG src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A> 
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)