변수문법과 Dark mode 버튼 만들기

다크모드 버튼 눌렀을 때 

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

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

 

<span class="badge bg-dark">Dark 🔄</span>

 

(ms-auto mx-3 이런 클래스명도 추가하면 우측정렬 잘됨) 

 

버튼 1회 누르면 안의 글씨가 Light로 바뀜

2회 누르면 다시 Dark

3회 누르면 다시 Light

4회 누르면 다시 Dark

...

 

 

var 나이 = 20;
var 이름 = 'kim';

문자, 숫자 말고도

document.getElementById() 이것도 변수에 넣어쓰기 가능

영어로 작명시 camelCase로 작성

var 인삿말 = '안녕하세요 반갑습니다 오랜만인데 그동안 잘지냈니';

긴 문장을 하드코딩할 필요없이 줄여줄수 있음

 

var count = 0;

 

기존 값에 +1 하고 싶으면 

변수명++

변수 += 1

변수 = 변수 + 1

 

var count = 0;

$('.badge').on('click', function(){
  count += 1;
  if (count가 홀수면) {
    내부글자를 Light로 변경
  } else {
    내부글자를 Dark로 변경
  }
});

 

count += 1; 은 버튼누를 때 마다 버튼누른 횟수를 계속 업데이트함

 

var count = 0;

$('.badge').on('click', function(){
  count += 1;
  if (count % 2 == 1) {
    $('.badge').html('Light');
  } else {
    $('.badge').html('Dark')
  }
});

 

jQuery로 찾은 요소 innerHTML을 바꾸고 싶으면 .html('바꿀내용') 쓸 수 있습니다.

 

실제 다크모드처럼 사이트가 시커멓게 변하는건

1. 부착하면 시커매지는 class 하나를 만들어놓고

2. 버튼누를 때 class를 부착

 

var 나이;
var 이름;
나이 = 20;
이름 = 'kim';

 

위 2줄은 선언

아래 2줄은 할당

var는 재선언, 할당, 재할당 가능

 

let 거주지 = 'seoul';
const 가격 = 3000;

 

let, const는 재선언 불가능

let은 재할당 가능

 

코드 천줄 만줄 짜다보면 나중에 변수만든거 또 만들고 그런 실수가 있습니다.

값을 수정하면 큰일나는 변수들을 만들고싶을 때 유용합니다.

나중에 값을 변경하는 실수를 방지하고 싶을 때 쓰면 됩니다.

 

 

 

var 변수는 유연해서 재선언 재할당이 자유롭습니다. 

 

 

if (true) {
  let 이름 = 'kim';
}

console.log(이름); //없다고 나옴

 

let과 const는 줄괄호가 범위임

 

if, function, for반복문등의 중괄호를 벗어나면 없다고 나옴

 

느낀점

 

var let const 의 사용에 대해 공부함

 

실제로 위 코드를 작성해보았을때 if문을 jQuery 아래 따로 작성하여서 Dark버튼 클릭시 변환되지않았었음