JavaScript 반복문
이 번 페이지 JavaScript 소개 부분에서 JavaScript로 어떤 것들을 할 수 있는가에 대한 설명으로 "단순히 반복되는 과정을 바로 이 넘... JavaScript에게 시키므로해서 단순 작업에서 해방 될 수 있습니다." 라고 한 부분에 대한 페이지가 되겠습니다. 물론 아무 것이나 모두 반복 시킬 수 있는 것은 아니고, 규칙을 정할 수만 있다면 얼마든지 반복시켜서 대신 작업을 하게 할 수 있다는거져.
페이지 목차
For 반복문
For 문은 if 조건문과 함께 사실 상 가장 많이 사용되는 반복문이므로 잘 알아 둘 필요가 있습니다.
사용법
for (초기값; 조건; 증감식){ //초기값, 조건 증감식 사이를 semi-colon으로 구분해 줍니다.
실행 내용
}
사용예)
for (i = 1; i <= 6; i++){ // i 를 1 에서 시작해서 6보다 작거나 같을 때 까지 1씩 증가시켜라.
실행 내용 // 모두 6번에 걸쳐 내용이 실행 됨.
}
for 반복문을 이용하여 H1 에서 H6 까지 출력 하기 <html>
<head>
<title></title>
<script type="text/javascript">
<!--
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">제목 " + i + " 입니다.")
document.write("</h" + i + ">")
}
// -->
</script>
</head>
<body>
</body>
</html>
i 의 초기값이 1(i = 1;) 이므로 첫 번째 루프에 1이 대입되고 i 가 6 이 될 때까지 계속 증가(i++)해서 아래와 같이 HTML Code를 작성한 것과 같습니다.
<h1>제목 1 입니다.</h1>
<h2>제목 2 입니다.</h2>
.
.
<h6>제목 6 입니다.</h6>
주의 사항for 반복문 사용시 주의해야 할 점이 있습니다. 그건 위의 소스 중에서 i <= 6 이라는 조건인데, 첫 번째 만약 조건을 i < 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에 엄청 무리를 주게 되니까
조건을 줄 때 주의해야 하겠습니다. 위의 소스의 조건을 바꾸어서 실행해 보세요.
While 반복문
while 반복문은 { } 속의 내용을 조건이 만족되는 동안(while) 반복 시키게 되며 사용법은 아래와 같습니다.
사용법
while (조건) {
실행 내용
}
while 반복문을 이용하여 H1 에서 H6 까지 출력 하기 <html>
<head>
<title></title>
<script type="text/javascript">
<!--
var i = 1 //변수 i 와 초기값 1을 지정합니다.
while ( i <= 6) //조건식을 지정합니다.
{
document.write("<h" + i + ">제목 " + i + " 입니다.")
document.write("</h" + i + ">")
i++ //증감식을 설정합니다.
}
// -->
</script>
</head>
<body>
</body>
</html>
Do While 반복문
Do While 반복문은 { } 속의 내용을 일단 1번 실행(Do)하고 조건이 만족되는 동안(while) 반복 시키게 되며 사용법은 아래와 같습니다.
사용법
do {
실행 내용
} while (조건)
Do While 반복문을 이용하여 H1 에서 H6 까지 출력 하기 <html>
<head>
<title></title>
<script type="text/javascript">
<!--
var i = 1 //변수 i 와 초기값 1을 지정합니다.
do {
document.write("<h" + i + ">제목 " + i + " 입니다.")
document.write("</h" + i + ">")
i++ //증감식을 설정합니다.
}
while ( i <= 6) //조건식을 지정합니다.
// -->
</script>
</head>
<body>
</body>
</html>
Table 자동 제조기
Table 자동 제조기는 무엇에 쓰는 물건이냐구요? 지금 부터 무엇을 하려고 하느냐 하면 JavaScript 소개에서 단순 작업으로 부터의 해방 이라고 한 말에 대한 예제가 되겠습니다. 어떻게 할 거냐 하면 코드를 실행하고 단추를 누르면 원하는 갯수 만큼의 열와 행이 자동으로 만들어지게 하려고 합니다. for 반복문을 이용해서 작업들어가기 전에 우선 Table의 특성에 대해 좀 살펴 봐야되겠습니다. 2행 3열의 Table의 소스 코드를 보도록 하져.
2행 3열 Table
<table border="1" width="100%">
<tr align="center">
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr align="center">
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
이 코드를 보면 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 자동 제조기
<html>
<head>
<title>for 반복문을 이용한 Table 생성기</title>
<script type="text/javascript">
<!--
//makeTable(col, row, border) 이라는 이름으로 대입 변수가 3개인 Function 만들기
function makeTable(row, col, border){
document.write("<table border=" + border + " align=center style=font-size:11px;>n")
for (var i=1; i <= row; i++){ //tr 만드는 for 반복문 시작
document.write("<tr align="center">n")//tr 시작
for (var j=1; j <= col; j++){ //td 만드는 for 반복문 시작
document.write("<td width="120">"+ i +"행 "+ j +"열</td>n")// td 만들기 시작
} //td 만드는 for 반복문 끝
document.write("</tr>nn")
} //tr 만드는 for 반복문 끝
document.write("</table>n") //Table 끝
} //Function 끝
// -->
</script>
</head>
<body>
<!-- 아래의 makeTable(50, 5, 1)로 row에는 50이, col에는 5가 각각 대입된다. -->
<button type="button" style="width:100; height:25; background-color:navy;
color:white;" onclick="makeTable(50, 5, 1)">누르시져!</button>
</body>
</html>
