반응형
1. 사용자로부터 2개의 정수를 입력받아 덧셈 결과 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type=text/css> </style>
<script type="text/javascript">
// var a = prompt("첫 번째 정수 입력");
// var b = prompt("두 번째 정수 입력");
// document.write("<h1>" + (parseInt(a) + parseInt(b)) + "</h1>");
function input() {
var n1 = Number(document.getElementById("input1").value);
var n2 = Number(document.getElementById("input2").value);
document.getElementById("result").value = n1+n2;
}
</script>
</head>
<body>
<input type="text" id="input1"> <br>
<input type="text" id="input2"> <br>
<button onclick="input()"> 덧셈 계산하기 </button>
<br>
<textarea id="result"></textarea>
</body>
</html>2. 구구단을 테이블에 넣어 출력해주는 프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' width='900' height='400' align='left'>");
for(var i=2; i<=9; i++){
document.write("<tr>");
for(var j=1; j<=9; j++){
document.write("<th>");
document.write(i + " x " + j + " = " + (i*j));
document.write("</th>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>3. 임의의 정수 한개를 발생시켜 변수에 저장한 후 사용자가 값을 입력 해 알아 맞히는 프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
입력 :
<input type="text" id="input">
<button onclick="guess()">확인</button> <br>
<input type="text" id="result">
<script type="text/javascript">
var target = Math.floor(Math.random() * 10);
function guess() {
var num = Number(document.getElementById("input").value);
if (target == num) {
document.getElementById("result").value = "정답입니다.";
} else {
document.getElementById("result").value = "틀렸습니다.";
}
}
</script>
</body>
</html>반응형
'웹 프로그래밍 > Front-End' 카테고리의 다른 글
| 메모장 만들기 (1) | 2020.03.25 |
|---|---|
| "오늘의 메뉴" JS -> JQuery 로 바꿔보기 (0) | 2020.03.25 |
| Javascript 생성자, 프로토타입 (0) | 2020.03.21 |
| HTML, CSS, Javascript 연습문제 (0) | 2020.03.21 |
| HTML, CSS 연습문제 (0) | 2020.03.21 |
