자바스크립트 구구단 출력하는 방법

자바스크립트

자바스크립트 구구단 출력하는 방법

 

자바스크립트로 구구단 출력하는 방법에 대해 알아보겠습니다. 구구단 계산 결과가 포함된 테이블은 자바스크립트에서 문자열로 만든 후 document.write 함수로 출력할 것입니다.

 

아래 그림처럼 소스는 크게 두 부분으로 나누어 집니다. 입력 창에 원하는 구구단을 입력하면 해당 구구단을 출력해주고 바로 아래 전체 구구단을 출력하는 형태입니다. 

 

웹 페이지를 시작하게 되면 구구단 중 몇 단을 알아 보고 싶은지 입력하라는 창이 뜹니다. 이 창은 자바스크립트의 prompt 함수를 이용하였습니다.

 

위에서 설명했듯이 크게 두 부분으로 나누어 집니다. 첫 번째 부분은 prompt 함수를 이용해서 사용자로부터 입력 값을 받는 것입니다. 몇 단을 출력하고 싶은지 묻는 것이죠. 이렇게 값을 받은 후 for 문을 이용해서 해당 단을 계산하고 결과값을 테이블의 각 셀에 집어 넣습니다. 그리고 마지막에 화면 출력을 위해 document.write 를 사용합니다.

dan = prompt("출력하고 싶은 구구단을 입력하세요.", "");

// 선택한 구구단 출력 
print = "<h2 align='center'>" + dan + " 단</h2>"
print += "<table border='1'><tr>";
print += "<td class='title'>" + dan + "단</td>";

for (j = 1; j <= 9; j++) {
	print += "<td class='point'>" + j + " X " + dan + " = " + j*dan + "</td>";
}
print = print + "</tr></table><br/><br/>";
document.write(print);

 

두 번째 부분인 구구단 전체를 표시하는 소스입니다. 테이블을 구성할 때 단명에 해당하는 제목 부분을 for 문으로 구성합니다. 그리고 아래에 제목에 해당하는 단의 계산값을 표현하기 위해 2for 문을 돌렸습니다. 행과 열을 만들려면 2for 문을 써야겠죠.

// 구구단 전체 표시 
total = "<h2 align='center'>전체구구단표</h2>";
total += "<table align='center' border='1'><tr>";

for (i = 1; i <= 9; i++) {
	total += "<td class='title'>" + i + "단</td>";
}
total += "</tr>";

for (i = 1; i <= 9; i++) {
	total += "<tr>";
	for (j = 1; j <= 9; j++) {
		total += "<td class='point'>" + i + " X " + j + " = " + i * j + "</td>";
	}
	total += "</tr>";
}
total += "</table>";
document.write(total);

 

아래는 구구단을 구현한 전체 소스입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>가운데 정렬</title>
<style type="text/css">
.point {
	color: #000000;
	background-color: #00FFFF;
	font-weight: bold;
	padding: 5px 5px 5px 5px;
}

.title {
	font-weight: bold;
	background-color: #CCCCCC;
	text-align:center;
	padding: 5px 5px 5px 5px;
}
</style>
<script type="text/javascript">
	var dan, print, total;

	dan = prompt("출력하고 싶은 구구단을 입력하세요.", "");
	
	// 선택한 구구단 출력 
	print = "<h2 align='center'>" + dan + " 단</h2>"
	print += "<table border='1'><tr>";
	print += "<td class='title'>" + dan + "단</td>";
	
	for (j = 1; j <= 9; j++) {
		print += "<td class='point'>" + j + " X " + dan + " = " + j*dan + "</td>";
	}
	print = print + "</tr></table><br/><br/>";
	document.write(print);
	
	// 구구단 전체 표시 
	total = "<h2 align='center'>전체구구단표</h2>";
	total += "<table align='center' border='1'><tr>";
	
	for (i = 1; i <= 9; i++) {
		total += "<td class='title'>" + i + "단</td>";
	}
	total += "</tr>";
	
	for (i = 1; i <= 9; i++) {
		total += "<tr>";
		for (j = 1; j <= 9; j++) {
			total += "<td class='point'>" + i + " X " + j + " = " + i * j + "</td>";
		}
		total += "</tr>";
	}
	total += "</table>";
	document.write(total);
</script>

</head>
<body>
</body>
</html>
Posted by 녹두장군

댓글을 달아 주세요