[Javascript] Screen, location, history, navigator 예시

[Javascript] Screen, location, history, navigator

 이번에는 자바스크립트의 객체에 관련된 속성과 매서드들을 학습해보도록하겠습니다.

[Screen 객체]

 사용자의 화면정보를 제공할 수 있는 객체입니다.

screen 객체의 매서드

.width 화면의 너비를 반환해준다.

.height 화면의 높이값을 반환해준다.

.availWidth 작업표시줄을 뺀 화면의 너비를 반환해준다.

.colorDepth 해당 모니터가 표현할 수 있는 컬러 bit를 반환해준다.

[location 객체]

 유저의 브라우저와 관련된 기능을 제공하는 객체입니다.

location 객체의 매서드 및 속성

.href : URL 주소값을 가져오거나 설정합니다.

.hash : URL의 해시값을 받아옵니다.

.hostname : 호스트 이름을 설정할 수 있습니다. (반환도합니다.)

.host : 호스트 이름, 포트번호를 가져옵니다.

.protocol : 프로토콜을 가져옵니다.

.search : URL의 요청한 값을 반환해줍니다.

.reload() :  브라우저에서 새로고침을 누른 것 처럼 페이지를 새로고침합니다.

[history 객체]

 히스토리객체는 말 그대로 이전에 방문했던 페이지 내역들을 활용할 수 있는 객체입니다. 그 종류에 대해서 알아봅시다.

history 객체의 속성과 종류입니다.

.back() : 이전에 방문했던 페이지로 되돌아갑니다.

.forward() : 전이아닌 앞으로 페이지로 이동합니다.

.go(숫자) : -3입력시 3이전 페이지로 갈 수 있습니다.

.length : 여태까지 방문기록에 저장됬던 개수를 반환해줍니다.

[navigator 객체]

 현재 유저가 사용하는 웹브라우저 및 운영체제가 무엇인지 알 수 있는 객체입니다.

 예를 들어서 위와 같이 코딩을 해주면, 아래와 같이 됩니다.

뜨는 순서는 기본플랫폼, 운영체제, 브라우저엔진명, 브라우저명, 호환가능한 브라우저명 순으로 뜨게됩니다. 마지막에 개코가 있습니다.(?)

종류	설명
.appCodeName	사용자의 브라우저 코드명을 반환한다. 모든 브라우저는 모질라를 반환한다고합니다.
.appName	브라우저 이름을 반환하는데 모든 브라우저는 넷스케이프를 반환합니다.
.appVersion	브라우저 버전을 나타내는데 모든 브라우저는 5.0(windows)를 반환하게됩니다.
.product	현 브라우저의 엔진을 나타냅니다. (이게 개코네요)
.language	사용하고 있는 언어를 반환합니다.
.platform	사용자의 컴퓨터의 운영체제 정보를 나타냅니다. 비트는 브라우저 기준입니다.
.onLine	인터넷이 잘 연결되있을 경우 참입니다.
.userAgent	위에서 살펴 보셨듯이 총정보입니다.

 코드들을 응용해서 보인 예제입니다. 저의 모니터 해상도는 1920*1080px로 잘 뜨는 것을 확인할 수 있었습니다. 이때 indexOf를 사용해서 해당 문자열이 존재하는지 찾음으로써 어떤 OS를 사용하는지 알 수 있습니다.

 만약 위처럼 안드로이드로 바꿔주게된다면 안드로이드가 잘 뜨는 것을 알 수 있습니다. 참고로 띄워줄 때는 개발자모드로 기기를 변경해주시면 PC로도 쉽게 확인이 가능합니다.

 도움이되는 이전 글

브라우저 객체 모델 (BOM, Browser Object Model) 함수들

prompt, confirm 그리고 객체 기본

자바스크립트 변수와 연산자 기본