자바스크립트 초간단 사칙연산 계산기
사칙연산 기능이 있는 간단한 계산기를 자바스크립트로 만들어 보았습니다.
더 멋지게 꾸미지 않고 간단하게 만들어진 사칙연산 계산기입니다.
자바스크립트 배우는 중이어서 이렇게 간단하게 만들었지만
더 공부하다 보면 더 멋진 계산기로 만들 수 있지 않을까 생각합니다.
어떤 변수에 연산자를 저장하는 함수와
그 연산자에 따라서 계산하는 함수를 만들어서 구현했습니다.
switch-case문으로 어떤 연산자에 따라 실행하는 걸로 만들었는데
if문을 이용해서 만들어도 됩니다.
숫자를 입력했지만, 문자열로 인식할 수 있어서
문자열을 정수로 바꾸는 parseInt() 함수를 이용했습니다.
테이블로 레이아웃 만들고 form 태그로 텍스트 상자와 버튼을 만들었습니다.
-------------------------------------------------------------------------------------------------------------------------------------
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65 |
<!DOCTYPE html>
<html>
<head>
<title> 사칙연산 계산기 </title>
<script>
var op = "";
function oper(test){
op = test;
}
function run(){
var result;
num1 = document.cal.input1.value;
num2 = document.cal.input2.value;
switch(op){
case "+":
result = parseInt(num1) + parseInt(num2);
document.cal.input3.value = result;
break;
case "-":
result = parseInt(num1) - parseInt(num2);
document.cal.input3.value = result;
break;
case "*":
result = parseInt(num1) * parseInt(num2);
document.cal.input3.value = result;
break;
case "/":
result = parseInt(num1) / parseInt(num2);
document.cal.input3.value = result;
break;
default :
document.cal.input3.value = "";
break;
}
}
</script>
</head>
<body>
<table align=center cellpadding=0 cellscpacing=0 border=1 bordercolor=white bordercolorlight=cornflowerblue>
<tr>
<td bgcolor=#33CCFF align=center>
<font size="5" color="white">사칙연산<br>계산기</font></td>
</tr>
<tr width="250" height="297">
<td align=center width="150">
<form name="cal">
<input type="text" size=10 name="input1"><br><br>
<input type="button" name="btn1" value="+" onClick=oper("+")>
<input type="button" name="btn2" value="-" onClick=oper("-")>
<input type="button" name="btn3" value="*" onClick=oper("*")>
<input type="button" name="btn4" value="/" onClick=oper("/")><br><br>
<input type="text" size=10 name="input2"><br><br>
<input type="button" name="btn5" value="=" onClick=run()><br><br>
<input type="text" size=10 name="input3"><br><br>
<input type="reset" value="CA">
</form>
</td>
</tr>
<tr>
<td colspan=2 bgcolor=#33CCFF height=5> </td>
</tr>
</table>
</body>
</html> |
cs |