[기본 개념] 2 | (2.2) 브라우저와 관련된 객체
1 객체
2 자바스크립트의 내장 객체
3> 브라우저와 관련된 객체
3 브라우저와 관련된 객체
웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 그 하위 요소에 해당하는 객체들이 나타난다.
window |
|||||
| ㅣ ㅏㅡㅡ ㅣ |
document | ㅡㅡㅜㅡㅡ ㅣ |
area | 「 ¯¯ ¯¯ ㅣ |
textarea |
| ㅣ ㅏㅡㅡ ㅣ |
navigator | ㅣ ㅏㅡㅡ ㅣ |
image | ㅣ ㅏㅡㅡ ㅣ |
button |
| ㅣ ㅏㅡㅡ ㅣ |
history | ㅣ ㅏㅡㅡ ㅣ |
form | ㅣ ㅡㅡㅣㅡㅡ ㅣ |
text |
| ㅣ ㅏㅡㅡ ㅣ |
location | ㅣ ㄴㅡㅡ |
anchor | ㅣ ㅏㅡㅡ ㅣ |
checkbox |
| ㅣ ㄴㅡㅡ |
screen | ㅣ ㅏㅡㅡ ㅣ |
fileUpload | ||
| ㅣ ㄴㅡㅡ |
radio |
자바스크립트의 내장 객체
| 종류 | 설명 |
| window | 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중 최상위 |
| document | 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어짐. 문서의 정보가 담겨있음 |
| navigator | 현재 사용하는 브라우저의 정보가 들어있음 |
| history | 현재 창에서 사용자의 방문 기록을 저장 |
| location | 현재 페이지의 URL 정보가 담겨있음 |
| screen | 현재 사용하는 화면 정보를 다룸 |
window 객체의 프로퍼티
widow 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 있다. 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 모든 객체는 window 객체 안에 포함된다.
| 종류 | 설명 |
| document | 브라우저 창에 표시된 웹 문서에 접근할 수 있음 |
| frameElement | 현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환, 포함되어 있지 않으면 null 반환 |
| innerHeight | 내용 영역의 높이를 나타냄 |
| innerWidth | 내용 영역의 너비를 나타냄 |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환 |
| location | window 객체의 위치 또는 현재 URL을 나타냄 |
| name | 브라우저 창의 이름을 가져오거나 수정 |
| outerHeight | 브라우저 창의 바깥 높이를 나타냄 |
| outerWidth | 브라우저 창의 바깥 너비를 나타냄 |
| pageXOffset | 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같음 |
| pageYOffset | 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같음 |
| parent | 현재 창이나 서브 프레임의 부모 |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄 |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄 |
| scrollX | 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냄 |
| scrollY | 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냄 |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환 |
window 객체의 메서드
window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련된다.
window 객체의 다른 메서드에서 window 객체는 기본 객체이므로 'window.'을 생략하여 사용한다.
| 종류 | 설명 |
| alert( ) | 알림 창 표시 |
| blur( ) | 현재 창에서 포커스를 제거 |
| close( ) | 현재 창을 닫음 |
| confirm( ) | [확인], [취소] 버튼이 있는 확인 창 표시 |
| focus( ) | 편재 창에 포커스를 부여 |
| moveBy( ) | 현재 창을 지정한 크기만큼 이동 |
| moveTo( ) | 현재 창을 지정한 좌표로 이동 |
| open( ) | 새로운 창을 엶 |
| postMessage( ) | 메시지를 다른 창으로 전달 |
| print( ) | 현재 문서를 인쇄 |
| prompt( ) | 프롬프트 창에 입력한 텍스트를 반환 |
| resizeBy( ) | 지정한 크기만큼 현재 창의 크기를 조절 |
| resizeTo( ) | 동적으로 브라우저 창의 크기를 조절 |
| scroll( ) | 문서에서 특정 위치로 스크롤 함 |
| scrollBy( ) | 지정한 크기만큼씩 스크롤 함 |
| scrollTo( ) | 지정한 위치까지 스크롤 함 |
| sizeToContent( ) | 내용에 맞게 창의 크기를 맞춤 |
| stop( ) | 로딩을 중지 |
새 브라우저 창을 여는 open( ) 메서드
기본형
window.open("경로", "창 이름", "창 옵션")
경로 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냄
창 이름 팝업 창의 이름을 지정하면 지정한 창에만 팝업 내용이 나타나도록 할 수 있음
지정하지 않고 새로고침 버튼을 누르면 팝업 창이 계속 새로 나타남
창 옵션 left, top 속성을 사용하고 width, height 속성을 사용하여 위치와 크기를 지정 (위치 기본값 맨 왼쪽 위)
(ex. 팝업 창 만들기)
...
<p>왼쪽에서 100px, 위에서 200px 떨어진 위치에 <br> 팝업 창이 표시된다.</p>
<script>
window.open("notice.html", "pop", "width=500, height=400, left=100, top=200");
</script>
...
팝업 차단 고려하기
최신 웹 브라우저나 보안 프로그램, 관련 유틸리티를 설치하면 웹 브라우저의 팝업이 자동으로 차단되기도 한다.
중요한 내용을 팝업 창으로 보여줘야 한다면 팝업 차단된 상태인지 체크하여 알려주는 것이 좋다.
(ex. 팝업이 차단된 브라우저의 알림 창 표시하기)
...
<script>
function openPopup() {
var newWin = window.open("notice.html", "pop", "width=500, height=400");
if(newWin == null) { // 팝업 차단되어 있으면 알림 창 표시
alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
}
newWin.moveBy(100, 100);
}
</script>
...
브라우저 창을 닫는 close( ) 메서드
기본형
window.close( )
(ex. 버튼을 사용해 팝업 창 닫기)
...
<button onclick="javascript:window.slose();">닫기</button>
...
navigator 객체
navigator 객체에는 웹 브라우저의 버전, 플러그인 설치 정보나 온/오프라인 등의 여러 정보가 담겨있다. 사용자가 수정할 수 없으며 읽기 전용이다.
웹 브라우저와 렌더링 엔진
웹 브라우저마다 사용하는 렌더링 엔진이 다른데 마찬가지로 웹 브라우저마다 내장된 자바스크립트 엔진도 다르다.
각 브라우저에 포함된 렌더링 엔진과 자바스크립트 엔진은 다음과 같다.
| 브라우저 | 렌더링 엔진 | 자바스크립트 엔진 |
| 크롬(Chrome) | 블링크(Blink) | V8 |
| 파이어폭스(Firefox) | 게코(Gecko) | 스파이더몽키(SpiderMonkey) |
| 인터넷 익스플로러(Internet Explorer) | 트라이덴트(Trident) | 차크라(Chakra) |
| 사파리(Safari) | 웹킷(Webkit) | 자바스크립트코어(JavascriptCore) |
| 오페라(Opera) | 블링크(Blink) | V8 |
userAgent 프로퍼티 알아보기
navigator 객체에서 userAgent 프로퍼티를 먼저 알아야 하는데, 이는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용한다.
// 크롬 userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/81.0.4044.138 Safari/537.36"
// 엣지 userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/81.0.4044.138 Safari/537.36 Edg/81.0.416.72"
// 파이어폭스 userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0"
각 브라우저의 사용자 에이전트 문자열을 보면 Mozilla 라는 예약어로 시작하는데 이는 인터넷 초장기의 넷스케이프 사용자 에이전트 문자열과 호환하기 위해 넷스케이프 내비게이터에서 사용하는 Mozilla 라는 키워드를 사용한다.
브라우저 중 다른 엔진을 사용하기도 하는데 예를 들어 인터넷 익스플로러 11의 경우 Trident 라는 엔진을 사용하고, 사용자 에이전트 문자열 중 Trident 가 포함되어 있는 것을 볼 수 있다.
// 인터넷 익스플로러 11
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
크롬, 마이크로소프트 엣지, 사파리 브라우저는 모두 WebKit 엔진을 기반으로 하는데, 이 엔지는 KHTML 이라는 오픈소스 렌더링 엔진을 기반으로 한다. 따라서 사용자 에이전트 문자열에 KHTML 이 포함되어 있고, like Gecko 를 사용하여 기존 웹 브라우저와 호환된다고 알려준다.
사용자 에이전트 문자열
| 종류 | 설명 |
| Mozilla/x.x | 모질라 버전을 나타냄 |
| Windows NT x.x | 브라우저를 실행하는 컴퓨터 운영체제를 나타냄 |
| Win64; x64 | 윈도우 64비트 기반을 나타냄 |
| WOW64 | 윈도우 64비트 기반을 나타냄 |
| Trident/x.x | 트라이데트 엔진 버전을 나타냄 |
| rv : x.x | 브라우저 버전을 나타냄 |
| AppleWebKit/x.x | 웹킷 엔진의 빌드 번호를 나타냄 |
| KHTML | 오픈소스 렌더링 엔진인 KHTML을 의미 |
| like Gecko | 게코 기반의 다른 브라우저와 호환을 의미 |
| Firefox/x.x | 파이어폭스 브라우저 버전을 나타냄 |
| Chrome/x.x | 크롬 버전을 나타냄 |
| Safari/x.x | 사파리 브라우저의 빌드 번호를 나타냄 |
최근에는 같은 자바스크립트 엔진을 사용하는 브라우저가 많아서 사용자 에이전트 문자열의 내용이 겹치므로 사용하지 않는 추세이다.
navigator 객체의 주요 프로퍼티
| 종류 | 설명 |
| battery | 배터리 충전 상태를 알려줌 |
| cookieEnabled | 쿠키 정보를 무시하면 false, 허용하면 true 반환 |
| geolocation | 모바일 기기를 이용한 위치 정보 나타냄 |
| language | 브라우저 UI의 언어 정보를 나타냄 |
| oscpu | 현재 운영체제 정보를 나타냄 |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열 |
history 객체
history 객체는 브라우저에서 방문한 사이트 주소가 배열 형태로 저장된다. 브라우저 히스토리는 보안 문제 때문에 읽기 전용이다.
history 객체의 프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장 |
| 메서드 | back( ) | history 목록에서 이전 페이지를 현재 화면으로 불러옴 |
| forward( ) | history 목록에서 다음 페이지를 현재 화면으로 불러옴 | |
| go( ) | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴 (history.go(1) : 다음 페이지, history.go(-1) : 이전 페이지) |
|
location 객체
location 객체는 현재 문서의 URL 주소 정보가 들어가 있는데, 브라우저의 주소 표시줄과 관련된다.
location 객체의 프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | hash | URL 중에서 #로 시작하는 해시 부분의 정보를 담음 |
| host | URL의 호스트 이름과 포트 번호를 담음 | |
| hostname | URL의 호스트 이름이 저장 | |
| href | 전체 URL. 이 값을 변경하면 해당 주소로 이동 | |
| pathname | URL의 경로 저장 | |
| port | URL의 포트 번호를 담음 | |
| protocol | URL의 프로토콜 저장 | |
| password | 도메인 이름 앞에 username, password를 입력해서 접속하는 URL일 경우 password 정보 저장 | |
| search | URL 중에서 ?로 시작하는 검색 내용 저장 | |
| username | 도메인 이름 앞에 username을 입력해서 접속하는 URL일 경우 username 정보 저장 | |
| 메서드 | assign( ) | 현재 문서에 새 문서 주소를 할당하여 새 문서를 가저옴 |
| reload( ) | 현재 문서를 다시 불러옴 | |
| replace( ) | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체 | |
| toString( ) | 현재 문서의 URL을 문자열로 반환 | |
replace( ) 메서드를 이용하면 현재 문서의 주소가 새로운 주소로 대체되므로 브라우저 창의 [뒤로] 버튼이 활성화되지 않는다.
(ex. 사이트 이동하기)
<button onclick="location.replace('http://www.easyspub.com')">홈페이지로 이동하기</button>
screen 객체
screen 객체는 사용자의 화면 크기나 정보가 있는데, 화면 방향을 잠그거나 잠근 화면방향을 해제하는 역할을 한다.
screen 객체의 프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | availHeight | UI 영역(윈도우 작업 표시줄이나 Mac의 독)을 제외한 영역의 높이를 나타냄 |
| availWidth | UI 영역을 제외한 내용 표시 영역의 너비를 나타냄 | |
| colorDepth | 화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냄 | |
| height | UI 영역을 포함한 화면의 높이를 나타냄 | |
| orientation | 화면의 현재 방향을 나타냄 | |
| pixelDepth | 화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냄 | |
| width | UI 영역을 포함한 화면의 너비를 나타냄 | |
| 메서드 | lockOrientation( ) | 화면 방향을 잠금 |
| unlockOrientation( ) | 화면 방향 잠금을 해제 | |
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기 (0) | 2022.08.24 |
|---|---|
| [정리] 2 | 객체, 자바스크립트의 내장 객체 정리 (0) | 2022.08.23 |
| [기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체 (0) | 2022.08.17 |
| [정리] 1 | 함수 선언 & 호출과 표현식, var let const, 이벤트와 이벤트 처리기 정리 (0) | 2022.08.11 |
| [기본 개념] 1 | (1.2) 이벤트와 이벤트 처리기, DOM을 이용한 이벤트 처리기 (0) | 2022.08.11 |