특강/별별 웹 특강

[별별 웹 특강] HTML + javascript 계산기 만들기 프로젝트!

JuniorEinstein 2018. 5. 24. 22:12
728x90

0. 도입

안녕하세요! '별별 웹 특강' 게시판에는 간단하게 만들어 볼 수 있는 프로젝트들을 올려 보려고 합니다!


정말로 간단간단하게 만들 수 있는 프로젝트 들이니까 부담 가지지 말구!


그리고 최대한 자세하게 설명해 보려고 하겠지만, 그래도 이해할 수 없으면 넘어가도 좋습니다!


앞으로 다른 웹 특강들을 하면서도 사용하게 될 것이기 때문에, 반복적으로 겪으면서 서로 친해지도록 해보세요!


결과물



우선, 우리가 만들게 될 결과물입니다! 디자인은 맥용 계산기를 참고 했습니다.

나름의 스타일링도 하면서 신경 썼어요~ 그럼 함께 만들어 보도록 하죠.


| 목차 |

  1. 계산기 구조 만들기
    • table
    • colspan과 rowspan
    • 간단한 스타일링
  2. 계산기에 식 입력 받기
    • html 태그의 onclick 속성 사용하기
    • javascript 함수와 연결하기
  3. 입력 받은 식 계산하기
    • eval 함수
  4. 계산한 값 출력하기
  5. 식, 값 초기화하기
  6. 심화 과정


1. 계산기 구조 만들기

우선은 계산기의 구조를 만들어 보겠습니다. 계산기의 구조는 table 태그로 작성할 것입니다. table로 표를 그려 계산기와 유사한 형태로 제작할 것입니다.


|  table

그러면 우선, html의 table 태그에 대해서 간단하게만 알아보겠습니다. table 태그는 표를 그려주는 태그입니다.


table 태그는 tr(table row)과 td(table data)로 구성되어 있습니다. 


다음 예제를 보면서 이해를 하도록 하죠.



tr 태그가 표의 행을 만들고, td 태그가 표의 열을 구성하게 됩니다.


th(table heading)은 참고로 테이블의 열 이름 부분을 작성할 때 사용합니다.


table 태그에 대해서 더 자세하게 알고 싶으면 http://webberstudy.com/html-css/html-2/table-basic-structure/ 이 사이트에 정말 잘 나와 있으니! 참고하시길!


|  colspan과 rowspan

colspan과 rowspan은 엑셀의 셀 병합 기능과 같습니다.


colspan은 열을 합쳐주고 (가로방향으로 합쳐주고), rowspan은 행을 합쳐줍니다. (세로 방향으로 합쳐줍니다)


다음과 같이 사용합니다.



|  계산기 뼈대 작성

우리는 이제 위의 내용들을 바탕으로 계산기 뼈대를 만들 겁니다!

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
<!DOCTYPE html>
<html>
<head>
    <title>계에사아앙ㄴ기이ㅣㅣ!</title>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="4">
                <input type="text" id="display">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="text" id="result">
            </td>
        </tr>
        <tr>
            <td colspan="3">AC</td>
            <td>/</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
        <tr>
            <td colspan="2">0</td>
            <td>.</td>
            <td>=</td>
        </tr>
    </table>
</body>
</html>
cs


다음과 같은 코드를 작성하세요! 그러면 계산기 뼈대가 완성됩니다!


완성된 계산기의 뼈대는 다음과 같이 생겼을 겁니다.


아직은 되게... 조촐한 모습을 하고 있지만 ㅠㅠㅠ 조금의 스타일링을 추가해서! 멋지게 만들어 보도록 하죠!


|  간단한 스타일링

우선은 테이블의 두껍고 못생긴 테두리를 제거할 겁니다.


저 못생긴 테두리는 table 태그의 border-collapse 스타일을 이용할 겁니다.


<title></title> 태그 밑에 <style></style> 태그를 열고 다음과 같은 코드를 추가합시다!


1
2
3
table {
    border-collapse: collapse;
}
cs


그러고 나면 테두리가 얇은 실선 한 줄로 깔끔하게 정리되는걸 확인할 수 있습니다.



그 다음으로는 글자를 가운데에 정렬하고, 셀 내부에 넉넉하게 공간을 좀 주도록 하죠.

