javascript 계산기 / 자바스크립트 계산기 만들기

2016.06.28 10:15language/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

 

 

 

그리고 제출할 때 제발 색깔이라도 바꾸자 ^^