반응형
|
자바스크립트 구구단 출력하는 방법 |
자바스크립트로 구구단 출력하는 방법에 대해 알아보겠습니다. 구구단 계산 결과가 포함된 테이블은 자바스크립트에서 문자열로 만든 후 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 문으로 구성합니다. 그리고 아래에 제목에 해당하는 단의 계산값을 표현하기 위해 2중 for 문을 돌렸습니다. 행과 열을 만들려면 2중 for 문을 써야겠죠.
// 구구단 전체 표시
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>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법 (1) | 2023.09.22 |
|---|---|
| 자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법 (1) | 2023.09.22 |
| 자바스크립트 크롬 브라우저로 디버깅 하는 방법 (0) | 2022.08.17 |
| 자바스크립트(Javascript) 뒤로 가기 막는 방법 (1) | 2020.01.08 |
| 웹 개발을 위한 아톰 에디터 설치, 사용하는 방법 (0) | 2019.07.13 |
| 자바스크립트(Javascript) 수학, 난수 계산 Math 객체 4부, Max, Min 함수 (0) | 2019.06.15 |
| 자바스크립트(Javascript) 수학, 난수 계산에 쓰이는 Math 객체 3부, Random 함수 (0) | 2019.06.08 |
| 자바스크립트(Javascript) 수학과 난수 Math 객체 사용하기 2부, Ceil, Floor, Round (0) | 2019.06.02 |
