JS - 변수문법과 Dark mod 버튼 만들기

신혜원·2023년 5월 2일
0

JavaScript

목록 보기
12/39
post-thumbnail


요런거 만들어보자

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

버튼 하나 만들고
버튼을 1회 누르면 안의 글씨가 Light로
2회 누르면 다시 Dark
3회 누르면 다시 Light
4회 누르면 다시 Dark
...
이런 기능 만들자

자료를 잠깐 저장할 수 있는 변수문법

자료를 잠깐 저장하고싶으면 변수문법을 사용하면 된다
var 변수명 = 넣을 값;

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

"변수는 왜 쓰나요?"

  1. 길고 복잡한 자료를 잠깐 변수에 저장해서 쓰면 편하다
var 인삿말 = '안녕하세요 반갑습니다 오랜만인데 그동안 잘지냈니';

인삿말 한 단어로 정리 끝나버림

  1. 특정 값을 기록하고 싶을 때
var count = 0;

이렇게 버튼 누른 횟수를 어딘가에 기록해야할 때

변수에 +1 하는 법

기존값에 +1 하고싶으면
변수명++
변수 += 1
변수 = 변수 + 1

셋 중 하나 쓰면 되지롱

var count = 0;
count++;
console.log(count);

📒오늘의 숙제 :

다크모드 버튼을 눌렀을 때
버튼 누른 횟수가 홀수면 내부 글자를 Light 로 변경
벼튼 누른 회수가 짝수면 내부 글자를 Dark 로 변경

<script>
// badge 클릭 횟수가 홀수면 클릭 시 내부 글자를 Light 로 변경
// badge 클릭 횟수가 짝수면 클릭 시 내부 글자를 Light 로 변경

var count = 0;
$(".badge").on("click", function () {
count += 1;
console.log(count);
if (count % 2 === 0) {
$(".bright-text").text("Light 🔄");
} else {
$(".bright-text").text("Dark 🔄");
}
});
</script>

0개의 댓글