ℹ️ INFORMATION/💾 HTML + CSS + JS

[JS] 자바스크립트 함수를 이용해 간단한 계산기 만들기 예제! (feat.왕초보)

is. 2021. 1. 10. 01:41
반응형

이 포스팅은 천인국님의 책,

HTML5 + CSS3 + Javascript로 배우는

웹 프로그래밍 기초 

에 있는 예제를 따라 해 본 겁니다(296쪽)

코드 작성의 편리함을 위해서,

내용은 모두 영어로 적어보았어요.

 

"정수를 입력했을 때만" 작동하는 계산기

만들기 예제입니다.

(소수를 넣으면 정확한 값이 출력되지 않습니다.)

 

참고로 전 자바스크립트 공부 시작하다가 맨날 포기하고 다시 시작하고 하는

왕. 초. 보입니다!

그리고 요즘 연습할 때 사용하는 편집기는 VS Code입니다!

 

책에서는 단순히 덧셈만 가지고 만든 예제였습니다.

저는 초보라 아직 코드 어떻게 효율적으로 짜는지 잘 모르고 많이 부족해요..

그래서 해당 교재의 코드를 거의 참고했는데, 

덧셈만 있으면 제가 계산기라고 하기가 조금 그래서

각각 덧셈, 뺄셈, 곱셈, 나눗셈으로 함수를 4개 만들었습니다.

하하, 참 비효율적이긴 하지만 이것도 시간이 꽤 걸렸습니다 ㅎㅎ

 

우선 HTML로 내용과 구조를 잡았습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    
</head>
<body>
    <div id="wrap">
        <h1>calculator</h1>
        <form>
            <p>num 1: <input type="text" id="number1"></p>    
            <p>num 2: <input type="text" id="number2"></p>
            <p>result: <input type="text" id="sum"></p>
            <p>
                <input type="button" value="+ =" onclick="add()">
                <input type="button" value="- =" onclick="sub()">
                <input type="button" value="* =" onclick="multi()">
                <input type="button" value="/ =" onclick="divi()">
            </p>          
        </form>
    </div>    
</body>
</html>

위 부분을 그대로 편집기에 작성해서 저장하면 이런 화면이 나옵니다!

 

아무런 디자인 없이 만들어진 틀이라 좀 심심하네요.. ㅎㅎ

정렬도 하고, 색, 폰트랑 간격 조정도 좀 해서

스타일을 조금 추가해봅니다.

색감은 그냥 calculator color라고 구글 검색해서 나오는

color palette로 참고했습니다

 

CSS로  디자인을 조금 추가한 코드입니다.

아시겠지만, HTML 문서 안에 넣으시는 거라면 처음 시작과 끝에 각각

<style>, </style>를 적으셔야 합니다.

body {
    font-family: 'NeoDunggeunmo';
}

#wrap {
    width: 200px;
    height: 275px;
    text-align: center;
    margin: 0 auto;
    background-color:#505050;
    padding-top: 10px;
}

h1 {
    color: #ffffff;
    background-color: #1c1c1c;
    width: 180px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
}

form>p {
    color: #ffffff;
}
form>p:nth-child(3) {
    background: #ff9500;
    width: 180px;
    height: 60px;
    margin: 0 auto;
    color: #000;
}

form>p:nth-child(4)>input {
    background: #000;
    color: #ffffff;
    font-size: 16px;
}

약간의 디자인을 더해서 만든 계산기입니다.

그래도 좀 이뻐졌네요..ㅎ

코드가 쓸데없이 길어진 것 같은데 그냥 표현하고자 하는 스타일만 봐주셔요!

그런데 이 글씨체 너무 귀엽지 않나요?

약간 빈티지한 느낌도 나고 전 너무 좋아요~

neo둥근체인데 요즘 꽂혀서 뭐 만들 때 꼭 사용하네요 ㅎㅎ

 

이젠 웹 페이지에서 동작을 담당하는 자바스크립트를 넣을 차례입니다.

위에도 적었듯이 비효율적이겠지만,

저는 단순 노동으로 함수 총 4가지를 만들 거예요.. ㅎㅎ

함수 이름은 각각 덧셈, 뺄셈, 곱셈, 나눗셈 영어를 짧게 표현해서,

add, sub, multi, divi로 적었습니다.

 

Javascript 코드입니다.

// 덧셈 함수
function add() {
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    var result = parseInt(num1) + parseInt(num2);
    document.getElementById("sum").value = result;
}
// 뺄셈 함수
function sub() {
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    var result = parseInt(num1) - parseInt(num2);
    document.getElementById("sum").value = result;
}
// 곱셈 함수
function multi() {
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    var result = parseInt(num1) * parseInt(num2);
    document.getElementById("sum").value = result;
}
// 나눗셈 함수
function divi() {
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    var result = parseInt(num1) / parseInt(num2);
    document.getElementById("sum").value = result;
}

 

함수는 선언만 한다고 절대 실행되지 않죠~

꼭 함수 선언 + 함수 호출이 되어야 하기 때문에

4가지 type의 계산 버튼을 클릭했을 때 실행되도록

<input> 안에 onlick = " "를 각각 HTML 코드에 추가해줍니다!

 

