Archive

Calender

«   2020/01   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

최종 수정일 : 2015. 10. 18.


작성한 방법은 다음과 같다.



만약,
표시되는 결과에서 <br /> 태그가 글자 그대로 나타난다면,
아래 내용에서 "<br />" 부분을, "\n" 으로 바꾸면 된다.

마찬가지로,
"&nbsp;" → " "



기본 함수 작성하기

아래 함수를 기본으로 해서, 약간씩 변형한 것이다.

 
// "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 =  " &nbsp; "  +  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 =  " &nbsp; "  +  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 = "&nbsp;" + 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" /> 단 &nbsp; <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 += "&nbsp;"; 
			 answer = blank + answer; 

			 len = start.toString().length; 	 // 현재 start의 자릿수 

			 blank = ""; 
			 for (  len; len < endLength; len++ ) blank += "&nbsp;"; 
			 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>
 

 



이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*

2 Comments

  1. 방문자 🕔 2019.10.15 10:32 AddressModify/DeleteReply

    >< 헐 ~ ~ 되게 지저분하네~ 낙서?!
    빵큐드라 ~ 간딴 깔끔하게 못만드냐?!
    무큐드라 ~ 코딩 글짜들이 아깝다~ 하지마라~