그리고 <input> 태그의 못생긴 테두리도 제거하도록 하죠.


<style> 태그 안에 다음과 같은 코드를 추가합니다.


1
2
3
4
5
6
7
td {
    padding: 5px 10px;
    text-align: center;
}
input {
    border: none;
}
cs


정말 많이 예뻐졌습니다! 하지만 조금 더 손을 보도록 하죠.


그 다음으로는 식이나 결과 값이 input 태그 안에서 오른쪽으로 정렬되어 나오게 할겁니다. (맥용 계산기처럼 말이죠)


그리고 input을 선택했을 때 겉에 파란색 테두리가 생기는걸 없앨 겁니다.


다음과 같이 코드를 수정합니다.


1
2
3
4
5
6
7
input {
    text-align: right;
    border: none;
}
input:focus {
    outline: none;
}
cs


이제 결과를 확인해보죠!


나름 산뜻한 계산기가 탄생했죠??


최종적으로 다음과 같은 코드가 되겠군요.


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
<!DOCTYPE html>
<html>
<head>
    <title>계에사아앙ㄴ기이ㅣㅣ!</title>
 
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            padding: 5px 10px;
            text-align: center;
        }
        input {
            text-align: right;
            border: none;
        }
        input:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="4">
                <input type="text" id="display">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="text" id="result">
            </td>
        </tr>
        <tr>
            <td colspan="3">AC</td>
            <td>/</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
        <tr>
            <td colspan="2">0</td>
            <td>.</td>
            <td>=</td>
        </tr>
    </table>
</body>
</html>
cs



2. 계산기에 식 입력받기

이제부터가 핵심 기술입니다.


html의 onclick 속성과 javascript 함수를 이용해서 계산기에 식을 입력 받을 겁니다.


|  html의 onclick 속성

html의 onclick 속성은 모든 태그에 적용될 수 있습니다. onclick 속성은 그 속성이 적용된 요소를 클릭 했을 때 일어나는 일을 나타냅니다.


다음과 같이 사용합니다.


1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>onclick 속성!</title>
</head>
<body>
    <h1 onclick="alert('나두 안녕!')">Hello World!</h1>
</body>
</html>
cs


이렇게 h1 태그에 onclick 속성을 정의하고, "나두 안녕!"이라는 메세지를 띄우게 하면, 다음과 같은 결과를 볼 수 있습니다.



h1 태그 (Hello World!)를 눌렀을 때 "나두 안녕!"이라는 메세지가 나타나죠.


|  onclick 속성 javascript 함수와 연결하기

다음 과정은 javascript의 함수와 onclick 속성을 연결하는 것입니다.


onclick 속성 안에 자바 스크립트 함수를 입력하면, <script></script> 태그 안의 해당 함수를 실행하게 되는 것이죠.


다음과 같이 사용합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>onclick 속성 + javascript!</title>
</head>
<body>
    <h1 onclick="yo()">Hello World!</h1>
    <script>
        function yo() {
            var a = confirm("안녕하니?");
            if(a) {
                alert("오오 다행이다!");
            } else {
                alert("에이 뭐야...");
            }
        }
    </script>
</body>
</html>
cs


이렇게 하면 "Hello World!"를 눌렀을 때, script 태그 안의 yo() 함수가 실행되는 것을 확인할 수 있습니다.


yo() 함수의 내용에 따라 사용자에게 "안녕하니?"라는 질문을 던지고, 사용자가 안녕 하다고 하면 "오오 다행이다!"를 출력, 아니라고 하면 "에이 뭐야..."를 출력하게 됩니다.


|  계산기에 식 입력 받기

우리는 이제 javascript로 식에 숫자나 기호를 추가해주는 함수를 만들고, 그것을 각각의 숫자, 기호 버튼에 onclick 속성으로 연결할겁니다.


계산기 코드 밑에 <script></script> 태그를 추가하고, 그 안에 다음과 같은 함수를 작성합니다.


1
2
3
4
5
6
7
function add(char) {
    var display = document.getElementById('display'); // 우리가 식을 입력할 input 태그를 불러옵니다.
    // display.value는 input 태그 안에 들어 있는 값을 의미합니다.
    display.value = display.value + char;
    // display.value += char; 로 쓸 수도 있습니다.
    // input 태그의 값 뒤에 char 문자를 추가해 주는 역할을 합니다.
}
cs


