자바스크립트로 계산기 구현하기 복습

수업시간에 배운내용 복습입니다.

JS

window.onload = function () { // 이벤트를 먼저 넣고 시작

    //변수의 초기화 설정

    let inp = document.forms['cal'];

    //문서내의 폼중에서 cal 인거

    let input = inp.getElementsByTagName('input');

    //태그이름이 input인 것들 다

    let cls_btn = document.getElementsByClassName('cls_btn')[0];

    //클래스가 cls_btn인것중 0번째

    let result_btn = document.getElementsByClassName('result_btn')[0];

    //클래스가 result_btn 인것중 0번째

    function calc(value) { //계산기의 화면 밸류값

        if (inp['result'].value == 0) {

            inp['result'].value = ''; //

        }

        inp['result'].value += value;

        //쓰는 글자들을 계속 붙여줌

    }

    //클릭한 버튼이 =랑clear가 아니면 calc()함수가 실행댐

    for (let i = 0; i < input.length; i++) {

        if (input[i].value != '=' && input[i].value != 'clear') {

            input[i].onclick = function () {

                calc(this.value)

            }

        }

    }

    function my_result(){

        let result = inp['result']; //obj.속성 , obj['속성'] 이라고 적을수있음.

        let calc = eval(result.value)

        //가져온 값을 eval()을 통해 계산을함

    }

    function clr(){ //초기화 메소드

        inp['result'].value = 0;

    }

    clr_btn.onclick = function(){

        clr();

    }

    //clr버튼을 클릭하면 clr 함수가 발생

}

CSS

caption {

                font-size: 32px;

            }

           

            table {

                width: 320px;

            }

            table,

            th {

                background: #333;

            }

            th {

                padding-right: 10px;

                height: 80px;

            }

            td {

                height: 75px;

                text-align: center;

            }

            th > input {

                width: 100%;

                border: none;

                background: #333;

                color: white;

                text-align: right;

                font-size: 48px;

            }

            td > input[type="button"] {

                width: 100%;

                height: inherit;

                color: #333;

                font-size: 36px;

                border: none;

            }

            td > input[type="button"]:hover {

                background: #999;

            }

            td:last-child > input {

                background: orange;

                color: white;

            }

HTML

<form name="cal">

            <table>

                <caption>계산기</caption>

                <tr>

                    <th colspan="4"><input type="text" name="result" value="0"></th>

                </tr>

                <tr>

                   

                    <td><input type="button" value="7"></td>

                    <td><input type="button" value="8"></td>

                    <td><input type="button" value="9"></td>

                    <td><input type="button" value="+"></td>

                </tr>

                <tr>

                    <td><input type="button" value="4"></td>

                    <td><input type="button" value="5"></td>

                    <td><input type="button" value="6"></td>

                    <td><input type="button" value="-"></td>

                </tr>

                <tr>

                    <td><input type="button" value="1"></td>

                    <td><input type="button" value="2"></td>

                    <td><input type="button" value="3"></td>

                    <td><input type="button" value="*"></td>

                </tr>

                <tr>

                    <td colspan="2"><input type="button" value="0"></td>

                    <td><input type="button" value="%"></td>

                    <td><input type="button" value="/"></td>

                </tr>

                <tr>

                    <td colspan="2"><input type="button" class="cls_btn" value="clear"></td>

                    <td colspan="2"><input type="button" class="result_btn" value="="></td>

                </tr>

            </table>

        </form>