자바스크립트 DOM

    [JavaScript] ⑦ 자바스크립트 DOM 이벤트 핸들링

    이벤트(event)란 애플리케이션에서 발생하는 사용자의 마우스 클릭 click, 키보드 입력 keydown 등과 같은 활동이며, 이벤트 드리븐 프로그래밍(Event-driven Programming)은 이러한 이벤트를 중심으로 프로그램을 제어하는 방식을 일컫는다. 이벤트 핸들러란? 특정한 이벤트가 발생했을 때, 호출되는 코드(대부분의 경우 함수)를 이벤트 핸들러(Event Handler)라 한다. 아래의 코드는 클릭 시 배경 색상을 임의로 바꾸는 이벤트 핸들러를 구현한 것이다. 이벤트 핸들러 추가는 어트리뷰트 방식, 프로퍼티 방식, addEventListener메서드 방식으로 할당할 수 있는데, 오늘날에는 addEventListener 방식을 가장 많이 사용한다 아래 버튼 클릭 시 이벤트 리스너의 cli..


    [JavaScript] ⑥ 자바스크립트 DOM 뜻과 활용 방법

    DOM이란 무엇일까? 브라우저의 콘솔 창을 켜고 document라고 입력하면 해당 웹페이지의 HTML 객체가 반환된다. 이번 포스팅에서는 MDN 문서를 바탕으로 DOM의 뜻과 간단한 활용 예시를 정리해 보려고 한다. DOM이란? DOM이란 The Document Object Model의 약자로 HTML 문서(Document) 객체(Object)와 상호작용하는 모델(Model)을 의미한다. 즉, DOM을 통해 HTML 요소를 객체처럼 접근해 다룰 수 있다. document.title // 현재 웹페지의 제목에 접근할 수 있다 document.title = "New Title" // 웹페이지의 제목을 변경할 수 있다! 브라우저와 DOM 브라우저는 HTML 문서를 파싱하여 DOM을 생성한다. 이를 통해 HTM..