본문 바로가기
수업 문제(국비 지원)/JS

[JS] 2022.09.23 (구구단 출력하기, 문제 맞추기)

by byeolsub 2023. 4. 29.

❓ 구구단 출력하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단출력하기</title>
<style type="text/css">
 table { width:100%; border-collapse: collapse;}
 th,td {border : 3px solid #bcbcbc; text-align: center; padding: 8px;}
 th {background-color: #e2e2e2; color:#111111;}
 td {background-color: #f2f2f2;}
 caption {color:#111111; font-size: 20px; background-color: #ffffff;}
</style>
<script type="text/javascript">
   function print1() {
	  var html = "<table><caption>세로출력</caption>";
	  for(var i=2;i<=9;i++) {
		  html += "<tr><th>" + i + "단</th></tr>";
		  for(var j=2;j <= 9;j++) {
			  html += "<tr><td>" + i + "*" + j + "="+(i*j)+"</td></tr>";
		  }
	  }
	  html += "</table>";
	  gugudan.innerHTML = html;
   }
   function print2() {
	  var html = "<table><caption>가로출력</caption><tr>";
	  for(var i=2;i<=9;i++) {
		  html += "<th>" + i + "단</th>";
	  }
	  html += "<br>";
	  for(var j=2;j<=9;j++) {
		  html += "<tr>";
		  for(var i=2;i <= 9;i++) {
			  html += "<td>" + i + "*" + j + "="+(i*j)+"</td>";
		  }
		  html += "</tr>";
	  }
	  html += "</table>";
	  gugudan.innerHTML = html;
	}
   function print3() {
	  var html = "<table><caption>2단출력</caption>";
	  for(i=2;i<=9;i+=4) { 
		  html += "<tr>";
		  for(var k=0;k<4;k++) {
			  html += "<th>" + (i+k) + "단</th>";
		  }
		  html += "</tr>";
		  for(var j=2;j<=9;j++) {
			  html += "<tr>";
			  for(var k=0;k<4;k++) {
				  html += "<td>" + (i+k) + "*" + j + "=" + 
				     ((i+k)*j) + "</td>";
			  }
			  html += "</tr>";
		  }
	  }
	  html += "</table>";
	  gugudan.innerHTML = html;
   }
</script>
</head>
<body>
<input type="button" value="세로출력" onclick="print1()">
<input type="button" value="가로출력" onclick="print2()">
<input type="button" value="2단출력" onclick="print3()">
<div id="gugudan"></div>
</body>
</html>

❓ 문제 맞추기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제 맞추기</title>
</head>
<body>
<script type="text/javascript">
   function getInt() {
	   return Math.floor(Math.random() * 100);
   }
   let op = new Array("+","-","*","/","%");
   
   function getOp() { 
	   return op[Math.floor(Math.random() * op.length)];
   }
   let tcnt = 0; //입력한 갯수
   let cnt = 0;  //정답 수
   while(true) {
      let str = getInt() + getOp() + getInt();
      let ans = prompt(str + "= 식의 정답을 입력하세요(종료:9999)",0); 
      if(ans == 9999) break;
      tcnt++; //문항수
      let res = eval(str);
      if(res != ans) {
	    document.write("<font color='red' size='5'>" +"오답=></font>");
	    document.write(str + "=" + res + ", 입력 값:" + ans + "<br>")
      } else { //정답
	    document.write("<font color='blue' size='5'>" +"정답</font><br>");
		cnt++;
      }
   }
   document.write(tcnt+"문제 중 총"+cnt + "개를 맞추셨습니다.")
</script>
</body>
</html>