렛츠기릿 자바스크립트 7 (계산기) + 고차함수 + if중첩문 제거

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>계산기</title>
   <link rel="stylesheet" href="./style.css">
   <script type="text/javascript" defer src="./계산기.js"></script>
</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>
</body>
</html>

CSS

* { 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 }

계산기-1단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)


document.querySelector('#num-0').addEventListener('click', ()=>{
    if(operator){
        numTwo +='0'
    } else{
        numOne +='0'
    }
    $result.value+='0'
    console.log($result.value)
});
document.querySelector('#num-1').addEventListener('click', ()=>{
    if(operator){
        numTwo +='1'
    } else{
        numOne +='1'
    }
    $result.value+='1'
    
});
document.querySelector('#num-2').addEventListener('click', ()=>{
    if(operator){
        numTwo +='2'
    } else{
        numOne +='2'
    }
    $result.value+='2'
});
document.querySelector('#num-3').addEventListener('click', ()=>{
    if(operator){
        numTwo +='3'
    } else{
        numOne +='3'
    }
    $result.value+='3'
});
document.querySelector('#num-4').addEventListener('click', ()=>{
    if(operator){
        numTwo +='4'
    } else{
        numOne +='4'
    }
    $result.value+='4'
});
document.querySelector('#num-5').addEventListener('click', ()=>{
    if(operator){
        numTwo +='5'
    } else{
        numOne +='5'
    }
    $result.value+='5'
});
document.querySelector('#num-6').addEventListener('click', ()=>{
    if(operator){
        numTwo +='6'
    } else{
        numOne +='6'
    }
    $result.value+='6'
});
document.querySelector('#num-7').addEventListener('click', ()=>{
    if(operator){
        numTwo +='7'
    } else{
        numOne +='7'
    }
    $result.value+='7'
});
document.querySelector('#num-8').addEventListener('click', ()=>{
    if(operator){ //연산자가 있는 경우
        numTwo +='8'
    } else{ //연산자가 없는 경우 
        numOne +='8'
    }
    $result.value+='8'
});
document.querySelector('#num-9').addEventListener('click', ()=>{
    if(operator){
        numTwo +='9'
    } else{
        numOne +='9'
    }
    $result.value+='9'
});

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶어떠한 값이 변하면 그 값이 변한 것을 화면에 표시해 주어야 한다. →$result.value+='0'

계산기-2단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)



document.querySelector('#num-0').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
    console.log($result.value)
});
document.querySelector('#num-1').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
    
});
document.querySelector('#num-2').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-3').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-4').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-5').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-6').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-7').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-8').addEventListener('click', (number)=>{
    if(operator){ //연산자가 있는 경우
        numTwo +=number
    } else{ //연산자가 없는 경우 
        numOne +=number
    }
    $result.value+=number
});
document.querySelector('#num-9').addEventListener('click', (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
});

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶ 함수에서 중복이 발생했을 때 다른 부분을 매개변수로 빼라 (중복을 피할 수 있다)

계산기-3단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
};

document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶ 별도의 화살표 함수를 만들었다.

계산기-4단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (number)=>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
    return ()=> {};
};

document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶ 태그.addEventListener('액션', 함수자리) →함수 자리에는 함수호출()이 아니라 "함수이름"이 와야 된다.

▶ 태그.addEventListener('액션', 함수자리) →현재 상태(3단계)에서는

실질적인 리턴 값 undefined가 함수자리에 오게 된다.

→함수자리에 undefined가 아닌 함수가 오게 만들어 주야한다.

4단계 : return ( ) => { }; 버튼을 클릭해도 아무 일도 발생하지 않는다.

계산기-5단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (number)=>{
    return () =>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
};
   
};

document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶ 5단계 : 함수 안에 함수 = 리턴값으로 함수를 반환하는 함수 =고차함수

▶ 고차함수 : 함수가 함수를 return 하는 경우=리턴값으로 함수를 반환하는 함수

const func = () => {
  return () => {
    console.log('hello');
  };
};


1단계
const innerFunc = func();


2단계(func()을 리턴값으로 대체)
const innerFunc = () => {
    console.log('hello');
  };

const func = (msg) => {
  return () {
    console.log(msg);
    };
};




const innerFunc1 = func('hello');
const innerFunc2 = func('javascript');
const innerFunc2 = func();


const innerFunc1 = ()=>{
    console.log('hello');
 };


const innerFunc2 = ()=>{
    console.log('javascript');
};


const innerFunc3 = ()=>{
    console.log('undefined');
};


innerFunc1(); //hello
innerFunc2(); //javascript
innerFunc3(); //undefined




