자바스크립트 Object Model

object model

자바스크립트 오브젝트 모델(Javascript Object Model)은 자바스크립트에서 객체 기반의 구조와 프로그래밍 모델을 의미합니다.

이 모델은 웹 페이지의 요소를 객체로 취급하여, 자바스크립트를 통해 동적으로 웹 페이지의 내용, 구조 및 스타일을 조작할 수 있는 기능을 제공합니다. 자바스크립트 오브젝트 모델은 크게 문서 객체 모델(DOM)과 브라우저 객체 모델(BOM) 두 가지 주요 컴포넌트로 구성됩니다

문서 객체 모델(DOM)

•  HTML 및 XML 문서의 구조적 표현을 메모리에 로드하는 방식 
• 웹 페이지를 객체의 트리 구조로 나타냅니다. 각 노드는 문서의 한 부분(예: 요소, 속성, 텍스트 등)을 나타냅니다.
• DOM을 통해 자바스크립트는 웹 페이지의 요소를 찾아내고, 내용을 변경하거나, 새 요소를 추가하고, 이벤트 리스너를 등록하는 등의 조작을 수행할 수 있습니다.

브라우저 객체 모델(BOM)

• BOM은 브라우저의 창이나 프레임을 포함한 웹 페이지의 환경을 다루는 객체 모델입니다.
• BOM을 통해 자바스크립트는 URL을 변경하거나, 브라우저 창의 크기를 조정하고, 새 창을 열거나, 사용자의 화면 해상도 같은 정보에 접근할 수 있습니다.
• BOM의 핵심 객체 중 하나는 window 객체로, 브라우저 창을 대표하며, 다양한 메소드와 속성을 제공합니다.
  예를 들어, alert(), confirm() 및 prompt() 메소드는 모두 window 객체의 메소드입니다.

자바스크립트 오브젝트 모델의 활용

• 동적 콘텐츠 생성: 사용자의 입력에 따라 새로운 HTML 요소를 생성하고 페이지에 추가.
• 이벤트 처리: 사용자의 클릭, 키보드 입력, 마우스 이동 등의 이벤트에 반응하여 특정 동작을 실행.
• 페이지 스타일 동적 변경: 사용자의 행동이나 특정 조건에 따라 스타일 속성을 변경하여 페이지의 외관을 조정.
• 데이터 저장 및 접근: 로컬 스토리지나 세션 스토리지를 활용하여 사용자의 데이터를 저장하고 접근.

 

브라우저 객체 모델(Browser Object Model, BOM)

 

브라우저 객체 모델 ( BOM) 이란?

웹 브라우저의 창이나 프레임을 포함한 웹 페이지를 둘러싼 모든 객체에 대한 접근과 조작을 가능하게 하는 모델.
BOM은 브라우저 창과 관련된 객체들을 제어하는 데 중점을 둡니다.
웹 브라우저를 제어하기 위해 브라우저가 제공하는 다양한 객체들의 집합입니다.

이 모델을 통해 자바스크립트는 웹 브라우저의 창을 관리하고, 웹 페이지의 URL을 조작하며, 사용자의 브라우저 정보를 얻는 등의 작업을 할 수 있습니다.

BOM의 주요 구성 요소

1. window 객체: BOM의 최상위 객체로, 브라우저 창을 나타냅니다. 모든 전역 변수, 객체, 함수는 자동으로 window 객체의 속성과 메서드가 됩니다. alert(), confirm(), prompt(), setTimeout(), setInterval() 등의 함수가 이에 속합니다.
   
   
2. navigator 객체: 브라우저의 정보를 담고 있으며, 브라우저의 종류, 버전, 운영 체제 등을 파악할 수 있습니다.
   
   
3. screen 객체: 사용자의 화면(모니터) 정보를 제공합니다. 화면의 너비와 높이 등을 알 수 있어, 최적의 디스플레이를 위한 참조로 사용될 수 있습니다.
   
   
4. location 객체: 현재 창의 URL을 나타내며, URL을 분석하거나 웹 페이지를 다른 주소로 리다이렉트하는 데 사용됩니다.
   
   
5. history 객체: 브라우저 세션 내의 방문 기록을 다룹니다.
   예를 들어, history.back() 메소드를 사용하여 이전 페이지로 돌아갈 수 있습니다.

BOM의 활용

• 웹 페이지 리다이렉션: 사용자를 다른 페이지로 자동으로 이동시키고 싶을 때 location 객체를 사용.
• 브라우저 감지: 사용자가 어떤 브라우저와 운영 체제를 사용하는지 파악하고, 최적화된 경험을 제공하기 위해 navigator 객체를 활용
• 사용자 환경 설정: 사용자의 화면 크기를 고려하여 콘텐츠를 동적으로 조정하기 위해 screen 객체의 정보를 사용
• 세션 내 이동 제어: 사용자가 웹 애플리케이션 내에서 앞뒤로 이동할 수 있도록 history 객체를 사용.
• 새 창 열기: window.open() 메소드를 사용하여 새로운 브라우저 창이나 탭을 열 수 있음
• 브라우저 정보 확인: navigator.userAgent 속성을 조회하여 현재 브라우저의 종류와 버전을 확인.
• URL 조작: location.href 속성을 변경하여 사용자를 다른 페이지로 리디렉션.
• 이전 페이지로 이동: history.back()을 호출하여 사용자를 이전 페이지로 이동.