JavaScript36 클릭 이벤트가 상위 요소로 전파되는 것을 방지하는 방법 Calendar June 2023 SUN MON TUE WED THU FRI SAT .calendar { visibility: hidden; position: absolute; top: 31px; width: var(--calendar-width); height: calc(var(--calendar-width) * 1.2); border-radius: 10px; box-shadow: 0 0 20px gray; } .active { visibility: visible; } 현재 '.calendar' 클래스를 가진 요소는 css 에서 visible: hidden 처리를 해두어 보이지 않는 상황이고, Select date라고 적혀있는 input 태그를 클릭하면 '.calendar' 클래스를 가진 요소에 '.a.. 2023. 6. 12. element.classList.add()와 element.classList.toggle()의 차이점 특정 클래스의 여부에 따라 네비게이션 메뉴가 열렸다 닫히는 동작을 구현하던 중 이상한 점을 발견했다. function addClass() { nav.classList.toggle('active'); } 나는 화살표를 클릭하면 active 클래스를 추가해주는 함수를 만들어서 네비게이션 메뉴가 열리는 동작을 구현했다. 그런 다음 다시 네비게이션 메뉴를 닫으려면 removeClass 함수를 구현하여 nav.classList.remove('active')를 구현해야 한다고 생각했는데, removeClass 함수를 구현하지 않아도 네비게이션이 닫히는 동작이 이루어지는 것에 이상함을 느꼈다. 혹시 몰라 nav.classList.add()로 함수의 코드를 변경했더니 네비게이션 메뉴가 열리는 것만 동작하게 되었다. a.. 2023. 5. 25. 객체와 배열 미리보기 💡 객체와 배열은 원시타입이 아닌 참조 (reference) 타입 앞서 다룬 자료형들은 원시 (primitive) 타입 1. 객체 미리보기 자바스크립트에서 원시 타입이 아닌 모든 데이터는 근본적으로 객체 복합적인 정보를 프로퍼티(property)로 저장하는 자료형 - 키와 값의 조합 const objName = { key1: value1, key2: value2, ... }; // ⚠️ 블록이 아님! const person1 = { name: '김철수', age: 25, married: false }; console.log(typeof person1); // object console.log(person1); // {name: '김철수', age: 25, married: false} (1) 프로퍼티 접근.. 2023. 3. 5. 그 외의 연산자들 1. 기타 연산자들 (1) 쉼표 연산자 왼쪽부터 차례로 실행, 마지막 것 반환 let x = 1, y = 2, z = 3; console.log(x, y, z); // 1 2 3 // 마지막으로 실행한 것 반환 console.log( (++x, y += x, z *= y) ); // 12 - console.log() 안의 내용을 () 로 묶어줬기 때문에 마지막으로 계산된 것을 반환함 (2) ?? : null 병합 연산자 || 와 달리, falsy 가 아닌 null 또는 undefined 만 대체함 값이 null 이나 undefined 인지 여부를 알고 싶을 때 사용 let x; x ?? console.warn(x, 'x에 값이 없습니다.'); // undefined x에 값이 없습니다. x = 0; x .. 2023. 3. 5. 이전 1 2 3 4 ··· 9 다음
