javascript브라우저 객체 모델-screen객체,location객체,history객체와 navigator객체

전은하·2024년 7월 24일

자바스크립트기초

목록 보기
13/23
post-thumbnail

screen객체

screen객체는 사용자의 모니터 정보(속성)를 제공하는 객체로
모니터의 넓이나 높이 또는 컬러 표현 bit를 반환한다.

[기본형]
screen.속성;

[속성 종류]
-screen.width : 화면의 넓이값을 반환한다.
-screen.height : 화면의 넓이값을 반환한다.
-screen.availwidth : 작업표시줄을 제외한 화면의 넓이값을 반환한다.
-screen.availHeight : 작업표시줄을 제외한 화면의 높이값을 반환한다.
-screen.colorDepth : 사용자의 모니터가 표현 가능한 컬러 bit를 반환한다.


위의 이미지와 같이 출력되는데 위에부터 현재 화면의 넓이,높이,작업표시줄을 제외한 화면의 높이값,모니터가 표현가능한 컬러값을 뜻한다.


location객체


위의 이미지와 같이 출력된다. 왼쪽부터 전체url,호스트이름과 포트번호,프로토콜이다.


history객체

history객체는 사용자가 방문한 사이트의 기록을 남기고, 이전 방문 사이트와
다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공한다.

[기본형]
history.속성;
history.메서드();
history.메서드(숫자);

[속성 및 메서드]

-history.back(숫자) : 이전 방문 사이트로 이동한다.만약 인수자리에 숫자가 없으면 1단계 이전 방문 사이트로 이동한다.

-history.foward(숫자) : 다음 방문 사이트로 이동한다.만약 인수자리에 숫자가 없으면 1단계 다음 방문 사이트로 이동한다.

-history.go(숫자) : 인수자리에 음수나 양수를 넣을 수 있다. 음수를 넣으면
해당 숫자만큼 이전 방문사이트로 이동하고 양수가 들어가면 다음 방문 사이트로 이동한다. 이때 history.back를 사용한 위의예제와 같은 페이지로 이동한다.

-history.length : 방문기록에 저장된 목록의 갯수를 반환한다.


navigator객체

운영체제에 대한 정보를 가지고 있는 객체를 말한다.
웹 브라우저에 대한 버전을 비롯해 플러그인 설치 정보나 온/오프라인 등의 여러 정보를 담고 있다.

이 객체 안에 있는 정보는 사용자가 수정할 수 없고 가져와서 보여줄 수만 있다.

브라우저마다 문서를 렌더링 해주는 렌더링 엔진이 다른데 아직 표준화 되지 않은 CSS속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정한다. 웹 브라우저는 웹 문서를 불러오면 내장된 렌더링 엔진에서 소스를 해석한다.
브라우저마다 렌더링 엔진이 달라 벤터 프리픽스를 붙여 브라우저를 구별할 수있다.
렌더링 엔진은 다른 말로 '레이아웃 엔진'이라고도 한다.

브라우저별 렌더링 엔진과 자바스크립트 엔진

  1. 크롬
  • 렌더링 엔진 : 블링크(Blink)
  • 자바스크립트 엔진 : V8
  1. 파이어폭스
  • 랜더링 엔진 : 게코(Gecho)
  • 자바스크립트 엔진 : 스파이더몽키(SpiderMonkey)

3.인터넷 익스플로러

  • 렌더링 엔진 : 트라이덴트(Trident)
  • 자바스크립트 엔진 : 차크라(chakra)

4.사파리

  • 렌더링 엔진 : 웹킷(webkit)
  • 자바스크립트 엔진 : 자바스크립트 코어(javascriptCore)
  1. 오페라
  • 렌더링 엔진 : 블링크(Blink)

  • 자바스크립트 엔진 : V8

    [속성]
    -userAgent : 현재 브라우저의 정보를 담고 있는 사용자 에이전트를 문자열로 반환한다.
    -battery : 베터리 충전 상태를 알려준다.

profile
안녕하세요

0개의 댓글