[자바스크립트] 브라우저 객체 모델 (1)

저번 시간에는 웹 문서에 삽입된 각 요소를 객체로 인식하고 조작하는 것을 문서 객체 모델(DOM)이라고 배웠습니다. 마찬가지로 웹 브라우저 전체를 객체로 관리하는 것을 브라우저 객체 모델(Browser Object Model)이라고 합니다.

 

이번 시간에는 자바스크립트의 브라우저 객체 모델에 대해서 살펴보도록 하겠습니다. 

 

브라우저 객체 모델

브라우저 객체 모델(Browser Object Model)은 웹 브라우저가 웹 페이지를 표시하고 상호작용하는 방식을 정의하는 개념입니다. 이 모델은 웹 페이지의 다양한 요소와 구성 요소를 프로그래밍적으로 제어하고 조작할 수 있는 방법을 제공합니다.

브라우저 객체 모델은 웹 페이지의 각 요소를 객체로 표현하며, 이러한 객체들은 웹 페이지의 구조와 내용을 나타냅니다. 예를 들어, 문서 내의 요소들을 나타내는 Document 객체, 문단이나 이미지 등을 나타내는 Element 객체 등이 있습니다.

이러한 객체들은 계층 구조를 가지며, 부모-자식 관계를 통해 서로 연결되어 있습니다. 이렇게 구성된 객체 모델을 통해 웹 페이지의 요소들을 선택하고 조작할 수 있습니다. 예를 들어, 자바스크립트를 사용하여 웹 페이지 내의 특정 요소의 속성을 변경하거나, 사용자의 입력에 반응하여 특정 동작을 수행할 수 있습니다.

브라우저 객체 모델은 웹 개발자가 웹 페이지를 동적으로 제어하고 상호작용을 구현하는 데에 매우 유용한 도구입니다.

 

Window 객체

자바스크립트의 Window 객체는 웹 프라우저 창의 상태를 제어하는 객체입니다.

 

Window 객체는 자바스크립트 객체 중 최상위이자 기본이 되는 객체입니다. 이 객체를 통해 다음과 같은 작업을 수행할 수 있습니다.

 

브라우저 창 크기 제어: Window 객체를 사용하여 브라우저 창의 크기를 변경하거나 확인할 수 있습니다.

탐색 기능 활용: Window 객체는 현재 페이지를 새로운 URL로 이동시키거나, 페이지를 새로 고치는 등의 탐색 기능을 제공합니다.

팝업 창 생성: Window 객체를 사용하여 새로운 팝업 창을 열거나 관리할 수 있습니다.

타이머 설정: Window 객체의 타이머 함수를 이용하여 특정 작업이 일정 시간 후에 실행되도록 스케줄링할 수 있습니다.

브라우저 정보 얻기: Window 객체를 통해 브라우저의 정보, 화면 해상도, 사용 가능한 스크린 크기 등을 얻을 수 있습니다.

팝업 차단 확인: 팝업 차단 여부를 확인하거나 관련 설정을 제어할 수 있습니다.

사용자 입력 처리: Window 객체는 사용자의 클릭, 키보드 입력 등의 동작을 감지하고 이에 반응할 수 있습니다.

 

이와 같이 Window 객체는 자바스크립트를 사용하여 웹 페이지 내의 다양한 작업을 수행하는 데 필수적인 역할을 하게 됩니다. 

 

Window 객체 속성

Window 객체에는 웹 브라우저 창과 관련된 여러 가지 속성이 있습니다. 이 속성에 접근해 브라우저 창의 정보를 가져올 수도 있고, 필요하면 값을 바꿀 수도 있습니다. 속성에 접근하는 방법은 객체 이름 뒤에 마침표와 속성 이름을 붙이면 됩니다.

Window 객체에서 많이 사용하는 속성에 대해서 살펴보겠습니다.