add 함수가 하는 역할은 간단합니다. 식 뒤에 내가 누른 버튼의 숫자나 기호를 추가해 줍니다.


*** 여기서 잠깐!! ***

<input> 태그는 value라는 속성을 갑니다. <input> 태그가 가진 값은 value라는 속성에 저장이 됩니다.

document.getElementById('display')는 <input> 태그를 불러오는 코드이고, ".value"를 붙임으로서 그 <input> 태그의 값을 가져오게 됩니다.

그러면 이제는 숫자, 연산자 태그에 onclick 속성을 부여해 식을 입력 받을 겁니다.


다음과 같이 테이블 코드를 수정합니다.


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
<table border="1">
    <tr>
        <td colspan="4">
            <input type="text" id="display">
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <input type="text" id="result">
        </td>
    </tr>
    <tr>
        <td colspan="3">AC</td>
        <td onclick="add('/')">/</td>
    </tr>
    <tr>
        <td onclick="add(7)">7</td>
        <td onclick="add(8)">8</td>
        <td onclick="add(9)">9</td>
        <td onclick="add('*')">*</td>
    </tr>
    <tr>
        <td onclick="add(4)">4</td>
        <td onclick="add(5)">5</td>
        <td onclick="add(6)">6</td>
        <td onclick="add('-')">-</td>
    </tr>
    <tr>
        <td onclick="add(1)">1</td>
        <td onclick="add(2)">2</td>
        <td onclick="add(3)">3</td>
        <td onclick="add('+')">+</td>
    </tr>
    <tr>
        <td colspan="2" onclick="add(0)">0</td>
        <td onclick="add('.')">.</td>
        <td>=</td>
    </tr>
</table>
cs


테이블에 숫자와 연산자에 해당하는 td에 onclick 속성을 부여해서 add() 함수를 호출하게 하였습니다.


브라우저에서 열어보면 다음과 같은 결과를 확인할 수 있습니다.


내가 숫자나 연산자를 누르면, 누르는 족족 식이 추가되는 것을 볼 수 있습니다!!! 이제 거의 다 왔어요!!



3. 입력 받은 식 계산하기

대망의 순간입니다. 이제는 입력 받은 식을 계산할 겁니다.


"="를 누르면 id가 display인 <input>태그에서 식을 받아서 계산을 하고, id가 result인 <input>에 그 값을 출력합니다.


|  eval 함수

eval 함수는 javascript에 내장된 함수로, 식을 입력 받으면 그 식을 계산해서 결과를 알려줍니다.


다음과 같이 사용합니다.


1
2
3
eval('1+1') // 결과 : 2
eval('1+') // 결과 : error
eval('12+13*3') // 결과 : 51, 연산자 우선순위도 고려해줍니다!
cs



|  입력 받은 식 계산하기

<script></script> 태그 안에 다음의 코드를 추가합니다.


1
2
3
4
function calculate() {
    var display = document.getElementById('display');
    var result = eval(display.value); // 식을 계산하고 result 변수에 저장합니다.
}
cs


아직 "=" 버튼과 calculate 함수를 연결하지 않았기 때문에 눌러도 아무 동작도 일어나지 않을겁니다!



4. 계산한 값 출력하기

계산한 값을 id가 result인 <input> 태그에 출력해 줄겁니다.

calculate 함수를 수정합니다.

1
2
3
4
5
function calculate() {
    var display = document.getElementById('display');
    var result = eval(display.value); // 식을 계산하고 result 변수에 저장합니다.
    document.getElementById('result').value = result;
}
cs


그리고 마지막으로 "="를 onclick으로 calculate와 연결하면 됩니다!


