[js] 객체의 종류 (navigator, history, location, screen, window)

ch9eri·2022년 6월 14일

JavaScript

목록 보기

11/12

객체

1. Navigator 객체

웹 브라우저 버전, 플러그인 설치 정보, 온라인/오프라인 정보가 담겨있다
사용자가 수정 ❌ / 가져와서 보여주기만 ⭕️

🟢 렌더링 엔진 (레이아웃 엔진)

프리픽스

CSS 호환성을 위해 해당 웹 전용의 CSS 속성을 부여할 수 있도록 웹 브라우저 제조사 별로 제공되는 표준 CSS 속성을 기술하는 것
아직 표준화되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스를 지정한다
사용 이유 : 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 때문에 프리픽스를 붙여서 브라우저 구별
웹 문서 불러오기 → 렌더링 엔진에서 소스 해석

🟢 userAgent Property

에이전트 문자열을 의미
웹 브라우저 정보를 서버에 보낼 때 사용
웹 브라우저 버전, 자바스크립트의 엔진 종류 등의 정보 포함

//크롬 UserAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

Mozilla

인터넷 초창기에 넷스케이프 내비게이터 웹 브라우저를 많이 사용하였다. 이후에 나온 브라우저는 넷스케이프 사용자 에이전트 문자열과 호환하기 위하여 넷스케이프 내비게이터에서 사용하는 Mozilla라는 키워드를 사용하였다

AppleWebKit

크롬, 마이크로소프트 엣지, 사파리는 모두 Webkit 엔진을 기반으로 움직인다. Webkit 엔진은 다시 KHTML이라는 오픈소스 렌더링 엔진을 기반으로 한다. 그래서 UserAgent 문자열에 KHTML이라는 내용이 포함되어 있다. 그리고 like Gecko를 통하여, 게코 기반의 기존 웹 브라우저와 호환된다.

Window NT x.x은 브라우저가 실행되는 컴퓨터 운영체제를 나타내고, Win64는 윈도우 64비트 기반을 나타낸다. AppleWebkit/x.x 은 웹킷 엔진의 빌드 번호를 나타내고 Chrome/x.x는 크롬 버전을 나타낸다.

옛날에는 웹 브라우저를 식별할 때 UserAgent 문자열을 많이 사용하였지만 최근에는 자바스크립트 엔진을 사용하는 브라우저가 많아서, UserAgent 내용이 겹쳐서 잘 사용하지 않는다.

🟢 userAgent Property

에이전트 문자열을 의미
웹 브라우저 정보를 서버에 보낼 때 사용
웹 브라우저 버전, 자바스크립트의 엔진 종류 등의 정보 포함

//크롬 UserAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

Mozilla

AppleWebKit

2. History 객체

브라우저에서 <뒤로>나 <앞으로> 또는 방문한 사이트 주소가 배열 형태로 저장
브라우저 히스토리는 보안 때문에 읽기 전용

3. Location 객체

브라우저의 주소 표시줄과 관련
현재 문서의 URL 정보가 담겨있음 → 현재 브라우저 창에서 열 사이트나 문서 지정 가능
브라우저의 새로고침과 같은 역할을 하는 reload() 메서드와, 현재 창에서 다른 문서나 사이트를 보여주는 replace() 메서드가 자주 쓰임 (단, replace를 사용하면 새로운 사이트로 이동하므로 뒤로가기 버튼 ❌

4. Screen 객체

사용자의 화면 크기나 정보를 알아내야 할 때 사용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>location Object</title>
	<style>
		#container {
			width:400px;
			margin:10px auto;
		}
		.display {
			margin-top:10px;
			padding:10px;
			border:1px solid #222;
			box-shadow: 1px 0 1px #ccc;			
		}
		p {
			font-size:1em;
		}
	</style>
</head>
<body>	
	<div id="container">
		<h2>screen 객체 </h2>
		<div class="display">
			<script>
				document.write("<p><b>screen.availWidth : </b>" + screen.availWidth + "</p>");
				document.write("<p><b>screen.availHeight : </b>" + screen.availHeight + "</p>");
				document.write("<p><b>screen.width : </b>" + screen.width + "</p>");
				document.write("<p><b>screen.height : </b>" + screen.height + "</p>");
			</script>		
		</div>
</div>		
</body>
</html>