HTML/CSS 실습을 끝내고 JavaScript를 사용해서 연결할 차례인데 예시로 준 Javascript를 파헤쳐보려한다!
window.onload = function () { // window.onload라는 함수를 오버라이딩을 해주면 해당 함수 내 코드 스크립트는 웹브라우저 내 모든 요소가 준비되어야 실행을 한다.
popupOpen();
}
const popupOpen = () => {
document.querySelector('.dimmed-layer').classList.remove('hidden');
document.querySelector('.order-type-popup').classList.remove('hidden');
}
const popupClose = () => {
document.querySelector('.dimmed-layer').classList.add('hidden');
document.querySelector('.order-type-popup').classList.add('hidden');
}
// 메뉴 리스트 토글
const btnToggle = document.querySelectorAll('.btn-toggle');
const toggleMenuList = (e) => {
e.currentTarget.closest('.menu-list-area').classList.toggle('is-closed');
}
btnToggle.forEach(function (e) {
e.addEventListener('click', toggleMenuList);
})우선 window.onload를 사용한 이유부터 알아보면
<script>
var a = document.getElementById('hi').innerHTML = "hello";
</script>
<span id="hi"> hi </span>일 때 getElementById('hi')가 html 내부에 있는 hi가 실행되기전에 먼저 실행되기 때문에 문제가 발생하게 된다. 그렇다면 html보다 밑에 있으면 상관없지 않나?라고 생각하게 되지만 html 밑에 스크립트를 쓰게 된다면 가독성이 떨어지고 보기에도 깔끔해지지 않게 된다.
그렇기에 이런 불편을 해결하기 위해 문서가 준비된 상황 이후에 발동하게만 한다면 문서 앞에 선언해도 상관없게 되는데 이때 window.onload를 사용하게 된다.
다음은 popupOpen과 popupClose에 대해서다
const popupOpen = () => {
document.querySelector('.dimmed-layer').classList.remove('hidden');
document.querySelector('.order-type-popup').classList.remove('hidden');
}
const popupClose = () => {
document.querySelector('.dimmed-layer').classList.add('hidden');
document.querySelector('.order-type-popup').classList.add('hidden');
}우선 이곳에서 쓰인 querySelector와 classList, add, remove를 알아보자.
querySelector : MDN에서는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element 반환한다. 일치하는 요소가 없으면 null을 반환한다다.
querySelector('.dimmed-layer')는 dimmed-layer를 .을 사용하여 클래스명을 찾고
classList : 요소 특성의 라이브 컬렉션을 Element.classList반환하는 읽기 전용 속성이다.
classList는 class를 관리해주는 DOM 프로퍼티이고 개별 class를 관리할 때 편리하다. 또한 classList는 add, remove, contains, toggle 등의 함수를 사용할 수 있다. 따라서 .classList.remove('hidden');는 dimmed-layer클래스에서 hidden이란걸 찾아 삭제하겠다라는 말이 된다라고 생각하여 hidden이 사라지면서 숨겨져 있던 popup이 나오게 하는 스크립트라고 이해를 하였고 반대로 add일 때도 똑같이 작동한다고 생각한다.
