자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있다.
이런 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문이다.
지금부터 웹 브라우저와 관련된 객체를 하나씩 살펴보겠다.
브라우저와 관련된 객체 알아보기
웹 브라우저 창에 문서가 표시되는 순간 사용자는 눈치 채지 못하지만, 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어 낸다.
웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다.
이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가진다.
이렇게 만들어진 자바스크립트의 객체는 다음 그림과 같은 계층 구조를 보인다.
주로 사용하는 내장 객체는 다음과 같다.
| 종류 | 설명 |
| window | 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안에 요소 중에서 최상위에 있다. |
| document | 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨있다. |
| navigator | 현재 사용하는 브라우저의 정보가 들어있다. |
| history | 현재 창에서 사용자의 방문 기록을 저장한다 |
| location | 현재 페이지의 URL 정보가 담겨 있다. |
| screen | 현재 사용하는 화면 정보를 다룬다 |
window 객체의 프로퍼티
window 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 있다.
그래서 자바스크립트의 모든 객체는 window 객체 안에 포함된다.
먼저 window 객체의 프로퍼티를 알아보겠다.
window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다.
프로퍼티를 사용하려면 window.fullScreen 처럼 프로퍼티 이름 앞에 'window.'를 붙인다.
다음 표는 window 객체의 프로퍼티 중에서 자주 사용하면서 모든 브라우저에서 호환되는 것을 정리한 것.
| 종류 | 설명 |
| document | 브라우저 창에 표시된 웹 문서에 접근할 수 있다. |
| frameElement | 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환한다. |
| innerHeight | 내용 영역의 높이를 나타낸다 |
| innerWidth | 내용 영역의 너비를 나타낸다 |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다. |
| location | window 객체의 위치 또는 현재 URL을 나타낸다. |
| name | 브라우저 창의 이름을 가져오거나 수정한다. |
| outerHeight | 브라우저 창의 바깥 높이를 나타낸다. |
| outerWidth | 브라우저 창의 바깥 너비를 나타낸다. |
| pageXOffset | 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같다. |
| pageYOffset | 스크롤했을때 수직으로 이동하는 픽셀 수로 scrollY와 같다. |
| parent | 현재 창이나 서브 프레임의 부모이다 |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타낸다. |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타낸다. |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다. |
window 객체의 메서드
window 객체의 메세드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련된다.
우리가 앞에서 사용한 alert() 문이나 prompt() 문은 window 객체의 메서드이므로 원래는 window.alert()라고 해야 한다.
하지만 window 객체는 기본 객체이므로 'window.'를 생략하고 alert()만 사용할 수 있다.
마찬가지로 window 객체의 다른 메서드에서도 window. 를 생략하여 사용한다.
| 종류 | 설명 |
| alert() | 알림 창을 표시합니다. |
| blur() | 현재 창에서 포커스를 제거합니다. |
| close() | 현재 창을 닫습니다. |
| confirm() | [확인], [취소] 버튼이 있는 확인 창을 표시한다. |
| focus() | 현재 창에 포커스를 부여한다. |
| moveBy() | 현재 창을 지정한 크기만큼 이동한다 |
| moveTo() | 현재 창을 지정한 좌표로 이동한다. |
| open() | 새로운 창을 엽니다. |
| postMessage() | 메세지를 다른 창으로 전달한다. |
| print() | 현재 문서를 인쇄한다. |
| prompt() | 프롬프트 창에 입력한 텍스트를 반환한다. |
| resizeBy() | 지정한 크기만큼 현재 창의 크기를 조절한다. |
| resizeTo() | 동적으로 브라우저 창의 크기를 조절한다. |
| scroll() | 문서에서 특정 위치로 스크롤한다. |
| scrollBy() | 지정한 크기만큼씩 스크롤한다. |
| scrollTo() | 지정한 위치까지 스크롤한다. |
| sizeToContent() | 내용에 맞게 창의 크기를 맞춘다 |
| stop() | 로딩을 중지한다. |
새 브라우저 창을 여는 open() 메서드
링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 뜨게 하려면 window.open() 메서드를 사용한다.
window.open() 메서드는 주로 홈페이지의 팝업 창을 띄울 때 사용한다.
팝업 창은 홈페이지의 이벤트, 공지 사항을 전하거나 쇼핑몰에서 상품 정보를 크게 보여 주는 역할을 한다.
새 브라우저에서 열린 웹 문서는 미리 만ㄷ르어 두었다가 다음과 같이 경로 부분에 작성하면 된다.
window.open(경로, 창 이름, 창 옵션)경로:팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타낸다.
창 이름: 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있다. 이름을 지정하지 않으면 팝업 창이 계속 새로 나타난다.
창 옵션: left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있다. 위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타난다.
다음은 너비 500px, 높이 400px 인 팝업 창을 여는 예제이다.
브라우저에서 웹 문서를 열자마자 팝업 창이 바로 나타난다.
팝업 창으로 활용할 웹 문서는 미리 작성해두어야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>문서를 열면 팝업 창이 표시된다.</p>
<script>
window.open("test2.html","","width=500, height=400");
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>팝업창입니다.</h1>
</body>
</html>
창 이름 지정하기
앞선 예제에서 계속 새로고침을 누르면 계속해서 새로운 팝업 창이 열릴 것이다.
open() 메서드에서 두 번째 옵션인 창 이름을 지정하면 이러한 문제를 해결할 수 있다.
팝업 창 위치 지정하기
open() 메서드로 팝업 창을 표시하면 기본 위치는 화면의 왼쪽 위 구석에 나타난다.
팝업 창의 위치는 open() 메서드의 left와 top 속성으로 지정할 수 있다.
left 속성은 화면의 왼쪽 측면을 기준으로 하고, top 속성은 화면의 위쪽을 기준으로 해서 팝업 창을 얼마나 떨어뜨릴지 지정한다.
다음 예제는 화면의 왼쪽에서 100px, 위에서 200px 떨어진 위치에 팝업 창을 표시한다.
팝업 차단 고력하기
대부분의 팝업 창에서는 사용자에게 광고나 정보를 강제로 전달한다.
따라서 최신 웹 브라우저에서는 팝업 창이 열리지 않도록 하는 것을 기본으로 설정하는 경우가 많다.
또안 보안 프로그램이나 관련 유틸리티를 설치하면 웹 브라우저의 팝업이 자동으로 차단되기도 한다.
이런 경우 사용자는 웹 브라우저의 팝업 창이 자동으로 차단된 사실을 모를 수도 있다.
그래서 사이트의 공지와 같은 중요한 내용을 팝업 창으로 보여 주어야 한다면 팝업 차단된 상태인지 체크하여 알려 주는 것이 좋다.
다음은 팝업 창을 여는 openPop()함수에서 웹 브라우저의 차단 여부를 확인하는 예제이다.
웹 브라우저에서 팝업을 차단하면 window.open()은 null을 반환한다.
따라서 window.open() 메서드를 실행한 후 반환값을 체크하면 팝업이 차단되었는지 알아낼 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="openPopup()">
<p>문서를 열면 팝업 창이 표시된다.</p>
<script>
function openPopup(){
var newWin= window.open("test2.html","pop","width=500, height=400");
if (newWin == null){
alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
}
newWin.moveBy(100,100);
}
</script>
</body>
</html>
브라우저 창을 닫는 close() 메서드
일반적으로 팝업 창 내용을 모두 살펴본 후에 창을 닫을 수 있도록 화면 아래쪽에 [닫기] 버튼이나 링크를 포함하는 경우가 많다.
팝업 창을 여는 메서드가 open() 이라면 창을 다는 메서드는 close() 이다.
window.close() 메서드를 실행하면 현재 창을 닫는다.
navigator 객체
navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온-오프라인 등의 여러 정보가 담겨 있다.
이 정보는 사용자가 수정할 수 없으며, 가져와서 보여 줄 수만 있다.
웹 브라우저와 렌더링 엔진
웹 브라우저가 점점 다양해짐에따라 모든 사용자의 웹 브라우저에서 똑같이 동작하는 웹 문서를 개발할 필요성이 생겼다.
여러 웹 브라우저를 고려하여 개발하는 것은 웹 개발자에게 가장 어려운 부분이기도 하다.
여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할 분야는 렌더링 엔진이다.
아직 표준화되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정한다.
이렇게 지정하는 이유는 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 떄문이다.
웹 브라우저는 웹 문서를 불러오면 내장된 렌더링 엔진에서 소스를 해석한다.
이때 웹 브라우저마다 사용하는 렌더링 엔진이 다르므로 프리픽스를 붙여 브라우저를 구별한다.
마찬가지로 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다르다.
그래서 똑같은 HTML5 기술을 사용해서 만든 사이트에 접속하더라도 웹 브라우저마다 보여 주는 효과와 성능은 다를 수 있다.
크롬 브라우저의 주소 표시줄에 'chrome://version/' 을 입력해 보면 현재 사용하는 렌더링 엔진과 버전을 알 수 있다.
각 브라우저에 포함된 렌더링 엔진과 자바스크립트 엔진은 다음 표와 같다.
| 브라우저 | 렌더링 엔진 | 자바스크립트 엔진 |
| 크롬 | 블링크(Blink) | V8 |
| 파이어폭스 | 게코(Gecko) | 스파이더몽키(SpiderMonkey) |
| 인터넷 익스플로러 | 트라이덴트(Trident) | 차크라(Chakra) |
| 사파리 | 웹킷(Webkit) | 자바스크립트코어(JavascriptCore) |
| 오페라 | 블링크(Blink) | V8 |
userAgent 프로퍼티
navigator 객체에서 가장 먼저 알아야 할 프로퍼티는 userAgent로 사용자 에이전트 문자열을 의미한다.
userAgent는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용한다.
userAgent에는 사용자의 웹 브라우저 버전, 자바스크립트 엔진 종류 등 여러 정보가 들어있다.
따라서 서버에서는 그 정보를 확인하여 사용자에게 맞는 웹 페이지를 보여 줄 수 있다.
사용자 에이전트 문자열의 예시는 다음과 같다.
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36"사용자 에이전트 문자열은 Mozilla 라는 예약어로 시작한다.
최근에는 같은 자바스크립트 엔진을 사용하는 브라우저가 많아서 사용자 에이전트 문자열의 내용이 겹치므로 사용하지 않는 추세이다.
`
navigator 객체 정보 살펴보기
navigator 객체에 여러 속성이 포함된다.
| 종류 | 설명 |
| battery | 배터리 충전 상태를 알려 준다. |
| cookieEnabled | 쿠키 정보를 무시하면 false, 허용하면 true를 반환한다. |
| geolocation | 모바일 기기를 이용한 위치 정보를 나타낸다 |
| language | 브라우저의 UI의 언어 정보를 나타낸다 |
| oscpu | 현재 운영체제 정보를 나타낸다 |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열이다. |
navigator 객체의 메서드는 대부분 일부 브라우저에서만 지원한다는 점에 주의하자.
history 객체
history 객체에는 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
브라우저 히스토리는 보안 문제 때문에 읽기 전용이다.
| 구분 | 설명 | |
| 프로퍼티 | length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장된다. |
| 메서드 | back() | history 목록에서 이전 페이지를 현재 화면으로 불러온다. |
| forward() | history 목록에서 다음 페이지를 현재 화면으로 불러온다. | |
| go() | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러온다. 예를 들어 history.go(1)은 다음 페이지르르 가져오고, history.go(-1)은 이전 페에지를 불러온다. |
|
location 객체
location 객체는 이름에서도 알 수 있듯이 브라우저의 주소 표시줄과 관련된다.
즉, location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.
다음 표는 location 객체의 프로퍼티의 메서드를 정리한 것이다.
location 객체의 메서드는 브라우저의 [새로 고침] 과 같은 역할을 하는 reload() 메서드와 현재 창에 다른 문서나 사이트를 보여 주는 replace() 메서드가 매우 유용하다.
| 구분 | 설명 | |
| 프로퍼티 | hash | URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있다. |
| host | URL의 호스트 이름과 포트 번호를 담고 있다. | |
| hostname | URL의 호스트 이름이 저장된다. | |
| href | 전체 URL이다. 이 값을 변경하면 해당 주소로 이동할 수 있다. | |
| pathname | URL 경로가 저장된다. | |
| port | URL의 포트 번호를 담고 있다. | |
| protocol | URL의 프로토콜을 저장한다. | |
| passward | 도매인 이름 앞에 username과 passward 를 함께 입력해서 접속하는 사이트의 URL일 경우에 passward 정보를 저장한다. | |
| search | URL 중에서 ?로 시작하는 검색 내용을 저장한다. | |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장한다. | |
| 메서드 | assign() | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져온다. |
| reload() | 현재 문서를 다시 불러온다. | |
| replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다. | |
| toString() | 현재 문서의 URL을 문자열로 반환한다. | |
screen 객체
웹 사이트에 접속하는 사용자의 화면 크기는 모두 다르다.
사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용한다.
다음 표는 screen 객체의 프로퍼티와 메서드의 종류를 정리한 것이다.
screen 객체에서 사용하는 메서드는 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할을 한다.
이 2가지 메서드는 풀 스크린 상태일 때나 방향 전환을 할 수 있는 앱에서 사용한다.
| 구분 | 설명 | |
| 프로퍼티 | availHeight | UI 영역(예를 들어 윈도우의 작업 표시줄이나 Mac의 독)을 제외한 영역의 높이를 나타낸다. |
| availWidth | UI 영역을 제외한 내용 표시 영역의 너비를 나타낸다. | |
| colorDepth | 화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타낸다. | |
| height | UI 영역을 포함한 화면의 높이를 나타낸다. | |
| orientation | 화면의 현재 방향을 나타낸다. | |
| pixelDepth | 화면에서 픽셀을 랜더링할 때 사용하는 비트 수를 나타낸다. | |
| width | UI 영역을 포함환 화면의 너비를 나타낸다. | |
| 메서드 | lockOrientation() | 화면 방향을 잠근다. |
| unlockOrientation() | 화면 방향 잠금을 해제한다. | |
'📁Web Developing > JavaScript 기초' 카테고리의 다른 글
| DOM 요소에 접근하고 속성 가져오기 (0) | 2022.06.23 |
|---|---|
| 문서 객체 모델(DOM) (0) | 2022.06.23 |
| 객체 (0) | 2022.06.19 |
| DOM을 이용한 이벤트 처리기 (0) | 2022.06.19 |
| 이벤트와 이벤처리기 (0) | 2022.06.19 |
댓글