1-13강 : 변수 문법과 Dark mode 버튼 만들기

버튼 누르면 내부 글자를 Dark -> Light로 변경해보자

2회 누르면 다시 Dark

3회 누르면 다시 Light

......

->버튼 누르면 내부 글자를 Dark/Light 번갈아가며 바뀌게 해보자

-클릭 횟수가 홀수면 내부 글자를 light로 변경

-클릭 횟수가 짝수면 내부 글자를 Dark로 변경

 

클릭 횟수가 몇 번 눌렀나 기록해야 할 듯?

 

변수 문법

: 자료 잠깐 저장

 

var 변수명=넣을 자료;

 

그래서 변수 왜 쓰는데?

1. 길고 복잡한 자료들 저장 가능

2. 특정 값을 기억하게 만들고 싶으면

 

뱃지 클릭횟수를 기록해보자.

 

변수에 +1하는 법

변수 ++

변수+=1

변수=변수+1

 

---

 

-오늘의 숙제-

다크모드 버튼 눌렀을 때 

버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~

버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~

 

    <script>

        //다크 모드 배지 1회 클릭시 내부글자를 light로 변경
        //다크 모드 배지 2회 클릭시 내부글자를 dark로 변경
        //...

        var count=0; //변수에 자료 잠깐 저장
        
        document.getElementById('badge').addEventListener('click', function(){
          count+=1; //count 변수 값에 1 더하기
        
        if(count%2==1){ //버튼 클릭 횟수가 홀수
          document.getElementById('badge').innerHTML='Light🔄';
        } 
        else{ //버튼 클릭 횟수가 짝수
          document.getElementById('badge').innerHTML='Dark🔄';
        }

      });

 

클릭에 따라 글자가 잘 바뀌는 것을 확인 가능하다