• document (문서): 현재 창에 표시되는 문서의 내용과 구조를 나타내는 Document 객체에 접근할 수 있습니다.
• innerWidth / innerHeight (내부 너비 / 내부 높이): 브라우저 창의 내부 영역의 너비와 높이를 나타내는 값입니다.
• outerWidth / outerHeight (외부 너비 / 외부 높이): 브라우저 창의 전체 너비와 높이를 나타내는 값으로, 주소 표시줄 등을 포함한 전체 창의 크기를 의미합니다.
• location (위치): 현재 문서의 URL을 관리하고 변경할 수 있는 Location 객체에 접근합니다.
• navigator (탐색기): 사용자의 브라우저 및 운영체제 정보를 제공하는 Navigator 객체에 접근합니다.
• localStorage / sessionStorage (로컬 스토리지 / 세션 스토리지): 클라이언트 측에서 데이터를 임시 또는 영구적으로 저장하기 위한 스토리지 객체에 접근합니다.
• alert() / confirm() / prompt(): 사용자에게 메시지를 표시하거나 사용자의 선택을 받기 위해 사용되는 다이얼로그 창을 생성합니다.
• open() / close(): 새로운 브라우저 창을 열거나 기존 창을 닫을 수 있습니다.
• setTimeout() / setInterval(): 일정 시간 후에 함수를 실행하거나 일정 간격으로 함수를 반복 실행하는 타이머 함수를 설정합니다.
• scrollX / scrollY: 문서의 가로 및 세로 스크롤 위치를 나타내는 값을 제공합니다.
• history (히스토리): 브라우저의 방문 기록을 관리하는 History 객체에 접근합니다.
• screen (화면): 사용자의 화면 정보를 제공하는 Screen 객체에 접근합니다.

Window 객체의 함수

Window 객체에서 사용할 수 있는 함수는 대부분 웹 브라우저 창 자체와 관련된 것입니다. 

Window 객체에서 자주 사용하는 함수에 대해서 살펴보도록 하겠습니다.

• alert(): 경고 메시지를 표시하는 함수로, 사용자에게 간단한 알림을 보여줄 때 사용됩니다.
• confirm(): 사용자에게 확인 또는 취소 선택을 할 수 있는 다이얼로그 창을 표시하는 함수입니다.
• prompt(): 사용자로부터 입력을 받을 수 있는 다이얼로그 창을 열고, 입력된 값을 반환합니다.
• open(): 새로운 브라우저 창을 열거나, 새 탭을 열 때 사용됩니다.
• close(): 열려있는 브라우저 창을 닫을 때 사용되는 함수입니다.
• setTimeout(): 일정 시간 후에 지정한 함수를 실행시키는 타이머 함수를 설정합니다.
• setInterval(): 일정한 간격으로 지정한 함수를 반복 실행시키는 타이머 함수를 설정합니다.
• clearTimeout() / clearInterval(): 설정된 타이머를 취소하고 실행을 멈출 때 사용됩니다.
• open() / close(): 새 창을 열거나 창을 닫을 때 사용되는 함수입니다.
• focus() / blur(): 브라우저 창이나 요소에 포커스를 설정하거나 포커스를 해제할 때 사용됩니다.
• scrollTo() / scrollBy(): 문서의 스크롤 위치를 설정하거나 상대적으로 이동시킬 때 사용됩니다.
• print(): 현재 페이지를 인쇄할 때 사용하는 함수입니다.
• addEventListener() / removeEventListener(): 이벤트 리스너를 등록하거나 제거할 때 사용됩니다.
• localStorage.setItem() / localStorage.getItem(): 로컬 스토리지에 데이터를 저장하거나 불러올 때 사용됩니다.
• sessionStorage.setItem() / sessionStorage.getItem(): 세션 스토리지에 데이터를 저장하거나 불러올 때 사용됩니다.

이러한 함수들은 자바스크립트를 사용하여 웹 페이지의 동작과 상호작용을 조작하는 데에 자주 활용되며, 웹 애플리케이션을 개발할 때 필수적인 요소들입니다.

 

감사합니다.

---

틀린 부분이 있거나 더 좋은 내용 훈수 환영합니다!

공감과 댓글 부탁드립니다.