애당초에 const func함수를 깔끔하게 정리한 후에 처리하기 
return과 중괄호를 제거 한후 ()를 (msg)옆으로 옮기면

const func = (msg) =>() =>{
  console.log(msg);
};

const func = (msg) => {
  return () {
    console.log(msg);
    };
};


return과 { } 생략 후 ()를 msg옆으로 옮김

const func = (msg) =>()=>{
  console.log(msg);
 };

계산기-6단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (number)=>(event) =>{
    if(operator){
        numTwo +=number
    } else{
        numOne +=number
    }
    $result.value+=number
};
   


document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶ 6단계: return과 중괄호{} 생략후 ()를 (number)옆으로 옮김 + ()에 event객체를 매개변수로 넘김

const a = () => { };

document.querySelector('#plus').addEventListener('click', a);

태그.addEventListener('액션', 함수이름);

사용자가 '클릭'이라는 액션을 취하면, 브라우저가 자동으로 a함수를 호출하면서 동시에 a()에 event라는 객체를 매개변수로 넣어준다. 

따라서 아래와 같이 써도 무방하다. 즉 () 매개변수 자리에 event라는 객체를 매개변수로 추가해도 괜찮다. 

const a =(event) => { }

document.querySelector('#plus').addEventListener('click', a);

계산기- 7단계

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (event) =>{
    if(operator){
        numTwo +=event.target.textContent
    } else{
        numOne +=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);

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

▶ number 매개변수를 사용하지 않고, event객체의 event.target.textContext로 접근한다.

▶ onClickNumber함수를 호출하는 과정에서 number 매개변수를 전부다 날림

▶ 고차함수를 사용하지 않고, 중복을 제거

▶ textContext는 반환타입이 "문자열"

쿼즈(고차함수)

다음 코드의 console.log 결과를 맞춰보세요

const hof = (a) => (b) => (c)=>{
  return a + (b * c);
};


const first =hof(3);
const second =first(4);
const third = second(5);
console.log(third)



const first =hof(3); //a에 3을 대입해서 (3)을 날림
const first =(b) => (c)=>{
  return 3 + (b * c);
};

const second = first(4); b에 4을 대입해서 (3)을 날림
const second = (c)=>{
  return 3 + (4 * c);
};


const third = second(5); c에 5를 대입해서 (5)를 날림 
const third = 3 + (4 * 5); //return 날리고 { } 날리고,

const third = 23;

if문 중첩제거 -원본

const onClickNumber = (event) =>{
    if(operator){
        if(!numTwo){
            $result.value ='';
        }
        numTwo +=event.target.textContent
    } else{//연산자가 비어있으면
        numOne +=event.target.textContent
    }
    $result.value+=event.target.textContent
   
};

if문 중첩제거 -1단계

const onClickNumber = (event) =>{
    if(operator){
        if(!numTwo){
            $result.value ='';
        }
        numTwo +=event.target.textContent
        $result.value+=event.target.textContent
    } else{//연산자가 비어있으면
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
    }
   
   
};

▶ 1. 바깥쪽의 if문 또는 else문이 끝난 다음에 나오는 공통된 절차가 있는 경우 공통된 절차를 각 분기점 내부에 넣는다.

그리고 그 공통되었던 요소는 삭제 해준다.

if문 중첩제거 -2단계

const onClickNumber = (event) =>{
    if(operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        
    } else{//연산자가 있으면 
        if(!numTwo){
            $result.value ='';
        }
        numTwo +=event.target.textContent
        $result.value+=event.target.textContent
    }
   
};

▶ 2. 안쪽의 if문과 바깥쪽 if문에 대응되는 else구문 중에서

짧은 구문이 먼저 실행되도록 안쪽의 if문을 작성한다. (switch)

▶ 안쪽 if문이 바깥쪽 if문에 대응되는 else구문과 비교해서 안쪽 if문이 더 짧은 경우 별도의 조치 필요X

if문 중첩제거 - 3단계

const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        
    } else{//연산자가 있으면 
        if(!numTwo){
            $result.value ='';
        }
        numTwo +=event.target.textContent
        $result.value+=event.target.textContent
    }
   
};

▶ 3. 본래의 바깥쪽if문을 부정한다.

if문 중첩제거 - 4단계

const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
        
    } else{//연산자가 있으면 
        if(!numTwo){
            $result.value ='';
        }
        numTwo +=event.target.textContent
        $result.value+=event.target.textContent
    } 
};

▶ 4. 본래의 바깥쪽 if문을 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.

if문 중첩제거 - 5단계

