자바스크립트/Likelion_JS

03-2. 브라우저 내장 객체

김딸기* 2024. 10. 5. 02:19

브라우저 내장 객체

브라우저 내장 객체는 브라우저에서 제공하는 자바스크립트 내장 객체로, 브라우저에서 실행되는 프런트 웹 애플리케이션에서만 사용됩니다. 이러한 객체들은 브라우저와의 상호작용을 용이하게 해 주며, 개발자는 이를 통해 웹 애플리케이션을 더욱 동적이고 유연하게 만들 수 있습니다.

주요 브라우저 내장 객체

  1. window
    • 브라우저 창을 지칭하는 객체로, 모든 자바스크립트 코드의 최상위 객체입니다.
    • 브라우저에서 실행되는 모든 애플리케이션에서 접근할 수 있으며, 글로벌 변수나 함수를 저장합니다.
    • 예를 들어, alert(), console 등은 모두 window 객체의 함수입니다.
  2. document
    • 브라우저에 출력되는 HTML 문서를 지칭하는 객체입니다.
    • 웹 페이지의 요소를 선택하고 조작하는 데 사용되며, DOM(Document Object Model)에 대한 접근을 제공합니다.
  3. history
    • 브라우저의 인터넷 방문 기록을 지칭하는 객체입니다.
    • 사용자는 이 객체를 통해 이전 방문 페이지로 이동하거나, 특정 URL로 이동할 수 있습니다.
  4. screen
    • 브라우저가 떠 있는 스크린 창에 대한 정보를 제공하는 객체입니다.
    • 화면의 크기나 해상도와 같은 정보를 얻는 데 사용됩니다.
  5. navigator
    • 브라우저에 대한 정보를 제공하는 객체입니다.
    • 사용자의 브라우저 및 운영체제에 대한 정보, 지원하는 기능 등을 확인할 수 있습니다.
  6. location
    • 현재 브라우저의 URL을 지칭하는 객체입니다.
    • 사용자는 이 객체를 통해 URL을 변경하거나, 특정 URL로 이동할 수 있습니다.

객체의 계층 구조

모든 브라우저 객체는 window 객체의 하위 객체로 구성되어 있습니다. 즉, document, history, screen, navigator, location 모두 window 객체에 포함되어 있습니다. 이러한 객체들을 사용할 때는 window.document 혹은 window.history와 같이 명시할 수 있지만, window를 생략하고 단순히 document 또는 history로 작성해도 됩니다.

window 객체의 속성과 메서드

  • 속성
    • innerWidth, innerHeight: 브라우저 창의 내부 너비와 높이를 반환합니다.
    • outerWidth, outerHeight: 브라우저 창의 전체 크기를 반환합니다.
    • screenTop, screenLeft: 브라우저가 화면의 어느 위치에 있는지를 알려줍니다.
  • 메서드
    • open()
      • 새로운 URL을 열 수 있는 메서드입니다.
      • open(url): URL만 지정하여 호출합니다.
      • open(url, target): URL과 대상 창을 지정하여 호출합니다.
      • open(url, target, windowFeatures): URL, 대상 창 및 창의 속성을 지정하여 호출합니다.
      • 대상 정보는 _blank(새 창), _parent(부모 창), _self(자신 창)으로 지정할 수 있습니다.
    • close()
      • 현재 창을 닫는 메서드입니다.
      • 자식 창을 열고, 해당 창을 변수에 저장한 후 close() 메서드를 호출하여 자식 창을 닫을 수 있습니다.

HTML 문서의 메모리 구조

자바스크립트에서 변수를 정의하거나 함수를 사용할 때는 메모리가 할당됩니다. 이 메모리는 특정 HTML 문서에 한정되어 있으며, 다른 문서의 자바스크립트에서는 접근할 수 없습니다. 메모리는 HTML 단위로 할당되며, 각 HTML 문서의 자바스크립트에서만 해당 메모리를 사용할 수 있습니다.

  • opener
    • open() 함수를 통해 새 창을 여는 경우, 부모 창과 자식 창 간에 데이터 공유가 필요할 수 있습니다.
    • opener 객체를 통해 부모 창을 참조할 수 있습니다.
  • 자식 창의 데이터 접근
    • 부모 창에서 자식 창에 선언된 변수 및 함수를 사용해야 하는 경우, 자식 창의 자바스크립트 코드에서 opener를 이용해 부모 창을 참조해야 합니다.

location 객체

location 객체는 브라우저의 URL을 다루는 객체입니다. 원하는 URL 정보를 추출하거나 특정 URL로 브라우저 화면을 변경할 수 있는 메서드를 제공합니다.

  • 메서드
    • reload(): 현재 URL을 다시 요청하여 페이지를 새로 고침합니다.
    • replace(): 새로운 URL로 이동하며, 이 경우 현재 URL 정보는 히스토리에 남지 않습니다.

history 객체

history 객체는 브라우저의 히스토리 정보를 이용해 이전 또는 이후 화면으로 이동하는 데 사용됩니다.

  • 메서드
    • go(n): n의 값을 통해 이전 또는 이후 화면으로 이동할 수 있습니다. go(0)을 호출하면 현재 화면을 새로 고침하는 것과 같은 효과를 가집니다.

screen 객체

screen 객체는 현재 실행 중인 스크린 정보를 제공하는 객체입니다.

navigator 객체

navigator 객체는 브라우저의 다양한 정보 및 기능에 접근할 수 있는 프로퍼티를 제공합니다.

  • userAgent: 현재 브라우저 및 플랫폼 정보를 반환하는 문자열입니다. 이 정보를 통해 사용자 환경을 확인하고, 백엔드 애플리케이션에서 HTTP Request header로 확인할 수 있습니다.