Web browser window 객체

Web browser

HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 콘텐츠에 접근하기 위한 응용 프로그램의 총칭.

Web browser window 객체 이해

• Web browser
  HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 콘텐츠에 접근하기 위한 응용 프로그램의 총칭.

Web browser 라는 응용 프로그램의 최상위 객체가 window

• 1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 부른다.
• 2. 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다.

웹 브라우저에서 window 객체는 브라우저 윈도우 자체를 나타내며, 여러 가지 이벤트를 포함하여 웹 페이지의 전반적인 동작을 관리하는 다양한 속성과 메서드를 제공합니다. window 객체에서 처리할 수 있는 이벤트는 웹 애플리케이션의 사용성과 반응성을 높이는 데 중요한 역할을 합니다. 다음은 window 객체에서 사용할 수 있는 몇 가지 주요 이벤트입니다:

Window event

1. load

설명: 페이지의 로딩이 완전히 끝난 후에 발생합니다. 이 이벤트는 모든 이미지, 스크립트, 스타일시트, 서브 프레임 등 페이지 구성 요소의 로딩이 완료되었을 때 트리거됩니다.

window.addEventListener('load', function() {
  console.log('모든 리소스가 로드되었습니다!');
});

2. resize

설명: 윈도우의 크기를 조정할 때마다 발생합니다. 이 이벤트는 반응형 디자인을 구현할 때 유용하게 사용됩니다.

window.addEventListener('resize', function() {
  console.log('윈도우 크기가 변경되었습니다. 새로운 크기:', window.innerWidth, window.innerHeight);

3. scroll

설명: 페이지를 스크롤할 때 발생합니다. 이 이벤트는 사용자의 스크롤 동작에 따라 특정 액션을 취할 필요가 있을 때 사용됩니다.

window.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    console.log('페이지가 100픽셀 이상 스크롤 되었습니다.');
  }
});

4. beforeunload

설명: 페이지를 떠나기 직전에 발생합니다. 이 이벤트는 사용자가 변경사항을 저장하지 않고 페이지를 떠날 때 경고를 주는 데 사용될 수 있습니다.

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = '';
});

5. unload

설명: 페이지가 닫힐 때 발생합니다. 사용자가 페이지를 완전히 벗어날 때 필요한 정리 작업을 수행할 수 있습니다.

window.addEventListener('unload', function(event) {
  console.log('페이지가 닫힙니다. 자원을 정리합니다.');
});

6. popstate

설명: 브라우저의 세션 히스토리에서 현재 위치가 변경될 때 발생합니다. 주로 SPA(Single Page Application)에서 브라우저 내비게이션을 관리할 때 사용됩니다.

window.addEventListener('popstate', function(event) {
  console.log('위치가 변경되었습니다:', event.state);
});

window 객체의 이벤트들은 웹 애플리케이션의 생명주기 동안 다양한 시점에서 중요한 피드백을 제공하며, 이를 통해 사용자 경험을 향상시키고 애플리케이션의 반응성을 보장할 수 있습니다