const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
    }    
    //연산자가 있으면 
    if(!numTwo){
        $result.value ='';
    }
    numTwo +=event.target.textContent
    $result.value+=event.target.textContent
       
};

▶ 5. else문을 제거한다. if문을 좌측으로 정렬한다. (이때 중첩하나가 제거된다.)

쿼즈2- 원본→if중첩문 제거하기

function test(){
    let result = '';
    if(a) {
        if(!b){
            result = 'c';
        }

    } else{
        result ='a';
    }
    result += 'b';
    return result;
}

쿼즈2-1단계

function test(){
    let result = '';
    if(a) {
        if(!b){
            result = 'c';
          
        }

        result += 'b';
        return result;
    } else{
        result ='a';
        result += 'b';
        return result;
    }
  
    
}

▶ 1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

쿼즈2-2단계

function test(){
    let result = '';
    if(!a) {
        result ='a';
        result += 'b';
        return result;
      
    } else{
        if(!b){
            result = 'c';
          
        }

        result += 'b';
        return result;
    }
    
}

▶ 2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.(if조건문을 부정한 후 if문과 else문을 switch)

쿼즈2-3단계

function test(){
    let result = '';
    if(!a) {
        result ='a';
        result += 'b';
        return result;
      
    } else{
        if(!b){
            result = 'c';
          
        }

        result += 'b';
        return result;
    }
    
}

▶ 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.

▶ 위의 케이스의 경우 이미 return문에 있으므로 별도로 return을 붙여 줄 필요가 없다.

쿼즈2-4단계

function test(){
    let result = '';
    if(!a) {
        result ='a';
        result += 'b';
        return result;
      
    } 

    if(!b){
        result = 'c';
        
    }

    result += 'b';
    return result;
        
}

▶ 4. else문을 제거한다. (이때 중첩하나가 제거된다.)

계산기 -8단계 →if문 중첩 제거가 완료

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
    }    
    //연산자가 있으면 
    if(!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);

document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

계산기- 9단계 → operator고차함수 추가

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
    }    
    //연산자가 있으면 
    if(!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){
        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', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

계산기- 10단계(계산구현)

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
    }    
    //연산자가 있으면 
    if(!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){
        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 =parseInt(numOne) - parseInt(numTwo);
                break;

            case '*':
                $result.value =parseInt(numOne) * parseInt(numTwo);
                break;

            case '/':
                $result.value =parseInt(numOne) / parseInt(numTwo);
                break;
            default:
                break;
            }    
    } else{
          alert('숫자를 먼저 입력하세요');
    }
});
document.querySelector('#clear').addEventListener('click', ()=>{});

계산기- 11단계(clear)

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
    }    
    //연산자가 있으면 
    if(!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){
        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 =parseInt(numOne) - parseInt(numTwo);
                break;

            case '*':
                $result.value =parseInt(numOne) * parseInt(numTwo);
                break;

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

숙제1- switch문을 if문으로 고치기

let numOne ='';
let operator='';
let numTwo='';
const $operator = document.querySelector('#operator');
// console.log($operator)
const $result = document.querySelector('#result');
// console.log($result)
const onClickNumber = (event) =>{
    if(!operator){//연산자가 비어 있으면 
        numOne +=event.target.textContent
        $result.value+=event.target.textContent
        return
    }    
    //연산자가 있으면 
    if(!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){
        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){
        if(operator==='+'){
            $result.value =parseInt(numOne) + parseInt(numTwo);
           
        }
        else if(operator ==='-'){
            $result.value =parseInt(numOne) - parseInt(numTwo);
           
        }
        
        else if(operator ==='/'){
            $result.value =parseInt(numOne) / parseInt(numTwo);
          
        } 
          
        else if(operator ==='*'){
            $result.value =parseInt(numOne) * parseInt(numTwo);
           
        } 
          
    } else{
          alert('숫자를 먼저 입력하세요');
    }
});
document.querySelector('#clear').addEventListener('click', ()=>{
    numOne = '';
    operator ='';
    numTwo = '';
    $operator.value = '';
    $result.value = '';
});

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

'렛츠기릿 자바스크립트' 카테고리의 다른 글

렛츠기릿 자바스크립트 8 - 숫자야구게임(for문, indexOf()) (0)	2023.01.14
렛츠기릿 자바스크립트 7 (계산기) -self(연달아 계산) (0)	2023.01.09
렛츠기릿 자바스크립트 6 (쿵쿵따) - self (0)	2023.01.08
렛츠기릿 자바스크립트 6 (끝말잇기) (0)	2023.01.08
렛츠기릿 자바스크립트 5 (0)	2023.01.08