[javascript] 브라우저 객체 모델(BOM)
BOM의 주요 객체에는 다음과 같은 것들이 있습니다:
- window: BOM의 최상위 객체로, 현재 창이나 프레임을 나타냅니다. 창의 크기 조정, 새 창/탭 열기, 현재 URL 변경 등과 같은 작업을 수행할 수 있습니다.
- document: 웹 페이지의 DOM(Document Object Model)을 나타내는 객체입니다. 웹 페이지의 요소를 선택하고 조작하는 데 사용됩니다.
- navigator: 브라우저의 정보를 제공하는 객체입니다. 브라우저의 이름, 버전, 운영 체제 등을 알 수 있습니다.
- location: 현재 웹 페이지의 URL 정보를 제공하는 객체입니다. URL을 읽고 변경할 수 있습니다.
- history: 브라우저의 세션 기록을 나타내는 객체입니다. 뒤로 가기, 앞으로 가기 등의 작업을 수행할 수 있습니다.
- screen: 사용자의 화면 정보를 제공하는 객체입니다. 화면의 너비, 높이, 컬러 깊이 등을 알 수 있습니다.
BOM을 사용하여 웹 브라우저와 상호 작용하면 다양한 기능을 구현할 수 있습니다. 예를 들어, 다른 URL로 페이지를 이동하거나 새로운 창을 열 수 있습니다. 또는 현재 창의 크기를 조정하거나 사용자의 브라우저 정보를 확인하는 등의 작업을 수행할 수 있습니다.
아래는 BOM을 사용하여 새 창을 열고 URL을 변경하는 예제 코드입니다:
// 새 창을 열고 구글 홈페이지로 이동
var newWindow = window.open("https://www.google.com", "_blank");
// 현재 창의 URL을 변경
window.location.href = "https://www.example.com";
위의 코드에서는 window.open()
메서드를 사용하여 새 창을 열고, window.location.href
를 사용하여 현재 창의 URL을 변경합니다.
BOM은 웹 애플리케이션을 개발할 때 자주 사용되는 기능이므로 잘 익혀두는 것이 좋습니다. 관련 자세한 정보는 MDN web docs를 참조하시기 바랍니다.