[JavaScript] BOM

윈도우의 주요 구성 요소

웹 브라우저의 주요 구성 요소는 필수적인 객체들로 구성. 이들은 브라우저의 기능을 활용하는 데 중요한 역할. 구성 요소들은 크게 BOM과 DOM으로 구분. 둘 다 window 객체와 밀접하게 연관

1. BOM (Browser Object Model)

BOM은 브라우저 환경에서 제공하는 여러 객체를 포함하여 웹 페이지와 브라우저 간의 상호작용을 가능하게 함. 이 구성의 핵심은 window 객체로, 브라우저 창을 나타내며 다양한 기능에 접근 가능

• window.location: 현재 페이지의 URL 정보를 읽거나 변경 가능
• window.history: 브라우저 히스토리 조작 가능

⚠️ window 객체는 브라우저 전용이므로 HTML 환경에서 실행 필요

2. DOM (Document Object Model)

DOM은 HTML 문서의 구조를 객체로 표현하여 JavaScript로 문서를 동적으로 조작 가능. DOM은 사실 BOM의 일부로 볼 수 있으나, 그 크기와 중요성 때문에 별도로 취급

사실 DOM도 BOM의 하위집합이지만, 그 규모가 크기 때문에 BOM과 DOM으로 나누어 구분

---

window 객체 주요 메서드와 속성

1. alert()

• 기능: 간단한 경고 메시지를 표시. 사용자가 확인을 누를 때까지 코드 실행 일시 중지
• 실무: 사용자 경험을 위해 주로 커스텀 UI로 대체

alert("안녕하세요!"); // 경고창 표시

2. setTimeout()

• 기능: 지정된 시간 후 함수를 실행

setTimeout(() => console.log("3초 후 실행"), 3000);

3. setInterval()

• 기능: 지정된 간격으로 함수를 반복 실행. clearInterval()로 중지 가능

let count = 0;
const id = setInterval(() => {
  console.log(count++);
  if (count > 5) clearInterval(id);
}, 1000);

4. confirm()

• 기능: 확인/취소 선택지가 있는 대화 상자를 표시. 확인 시 true, 취소 시 false를 반환

const result = confirm("계속하시겠습니까?");
console.log(result ? "계속" : "취소");

5. prompt()

• 기능: 사용자 입력을 받는 대화 상자. 입력값을 문자열로 반환하며, 취소 시 null을 반환

const name = prompt("이름을 입력하세요:");
if (name) console.log(`안녕하세요, ${name}님!`);

6. innerWidth, innerHeight

• 기능: 브라우저 창의 뷰포트 크기를 픽셀 단위로 반환
• 활용: 반응형 웹 디자인에서 유용하게 사용

console.log("너비:", window.innerWidth, "높이:", window.innerHeight);
window.addEventListener('resize', () => {
  console.log("변경된 창 너비:", window.innerWidth);
});

location 객체

location 객체는 현재 문서의 URL 정보를 제공하고 조작할 수 있는 중요한 BOM 객체

1. location.href

• 기능: 현재 페이지의 전체 URL을 나타냄. 이를 변경하면 해당 URL로 이동

console.log(location.href); // 현재 URL 출력
location.href = "https://www.example.com"; // 페이지 이동

2. location.reload()

• 기능: 현재 페이지를 새로고침. true를 전달하면 캐시를 무시하고 서버에서 다시 로드

location.reload(true); // 서버에서 다시 로드

3. location.replace()

• 기능: 히스토리에 추가 없이 페이지를 대체
• 이 메서드를 사용하면 사용자가 '뒤로 가기' 버튼을 눌러도 이전 페이지로 돌아갈 수 없음. 보안과 작업 완료 후 이전 페이지 접근 방지에 유용

location.replace("https://www.newsite.com");

4. location.hostname

• 기능: 현재 URL의 도메인 이름을 반환

console.log(location.hostname);

navigator 객체

navigator 객체는 브라우저와 운영 체제의 정보를 제공

navigator.userAgent

• 기능: 브라우저 및 운영 체제 정보를 포함한 문자열을 반환
• 활용: 웹 서버나 스크립트가 클라이언트의 환경을 파악하는 데 사용됨

console.log(navigator.userAgent);
// 출력예) "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"

Screen 객체

Screen 객체는 사용자의 화면 정보를 제공. 픽셀 크기, 색상 깊이 등의 정보를 통해 사용자 환경에 맞춘 웹 페이지를 구성할 때 유용

주요 속성

• screen.width, screen.height: 전체 화면 크기
• screen.availWidth, screen.availHeight: 사용 가능한 화면 크기
• screen.colorDepth, screen.pixelDepth: 색상 및 픽셀 깊이

console.log("화면 너비:", screen.width, "화면 높이:", screen.height);

출처: 수코딩