코드는 이런 모습이겠군요.


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
<!DOCTYPE html>
<html>
<head>
    <title>계에사아앙ㄴ기이ㅣㅣ!</title>
 
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            padding: 5px 10px;
            text-align: center;
        }
        input {
            text-align: right;
            border: none;
        }
        input:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="4">
                <input type="text" id="display">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="text" id="result">
            </td>
        </tr>
        <tr>
            <td colspan="3">AC</td>
            <td onclick="add('/')">/</td>
        </tr>
        <tr>
            <td onclick="add(7)">7</td>
            <td onclick="add(8)">8</td>
            <td onclick="add(9)">9</td>
            <td onclick="add('*')">*</td>
        </tr>
        <tr>
            <td onclick="add(4)">4</td>
            <td onclick="add(5)">5</td>
            <td onclick="add(6)">6</td>
            <td onclick="add('-')">-</td>
        </tr>
        <tr>
            <td onclick="add(1)">1</td>
            <td onclick="add(2)">2</td>
            <td onclick="add(3)">3</td>
            <td onclick="add('+')">+</td>
        </tr>
        <tr>
            <td colspan="2" onclick="add(0)">0</td>
            <td onclick="add('.')">.</td>
            <td onclick="calculate()">=</td>
        </tr>
    </table>
    <script>
        function add(char) {
            var display = document.getElementById('display'); // 우리가 식을 입력할 input 태그를 불러옵니다.
            // display.value는 input 태그 안에 들어 있는 값을 의미합니다.
            display.value = display.value + char;
            // display.value += char; 로 쓸 수도 있습니다.
            // input 태그의 값 뒤에 char 문자를 추가해 주는 역할을 합니다.
        }
        function calculate() {
            var display = document.getElementById('display');
            var result = eval(display.value); // 식을 계산하고 result 변수에 저장합니다.
            document.getElementById('result').value = result;
        }
    </script>
</body>
</html>
cs



5. 식, 값 초기화하기

이제 마지막입니다!

"AC"를 눌렀을 때 식과 계산 결과가 전부 초기화 되게 해볼겁니다.

방법은 간단합니다. 위의 함수들에서 하던 것과 마찬가지로 값을 받아오고, 그 값을 빈 문자열 ("")로 설정해 줄겁니다.

다음과 같은 코드를 추가합니다.

1
2
3
4
function reset() {
    document.getElementById('display').value = "";
    document.getElementById('result').value = "";
}
cs

참고로 여기서 초기화 함수 이름으로는 'clear'를 사용할 수 없습니다. javascript 내부에 이미 clear라는 이름을 가진 함수가 있기 때문이죠!

그러면 마지막으로 "AC" 버튼과 reset 함수를 연결합니다.

최종적으로 다음과 같은 코드가 완성되겠군요!

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
<!DOCTYPE html>
<html>
<head>
    <title>계에사아앙ㄴ기이ㅣㅣ!</title>
 
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            padding: 5px 10px;
            text-align: center;
        }
        input {
            text-align: right;
            border: none;
        }
        input:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="4">
                <input type="text" id="display">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="text" id="result">
            </td>
        </tr>
        <tr>
            <td colspan="3" onclick="reset()">AC</td>
            <td onclick="add('/')">/</td>
        </tr>
        <tr>
            <td onclick="add(7)">7</td>
            <td onclick="add(8)">8</td>
            <td onclick="add(9)">9</td>
            <td onclick="add('*')">*</td>
        </tr>
        <tr>
            <td onclick="add(4)">4</td>
            <td onclick="add(5)">5</td>
            <td onclick="add(6)">6</td>
            <td onclick="add('-')">-</td>
        </tr>
        <tr>
            <td onclick="add(1)">1</td>
            <td onclick="add(2)">2</td>
            <td onclick="add(3)">3</td>
            <td onclick="add('+')">+</td>
        </tr>
        <tr>
            <td colspan="2" onclick="add(0)">0</td>
            <td onclick="add('.')">.</td>
            <td onclick="calculate()">=</td>
        </tr>
    </table>
    <script>
        function add(char) {
            var display = document.getElementById('display'); // 우리가 식을 입력할 input 태그를 불러옵니다.
            // display.value는 input 태그 안에 들어 있는 값을 의미합니다.
            display.value = display.value + char;
            // display.value += char; 로 쓸 수도 있습니다.
            // input 태그의 값 뒤에 char 문자를 추가해 주는 역할을 합니다.
        }
        function calculate() {
            var display = document.getElementById('display');
            var result = eval(display.value); // 식을 계산하고 result 변수에 저장합니다.
            document.getElementById('result').value = result;
        }
        function reset() {
            document.getElementById('display').value = "";
            document.getElementById('result').value = "";
        }
    </script>
</body>
</html>
cs


