이전 글/JavaScript

9. JavaScript Ex.08 계산기 만들기

usnooy_ 2018. 1. 17. 22:46

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.








예제풀이









간단한 함수선언과 조건문을 통하여 계산기를 구현해보았다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <input type="text" id="txtsu1" autofocus="autofocus" onkeyup="txtsu1_keyup();" />
    <select id="oplist">
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
        <option value="5">%</option>
    </select>
    <input type="text" id="txtsu2" onkeyup="txtsu2_keyup();" />
    <input type="button" id="btn" value="실행" onclick="btn_execute();" />
    <hr>
    <span id="box" style="display: inline-block; width: 200px; height: 25px; 
background: black; color: white;"></span>
</body>
cs

<body>                                        



먼저 body부분이다. text타입을 두개를 선언하여 연산할 수를 입력받는다.


 

※autofous="autofocus"란? 


- input타입 등에 페이지가 로딩될 때 자동으로 focus가 잡혀서 따로 선택없이 바로 입력이 

가능한 상태로 설정한다.


text사이에 option을 통하여 무슨 연산을 할 것인지를 text값으로 주고, value값을 1~5로 설정하였다.


결과 값은 span태그에 출력된다.


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
<script>
    function txtsu1_keyup() {
        if (event.keyCode == 13) {
            // isNaN 숫자가아닐경우 true 
            if (isNaN(document.getElementById("txtsu1").value)) {
                alert("입력 잘못함");
                document.getElementById("txtsu1").value = "";
                document.getElementById("txtsu1").focus();
                return;
            }
            document.getElementById("txtsu2").focus();
        }
 
    }
    function txtsu2_keyup() {
        if (event.keyCode == 13) {
            document.getElementById("btn").focus();
        }
    }
    function btn_execute() {
        var op = document.getElementById("oplist").value;
        var su1 = document.getElementById("txtsu1").value;
        var su2 = document.getElementById("txtsu2").value;
        var result = 0;
        var spanbox = document.getElementById("box");
 
        switch (parseInt(op)) {
        case 1:
            result = Number(su1) + Number(su2);
            break;
        case 2:
            result = Number(su1) - Number(su2);
            break;
        case 3:
            result = Number(su1) * Number(su2);
            break;
        case 4:
            result = Number(su1) / Number(su2);
            break;
        case 5:
            result = Number(su1) % Number(su2);
            break;
        }
        spanbox.innerHTML = result;
    }
</script>
cs


<script> 함수



txtsu1_keyup() :


이 함수는 event.keyCode == 13 이라는 조건을 만족한 후에

 입력한 값이 숫자가 아닐경우 입력을 잘못했다는 알림을 보내고 

입력되었던 value값을 초기화하고, 다시 focus를 준다. 


※event.keyCode  이란?


여기서 event.keyCode란 현재 입력된 키의 Keycode를 뜻한다.


event.keyCode == 13에서 13은 엔터의 keyCode값을 뜻한다.


즉, 엔터키를 입력했을때 숫자가 아니면은 내부 if문으로 들어가고, 아닐경우에는 두번째 입력창에 focus를 준다 




txtsu2_keyup() :


이역시 동일하게 event.keyCode==13을 이용하여 엔터키가 입력이 될 경우 실행버튼에 focus를 준다.




btn_execute() :


연산을 위한 함수이다. 입력받은 값과 사용자가 선택한 옵션의 value값을 받아와 연산을 한다.


switch문을 이용하여 연산을 진행하였고, 다른 조건문도 사용가능하다.


연산한 결과값을 result라는 변수에 넣은 후에 spanbox.innerHTML 을 이용하여 결과 값을 출력한다





저작자표시 비영리 변경금지 (새창열림)