value 값을 가져와서 실제로 동작하는 계산기를 밑에 처럼 만들어 보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input [type=button] {
width: 50px;
height: 50 px;
}
</style>
<script type="text/javascript">
//변수 선언
let num1 = 0;
let op = "";
function nums(num) {
f.t1.value += num;
// f.t1.value = f.t1.value + num
// t1에 입력 된 값들을 이어서 써준다. 더해주는게 아니라 이어서 써주는 거임
}
function funOp(o) {
op = o; //선택한 연산자(o) 를 연산자 op에 저장해라
num1 = parseInt(f.t1.value);
// parseInt("123") -> 문자타입의 숫자를 진짜 정수로 변환 해 주는 함수
// 입력 되어 있던 문자형태의(f.t1.value)이걸 숫자로 변경하여 num1에 넣어주어라
f.t1.value = "";
}
function eq() { // = 입력했을때 반응 할 동작 만드는 함수
let num2 = parseInt(f.t1.value);
//입력 되어 있는 t1 안의 값들을 숫자로 변환해 주어 num에 넣어준다.
switch (op) { //그 중 op (funOp의 파라미터 o의 값을 op에 담아준 것)
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break;
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
}
f.t1.value = res;
}
</script>
</head>
<body>
<h3>계산기</h3>
<form name="f">
<table>
<tr>
<td colspan="4"><input type="text" name="t1"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="nums(1)"></td>
<td><input type="button" value="2" onclick="nums(2)"></td>
<td><input type="button" value="3" onclick="nums(3)"></td>
<td><input type="button" value="+" onclick="funOp('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="nums(4)"></td>
<td><input type="button" value="5" onclick="nums(5)"></td>
<td><input type="button" value="6" onclick="nums(6)"></td>
<td><input type="button" value="-" onclick="funOp('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="nums(7)"></td>
<td><input type="button" value="8" onclick="nums(8)"></td>
<td><input type="button" value="9" onclick="nums(9)"></td>
<td><input type="button" value="*" onclick="funOp('*')"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="nums(0)"></td>
<td><input type="button" value="c"
onclick="javascript : f.t1.value=''"></td>
<!-- 클릭하면 자바스크립트의 f.t1.value 가 공란으로 초기화 된다. -->
<td><input type="button" value="=" onclick="eq()"></td>
<td><input type="button" value="/" onclick="funOp('/')"></td>
</tr>
</table>
</form>
</body>
</html>'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - 이벤트(event) (0) | 2023.03.26 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - 페이지 이동 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - value값 가져오기 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - 구구단 테이블 만들기 (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - 대화 상자(dialog box) (0) | 2023.03.24 |
