<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
반복문
- 주어진 조건에 따라 특정 횟수(또는 상황)만큼 반복 실행하는 문
- for 문과 while 문으로 구분됨
=> for문은 주로 반복 횟수가 정해져 있는 반복문으로 사용되며(밥을 10번 먹기!)
while문은 주로 반복 횟수가 정해져 있지 않은 반복문으로 사용됨(밥을 밥 그릇이 빌 때까지 먹기!)
- 반복문에서 반복 횟수를 결정하기 위한 요소 : 초기식, 조건식, 증감식
1) 초기식 : 반복 횟수를 제어하기 위한 변수(제어변수)를 선언하고 초기값을 설정(ex. var i = 1)
=> 반복문 진입 최초 시점에 한 번만 실행
2) 조건식 : 반복 여부를 결정하기 위한 조건 설정(if문과 동일하게 true/false 값 활용)
=> 조건식 판별 결과가 true 이면 반복을 수행하고, false 이면 반복문 종료
3) 증감식 : 반복 횟수를 제어하는 제어변수가 조건식을 만족(true)하는 동안
계속해서 제어변수 값을 변경하는 식을 설정(= 제어변수 값을 증가 또는 감소시킴)
1. for문
- 초기식, 조건식, 증감식의 위치가 고정되어 있어 초보자가 익히기 쉬움
- 초기식에서 설정한 제어변수 값을 조건식 판별 결과가 true 동안 증감식만큼 변화시키면서
중괄호{} 블럭 내의 반복 실행할 문장들을 반복해서 실행
< 기본 문법 >
for(초기식; 조건식; 증감식) {
// 조건식 판별 결과가 true 일 때 반복 실행할 문장들...
}
*/
// document.write() 를 사용하여 "Hello, World!" 문자 5번 출력하기
document.write("1 : Hello, World!<br>");
document.write("2 : Hello, World!<br>");
document.write("3 : Hello, World!<br>");
document.write("4 : Hello, World!<br>");
document.write("5 : Hello, World!<br>");
document.write("<hr>");
// 반복문(for)을 사용하여 "Hello, World!" 문자 5번 출력하기
// => 반복 횟수를 제어할 제어변수(i)를 선언하고 1로 초기화한 뒤(= 초기식)
// i값이 5보다 작거나 같을 동안(조건식)
// i값을 1씩 증가시키면서(증감식)
// "Hello, World!" 문자를 반복 출력(실행문)
for(var i = 1; i <= 5; i++) {
// 조건식(i <= 5)의 결과가 true 일 때 반복 실행할 문장을 기술하는 위치
document.write(i + " : Hello, World!<br>"); // 제어변수 i값을 확인하기 위해 함께 출력
}
// => 만약, 반복 횟수를 변경할 경우 조건식만 변경하면 반복 횟수가 변경됨(반복 코드 절약)
document.write("반복문 종료 후 i값 = " + i + "<br>");
/*
위의 for문 실행 과정에 대한 추적(= 디버깅 = Debugging)
-----------------------------------------------------------------------------------------
디버깅을 위한 구성 요소 파악
1) 초기식(var i = 1) : 변수 i을 선언하고 초기값을 1로 설정
2) 조건식(i <= 3) : 1회 반복할 때마다 조건 판별(true 일 때 반복문 실행, false 일 때 종료)
3) 실행문(document.write(i + " : Hello, World!<br>")) : 조건식이 true 일 동안 실행됨
4) 증감식(i++) : 실행문 실행 후 제어변수 값을 변경하기 위해 실행됨
(증감식 실행 후 )
=> 최종 실행 형태 : 1 -> 2 -> 3 -> 4 과정에서 2번이 true 일 동안 2 -> 3 -> 4 를 반복하고
2번의 조건식이 false 가 되면 반복문이 종료됨
-----------------------------------------------------------------------------------------
초기식(var i = 1) 조건식(i <= 5) 실행문(i + " : Hello, World!<br>" 출력) 증감식(i++)
-----------------------------------------------------------------------------------------
i = 1 true "1 : Hello, World!" 출력 i = 1 -> 2
i = 2 true "2 : Hello, World!" 출력 i = 2 -> 3
i = 3 true "3 : Hello, World!" 출력 i = 3 -> 4
i = 4 true "4 : Hello, World!" 출력 i = 4 -> 5
i = 5 true "5 : Hello, World!" 출력 i = 5 -> 6
i = 6 false 실행문을 실행하지 않고 반복문 종료됨
-----------------------------------------------------------------------------------------
*/
document.write("<hr>");
document.write("<table border='1'>");
document.write("<tr><th>번호</th><th>이름</th><th>나이</th></tr>");
for(var i = 1; i <= 100; i++) {
document.write("<tr>");
document.write("<td>" + i + "</td>");
document.write("<td>xxxxx</td>");
document.write("<td>00</td>");
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
Hello, Velog!