[javascript] step05. operator (연산자) : 증감 연산자 / example.3~4

5. 증감 연산자

    <h1>증감 연산자 테스트</h1>
    <script>
        /*
            5. 증감 연산자
            ++ => 1 증가 시키기
            -- => 1 감소 시키기
        */
       /*
       let num = 0;
       num = num + 1;
       // 위에 줄은 ++num; 과 같음
       // num++; 도 같음
       num += 1;

       let result = num + 10;
       // 위의 것들 없이 아래 단독으로도 가능
       let result = ++num + 10;
       */
      let num=0;
      ++num;
      num++;

      let num2=0;
      --num2;
      num2--;

      let a=0;
      let result = ++a + 10;
      // 증감 연산자를 변수 뒤에 붙이면 연산의 우선순위가 가장 뒤쳐진다.(나중에 연산된다.)
      let b=0;
      let result2 = b++ +10;
    </script>

1. 가장 마지막 예시를 짚고 넘어가야 한다.
   num++ 와 ++num은 같은 결과를 낸다고 했지만, 두 result는 서로 다른 결과를 낸다. (11 / 10)
2. ++a의 경우는 증감 연산 -> 산술 연산 -> 대입 연산 순으로 진행되어 11이다.
   b++의 경우는 산술 연산 -> 대입 연산 -> 증감 연산 순으로 진행되어 10이다.
   하지만 a와 b는 동일하게 1의 값을 가진다.
   이것은 증감 연산자를 변수 뒤에 붙이면 연산의 우선 순위가 가장 뒤쳐지기 때문이다.
3. 이런 식을 쓸 일은 없긴 하겠지만, 혹시 모르기 때문에 적어둔다.
4. 이 ++는 이전 loop에서도 본 적이 있다. 이 내용을 loop에 추가할 것이다.

 

example.3~4

    <h1>대입연산자 예제</h1>
    <input type="text" id="inputNum" placeholder="누적시킬 숫자 입력...">
    <button id="addBtn">누적하기</button>
    <p id="result">0</p>
    <script>
        /*
            input element에 number를 입력하고
            누적하기 버튼을 눌렀을 때
            p element의 innerText로 총 누적된(합) number를 출력하는 code를 작성해보세요.
        */
        let input = document.querySelector("#inputNum");
        let result = document.querySelector("#result");
        let add = 0
        document.querySelector("#addBtn").addEventListener("click", function(){

            add += Number(input.value);
            result.innerText = add;
        })

        /*
        let sum=0;
        document.querySelector("#addBtn").addEventListener("click", functio(){
            // 1. 입력한 숫자를 읽어온다.
            const num=Number(document.querySelector("#inputNum").value);
            // 2. 입력한 숫자를 변수에 누적시킨다.
            sum = sum + num;
            sum += num;
            // 3. 변수에 누적시킨 값을 p요소의 innerText로 출력한다.
            document.querySelector("#result").innerText = sum;
        })
        */
    </script>

 

 

    <h1>증감 연산자, 대입 연산자 활용</h1>
    <button id="sumBtn">1~100 사이의 정수 중에서 홀수의 총합 구하기</button>
    <p id="result">0</p>
    <br>
    <input type="text" id="inputNum" placeholder="1~100 사이 정수를 입력하세요...">
    <fieldset id="field"> 
        <input type="radio" name="number" value="odd" id="odd"> 홀수만
        <input type="radio" name="number" value="even" id="even"> 짝수만
        <input type="radio" name="number" value="all" id="all"> 전부다
    </fieldset>   
    <script>
        /*
            id가 sumBtn인 button을 눌렀을 때,
            1~100 사이의 정수 중에서 홀수의 총합을 구해서
            p 요소의 inner text로 출력하는 code를 작성해보세요.
        */
        document.querySelector("#sumBtn").addEventListener("click", function(){
            sum = 0;
            input = Number(document.querySelector("#inputNum"));
            for(let i=1; i<=100; i++){
                if(i%2==1){
                    sum += i;
                }
            }
            document.querySelector("#result").innerText = sum;
        })

///////////////////////////////

        document.querySelector("#sumBtn").addEventListener("click", function(){
            sum = 0;
            input = Number(document.querySelector("#inputNum"));
            for(let i=1; i<=100; i++){
                if(odd.checked==true && i%2==1){
                    sum += i;
                } else if(even.checked==true && i%2==0){
                    sum += i;
                } else if(all.checked==true){
                    sum += i
                }
            }
            document.querySelector("#result").innerText = sum;
        })
        /* 선생님
        document.querySelector("#sumBtn").addEventlistenr("click", function(){
            let sum=0;
            for(let i=1; i<100; i+=2){
                // i가 1, 3, 5, 7, 9, ..., 97, 99 이렇게 변하도록 for문 구성
                sum += i;
            }
            // p element의 innerText로 sum을 출력하기
            document.querySelector("#result").innerText = sum;
        })

        */
    </script>