javascript 계산기 / 자바스크립트 계산기 만들기
2016. 6. 28. 10:15ㆍlanguage/javascript
javascript 를 이용하여 계산기를 구현해 본다.
대학생들이 과제로 계산기를 만들어 오라고 하나보다.
인터넷에 많은데 왜자꾸 요청하는거냐 ????
이미 인터넷에 있는건 교수님들이 다 알고있어서 그러나...
어쨋든... 옛날 생각나서 뚝딱 만들긴 했는데
대충 만들어서 오류 투성이 일꺼야 ㅋㅋㅋㅋㅋ 알아서 긁어가라 ~~
나는 대학생때 구구단만 주구장창 만들었던거 같은데...
어쨋든 javascript만 이용해서 계산기를 구현해 보자.
중요한건... 내 멋대로 만들었기 때문에 그 어디에도 겹치는 소스는 없을꺼라 생각한다.
물론 명명규칙도 엉망이다 ㅋㅋ 대학생 스럽게 ~
먼저 우리가 만들 계산기는 이런 모양이다.
가장 기본적인 계산기 모양이다.
허접한게 아니다. 대학생스럽다 라고 하자.
요약
숫자 입력 받고 기호 입력 받아서 계산하면 끝이다.
단, 기본적인 수식을 완성하지 못하면 ( 기호 2번 입력 또는 불완전식에서 부등호 기호 입력 등 ) 에러 처리한다.
이정도의 기본적인 관점에서 만들었다.
깊이 파고들면 한도끝도 없이 만들수 있어 보이니 간단하게만 구현한다.
설명은 Script부분만 하고 나머지는 소스만 첨부한다.
|
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82 |
<script type = "text/javascript">
/*******************************************************
********************************************************/
var flag = true;
var totalFlag = true;
var flag2 = 0;
var flag3 = 0;
function err(){
var f = document.calform ;
f.disp.value="수식오류";
flag = true;
}
function but(su){
if (totalFlag == false && isNaN(su)==false)
{
c();
}else{
totalFlag = true;
}
var f = document.calform ;
if (flag)
{
if (su == 0)
{
return;
}
f.disp.value="";
flag = false;
}
if (isNaN(su))
{
flag2++;
}else{
flag2 = 0;
}
if (flag2 >1)
{
return;
}
f.disp.value += su;
}
function c(){
var f = document.calform ;
flag = true;
totalFlag = true;
f.disp.value = "";
}
function total(){
var f = document.calform ;
try
{
var a = eval(f.disp.value);
if (isNaN(a))
{
throw err();
return;
}
}
catch (e)
{
err();
return;
}
totalFlag = false;
var b = (parseInt(a * 1000000000000)/1000000000000)
f.disp.value = b;
}
</script> |
cs |
아주 간단한 설명 (자세한 설명은 생략하니 분석해)
4# : 처음입력인지 아닌지 구별하는 Flag
5# : = 기호가 입력됐는지 구별하는 Flag
9# : 에러 함수
15# : 버튼 입력 함수
17# : 계산 후 또 숫자가 올 경우 초기화, 문자면 진행
26# : 초기에 들어있는 0을 없앤다.
36# : 문자 2번 입력 방지
43# : 문자 입력이 2번 이상이면 리턴
47# : 화면에서 입력받은 값 누적
51# : 초기화 함수
58# : 계산 함수
CSS 정의
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<style type="text/css">
input.btn{
width: 50px;
height: 40px;
margin: 5px;
font-size: 15pt;
}
.clr, .equal{
width: 112px;
height: 40px;
margin: 5px;
font-size: 15pt;
}
#disp{
width: 295px;
height: 40px;
margin: 5px;
border:2px solid green;
font-size: 22pt;
text-align: right;
}
</style> |
cs |
BODY 정의
|
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 |
<BODY>
<h2 align="center">계 산 기</h2>
<form name="calform">
<table border="0" align="center" cellspacing="0" style="border:2px solid blue; ">
<tr>
<td colspan="5"><input type="text" name="disp" id="disp" value="0"></td>
</tr>
<tr>
<td><input type="button" value="7" class="btn" onclick="but(7)"></td>
<td><input type="button" value="8" class="btn" onclick="but(8)"></td>
<td><input type="button" value="9" class="btn" onclick="but(9)"></td>
<td colspan="2"><input type="button" value="C" class="clr" onclick="c()"></td>
</tr>
<tr>
<td><input type="button" value="4" class="btn" onclick="but(4)"></td>
<td><input type="button" value="5" class="btn" onclick="but(5)"></td>
<td><input type="button" value="6" class="btn" onclick="but(6)"></td>
<td><input type="button" value="/" class="btn" onclick="but('/')"></td>
<td><input type="button" value="%" class="btn" onclick="but('%')"></td>
</tr>
<tr>
<td><input type="button" value="1" class="btn" onclick="but(1)"></td>
<td><input type="button" value="2" class="btn" onclick="but(2)"></td>
<td><input type="button" value="3" class="btn" onclick="but(3)"></td>
<td><input type="button" value="*" class="btn" onclick="but('*')"></td>
<td><input type="button" value="+" class="btn" onclick="but('+')"></td>
</tr>
<tr>
<td><input type="button" value="0" class="btn" onclick="but(0)"></td>
<td><input type="button" value="." class="btn" onclick="but('.')"></td>
<td colspan="2"><input type="button" value="=" class="equal" onclick="total()"></td>
<td><input type="button" value="-" class="btn" onclick="but('-')"></td>
</tr>
</table>
</form>
</BODY> |
cs |
그리고 제출할 때 제발 색깔이라도 바꾸자 ^^
'language > javascript' 카테고리의 다른 글
| JSP 페이지 이미지로 저장, 웹페이지 이미지로 저장, 페이지 이미지 캡쳐 (12) | 2017.03.13 |
|---|---|
| javascript showModalDialog 에서 window.open 시 session 이슈 (0) | 2017.01.05 |
| javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지 (16) | 2016.12.09 |
| dwr 에서 request, session 사용하기 / WebContextFactory is deprecated (0) | 2016.12.08 |
| javascript | 모바일 브라우저 userAgent로 디바이스 구분하기 / android ios 구분하기 (0) | 2016.08.10 |
| javascript history 삭제 / href replace 비교 (4) | 2016.06.01 |
| [javascript 기초 강좌] 12. 이벤트와 이벤트 객체 [ event ] (18) | 2016.05.02 |
| [javascript 기초 강좌] 11. 객체 관련 명령어 [ for ~ in, with ] (0) | 2016.04.20 |
| [javascript 기초 강좌] 10. 클래스 정의 / 객체 사용하기 /class 생성 (2) | 2016.03.15 |
| [javascript 기초 강좌] 9. 사용자 정의함수를 이용한 구구단 만들기 (2) | 2016.01.29 |