TIL - 220623

JS (1)

[오늘 공부한 내용]

(1) jQury

$('.hello').html('텍스트'); 
$('.hello').css('color', 'red');
$('.test-btn').on('click', function(){

});

(2) 다크모드

var count = 0;
var badge = document.querySelector(".badge");
var body = document.querySelector("body");
badge.addEventListener("click", function () { // badge class를 클릭할때마다
	count += 1; // count를 1씩 증가시킨다
	if ((count % 2) == 0) { // count가 짝수라면 화이트모드
    body.style.backgroundColor = "white";
   	badge.innerHTML = "Dark 🔄";
    badge.style.color = "white";
    } else { // count가 홀수라면 다크모드
    body.style.backgroundColor = "black";
    badge.innerHTML = "White 🔄";
    badge.style.color = "white";
    }
});

(3) 변수
1. var 대신 let, const 문법 써도 똑같이 변수생성이 가능
2. let, const는 재선언 불가능 재선언하면 에러
3. const는 재할당도 불가능 재할당하면 에러

(4) 좋은 관습 : 반복적인 셀렉터는 변수에 넣어서 쓰기

var 버튼 = $('.tab-button');

버튼.eq(0).on('click', function(){
  버튼.removeClass('orange');
  버튼.eq(0).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(0).addClass('show');
})

(5) 이벤트 버블링 함수
어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고함
click이라는 이벤트로 예를 들어보면, HTML 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭된다는 말

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target; // 유저가 실제로 누른거 알려줌 (제일 중요!!)
  e.currentTarget; // 이벤트리스너 달린 곳 알려줌
  e.preventDefault(); // 이벤트 기본 동작을 막아줌
  e.stopPropagation(); // 내 상위요소로의 이벤트 버블링을 중단해줌
})

오늘 만든 것