Front/javascript

[Javascript] 웹 페이지의 근육 심기 - 구구단 테이블 만들기

해니01_15 2023. 3. 24. 02:04

구구단 테이블을 만들어보자~ 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		document.write("<table border = '1'> ");
        // 테이블 생성 하나 해주고. 
        // 웹페이지에 보여지게 프린트 할꺼니까 이렇게 document.write 라고 쓴다
		document.write("<tr>");
        //테이블의 가로줄! 프린트 
        
		for (i = 2; i < 10; i++) {
			document.write("<td>");
			document.write(i + "단");
			document.write("</td>");
		}
        //몇단 인지 for 문 돌리면서 2단부터 차례대로 세로줄 쳐가면서 넣어준다
        
		document.write("</tr>");
        // 이제 그만 닫아~

 

여기까지 쓰면 for 문으로 돌린 단만 나온다. 

 

 

 

 

이제는 각 단 아래에 구구단을 출력해주는 코드이다. 

 

		document.write("<tr>");
        //다시 가로로 한줄 열어주고 
        
		for (dan = 2; dan < 10; dan++) {
        //2단 부터 for 문 돌껀데 돌 때 마다 
			document.write("<td>");
            //세로줄 한칸씩 열어줘 
			for (i = 1; i < 10; i++) {
				document.write(dan + " * " + i + " = " + dan * i + "<br/>")
			} 
            //근데 그 세로줄 안에는 이제 구구단이 들어가야 겠지? 
            //그러니까 for 문으로 구구단을 출력해! 
            //<br/> 쓴 이유는 2*1 = 2 하고 엔터 느낌  
            
			document.write("</td>");
            //한단 끝났으면 세로줄 닫아줘~~ 
		}
		document.write("</tr>");
        //구구단이 for 문을 다 돌았으면 가로줄도 이제 닫아줘~ 
		document.write("</table>")
        //테이블도 닫아버려~ 
        
</script>
</body>
</html>