반응형 이벤트4 [JavaScript 문법 ] 39일차: 이벤트 처리 기초 이벤트란?이벤트(Event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 사건을 의미합니다. JavaScript는 이러한 이벤트를 감지하고 처리할 수 있는 기능을 제공합니다. 대표적인 이벤트로는 클릭, 입력, 마우스 이동 등이 있습니다.이벤트 리스너 등록이벤트 리스너(Event Listener)는 특정 이벤트가 발생했을 때 실행할 코드를 정의합니다. 이벤트 리스너를 등록하기 위해 addEventListener 메서드를 사용합니다. 기본 사용법element.addEventListener(eventType, eventHandler);element: 이벤트를 감지할 DOM 요소eventType: 감지할 이벤트 유형 (예: 'click', 'input')eventHandler: 이벤트가 발생했을 때 실행할 함.. 2024. 9. 9. [JavaScript 문법] 38일차: DOM 조작 심화 클래스 조작클래스 조작은 요소의 클래스를 추가, 제거, 토글하여 스타일을 동적으로 변경할 수 있습니다. 이를 위해 classList 객체를 사용합니다.add 메서드classList.add 메서드는 요소에 클래스를 추가합니다.예제This is a box.remove 메서드classList.remove 메서드는 요소에서 클래스를 제거합니다.예제This is a box.toggle 메서드classList.toggle 메서드는 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다.예제This is a box.contains 메서드classList.contains 메서드는 클래스가 존재하는지 확인합니다.예제This is a box.스타일 변경요소의 스타일을 동적으로 변경하기 위해 style 객체를 사용할 수 있.. 2024. 9. 8. [JavaScript 문법] 22일차: 콜백 함수 콜백 함수란?콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어 나중에 호출되는 함수입니다. 비동기 작업을 처리하거나, 특정 이벤트가 발생할 때 실행되는 코드를 정의하는 데 유용합니다.콜백 함수의 기본 개념콜백 함수는 특정 작업이 완료되었을 때 호출되는 함수입니다. JavaScript에서는 주로 비동기 작업에서 콜백 함수를 사용합니다.예제: 콜백 함수 사용function fetchData(callback) { setTimeout(() => { let data = 'Fetched Data'; callback(data); }, 1000);}function displayData(data) { console.log(data);}fetchData(displayData); /.. 2024. 8. 22. Porfolio Page - (6) Javascript: DOM Index 1. DOM 2. Node 3. CSSOM 4. Rendering 5. 4 6. 4 7. 4 8. 4 9. 4 10. 4 11. 4 12. 4 13. 4 14. 4 15. 4 16. 4 Reference 1. DOM DOM(Document Object Model) - 2. Node DOM Node - EventTarget을 상속 (EventTarget Method) - EventTarget.addEventListener(): 이벤트 추가 - EventTarget.removeEventListener(): 이벤트 제거 - EventTarget.dispatchEvent() (Node Property) - (Node Method) - 3. CSSOM CSSOM(CSS Object Model) - CS.. 2024. 2. 11. 이전 1 다음 반응형
