본문 바로가기
Web Development/Front-end

[Javascript] 계산기만들기

Blockmonkey 2020. 10. 30. 05:33

자바스크립트 문법을 처음 배운 뒤, 뭔가 만들어본 경험이 없어,

막상 자바스크립트로 뭘 만들라고 하면 만들지를 못하겠더라구요.

그래서 ! 저번 투두리스트에 이어서,

또 ~ 흔한 주제중 하나인 계산기 만들기를 차근차근 해봤습니다.

 

우선 순서도를 그렸습니다.

계산기 순서도

 

 

이런식으로 해서 코드를 써나간 결과물은 다음과 같습니다.

 

못생긴 계산기..

별거없죠? ㅋㅋ.. 

그냥 계산기입니다.

 

아무튼 코드를 살펴보는 시간을 가져보겠습니다.

 

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blockmonkey's Calculator</title>
    <link rel="stylesheet" href="calculator.css" />
</head>
<body>
    <form>
        <header>
            <input class='result_blank' value='결과창' type="text" readonly/>
        </header>
        <input class="input_blank" type="text" style="margin-top: 50px; margin-bottom: 5px;"/>
        <input class='submit' type="submit" value="=" style="width: 500px; height : 45px; display: block; margin:auto;">
    <div class='table'>
        <table>
            <tr>
                <td class='ac' colspan="4">AC</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("*")'>x</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='add("+")'>+</td>
            </tr>
        </table>
    </div>
    </form>
    <script src='calculator.js'></script>
</body>
</html>

HTML파일입니다.

 

1. 기본적으로, header부분에는, 결과창을 만들어주고, 사용자가 값을 입력할 input_blank와, submit 버튼(=)을 만들어줬습니다.

그리고 css요소를 조금 즉흥적으로 보면서 적응한 부분이 포함되어있습니다.

2. table부분을 만들어줬습니다.

table 부분은 계산기의 0 ~ 9 숫자와, + - / * . 등의 버튼들이 있는 곳이에요. 보시면 다 add 함수를 호출해서 값을 입력해주고 있습니다. 매개변수 값을 직접 하드코딩으로 입력해줬습니다. ( 원래 자바스크립트 배열을 이용해서 ~~ 술술 멋지게 풀어나갈라캣는데 =_=;; 아직 쉽지않아서, 이런방법이 있길래 이렇게 했습니다.)

3. JS 파일과, CSS 파일을 연결해주는 코드를 작성했습니다.

 

 

add 함수의 정체를 알기위해서 ~~ 자바스크립트 파일로 가봅시당.

 

2. Javascript

let input_blank = document.querySelector('.input_blank');
let result_blank = document.querySelector('.result_blank');
let submit_btn = document.querySelector('.submit');
let ac_btn = document.querySelector('.ac');
let result;


const add = (element) => {
    input_blank.value += element;
    input_blank.focus();
}

const calculate = () => {
    if(input_blank.value === ''){
        result_blank.value = '결과창';
    } else {
        result = eval(input_blank.value);
        result_blank.value = result;
        input_blank.focus();
    }
}

submit_btn.addEventListener('click', (e)=>{
    e.preventDefault();
    calculate();
    input_blank.focus();
})

ac_btn.addEventListener('click', ()=> {
    result = '';
    result_blank.value = '결과창';
    input_blank.value = '';
    input_blank.focus();
})

Javascript 파일입니다.

 

1. 우선, input_blank (입력창) , result_blank(결과창), submit버튼, ac버튼, 그리고 result 변수를 만들어줬습니다.

2. add함수를 만들어줬습니다. 아까 HTML 에서 onclick=add(1) << 이런식으로 생겻던 부분 있죠? 그게 add함수를 호출하고, 매개변수로 1을 넣어줘, 라고 한 것입니다. 위에 보시면, 별것 없습니다. input_blank(사용자 입력창) 에 (1) << 이렇게 받은 요소를 삽입해 달라는 의미입니다. 

