- Math 클래스
Math.random() : 0 <= x < 1.0 임의의 수.
Math.floor() : 근사 정수. 입력된 수보다 작은 근사 정수.
Math.ceil() : 근사 정수. 입력된 수보다 큰 근사 정수.
📌
<!DOCTYPE html>
<!-- src/main/webapp/20220922/javascript5.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Math 클래스 사용</title>
</head>
<body>
<script type="text/javascript">
//Math.floor : 작은 근사정수.
function getNumber() {
//Math.floor(Math.random()*100) : 0 ~ 99 사이의 임의의 수
return Math.floor(Math.random()*100) %10; //0~9사이의 임의의수
}
let op = new Array("+","-","*","/","%") //배열 생성
function getOp() { //op배열에서 임의의 값 리턴
//op.length : 5. 배열의 요소의 갯수
//Math.floor(Math.random()*op.length) : 0 ~ 4사이의 임의의 수
return op[Math.floor(Math.random()*op.length)]
}
let str = getNumber() + getOp() + getNumber() //수식
ans = prompt(str + "=",0) //입력란의 초기값
res = eval(str) //수식 계산 결과
if(res != ans) {
document.write("<font color='red' size='5'>오답</font>")
document.write("=>입력값:"+ans + ",정답:"+res)
} else
document.write("<font color='blue' size='5'>정답</font>")
document.write(3/2) //1.5
</script>
</body>
</html>
- onchange : select 태그, checkbox태그, radio태그
선택된 값이 달라진 경우 발생되는 이벤트
📌 구구단 출력
<!DOCTYPE html>
<!-- javascript6.html
2~9사이의 숫자 선택하여 구구단 출력하기
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input {text-align: right;}
table { width : 100%; border-collapse: collapse; }
th,td {
border : 3px solid #bcbcbc;
text-align: center;
padding: 8px;
}
th { background-color: #B7F0B1; color : #353535; }
td { background-color: #F2F2F2;}
caption { color : #111111; font-size: 20px;
background-color: #FFFFFF; }
input[type=text],input[type=password],textarea {
width:100%;
}
</style>
<script type="text/javascript">
function printgugudan() {
let d = dan.value; //2
let html = "<table><tr><th>"+ d + "단</th></tr>"
for(let i=2;i<=9;i++) {
html += "<tr><td>"+d + "*"+i + "="+(d*i)+"</td></tr>"
}
html += "</table>"
//innerHTML : html 번역하여 출력.
console.log(html)
gugudan.innerHTML = html;
}
</script>
</head>
<body>
<h3>2~9사이의 숫자를 선택하여 해당 단의 구구단을 출력하기</h3>
<!-- onchange : select 태그, checkbox태그, radio태그
선택된 값이 달라진 경우 발생되는 이벤트
-->
<select id="dan" onchange="printgugudan()">
<option value="">선택하세요</option>
<option value="2"> 2단</option>
<option value="3"> 3단</option>
<option value="4"> 4단</option>
<option value="5"> 5단</option>
<option value="6"> 6단</option>
<option value="7"> 7단</option>
<option value="8"> 8단</option>
<option value="9"> 9단</option>
</select>
<div id="gugudan"></div>
</body>
</html>
'수업(국비지원) > JavaScript' 카테고리의 다른 글
| [JavaScript] TTS(Text to Speech) 연습 (0) | 2023.04.18 |
|---|---|
| [JavaScript] 이미지 선택하기(function, drawimg, sel, img, onchange,option), 마우스를 이용한 이미지 변경 (0) | 2023.04.18 |
| [JavaScript] prompt 메세지 (0) | 2023.04.18 |
| [JavaScript] window 객체 (0) | 2023.04.18 |
| [JavaScript] name 속성을 이용한 태그 선택, 마우스 이벤트(onmouseover, onmouseout) (0) | 2023.04.18 |