JavaScript 제어문을 활용한 동적 테이블 생성
JavaScript에서는 반복문을 사용하여 HTML 구조를 동적으로 생성할 수 있습니다. 특히, for문을 사용하여 테이블 형태의 데이터를 출력하거나, 구구단 및 별찍기와 같은 패턴을 손쉽게 구현할 수 있습니다.
1. 기본적인 for문과 테이블 셀 생성 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 숫자를 1부터 9까지 콘솔에 출력
for(let i = 1; i <= 9; i++) {
console.log(i);
}
</script>
<!-- 디자인을 위한 동적 테이블 출력 -->
<table border="1" cellspacing="0">
<tr>
<!-- 동적으로 테이블 셀을 생성하여 '열'을 출력 -->
<script type="text/javascript">
for (let i = 1; i <= 9; i++) {
document.write('<td>' + i + '열</td>');
}
</script>
</tr>
</table>
</body>
</html>- 설명: 위 예제에서는
for문을 사용하여 1부터 9까지 열 이름을 생성하고, 이를 HTML 테이블 셀에 출력합니다.
2. 구구단 출력 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 구구단 출력용 테이블 생성
document.write('<table border="1" cellspacing="0" width="800">');
for(let dan = 1; dan <= 9; dan++) {
document.write('<tr>');
for(let col = 1; col <= 9; col++) {
document.write('<td>' + dan + ' x ' + col + ' = ' + (dan * col) + '</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>- 설명: 구구단의 각 행과 열을 반복문으로 생성하여 테이블 형식으로 출력합니다.
dan은 단을 나타내고,col은 각 단에 곱해질 수를 나타냅니다.
3. 변수를 활용한 구구단 출력 최적화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 동적으로 구구단 테이블 생성
let html = '';
html += '<table border="1" cellspacing="0" width="800">';
for(let dan = 0; dan <= 9; dan++) {
html += '<tr>';
for(let col = 0; col <= 9; col++) {
if(dan === 0 && col === 0) {
html += '<td></td>';
} else if(dan === 0) {
html += '<td>X ' + col + '</td>';
} else if(col === 0) {
html += '<td>' + dan + '단</td>';
} else {
html += '<td>' + dan + ' x ' + col + ' = ' + (dan * col) + '</td>';
}
}
html += '</tr>';
}
html += '</table>';
document.write(html);
</script>
</body>
</html>- 설명: 위 코드는
html변수를 사용하여 구구단을 HTML 형식으로 미리 생성한 후 한 번에 출력합니다. 첫 행과 첫 열에 구구단 단 및 곱해질 수가 출력되도록 설정했습니다.
4. 별찍기 패턴 출력 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 별찍기 테이블 생성
let html = '';
html += '<table border="1" cellspacing="0" width="300">';
for(let row = 1; row <= 10; row++) {
html += '<tr>';
for(let col = 1; col <= 10; col++) {
if(col <= row) {
html += '<td>*</td>'; // 현재 행의 숫자 이하의 열까지 별을 찍음
} else {
html += '<td></td>'; // 그 외의 열은 빈 셀
}
}
html += '</tr>';
}
html += '</table>';
document.write(html);
</script>
</body>
</html>- 설명: 이 예제는
for문을 사용하여 왼쪽 아래에서부터 대각선으로 증가하는 별 모양을 출력합니다.col이row이하일 경우에만 별을 찍습니다.
정리
JavaScript의 for문을 활용하면 다양한 패턴의 HTML 요소를 동적으로 생성할 수 있습니다. 이러한 방식은 반복적인 UI 생성이나 패턴 출력에서 효율적입니다.
추가: 위와 같이 자주 사용하는 코드 블록을 모듈화하거나 라이브러리로 정의해두면 반복적인 사용을 쉽게 관리할 수 있습니다.
