반복문_중첩 반복문 : 구구단, 테이블

database : 방대한 자료를 표 형식으로 관리
-행(row) : 
-열(column) : 
-셀 : 데이터 표시 최소 단위

표 형식으로 데이터를 가져오고 화면에 뿌릴 때 중요!!!
└ 이중반복문(★★★)

 

 

실습을 통한 반복문 연습

 

1-1. 구구단 출력

2*1 = 2	…	2*9 = 18
…		…
9*1=9	…	9*9=9

<script>
    for(let i=2; i <=9; i++) { //행(구구단 단수)
        for (let j=1; j<=9; j++) { //열
            document.write(i + ' * ' + j + ' = ' + (i*j)+ '&nbsp;&nbsp;');
        }
        document.write('<br>'); //줄 바꿈
    }
</script>

 

1-2. 구구단 출력

2*1 = 2		9*1=9
2*9 = 18		9*9=81

<script>
    for(let i=1; i <=9; i++) { //행
        for (let j=2; j<=9; j++) { //열
            document.write(j + ' * ' + i + ' = ' + (j*i)+ '&nbsp;&nbsp;');
        }
        document.write('<br>'); //줄 바꿈
    }
</script>

 

2. 구구단 테이블로 표현하기

<script>
    document.write('<table border="1">'); // 테이블 생성
        for(let i=2; i<=9; i++) {  // 이 조건이 만족할 동안 <tr> 생성
            document.write('<tr>');
            for (let j=1; j<=9; j++) {  // 이 조건이 만족할 동안 <td> 생성
                 document.write('<td>');
                 document.write(i+'*'+j+'='+(i*j)); // <td> 안의 값
                 document.write('</td>');           // </td> 
             }
             document.write('</tr>');  // </tr>
        }
        document.write('</table>'); // 테이블 닫음
</script>

 

3. 행에 따른 출력 문자 변동

★ ★★ ★★★ ★★★★ ★★★★★

★        ★★      ★★★    ★★★★  ★★★★★

-왼쪽 소스 코드

<script>
    for (let i=1; i<=5; i++) {
        for (let j=1; j <= i; j++) {
            document.write('★');
        }
        document.write('<br>');
    }
</script>

-오른쪽 소스 코드

<script>
    for (let i=1; i<=5; i++) {
        for (let j=4; j-i>=0; j--) {  // 공백 출력
             document.write('&nbsp &nbsp');
        }
        for (let k=1; k <= i; k++) {  // 별 문자 출력
            document.write('★');
        }
        document.write('<br>');  // 줄바꿈
    }
</script>

 

 

소스 코드 파일

0. 구구단 출력

0106_06_ex_table.html

0.00MB

0. 중첩 반복문

0106_05_ex.html

0.00MB

0. 별 

0105_07_ex.html

0.00MB