📂 JAVASCRIPT/Number & Math
[ 자바스크립트 ] 구구단표 만들기 🕔 2015. 5. 6. 05:02
최종 수정일 : 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>
함수가 실행된 모습
다음 내용 이어가기
<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 |