TIL(2021.12.31)

연이어 계산하기

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>계산기</title>
    <style>
        * {
            box-sizing: border-box
        }

        #result {
            width: 180px;
            height: 50px;
            margin: 5px;
            text-align: right
        }

        #operator {
            width: 50px;
            height: 50px;
            margin: 5px;
            text-align: center
        }

        button {
            width: 50px;
            height: 50px;
            margin: 5px
        }
    </style>
</head>

<!--계산기버튼구현-->

<body>
    <input readonly id="operator">
    <input readonly type="number" id="result">
    <div class="row">
        <button id="num-7">7</button>
        <button id="num-8">8</button>
        <button id="num-9">9</button>
        <button id="plus">+</button>
    </div>
    <div class="row">
        <button id="num-4">4</button>
        <button id="num-5">5</button>
        <button id="num-6">6</button>
        <button id="minus">-</button>
    </div>
    <div class="row">
        <button id="num-1">1</button>
        <button id="num-2">2</button>
        <button id="num-3">3</button>
        <button id="divide">/</button>
    </div>
    <div class="row">
        <button id="clear">C</button>
        <button id="num-0">0</button>
        <button id="calculate">=</button>
        <button id="multiply">x</button>
    </div>
    <script>
        let numOne = '';
        let operator = '';
        let numTwo = '';
        const $operator = document.querySelector('#operator'); //태그 선택자
        const $result = document.querySelector('#result'); //  태그 선택자
        // const onClickNumber = (number) =>  //중복이 발생했을 때 중복이 아닌 부분을 매개변수로 빼라 , 함수가 함수를 리턴 (고차함수)
        //     //MEMO 2021.12.30 클릭할 때 함수가 실행되면서 브라우저가 인수로 이벤트를 넣어준다.
        //     (event) => {
        //         if (operator) {
        //             numTwo += number;
        //         } else {
        //             numOne += number;
        //         }
        //         $result.value += number;
        //     }; // 고차 함수 high order function
        const onClickNumber = (event) => { //일반 함수로 해결
            if (!operator) {
                numOne += event.target.textContent;
                $result.value += event.target.textContent;
                return;
            }
            if (!numTwo) { //numTwo를 처음 클릭할때만 없다
                $result.value = '';
            }
            numTwo += event.target.textContent;
            $result.value += event.target.textContent;
        };
        document.querySelector('#num-0').addEventListener('click', onClickNumber);
        document.querySelector('#num-1').addEventListener('click', onClickNumber);
        document.querySelector('#num-2').addEventListener('click', onClickNumber);
        document.querySelector('#num-3').addEventListener('click', onClickNumber);
        document.querySelector('#num-4').addEventListener('click', onClickNumber);
        document.querySelector('#num-5').addEventListener('click', onClickNumber);
        document.querySelector('#num-6').addEventListener('click', onClickNumber);
        document.querySelector('#num-7').addEventListener('click', onClickNumber);
        document.querySelector('#num-8').addEventListener('click', onClickNumber);
        document.querySelector('#num-9').addEventListener('click', onClickNumber);


        const onClickOperator = (op) => () => {
            if (numOne) {
                if (numTwo) {
                    switch (operator) {
                        case '+':
                            $result.value = parseInt(numOne) + parseInt(numTwo);

                            break;
                        case '-':
                            $result.value = numOne - numTwo;
                            break;
                        case '*':
                            $result.value = numOne * numTwo;
                            break;
                        case '/':
                            $result.value = numOne / numTwo;
                            break;
                        default:
                            break;
                    }
                    $operator.value = '';
                    numOne = $result.value;
                    operator = '';
                    numTwo = '';
                } 
                operator = op;
                $operator.value = op;
            } else {
                alert('숫자를 먼저 입력하세요');
            }
        };
        document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
        document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
        document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
        document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));
        document.querySelector('#calculate').addEventListener('click', () => {
            if (numTwo) {
                switch (operator) {
                    case '+':
                        $result.value = parseInt(numOne) + parseInt(numTwo);

                        break;
                    case '-':
                        $result.value = numOne - numTwo;
                        break;
                    case '*':
                        $result.value = numOne * numTwo;
                        break;
                    case '/':
                        $result.value = numOne / numTwo;
                        break;
                    default:
                        break;
                }
                $operator.value = '';
                numOne = $result.value;
                operator = '';
                numTwo = '';
            } else {
                alert('숫자를 먼저 입력하세요.');
            }
        });
        // 클리어 
        document.querySelector('#clear').addEventListener('click', () => {
            numOne = '';
            operator = '';
            numTwo = '';
            $operator.value = '';
            $result.value = '';
        });
    </script>
</body>

I/O가 도데체 무엇인가?

Input과 Output

하드디스크에 데이터를 읽거나 데이터를 쓸때 CPU가 기다리기 때문에 일을 못함

I/O가 많이 발생하면?

메모리 늘리기(캐싱)
필요한 데이터가 최대한 많이 메모리에 존재(캐싱)

통신을 통한 파일 다운로드

분산처리를 통해서 속도를 높여줌

Author And Source

이 문제에 관하여(TIL(2021.12.31)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jisung/TIL2021.12.31

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다