13강 / 변수문법과 Dark mode 버튼만들기
다크모드 버튼을 만들어봅시다.
현재 사용하고 있는 벨로그 블로그에도 다크모드 기능이 있다.
버튼을 눌러 활성화 시키면 사이트가 까매진다.
오늘 이 기능을 만들어 볼 것이다!
버튼 만들기
<span class="badge bg-dark">Dark 🔄</span>위 버튼 1회 누르면 안의 글씨가 Light로 바뀜
2회 누르면 다시 Dark
3회 누르면 다시 Light
4회 누르면 다시 Dark
...
이런 기능을 만들어보려고 한다.
자료를 잠깐 저장할 수 있는 변수문법
우리는 이전에 변수를 사용했었지만 이번 강의를 통해 변수를 제대로 알아보려고 한다.
자료를 잠깐 저장하고 싶으면 변수문법을 써야한다.
const 변수명 = 넣을값;
let 변수명 = 넣을값;
이렇게 사용하면 된다.
const와 let의 차이는 나중 강의를 통해 배우게 된다. 지금은 그냥 const는 값을 변경할 수 없고 let은 값을 변경할 수 있다고만 생각해 놓자.
변수를 쉽게 이해하기 위한 예시
const 나이 = 20; const 이름 = 'kim';그래서 잠깐 20과 'kim'을 변수에 저장해보았다.
이제 나이, 이름이라고 쓸 때 마다 그 자리에 20과 'kim'이 나온다.
콘솔창에 나이, 이름 출력해보면서 확인해보자
값이 잘 저장되어 있는 것을 볼 수 있다.
- 문자, 숫자 말고도 거의 모든걸 다 집어넣을 수 있다.
document.getElementById()이것도 변수에 넣어쓰기 가능! - 영어로 작명시엔 함수 작명하듯
camelCase로 하면 된다.
함수명 규칙과 마찬가지로 변수명을 지을 때도 규칙이 있다. 아래 사이트들을 참고하여 변수명을 지어보자
변수 규칙 1
변수 규칙 2
그래서 변수는 왜 사용할까?
1. 길고 복잡한 자료가 있으면 잠깐 변수에 저장해서 쓰면 편리하다.
예를 들어 사이트 만드는데
'안녕하세요 반갑습니다 오랜만인데 그동안 잘지냈니' 라는 인삿말이 매우 자주 필요하다고 가정해보자.const 인삿말 = '안녕하세요 반갑습니다 오랜만인데 그동안 잘지냈니';그럴 땐 이렇게 저장해두면
저거 긴 문장이 필요한 부분에서 길게 하드코딩할 필요없이
인삿말이라고 쓰면 끝이니 편리해서 쓰는 것일 뿐이다!
2. 특정 값을 기록하고 싶으면 변수를 사용한다.
예를 들어서 위에서 버튼누른 횟수가 필요하다.
버튼을 1번 누르면 Dark로 글자가 바뀌어야하고
버튼을 2번 누르면 Light로 글자가 바뀌어야하는데
버튼누른 횟수를 어딘가에 기록해놓으면 편리할 것 같다.const count = 0;그럴 때 대충 이런 변수 하나 만들어두고
버튼누를 때 마다 count를 1 증가시키면 되는 것이다.
그래서 변수는 비유하자면 간단한 포스트잇이라고 보면 될 것 같다.
변수에 +1 하는 법
기존 값에 +1 하고 싶으면
변수명++
변수 += 1
변수 = 변수 + 1
셋 중 하나 골라쓰면 된다.
const count = 0;
count++;
console.log(count);한번 위 예시를 콘솔에 출력해보자
0에서 + 1이 되어 1로 바뀐 것을 볼 수 있다.
숙제
다크모드 버튼 눌렀을 때
다크모드 버튼 눌렀을 때
버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~
버튼 누른 횟수가 짝수면 버튼 내부 글자를 Dark로 변경해주세요~
라고 다음시간까지 코드짜오십시오.
버튼 누를 때마다 버튼 글자가 Light, Dark로 차례로 바뀌면 성공입니다
(힌트) 자바스크립트엔 % 연산자라는게 있습니다.
나눈 후 나머지를 구해주는 연산자입니다.
5 % 3 은 2입니다.
7 % 2 는 1입니다.
어떤 숫자를 2로 나눠보면 홀수인지 짝수인지 알 수 있을듯요 아마 초등학교 때 해본듯
버튼 요소를 가져와 변수명 지정
const darkmodeBtn = document.querySelector(".badge");
버튼에 이벤트리스너 부착
darkmodeBtn.addEventListener("click", changeMode)
버튼을 누르면 짝수, 홀수를 파악해 글자를 ligth / dark로 바뀌는 changeMode 함수
let darkCount = 1; function changeMode() { darkCount += 1; if (darkCount % 2 == 0) { darkmodeBtn.classList.remove("bg-dark"); darkmodeBtn.classList.add("bg-light"); darkmodeBtn.style.color = "black"; } else { darkmodeBtn.classList.remove("bg-light"); darkmodeBtn.classList.add("bg-dark"); darkmodeBtn.style.color = "white"; } }참고)
bg-light,bg-dark는 Bootstrap 스타일이 씌워진 것이기 때문에 CSS를 따로 적어주지 않아도 된다.
버튼을 누르면 배경색과 글자색이 바뀌는 것을 볼 수 있다.
14강 / 변수 심화학습시간 & 저번시간 숙제
변수의 선언, 할당, 범위라는 개념
변수쓸 땐 선언과 할당이라는 용어가 있는데
변수만드는걸 선언
변수에 뭐 집어넣는걸 할당이라고 한다.
let 나이;
let 이름;이건 변수의 선언이라고 한다.
let 나이;
let 이름;
나이 = 20;
이름 = 'kim';밑의 2줄은 할당이라고 한다.
- 저렇게 선언만 따로, 할당만 따로 할 수 있다.
- 이미 있는 변수를 재선언도 가능하다.
- 이미 들어있는 값을 등호로 재할당도 가능하다.
재선언, 재할당
위 사이트는 재선언 재할당 부분만 보면 될 것 같다!
function 함수(){
let 나이 = 20;
console.log(나이);//가능
}
console.log(나이);//불가능변수는 사용가능한 범위가 있다.
함수 안에서 변수를 만들었을 경우 함수 안에서만 사용가능하다.(유효범위 Scope)
밖에선 사용불가능하다. 밖에서 출력하면 변수가 정의 안되었다고 에러난다.
반대로 함수 바깥에서 만든 변수는 함수 안에서는 사용가능하다.
Scope
위 사이트를 참고하면 Scope에 대해서 아주 쉽게 이해할 수 있다.
var let const 문법 전부 변수생성 가능
let 거주지 = 'seoul';
const 가격 = 3000;var 대신 let, const 문법 써도 똑같이 변수생성이 가능하다.
근데 let, const는 이런 기능을 제공한다.
let 거주지 = 'seoul';
let 거주지;//에러내줌
let,const는 재선언 불가능하다. 재선언하면 에러를 낸다.Q. 장점이 뭔가요
여러분 코드 천줄 만줄 짜다보면 나중에 변수만든거 또 만들고 그런 실수가 있다.
그걸 미연에 방지해주는 고마운 변수생성 키워드이다.const 가격 = 3000; 가격 = 4000;//에러내줌
const는 재할당도 불가능합니다. 재할당하면 에러를 낸다.Q. 장점이 뭔가요
값을 수정하면 큰일나는 변수들을 만들고싶을 때 유용하다.
나중에 값을 변경하는 실수를 방지하고 싶을 때 쓰면 된다.if (true) { let 이름 = 'kim'; } console.log(이름);//없다고 나옴
let과 const는 범위가 더 좁다. 모든 중괄호가 범위이다.
if, function, 나중에 배울 for 반복문 이런 것은 중괄호가 있다.
중괄호 안에서 만든 let, const 변수의 경우 중괄호를 벗어나면 없다고 나온다.
정리하자면 이렇다.
var 변수는 유연해서 재선언 재할당이 자유롭다.
var를 사용하면 안되는 이유
