구구단 테이블을 만들어보자~
<!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>
'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - 계산기 만들기 (0) | 2023.03.25 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - value값 가져오기 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - 대화 상자(dialog box) (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - 함수(function) (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - var, let, const 차이 (1) | 2023.03.24 |
