키다리 개발자

Javascript + HTML + CSS 계산기 만들기 본문

Javascript

Javascript + HTML + CSS 계산기 만들기

JunBucks 2019. 10. 8. 17:34

Javacript + HTML + CSS로 계산기를 만들어 보았습니다.

 

 

계산기 제작 순서는

  1. HTML로 틀을 만듦
  2. Javascript로 계산 기능 구현
  3. CSS로 디자인 적용

로 순차적으로 하였습니다.

 

HTML 코드
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
 
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>계산기</title>
  </head>
  <body>
    <div id="container">
      <div>
        <div>
          <input id="display" type="text" />
        </div>
        <div>
          <input id="result" type="text" />
        </div>
 
        <div>
          <div class="buttonWrap">
            <button onclick="addOutput('%')">%</button>
            <button onclick="reset()">C</button>
            <button onclick="del()">del</button>
            <button onclick="addOutput('/')">/</button>
          </div>
          <div class="buttonWrap">
            <button onclick="addOutput(9)">9</button>
            <button onclick="addOutput(8)">8</button>
            <button onclick="addOutput(7)">7</button>
            <button onclick="addOutput('*')">*</button>
          </div>
          <div class="buttonWrap">
            <button onclick="addOutput(6)">6</button>
            <button onclick="addOutput(5)">5</button>
            <button onclick="addOutput(4)">4</button>
            <button onclick="addOutput('+')">+</button>
          </div>
          <div class="buttonWrap">
            <button onclick="addOutput(3)">3</button>
            <button onclick="addOutput(2)">2</button>
            <button onclick="addOutput(1)">1</button>
            <button onclick="addOutput('-')">-</button>
          </div>
          <div class="buttonWrap">
            <button onclick="addOutput(0)">0</button>
            <button onclick="addOutput('.')">.</button>
            <button style="width:200px" onclick="calculate()">=</button>
          </div>
        </div>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
 
 
 

 

 

<button onclick="addOutput()"> </button>

 

button 태그에 onclick 이벤트 속성을 주어 javacript의 함수와 연결시켰습니다.

 

 

onclick은 이벤트 속성으로 한번 클릭을 하였을 때 동작하는 것으로,

 

javacript에서 만들어놓은 addOutput() 함수와 연결했습니다. 

 

또한 addOutput() 괄호 안에 숫자(인수 또는 전달 인자(Argument))를 넣어주면,

 

javacript의 매개변수(parameter)에서 받아서 함수를 실행시킵니다.

 

추가적으로, 숫자뿐 아니라 아래 내용의 기능도 onclick과 함수를 연결시켰습니다.

  • C: reset()  : 모든 숫자 초기화
  • del: del()  : backspace 기능(숫자 삭제)
  • =: caculate() : 사칙연산 계산 실행

(javacript의 함수는 다음 내용에서 설명하겠습니다.)

 

 

 

 

 

Javascript 코드
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
function addOutput(num) {
  var display = document.getElementById("display");
}
 
function calculate() {
  var display = document.getElementById("display");
  var result = eval(display.value);
  var displayResult = document.getElementById("result");
  displayResult.value = result;
}
 
function reset() {
  var display = document.getElementById("display");
  display.value = "";
  var displayResult = document.getElementById("result");
}
 
function del() {
  var display = documnet.getElementById("display");
  display.value = display.value.substring(0, display.value.length - 1);
}
 
 
 
 

 

 

addOutput(num)

getElementById() 함수는 html의 id의 요소를 호출하는 함수입니다.

 

따라서 () 안에는 id 명을 적어주고 그것을 변수에 대입해주었습니다.

 

var display = document.getElementById("display");       /* display라는 id명을 가진 요소를 호출 */

 

     display.value = display.value + num;               

/* display에 .value를 붙이면 display id의 요소 값을 불러옵니다.

display.value + num : display.value에 전달 인자 값을 계속 중첩하여 저장하게 됩니다.

그러므로 계산기의 첫 번째 상단에 보이는 숫자가 중첩되어 보입니다. */

                          

                                

 

 

 

 

function calculate()

  var display = document.getElementById("display");

  var result = eval(display.value)    

 

/* display.value의 값을 계산해 주며, 그리고 변수 result에 계산 값을 저장합니다. */

eval() 함수는 각각의 값들을 서로 계산해줍니다.
ex) eval(1+2)  -> 3
       eval(1+2*10) -> 21      /* 사칙연산의 우선순위도 인식합니다 */

 

  var displayResult = document.getElementById("result");

  displayResult.value = result;

/* 결과 값에 보일 displayResult.value에 위에서 eval() 함수로 계산된 result 값을 넣어줍니다. */

 

 

 

reset()

  var display = document.getElementById("display");

  display.value = "";

 

  var displayResult = document.getElementById("result");

  displayResult.value = "";

/* 화면에 표시되는 display.value와 displayResult.value에
사이에 아무것도 가지지 않은 '' 또는 "" 으로 초기화시켜줍니다. */

 

 

 

 

CSS 코드

마지막으로 CSS로 디자인을 해줍니다.

 

저는 HTML의 <table>을 사용하지 않고, 

 

CSS의 flex를 이용하여 input / button 배열을 해주었습니다.

 

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
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
 
#container > div {
  border: 3px solid gray;
}
 
#display,
#result {
  width: 400px;
  height: 80px;
  font-size: 60px;
  font-weight: bold;
  text-align: right;
  padding-right: 8px;
}
 
.buttonWrap {
  display: flex;
  flex-direction: row;
}
 
.buttonWrap button {
  width: 100px;
  height: 80px;
  font-size: 20px;
  padding: 10px;
}
 

 

 

 

첫 프로젝트를 하며
Javascript, HTML, CSS를 이용한 프로젝트를 처음 진행해 보았는데,

HTML로 틀을 잡고 Javascript의 함수와 연결 후,

인수와 매개변수의 개념이 잘 잡히지 않아서 애를 먹었습니다.

하지만 함수의 개념을 다시 공부하고 접근하니 갑자기 눈에 보이더군요.

실제로 프로젝트를 만들다 보니 시행착오도 많이 겪었지만

각각의 코드들이 어떻게 쓰이고, 왜 쓰이는지 알게 되는 계기였습니다.

CSS flex의 쓰임새를 좀 더 이해하며, 또한 CSS의 광대함을 알게 됨으로써

다양한 프로젝트를 더 만들어 볼 필요성을 느끼고

앞으로의 실력 향상에 도약을 도모하는 첫 프로젝트였습니다.

 

 

 

 

'Javascript' 카테고리의 다른 글

DOM의 개념, API, Rendering 이란?  (0) 2019.11.20
Facebook 만들기 (템플릿 문자열-Template string, 객체 배열, data model 속성 가져오기)  (0) 2019.10.24
Javascript (별, 왕관 찍기, 배열에 값 담기-push())  (0) 2019.10.24
Javascript 조건문, 반복문 (if,for)  (0) 2019.10.08
Javacript란? (사용법, 주석, 변수, 타입변환, 문자열 연결)  (0) 2019.10.08
'Javascript' Related Articles more
Comments