변수

(실습) - 다크모드 만들기

원래 코드짤게 많으면 가장 간단한 것부터 하나씩 구현해보자

버튼 1회 누르면 안의 글씨가 Light로 바뀜
2회 누르면 다시 Dark
3회 누르면 다시 Light
4회 누르면 다시 Dark
.
.
.

그러려면 버튼누른 횟수를 변수에 저장할 필요!!생긴다!!

var 변수명 = 넣을값;

• 문자, 숫자 말고도 거의 모든 타입 가능
  document.getElementById() 이것도 변수에 넣어쓰기 가능
• 영어 작명시: 함수 작명하듯 camelCase!

var count = 0;
    //다크모드 전환
    $('.badge').on('click', function () {
      count++;
      if(count % 2 == 0){
        $('.badge').text('Dark');
        document.querySelectorAll('.main-bg')[0].classList.remove('dark')
      } else {
        $('.badge').text('Light');
        document.querySelectorAll('.main-bg')[0].classList.add('dark')
      }
    })

쓰는 이유

이유1: 길고 복잡한 자료들 저장가능
이유2: 특정 값을 기억하게 만들고 싶으면

선언, 할당, 범위

선언: 변수 만들겠습니다~ var 이름;
할당: 변수에 값을 넣겠습니다~ 이름 = 'kim';
범위:

• 함수 안에서 만들었다면: 사용가능 범위는 함수내부에서만 사용 가능

var let const

[var]

• 재선언 가능
• 재할당 가능
• 범위: function

[let]

• 재선언 불가(코드 천줄 만줄 짜다보면, 나중에 변수까먹고 또 만드는 실수를 방지해줌) - 버그의 온상이라고 함..ㅋㅋㅋ
• 재할당 가능
• 범위:{}

[const]

• 재선언 불가
• 재할당 불가. 고로 변하면 안되는 값을 보관하기 좋음(ex. 상수)
• 범위:{}

• html(), text(), val() 차이: https://yulfsong.tistory.com/37