3. 객체의 종류

목차

• screen 객체
• location 객체
• history 객체
• navigator 객체
• 브라우저별 랜더링 엔진과 자바스크립트 엔진

---

 

screen 객체

 

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

(기본형)
screen.속성;

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

 

screen 객체 사용해보기

 

screen 객체 입력 예시

      console.log(screen.width);
      console.log(screen.height);
      console.log(screen.availWidth);
      console.log(screen.availHeight);
      console.log(screen.colorDepth);

---

 

location 객체

브라우저의 주소창을 의미합니다. 현재 url에 대한 정보(속성)와 새로고침 메서드를 제공합니다.

(기본형)
location.속성;
location.메서드();

(속성- 프로퍼티 종류)
- hash : url중 #으로 시작하는 해시 부분의 정보를 담아 반환합니다.
- host : url의 host이름과 포트 번호(작업 파일의 주소)를 담아 반환합니다.
- hostname : url host의 이름을 담아서 반환합니다.
- href : 전체 url을 말합니다. 이 값을 변경하면 해당 주소로 이동합니다.
- pathname : url 경로가 저장됩니다.
- port : url의 포트번호를 담아 반환합니다.
- protocol : url의 프로토콜(웹 주소의 통신 규약)을 저장합니다.
- password : 도메인 이름 앞에 username과 password를 함께 입력해 접속하는 사이트의 url일 경우 username정보를 저장합니다.
- username : 도메인 이름 앞에 username을 함께 입력해 접속하는 사이트의 url일 경우 username정보를 저장합니다.
- search : url중 ?로 시작하는 검색 내용을 저장합니다.

(메서드 종류)
- assign() : 현재 문서에서 새 문서 주소를 할당해 새 문서를 가져옵니다.
- reloae() : 새로고침
- replace() : 현재 url을 지우고 새로운 url문서를 가져옵니다.  
- tostring() : 현재 문서의 url을 문자열로 반환합니다.

 

location 객체 사용해보기

 

location 객체 입력 예시

      document.write("<p>location.href :" + location.href + "</p>");
      document.write("<p>location.host :" + location.host + "</p>");
      document.write("<p>location.protocol :" + location.protocol + "</p>");
    </script>

    <button type="button" onclick="location.replace('https://www.naver.com')">

---

 

history 객체

 

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

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

(속성 및 메서드)
- history.back(숫자) : 이전 방문 사이트로 이동합니다.
만약 인수자리에 숫자가 없으면 1단계 이전 방문 사이트로 이동합니다.

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

- history.go(숫자) : 인수자리에 음수나 양수를 넣을 수 있습니다.
음수를 넣으면 해당 숫자만큼 이전 방문 사이트로 이동하고 양수가 들어가면 다음 방문 사이트로 이동합니다.

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

 

history 객체 사용해보기

 

history 객체 입력  예시

 document.write("방문 기록 총 갯수는?" + history.length);
 
 많이 사용하지 않는 객체라 예시를 많이 준비하진 않았습니다.

---

 

navigator 객체

 

운영체제에 대한 정보를 가지고 있는 객체를 말합니다.
웹 브라우저에 대한 버전을 비롯해 플러그인 설치 정보나 온/오프라인 등의 여러 정보를 담고 있습니다.
이 객체 안에 있는 정보는 사용자가 수정할 수 없고 가져와서 보여 줄 수만 있습니다.

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

 

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

 

1. 크롬
- 랜더링 엔진 : 블링크(Blink)
- 자바스크립트 엔진 : v8

2. 파이어폭스
- 랜더링 엔진 : 게코(Gecko)
- 자바스크립트 엔진: 스파이더몽키(SpiderMonkey)

3. 인터넷 익스플로러
- 랜더링 엔진 : 트라이덴트(Trident)
- 자바스크립트 엔진 : 차크라(Chakra)

4. 사파리
- 렌더링 엔진 : 웹킷(Webkit)
- 자바스크립트 엔진 : 자바스크립트 코어(Javascriptcore)

5. 오페라
- 랜더링 엔진 : 블링크(Blink)
- 자바스크립트 엔진 : v8

(속성)
- userAgent : 현재 브라우저의 정보를 담고 있는 사용자 에이전트를 문자열로 반환합니다.
- battery : 배터리 충전 상태를 알려줍니다.

 

navigator 객체 사용해보기

 

navigator 객체 입력 예시

      document.write(navigator.userAgent);