그렇게 해서 정수 계산기의 최종 코드는 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <style>
        body {
            font-family: 'NeoDunggeunmo';
        }

        #wrap {
            width: 200px;
            height: 275px;
            text-align: center;
            margin: 0 auto;
            background-color:#505050;
            padding-top: 10px;
        }

        h1 {
            color: #ffffff;
            background-color: #1c1c1c;
            width: 180px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

        form>p {
            color: #ffffff;
        }
        form>p:nth-child(3) {
            background: #ff9500;
            width: 180px;
            height: 60px;
            margin: 0 auto;
            color: #000;
        }
        
        form>p:nth-child(4)>input {
            background: #000;
            color: #ffffff;
            font-size: 16px;
        }
    </style>
    <script>
        // 덧셈 함수
        function add() {
            var num1 = document.getElementById("number1").value;
            var num2 = document.getElementById("number2").value;

            var result = parseInt(num1) + parseInt(num2);
            document.getElementById("sum").value = result;
        }
        // 뺄셈 함수
        function sub() {
            var num1 = document.getElementById("number1").value;
            var num2 = document.getElementById("number2").value;

            var result = parseInt(num1) - parseInt(num2);
            document.getElementById("sum").value = result;
        }
        // 곱셈 함수
        function multi() {
            var num1 = document.getElementById("number1").value;
            var num2 = document.getElementById("number2").value;

            var result = parseInt(num1) * parseInt(num2);
            document.getElementById("sum").value = result;
        }
        // 나눗셈 함수
        function divi() {
            var num1 = document.getElementById("number1").value;
            var num2 = document.getElementById("number2").value;

            var result = parseInt(num1) / parseInt(num2);
            document.getElementById("sum").value = result;
        }
    </script>
</head>
<body>
    <div id="wrap">
        <h1>calculator</h1>
        <form>
            <p>num 1: <input type="text" id="number1"></p>    
            <p>num 2: <input type="text" id="number2"></p>
            <p>result: <input type="text" id="sum"></p>
            <p>
                <input type="button" value="+ =" onclick="add()">
                <input type="button" value="- =" onclick="sub()">
                <input type="button" value="* =" onclick="multi()">
                <input type="button" value="/ =" onclick="divi()">
            </p>          
        </form>
    </div>    
</body>
</html>

 

엄청 기네요..ㅎ

아직 초보라 뭔가 작동하지 않을 때에는 그냥 때려맞추고 고치는 부분이 많습니다.

그래도 계산되는지 봤는데

되긴 되더라고요?!

책 예제 참고한 거라 안 되면 이상한 거겠지만,

이렇게 만들어진다는 것도 참 신기하고

이게 뭐라고 뿌듯하네요 ^_^

 

이걸 만들면서

헷갈리거나 좀 혼란스러운 부분 몇 가지 적어볼게요.

 

1. 

자바스크립트 코드가 들어가는 <script></script> 부분 역시

처음에는 body에 적었는데,

함수가 호출되는 HTML 부분이 먼저 나오다 보니 에러가 나더라고요?

그래서 스크립트 위치를 head 안으로 옮겼습니다.

 

2.

함수마다 공동으로 변수 선언하는 두 문장이 계속 반복되길래 

해당 두 문장을 함수 정의 전 script에 먼저 빼서 적고,

내부 함수에는 모두 빼고 작성했더니 계산 값으로 NaN만 뜨더라고요..

그래서 다시 그냥 다 적어줬습니다 ㅋㅋㅋ

아직 이유는 모르겠어요ㅠㅠ

 

3.

책에 있는 예제는 계산할 때 <input type="button">을 사용했길래

저는 단순 호기심에 <button>으로도 사용해서 코드를 작성해봤는데요,

<button>을 사용해서 만들어진 페이지도 코드가 실행되긴 하지만,

순간적으로 결괏값을 보여주고 난 후에 바로 새로고침 되더라고요!

 

4.

parseInt( ) 대신 Number( )를 적어도 이 경우에는 되긴 하는데

이 둘의 차이가 분명 있는 것 같긴 하더라고요.

이 것도 좀 찾아보고 정확한 차이점을 공부해야 할 것 같습니다!

 

5.

마지막으로 제가 작성한 코드는소수를 입력하면 계산이 안됩니다..

뭔가 결과값이 나오긴 하는데 맞지는 않더라고요ㅜ

이 부분도 제가 찾아서 조금 공부하면서 손을 봐야할 것 같습니다!

제 예상으로는 parseInt( ) 함수 때문에

문자열 타입이 숫자열로 변경되는 과정에서

소수 부분은 자동으로 버려지고 정수 부분만 가지고 계산되는 것 같습니다.

확실하지 않으니, 더 알아보겠습니다!!

 

아직 자바스크립트 갈길이 너무 머네요 ㅎㅎ

찬찬히 더 알아가겠죠?

 

글 읽어주셔서 감사합니다 :)
같이 열심히 공부해요! ʕ•ᴥ•ʔ ❤︎

반응형

'ℹ️ INFORMATION > 💾 HTML + CSS + JS' 카테고리의 다른 글

[CSS] Flexbox와 Grid + 연습 게임 (1분 코딩님의 설명 추천)  (0) 2021.04.13
[JS] 자바스크립트 DOM 스크립트 기본 문법 중 꼭 기억해야 하는 부분!  (0) 2021.04.01
[JS] 자바스크립트로 콘솔창에 for문을 이용해서 다이아몬드 별찍기 연습  (2) 2021.03.25
[JS] 자바스크립트(JavaScript) 연산자들의 우선순위  (0) 2021.02.26
스파르타 코딩 클럽 : 나홀로 코딩 후기 및 추천 ( 정규 수업 8만원 추가 할인 방법 공유)  (0) 2020.12.30

'ℹ️ INFORMATION/💾 HTML + CSS + JS'의 다른글

  • 현재글[JS] 자바스크립트 함수를 이용해 간단한 계산기 만들기 예제! (feat.왕초보)

관련글

댓글

티스토리툴바