3. calculate 함수를 만들어줬습니다. 계산기의 핵심이겠죠? 그래서 if문으로 우선 분기처리를 해줍니다. 입력창이 비었을 때는 아무런 동작을 하지 않기 위해 result_blank << 의 초기값인 '결과창'으로 나올 수 있도록 했으며,

입력창에 값이 있을 때는, eval함수를 이용해서 입력창 내에 있는 식을 연산하도록 해주고, 그것을 result 변수에 담았습니다.

그리고 result_blank.value << 결과창의 값을 '결과창' 에서 ->> result값을 넣어주도록 해줬구요.

4. 다음은 submit 버튼입니다 ( = ) << 버튼 이 버튼을 눌러야 연산이 동작하도록 해줘야하므로, 여기서 calculate함수를 불러오도록 했습니다. 그리고 preventDefault는 기본적으로 새로고침하는 << 작동을 없애기 위해서 넣어줬구요.

5. ac_btn < AC버튼을 눌르면 값이 초기화 되어야 겟죠? 그래서, 결과창을 비워주고, 다시 '결과창'으로 표시하게 했는데, 다시보니, 결과창을 비워줄 필요없이 바로 '결과창'으로 만들어줘도 될뻔했네요 (-_-^, 초보니깐 양해좀..;;)

그리고, 결과창만 비워줄 것이아니라, 사용자 입력창도 비워줘야하므로 value 값을 '' << 이렇게 빈값으로 줘서 초기화 해줬습니다.

 

그리고 중복되는 input_blank.focus() << 이 부분은 ac 버튼을 누르던, submit버튼을 누르던.. 연산(calculate)을 하던 값을 추가하던(add함수) 계속 사용자 입력창에 커서를 유지하기 위해서, 모두 적용해줬습니다.

 

 

자, 요번 프로젝트에서 배운점..

1. HTML에서 onclick << 을 적용해서, 클릭했을 때 동작할 작업을 바로 적용시킬 수 있다. (이벤트리스너 클릭을 쓰지 않아도 된다는것?!);

2. 간단한 계산기도 보기보다 어렵다 -_- ㅋ..

 

 

 

3. css입니다.

body{
    background-color: gray;
    text-align: center;
}

header{
    padding-bottom: 0;
}
.result_blank{
    width:600px;
    height: auto;
    font-size: 70px;
    text-align: center;
}

.input_blank {
    width: 600px;
    height: auto;
    font-size: 30px;
}
.submit{
    width: 500px;
}

.table{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

td {
    width: 70px;
    height: 55px;
    margin-right: 5px;
    text-align: center;
    font-weight: bolder;
    border: 1px solid black;
    user-select: none;
}

 

여기에서 유용했던건, user-select : none ; 이게 가장 유용했습니다. ㅋㅋ

사용자가 마우스로 자꾸 드래그하는 경우가 생기는데 그럼, 별로잖아요?

그래서, 드래그를 차단하도록 하는 CSS가 user-select: none; 입니다.

 

 

 

 

 

P.S:

공부한지 약 3~4개월 정도 흘렀는데,

아직도 JS를 이정도밖에 못쓴다니..

공부를 헛한거 같네요.ㅠㅠ..휴..

저작자표시 비영리 변경금지

'Web Development > Front-end' 카테고리의 다른 글

[Javascript] 곱등이게임  (0) 2020.10.31
[Zerocho-14] EventListener(keyup&down) & 증감연산자(전위형/후위형) & Blocking / Non-Blocking & 이벤트루프  (0) 2020.10.30
[Zerocho-13] 2048 (MouseEvent, Switch)  (0) 2020.10.29
1. HTML  (0) 2020.10.29
[Zerocho-13] 자스스톤 (Call by Value, Constructor, this, 엄격모드)  (0) 2020.10.27

'Web Development/Front-end' Related Articles

티스토리툴바