[Javascript] 7. 브라우저와 관련된 객체1

■ 브라우저와 관련된 객체 : 웹 브라우저에 문서가 표시되는 순간 브라우저는

HTML 소스를 읽으면서 화면에 내용을 표시하고 객체를 생성함

 

- window 객체 :  브라우저 창이 열릴 때마다 만들어짐. 브라우저 창 안의 요소 중에서 최상위

1. window 객체의 프로퍼티

document	브라우저 창에 표시된 웹 문서에 접근할 수 있음.
frameElement	현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환함
innerHeight	내용 영역의 높이를 나타냄
innerWidth	내용 영역의 너비를 나타냄
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환함
location	window 객체의 위치 또는 현재 URL을 나타냄
name	브라우저 창의 이름을 가져오거나 수정함
outerHeight	브라우저 창의 바깥 높이를 나타냄
outerWidth	브라우저 창의 바깥 너비를 나타냄
pageXOffset	스크롤 했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같음
pageYOffset	스크롤 했을 떄 수직으로 이동하는 픽셀 수로 scrollY와 같음
parent	현재 창이나 서브 프레임의 부모
screenX	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄
screenY	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄
scrollX	스크롤 했을 떄 수평으로 이동하는 픽셀 수를 나타냄
scrollY	스크롤 했을 때 수직으로 이동하는 픽셀 수를 나타냄
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환함

 

2. window 객체의 메소드

alert()	알림 창을 표시함
blur()	현재 창에서 포커스를 제거
close()	현재 창을 닫음
confirm()	[확인], [취소] 버튼이 있는 확인창을 표시함
focus()	현재 창에 포커스를 부여함
moveBy()	현재 창을 지정한 크기만큼 이동
moveTo()	현재 창을 지정한 좌표로 이동
open()	새로운 창을 오픈함
postMessage()	메시지를 다른 창으로 전달함
print()	현재 문서를 인쇄함
prompt()	프롬프트 창에 입력한 텍스트 반환
resizeBy()	지정한 크기만큼 현재 창의 크기를 조절
resizeTo()	동적으로 브라우저 창의 크기를 조절함
scroll()	문서에서 특정 위치로 스크롤함
scrollBy()	지정한 크기만큼씩 스크롤함
scrollTo()	지정한 위치까지 스크롤함
sizeToContent()	내용에 맞게 창의 크기를 맞춤
stop()	로딩을 중지함

 

- navigator 객체 : 플러그인 설치 정보나 온/오프라인 등의 여러 정보가 담겨 있음. 사용자가 수정할 수 없으며 가져와서 보여줄 수만 있음

1. 웹 브라우저와 렌더링 엔진 : 모든 사용자의 웹 브라우저에서 똑같이 동작하는 웹 문서를 개발할 때 고려해야하는 부분

○ 웹 브라우저 내에서 렌더링 엔진을 통해 소스를 해석하는데 브라우저마다 엔진이 다름

○ 표준화 되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스를 지정함.

○ 브라우저 별 사용하는 렌더링 엔진 및 자바스크립트 엔진

크롬	블링크	V8
파이어폭스	게코	스파이더몽키
인터넷 익스플로러	트라이덴트	차크라
사파리	웹킷	자바스크립트코어
오페라	블링크	V8

 

2. 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/5.0 (Windows NT 10.0; Win64; x64) AppleWebkit/537.36 (KHTML, like Gecko)
Chrome/81.0.4044.138 Safari/537.36" // 엣지

"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv : 76.0) Gecko/20100101 Firefox/76.0"
// 파이어폭스

// Mozilla 예약어는 넷스케이프 사용자 에이전트 문자열과 호환하기 위해 사용

 

Mozilla/x.x	모질라 버전
Windows NT x.x	브라우저를 실행하는 컴퓨터 운영체제
Win64; x64	윈도우 64비트 기반을 나타냄
WOW64	윈도우 64비트 기반을 나타냄
Trident/x.x	트라이덴트 엔진 버전을 나타냄
rv: x.x	브라우저 버전을 나타냄
AppleWebkit/x.x	웹킷 엔진의 빌드 번호
KHTML	오픈소스 렌더링 엔진
like Gecko	게코 기반의 다른 브라우저와 호환을 의미
Firefox/x.x	파이어폭스 브라우저의 버전
Chrome/x.x	크롬 버전을 나타냄
Safari/x.x	사파리 브라우저의 빌드 번호를 나타냄

 

3. navigator 객체 정보 살펴보기

battery	배터리 충전 상태를 알려줌
cookieEnabled	쿠키 정보를 무시하면 false, 허용하면 true 반환
geolocation	모바일 기기를 이용한 위치 정보를 나타냄
language	브라우저 UI의 언어 정보를 나타냄
oscpu	현재 운영체제 정보를 나타냄
userAgent	현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열

 

- history 객체

1. 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됨.

2. 브라우저 히스토리는 보안 문제 때문에 읽기 전용

3. history 객체의 프로퍼티와 메소드

프로퍼티	length	현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됨
메소드	back()	history 목록에서 이전 페이지를 현재 화면으로 불러옴
	forward()	history 목록에서 다음 페이지를 현재 화면으로 불러옴
	go()	history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