EverGiver

브라우저와 관련된 객체 본문

Front-End (웹)/자바스크립트

브라우저와 관련된 객체

친절한개발초보자 2022. 2. 18. 15:24
728x90
브라우저와 관련된 객체 알아보기

 

  • 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어 낸다.
  • 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다. 
    (이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가진다.)
    자바스크립트 객체의 계층 구조

    종류 설명
    window 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있다.
    document 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있다.
    navigator 현재 사용하는 브라우저의 정보가 들어 있다.
    history 현재 창에서 사용자의 방문 기록을 저장한다.
    location 현재 페이지의 URL 정보가 담겨 있다.
    screen 현재 사용하는 화면 정보를 다룬다.

 

window 객체의 프로퍼티

 

  • window 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 있다. 그래서 자바스크립트의 모든 객체는 window 객체 안에 포함된다.
  • window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 바꿀 때 사용한다.
  • 프로퍼티를 사용하려면 window.fullScreen처럼 프로퍼티 이름 앞에 'window.'를 붙인다.
    종류 설명
    document 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
    frameElement 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환한다.
    innerHeight 내용 영역의 높이를 나타낸다.
    innerWidth 내용 영역의 너비를 나타낸다.
    localStorage 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다.
    location window 객체의 위치 또는 현재 URL을 나타낸다.
    name 브라우저 창의 이름을 가져오거나 수정한다.
    outerHeight 브라우저 창의 바깥 높이를 나타낸다.
    outerWidth 브라우저 창의 바깥 너비를 나타낸다.
    pageXOffset 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같다.
    pageYOffset 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같다.
    parent 현재 창이나 서브 프레임의 부모이다.
    screenX 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타낸다.
    screenY 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타낸다.
    scrollX 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타낸다.
    scrollY 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타낸다.
    sessionStorage 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다.

 

window 객체의 메서드

 

  • window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련된다.
    종류 설명
    alert() 알림 창을 표시한다.
    blur() 현재 창에서 포커스를 제거한다.
    close() 현재 창을 닫는다.
    confirm() [확인], [취소] 버튼이 있는 확인 창을 표시한다.
    focus() 현재 창에 포커스를 부여한다.
    moveBy() 현재 창을 지정한 크기만큼 이동한다.
    moveTo() 현재 창을 지정한 좌표로 이동한다.
    open() 새로운 창을 연다.
    postMessage() 메시지를 다른 창으로 전달한다.
    print() 현재 문서를 인쇄한다.
    prompt() 프롬프트 창에 입력한 텍스트를 반환한다.
    resizeBy() 지정한 크기만큼 현재 창의 크기를 조절한다.
    resizeTo() 동적으로 브라우저 창의 크기를 조절한다.
    scroll() 문서에서 특정 위치로 스크롤한다.
    scrollBy() 지정한 크기만큼씩 스크롤한다.
    scrollTo() 지정한 위치까지 스크롤한다.
    sizeToContent() 내용에 맞게 창의 크기를 맞춘다.
    stop() 로딩을 중지한다.
  • 새 브라우저 창을 여는 open() 메서드
    - 링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 띄게 하려면 window.open() 메서드를 사용한다.
    - 주로 홈페이지의 팝업 창을 띄울 때 사용한다.
    - 새 브라우저에서 열 웹 문서는 미리 만들어 두었다가 경로 부분에 작성해주면ㄷ 된다.
    window.open(경로, 창 이름, 창 옵셥)

// 1. 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타낸다.
// 2. 창 이름 : 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있다. 
//              이름을 지정하지 않으면 팝업 창이 계속 새로 나타난다.
// 3. 창 옵션 : left, top 속성을 사용해 위치를 지정하거나 width, height 속성을 사용해 크기를 
//              지정할 수 있다. 위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타난다.
  • 브라우저 창을 닫는 close() 메서드 
    - 창을 닫는 메서드는 close()이다.
    window.close()​

 

