📂 JAVASCRIPT/Number & Math
[ 자바스크립트 ] 구구단표 만들기 🕔 2015. 5. 6.
최종 수정일 : 2015. 10. 18.
작성한 방법은 다음과 같다.
- 기본 함수 작성하기
- 2단부터 9단까지 구구단표 만들기
- 입력된 값으로, 한단짜리 구구단표 만들기
- 입력된 값으로, 여러 단짜리 구구단표 만들기
( 두 개의 프롬프트 창을 띄워서, 방문자가 원하는 만큼 보여주기 )
만약,
표시되는 결과에서 <br /> 태그가 글자 그대로 나타난다면,
아래 내용에서 "<br />" 부분을, "\n" 으로 바꾸면 된다.
마찬가지로,
" " → " "
기본 함수 작성하기
아래 함수를 기본으로 해서, 약간씩 변형한 것이다.
// "number"의 값으로, 한단짜리 만들기
function timesTable ( number ) {
var text = "";
for ( var times = 1; times < 10; times++ ) {
var answer = number * times;
text += number + " x " + times + " = " + answer + "<br />";
}
return text;
}
// 2단부터 9단까지 만들기
function timesTables () {
var text = "";
for ( var number = 2; number < 10; number++ ) {
for ( var times = 1; times < 10; times++ ) {
var answer = number * times;
text += number + " x " + times + " = " + answer + "<br />";
}
text += "<br />";
}
return text;
}
2단부터 9단까지 구구단표 만들기
<span> 태그로 만들기
<!DOCTYPE html>
<html>
<head>
<title> 구구단표 </title>
<style type="text/css">
div.timesTables span { display: inline-block; margin: 3px; padding: 3px 8px; border: 1px solid gray; }
</style>
<script type="text/javascript">
// <span> 태그로 만들기
function timesTables_1 (){
var tag = "";
var startTag = "<span>";
var endTag = "</span>";
for ( var number = 2; number < 10; number++ ) {
tag += startTag;
for ( var times = 1; times < 10; times++ ) {
var answer = number * times;
if ( answer < 10 ) answer = " " + answer;
tag += number + " x " + times + " = " + answer + "<br />";
}
tag += endTag;
}
tag += "<br />"; // ← 마지막에 <br /> 태그가 필요없다면, 삭제해도 됨.
return tag;
}
</script>
</head>
<body>
<p>함수가 실행된 모습 </p>
<div class="timesTables">
<script type="text/javascript">
// 페이지가 열릴 때, 이 위치에 바로 집어넣기
var text = timesTables_1();
document.write( text );
</script>
</div>
<p>다음 내용 이어가기 </p>
</body>
</html>
함수가 실행된 모습
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
3 x 4 = 12
3 x 5 = 15
3 x 6 = 18
3 x 7 = 21
3 x 8 = 24
3 x 9 = 27
4 x 1 = 4
4 x 2 = 8
4 x 3 = 12
4 x 4 = 16
4 x 5 = 20
4 x 6 = 24
4 x 7 = 28
4 x 8 = 32
4 x 9 = 36
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
6 x 1 = 6
6 x 2 = 12
6 x 3 = 18
6 x 4 = 24
6 x 5 = 30
6 x 6 = 36
6 x 7 = 42
6 x 8 = 48
6 x 9 = 54
7 x 1 = 7
7 x 2 = 14
7 x 3 = 21
7 x 4 = 28
7 x 5 = 35
7 x 6 = 42
7 x 7 = 49
7 x 8 = 56
7 x 9 = 63
8 x 1 = 8
8 x 2 = 16
8 x 3 = 24
8 x 4 = 32
8 x 5 = 40
8 x 6 = 48
8 x 7 = 56
8 x 8 = 64
8 x 9 = 72
9 x 1 = 9
9 x 2 = 18
9 x 3 = 27
9 x 4 = 36
9 x 5 = 45
9 x 6 = 54
9 x 7 = 63
9 x 8 = 72
9 x 9 = 81
다음 내용 이어가기
<table> 태그로 만들기
<!DOCTYPE html>
<html>
<head>
<title> 구구단표 </title>
<style type="text/css">
table.timesTables { text-align: center; border: 1px solid gray; }
table.timesTables td { padding: 3px 8px; }
</style>
<script type="text/javascript">
// <table> 태그로 만들기
function timesTables_2 (){
var table = "<table border='1' class='timesTables'>";
var tdStart = "<td>";
var thead = "";
var tbody = "";
for ( var times = 1; times < 10; times++ ) {
if ( times < 9 ) thead += "<th>" + ( times + 1 ) + "</th>";
tbody += "<tr>";
for ( var number = 2; number < 10; number++ ) {
var answer = number * times;
if ( answer < 10 ) answer = " " + answer;
tbody += tdStart + number + " x " + times + " = " + answer + "</td>";
}
tbody += "</tr>";
}
table += "<thead>" + thead + "</thead>" + "<tbody>" + tbody + "</tbody>" + "</table>";
return table;
}
// 위의 함수를 가져와서, 실행할 내용을 만들기
function display (){ times_tables.innerHTML = timesTables_2(); }
</script>
</head>
<body>
<!-- 버튼을 클릭하여, 만들어 놓은 함수를 실행시키기 -->
<button onclick="display()"> 클릭하세요 </button>
<div id="times_tables"></div>
</body>
</html>
입력된 값으로, 한단짜리 구구단표 만들기
<script type="text/javascript">
// 입력된 값으로, 한단짜리 만들기
function timesTable ( number ) {
var message = "숫자가 아닙니다. ";
if ( isNaN( number ) ) return message;
number = parseFloat( number ); // 실수로 바꾸기 (parseFloat)
var lastAnswer = parseInt ( number * 9 ); // 마지막 답의 정수 부분
var lastLength = lastAnswer.toString().length; // 위 정수부의 자릿수 알아내기
var text = "";
for ( var times = 1; times < 10; times++ ) {
var answer = number * times;
answer = parseFloat( answer.toFixed( 3 ) ); // 소수부에서 반올림하기
var len = parseInt( answer ).toString().length; // 현재 정수부의 자릿수 알아내기
if ( len < lastLength ) answer = " " + answer;
text += number + " x " + times + " = " + answer + "<br />";
}
return text;
}
</script>
텍스트 상자 안에, 방문자가 입력한 값을 이용하여, 함수 실행하기
<script type="text/javascript">
// 텍스트 상자에 입력되는 값을 이용하기
function singleTable (){
var parent = document.getElementById( "Times_Table" );
var input = parent.getElementsByTagName( "input" )[ 0 ];
var pre = parent.getElementsByTagName( "pre" )[ 0 ];
var text = "";
var value = input.value;
if ( value === "" ) text = "입력된 값이 없습니다.";
else text = timesTable ( value );
pre.innerHTML = text;
}
</script>
<div id="Times_Table"> 구구단 : <input type="text" value="30.5" /> 단 <button onclick="singleTable()">▼</button><br /> <pre></pre> </div>
구구단 :
단
프롬프트 창을 띄워서, 방문자가 입력한 값을 이용하여, 함수 실행하기
<script type="text/javascript">
// 프롬프트 창을 띄우기
function prompter (){
var tag = document.getElementById( "multiplication" );
var dialog = prompt ( "아무 숫자나 입력해보세요~* \n " );
// "취소" 버튼을 눌렀을 때
if ( dialog == null || dialog == "undefined" ){ var text = ""; }
else { var text = timesTable ( dialog ); }
( "value" in tag ) ? tag.value = text : tag.innerHTML = text;
}
</script>
<button onclick="prompter()"> 대화 상자 열기 </button> <br />
<p id="multiplication"></p> <!-- 또는, <textarea id="multiplication"></textarea> -->
입력된 값으로, 여러 단짜리 구구단표 만들기
두 개의 프롬프트 창을 띄워서, 방문자가 원하는 만큼 보여주기
// 두 가지의 값을 받아와서(start, end), 두 값의 범위 안에서, 구구단표 만들기
function manyTimesTables ( start , end ) {
var message = "숫자가 아닙니다. ";
if ( isNaN( start ) || isNaN( end ) ) return message;
start = parseInt ( start ); // 정수로 바꾸기 (parseInt)
end = parseInt ( end );
var endLength = end.toString().length; // end의 자릿수
var lastLength = ( end * 9 ).toString().length; // 마지막 답의 자릿수
var sTag = "<span style='display: inline-block; margin: 1px; padding: 1px 8px; border: 1px solid gray; width: 80px'>";
var eTag = "</span>";
var tag = "";
for ( start ; start <= end; start++ ) {
tag += sTag;
for ( var times = 1; times < 10; times++ ) {
var answer = start * times;
var len = answer.toString().length; // 현재 답의 자릿수
var blank = "";
for ( len ; len < lastLength; len++ ) blank += " ";
answer = blank + answer;
len = start.toString().length; // 현재 start의 자릿수
blank = "";
for ( len; len < endLength; len++ ) blank += " ";
start = blank + start;
tag += start + ' x ' + times + ' = ' + answer + '<br />';
}
tag += eTag;
}
return tag;
}
// 두 개의 프롬프트 창을 차례로 열리게 해서, 방문자가 원하는 만큼 보여주기
function twoPrompts (){
var tag = document.getElementById( "continue" );
var first = prompt ( "몇 단부터 시작할까요?" );
if ( first == null || first == "undefined" ) tag.innerHTML = "";
else {
var second = prompt ( "몇 단까지 원하시나요?" );
if ( second == null || second == "undefined" ) tag.innerHTML = "";
else {
var text = manyTimesTables ( first , second );
tag.innerHTML = text;
}
}
}
<button onclick="twoPrompts()"> 두 개의 대화 상자 </button> <div id="continue"></div>
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
'JAVASCRIPT > Number & Math' 카테고리의 다른 글
| [ 자바스크립트 ] Number() VS parseFloat() (0) | 2016.03.16 |
|---|---|
| [ 자바스크립트 ] Number.isSafeInteger() (0) | 2016.03.06 |
| [ 자바스크립트 ] isFinite() VS Number.isFinite() (0) | 2016.03.06 |
| [ 자바스크립트 ] isNaN() VS Number.isNaN() (0) | 2016.03.06 |
| [ 자바스크립트 ] 천단위 콤마 추가하기 (0) | 2015.05.30 |