반응형 WEB139 [JS] 콘솔 [콘솔 실행방법] 1. 크롬에서 ‘F12’ 누릅니다. 2. 새로 열린 창 상단 패널에서 ‘console’을 누릅니다. [자주 사용하는 콘솔 명령어] 1. console.log() : 제일 많이 사용하는 메서드. printf와 같은 기능이다. 2. console.dir() : parameter로 object를 받으며, 해당 object의 속성과 값들을 확인하기 위해 사용 3. console.count() : 특정 변수에 대한 함수가 몇번 호출이 되는지 카운트하는 메서드 4. console.trace() : 어느 함수를 실행했는지 내역도 함께 출력하기 때문에 디버깅시 유용하다. 5. console.assert() : parameter로 두개의 값을 받는다. 첫번째는 조건식, 두번째는 출력할 문자 또는 obj.. 2023. 10. 29. [js] 버블링과 캡처링 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 캡처링 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 event.stopPropagation() : 버블링 및 캡처링 중단할 때 사용하는 함수 Ex) 클릭해 주세요. 2023. 10. 28. [JS] 이벤트(Event) Event Object(이벤트 객체)란 무엇인가? 이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다. 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어, 이벤트 핸들러에 인자로 암묵적으로 전달된다. 1. 이벤트 추가하기 - addEventListener() 객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다. element.addEventListener(type, eventListener); - type : 이벤트 타입 - eventListener : 이벤트가 발생했을 때 실행할 함수 2. 이벤트 제거하기 - removeEventListener() 이벤트를 삭제할 때는 removeEventListener() 메소드를 사용합니다. el.. 2023. 10. 28. [JS] DOM : 크기와 좌표 window.innerWidth / innerHeight Viewport(현재 화면)의 크기를 얻음 window.scrollX / scrollY Viewport의 현재 스크롤 위치를 얻음 (페이지 좌상단 기준) E.scrollLeft / E.scrollTop 스크롤 요소의 현재 스크롤 위치를 얻음 (요소의 좌상단 기준) window.el = document.querySelector('.scrollElement') el.scrollLeft // 수평 스크롤 위치 el.scrollTop // 수직 스크롤 위치 window.scrollTo() / 스크롤요소.scrollTo() 지정된 위치로 스크롤 하기 대상.scrollTo(X, Y) // 또는 대상.scrollTo({ left: x좌표, top: y좌표, b.. 2023. 10. 28. 이전 1 ··· 10 11 12 13 14 15 16 ··· 35 다음 반응형