Browser Object Model (BOM)

• window.screen
  • window.screen.height
  • window.screen.availHeight
  • window.screen.orientation
• window.navigator
  • window.navigator.geolocation
  • window.navigator.platform
  • window.navigator.userAgent
• window.location
  • window.location.hash
• window.devicePixelRatio

1. window.screen 객체

• 사용자의 스크린 화면의 대한 정보를 제공
• 화면의 가로/세로 폭 길이(px)
• 화면의 가용(Available) 가능한 실제 폭 길이(px)

전 세계 사용자의 스크린 가로 폭 평균치: 1366px (국내 평균 1920px)

현재 사용자의 화면(Screen)에서 실제 사용가능하지 않은 공간의 폭은 얼마인가?

var full_height    = window.screen.height;
var avail_height   = window.screen.availHeight;
var unavail_height = full_height - avail_height;

console.log('full_height - avail_height', unavail_height);

2. window.navigator 객체

• 웹 브라우저의 정보 제공
  • 어떤 운영체제를 사용자가 쓰고 있나?
  • 플러그인은 무엇 무엇을 사용하나?
  • 웹 브라우저의 코드네임, 개발 엔진은 무엇인가?
• HTML5에 새로 추가
  • window.navigator.geolocation
  • window.localStorage

지도 기반 서비스를 황용하기 위한 geolocation 객체

var geo = navigator.geolocation;
geo.getCurrentPosition(geoSuccess, geoFail);

function geoSuccess(position) {
	console.log('지도 위도/경도 좌표 가져오기 성공!');
	console.dir('position:', position);
	console.log('position.coords:', position.coords);
	console.log('position.coords.accuracy:', position.coords.accuracy);
	console.log('position.coords.latitude:', position.coords.latitude);
	console.log('position.coords.longitude:', position.coords.longitude);
}

function geoFail(error) {
	console.log('geoFail 함수: 지도 위도/경도 좌표 가져오기 실패!');
}

3. window.location 객체

• 현재 윈도우에 로드된 웹문서에 대한 정보를 제공

1초마다 (URL)hash 부분 바뀜

var _location = window.location;
var hashes = 'home about works contact'.split(' ');

function assignLocationHash(hash) {
	_location.hash = '!' + hash;
}

for( var h_index = hashes.length, item; (item=hashes[--h_index]); ) {
	window.setTimeout( (function(item) {
		return function() {
			// console.log(item);
			assignLocationHash(item);
		};
	})(item), h_index * 1000 ); 
}

4. window.devicePixelRatio 객체

기기의 픽셀 농도(Device Pixel Ratio) 체크

var html = document.documentElement;

function assignHtmlClass(identifier) {
	if( !html ) { html = document.documentElement; }
	// 문자 유형만 전달 가능
	if( typeof identifier !== 'string' ) { throw new Error('문자 유형으로 전달인자를 설정해주세요.'); }
	var existed_class = html.className !== '';
	html.className += (existed_class ? ' ' : '') + identifier;
}

function detectDevicePixelRatio() {	
	var dpr 		= window.devicePixelRatio || 1;
	var is_retina   = dpr === 2;
	var is_retinaHD = dpr === 3;
	assignHtmlClass( '@' + 'x' + dpr );
	return {
		'retain': is_retina,
		'retinaHD': is_retinaHD
	}
}

detectDevicePixelRatio();