navigator 객체

 

  • navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온·오프라인 등의 여러 정보가 담겨 있다.
  • 웹 브라우저와 렌더링 엔진
    - 여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할 분야는 랜더링 엔진이다.
    - 아직 표준화되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정한다.
      (이렇게 지정하는 이유는 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 때문이다.)
    - 웹 브라우저는 웹 문서를 불러오면 내장된 렌더링 엔진에서 소스를 해석한다. 
      (이때 웹 브라우저마다 사용하는 렌더링 엔진이 다르므로 프리픽스를 붙여 브라우저를 구별하는 것이다.)
    - 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다르다.
      (똑같은 HTML5 기술을 사용해서 만든 사이트에 접속하더라도 웹 브라우저마다 보여 주는 효과와 성능은 다를 수 있다.)
  • userAgent 프로퍼티 알아보기
    - userAgent에는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용한다.
    - userAgent에는 사용자의 웹 브라우저 버전, 자바스크립트의 엔진 종류 등 여러 정보가 들어 있다.
      (서버에서는 그 정보를 확인하여 사용자에게 맞는 웹 페이지를 보여 줄 수 있다.)
    - 각 브라우저의 사용자 에이전트 문자열을 보면 Mozilla라는 예약어로 시작한다.
      (그 이유는 인터넷 초창기에 넷스케이프 내비게이터 웹 브라우저를 많이 사용했기 때문이다.)
    - 크롬, 마이크로소프트 엣지, 사파리 브라우저 모두 웹킷(WebKit) 엔진을 기반으로 한다.
      (웹킷 엔진은 다시 KHTML이라는 오픈소스 렌더링 엔진을 기반으로 한다.)

 

history 객체

 

  • history 객체에는 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
  • 브라우저 히스토리는 보안 문제 때문에 읽기 전용이다.
  • 방문한 URL 정보가 저장되므로 메서드는 방문했던 URL 앞뒤로 이동하며 페이지를 불러온다.
    구분 설명
    프로퍼티 length 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장된다.
    메서드 back() history 목록에서 이전 페이지를 현재 화면으로 불러온다.
    forward() history 목옥에서 다음 페이지를 현재 화면으로 불러온다.
    go() history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러온다.
    예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러온다.

 

location 객체

 

  • location 객체는 브라우저의 주소 표시줄과 관련된다.
    (location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.)
  • 브라우저의 [새로 고침]과 같은 역할을 하는 reload() 메서드와 현재 창에 다른 문서나 사이트를 주는 replace() 메서드가 매우 유용하다.
    구분 설명
    프로퍼티 hash URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있다.
    host URL의 호스트 이름과 포트 번호를 담고 있다.
    hostname URL의 호스트 이름이 저장된다.
    href 전체 URL이다. 이 값을 변경하면 해당 주소로 이동할 수 있다.
    pathname URL 경로가 저장된다.
    port URL의 포트 번호를 담고 있다.
    protocol URL의 프로토콜을 저장한다.
    password 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장한다.
    search URL 중에서 ?로 시작하는 검색 내용을 저장한다.
    username 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장한다. 
    메서드 assign() 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져온다.
    reload() 현재 문서를 다시 불러온다.
    replace() 현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다.
    toString() 현재 문서의 URL을 문자열로 반환한다.

 

screen 객체

 

  • 웹 사이트에 접속하는 사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용한다.
  • '화면'이란 PC 모니터나 모바일 기기의 화면 자체를 가리킨다.
    구분 설명
    프로퍼티 availHeight UI 영역(윈도우의 작업 표시줄이나 Mac의 독)을 제외한 영역의 높이를 나타낸다.
    availWidth UI 영역을 제외한 내용 표시 영역의 너비를 나타낸다.
    colorDepth 화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타낸다.
    height UI 영역을 포함한 화면의 높이를 나타낸다.
    orientation 화면의 현재 방향을 나타낸다.
    pixelDepth 화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타낸다.
    width UI 영역을 포함한 화면의 너비를 나타낸다.
    메서드 lockOrientation 화면 방향을 잠근다.
    unlockOrientation 화면 방향 잠금을 해제한다.
728x90
저작자표시

'Front-End (웹) > 자바스크립트' 카테고리의 다른 글

DOM 요소에 접근하고 속성 가져오기  (0) 2022.02.19
문서 객체 모델(DOM)  (0) 2022.02.18
내장 객체  (0) 2022.02.17
객체  (0) 2022.02.16
이벤트  (0) 2022.02.15
'Front-End (웹)/자바스크립트' Related Articles more
Comments