이로써 javascript를 이용한 간단한 계산기가 완성되었습니다!!!! 우왕!!!!!



6. 심화과정

eval 함수는 위에서 설명했듯이, 식이 아닌 문자열이 들어오면 오류가 발생합니다. 그래서 잘못된 입력을 받지 않게 javascript 차원에서 조절해 주도록 합시다.


<script></script> 태그에 numberClicked라는 이름의 전역 변수를 선언합니다.

numberClicked는 내가 이전에 눌렀던 값이 숫자이면 true, 연산자이면 false라는 값을 가지도록 할겁니다.

우선, 처음에는 아무 입력도 받지 않으니 numberClicked의 초기값은 false로 설정합니다.


1
2
3
4
5
6
7
8
9
10
11
12
<script>
    var numberClicked = false; // 전역 변수로 numberClicked를 설정
    function add (char) {
        ...
    }
    function calculate() {
        ...
    }
    function reset() {
        ...
    }
</script>
cs


javascript의 변수 선언과 그 사용 가능 범위에 대해서는 여기 링크에 잘 나와 있더군요. http://codingnuri.com/javascript-tutorial/javascript-variable-declaration-and-scope.html


이렇게 할겁니다.


사용자가 숫자나 연산자 버튼을 누르면, add 함수가 호출되고, 사용자가 누른 값이 char에 들어 가게 됩니다.


그러면 char의 값이 숫자라면, numberClicked를 true로 바꾸고, 숫자가 아니라면 numberClicked를 false로 바꿀겁니다.


그리고 그 다음 입력을 받을 때, numberClicked가 false인데도 (이전에 연산자를 눌렀는데도) 또 다시 연산자를 입력하면, 입력이 안되게 설정할 겁니다. (연산자가 연속으로 두개 이상 들어가면 안되니까요)


javascript의 숫자가 아닌지 판별해주는 함수 isNaN()을 이용할 겁니다.


isNaN는 Not a Number의 줄인 말로, 숫자가 아니면 true를 반환합니다.


다음과 같이 사용합니다.


1
2
3
4
// isNaN 함수는 숫자가 아닌 값을 입력 받았을 때 true를 반환합니다.
isNaN(10) // false (10은 숫자이기 때문에!)
isNaN('Hello javascript') // true
isNaN(false) // false (true, false는 각각 1, 0의 숫자에 대응대기 때문!)
cs


그러면 이제 add 함수를 다음과 같이 변경합시다.


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
<script>
    var numberClicked = false; // 전역 변수로 numberClicked를 설정
    function add (char) {
        if(numberClicked == false) { // 만약 이전에 연산자를 입력 했는데,
            if(isNaN(char) == true) { // 입력 받은 값이 또 다시 연산자면,
                // 아무것도 하지 않는다.
            } else { // 연산자가 아니라면!
                document.getElementById('display').value += char; // 식 뒤에 값을 추가한다.
            }
        } else { // 만약에 이전에 숫자를 입력 했으면,
            document.getElementById('display').value += char; // 식 뒤에 값을 추가한다.
        }
 
 
        // 다음 입력을 위해 이번 입력에 숫자가 눌렸는지 연산자가 눌렸는지 설정한다.
        if(isNaN(char) == true) { // "만약 숫자가 아닌게 참이라면" = "연산자를 눌렀다면"
            numberClicked = false; // numberClicked를 false로 설정한다.
        } else {
            numberClicked = true; // numberClicked를 true로 설정한다.
        }
    }
    function calculate() {
        ...
    }
    function reset() {
        ...
    }
</script>
cs


우와아아아아아 좀 많이 복잡하지만... 이해할 수 있게 주석을 달아 두었습니다!



7. 마침

오늘은 javascript를 이용해서 간단한 계산기를 만들어 보았습니다! 어떠셨나요?? 사실 좀 어렵고 이해하기 힘든 내용일 수도 있습니다만! 혹시 질문이 있으면 댓글이나 메일로 언제든지 환영하겠습니다!


이 내용이 완전히 이해되지 않아도 괜찮습니다. 앞으로 javascript를 계속 사용하면서 더 익숙해지고, 이해가 될겁니다!


그러면 다음 특강에서 찾아뵙도록 할께요!

728x90
저작자표시