#33 자바스크립트에서 브라우저 객체 모델(BOM) 사용

#33 자바스크립트에서 브라우저 객체 모델(BOM) 사용

2023. 7. 24. 16:21ㆍ자바스크립트

BOM (Browser Object Model)은 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다.

이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델이다.

1. screen 객체는 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다.

속성	특징
screen.width	화면의 가로 크기를 가져옵니다.
screen.height	화면의 세로 크기를 가져옵니다.
screen.availWidth	작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다.
screen.availHeight	작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다.
screen.colorDepth	화면의 색상 팔레트 깊이(픽셀당 비트 수)를 반환합니다. [화면의 색상 팔레트 깊이(픽셀당 비트 수): 1, 4, 8, 15, 16, 24, 32 또는 48.]
screen.pixelDepth	색상 깊이를 픽셀당 비트 단위로 반환합니다. [픽셀당 비트 단위의 색 해상도: 1, 4, 8, 15, 16, 24, 32 또는 48.]

※ 참고, IE는 버전 10 이상에서 지원 되고 screen.pixelDepth 및 screen.colorDepth는 동일한 값을 반환합니다.

예시)

<div id="demo"></div>

<script>
var txt = "";
txt += "<p>화면 너비: " + screen.width + "</p>";
txt += "<p>화면 높이: " + screen.height + "</p>";
txt += "<p>작업표시줄 제외 너비: " + screen.availWidth + "</p>";
txt += "<p>작업표시줄 제외 높이: " + screen.availHeight+ "</p>";
txt += "<p>화면의 색상 팔레트 깊이 : " + screen.colorDepth + "</p>";
txt += "<p>픽셀당 비트 단위의 색 해상도: " + screen.pixelDepth + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>

결과)

2. Navigator 개체는 브라우저에 대한 정보가 들어 있습니다.

Navigator 개체 속성

속성	특징
appCodeName	브라우저 코드 이름을 반환합니다.
appName	브라우저 이름 반환합니다.
appVersion	브라우저 버전 반환합니다.
cookieEnabled	브라우저 쿠키가 활성화된 경우 true를 반환합니다.
geolocation	사용자 위치에 대한 지리적 위치 개체를 반환합니다.
language	브라우저 언어 반환합니다.
onLine	브라우저가 온라인이면 true를 반환합니다.
platform	브라우저 플랫폼 반환합니다.
product	브라우저 엔진 이름을 반환합니다.
userAgent	브라우저 사용자 에이전트 헤더를 반환합니다.

Navigator 개체 메서드

메소드	메소드 특징
javaEnabled()	브라우저에 Java가 활성화되어 있으면 true를 반환합니다.
taintEnabled()	주의! JavaScript 버전 1.2(1999)에서 제거되었습니다. 사용시 에러가 발생 됩니다. (브라우저에 데이터 오염이 활성화되어 있으면 true, 그렇지 않으면 false)

예시)

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  document.getElementById("demo2").innerHTML =
  "이 브라우저는 지리적 위치를 지원하지 않습니다.";
}

function showPosition(position) {
  document.getElementById("demo2").innerHTML =
  "당신의 위치는 <b>위도</b>: " + position.coords.latitude + " "+
  "<b>경도</b>: " + position.coords.longitude;
}

</script>

결과)

3. location 개체는 현재 페이지 주소(URL) 및 브라우저를 새 페이지로 리디렉션 합니다.

location 속성

속성	특징
location.ancestorOrigins	주어진 Location 객체와 연관된 document의 모든 조상 browsing context들이 역순으로 담긴 static한 DOMStringList이다.
location.href	전체 URL을 담고있는 USVString을 리턴하는 stringifier이다. 값이 바뀌면 연관된 document는 새로운 페이지로 이동한다.
location.protocol	URL의 프로토콜 스키마를 담고 있는 USVString]이다. (마지막 :를 포함한다.)
location.host	host를 담고 있는 USVString이다. (:와 URL의 포트번호를 포함한다.)
location.hostname	URL의 도메인을 담고 있는 USVString이다.
location.port	URL의 포트 번호를 담고 있는 USVString이다.
location.pathname	최초 / 뒤에 나오는 path들을 담고 있는 USVString이다. (query string이나 fragment는 포함하지 않는다.)
location.search	? 를 포함하여 그 뒤에 나오는 URL의 파라미터나 querystring을 담은 USVString이다. 모던 브라우저들은 querystring으로부터 parameter들을 쉽게 파싱할 수 있도록 URLSearchParams나 URL.searchParams등을 제공해준다.
location.hash	# 를 포함하여 뒤에 나오는 fragment 식별자를 담은 USVString이다.
location.origin	Read only - 대표 URL origin의 유니코드 직렬화를 담고 있는 USVString이다.

예시)

<div id="demo"></div>

<script>
var txt = "";
txt += "<p>ancestorOrigins: " + location.ancestorOrigins + "</p>";
txt += "<p>전체 URL: " + location.href + "</p>";
txt += "<p>URL의 프로토콜: " + location.protocol + "</p>";
txt += "<p>호스트: " + location.host+ "</p>";
txt += "<p>URL의 도메인: " + location.hostname + "</p>";
txt += "<p>URL의 포트 번호: " + location.port + "</p>";
txt += "<p>/뒤에 나오는 path: " + location.pathname + "</p>";
txt += "<p>? 를 포함하여 그 뒤에 나오는: " + location.search + "</p>";
txt += "<p># 를 포함하여 뒤에 나오는: " + location.hash + "</p>";
txt += "<p>대표 URL: " + location.origin + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>

결과)

location 메소드

메소드	특징
location.assign()	파라미터로 전달한 URL에서 리소스를 로드한다.
location.reload()	새로고침 버튼과 같이 현재의 URL을 다시 로드한다.
location.replace()	파라미터로 전달된 URL로 리다이렉트하면서) 전달된 URL의 리소스로 현재의 리소스를 교체한다. assign() 메소드나 href 속성을 교체하는 것과 replace()가 다른 점: replace()를 사용하고 나면 현재의 페이지는 session History에 저장되지 않는다. 이 말은 back 버튼을 눌러도 다시 이 전 페이지로 이동할 수 없다는 뜻이다. 그리고 캐시를 사용하지 않는다.
location.toString()	전체 URL을 담고 있는 USVString을 리턴한다. HTMLHyperlinkElementUtils.href 와 동일한 기능이지만 값을 수정하기 위해 사용할 수는 없다.

예시)

결과)

location.reload 사용시 출력결과 (홈페이지 새로고침 결과는 생략)

location.replace 사용시 출력결과 (홈페이지 이동 결과는 생략)

4. history 개체는 최근에 방문한 URL의 배열로 반환합니다.

속성	특징
history.length	페이지가 몇 페이지로 구성되어 있는지 알 수 있다.
history.state	히스토리 현재상태를 반환합니다.

메소드	특징
history.back()	윈도우 열람 이력에서 뒤로 이동
history.forward()	윈도우 열람 이력에서 앞으로 이동
history.go()	인수를 전달하면 해당 인수에 저장된 url으로 이동 된다. ※ 이전 페이지 index 번호 : -1 , 현재 페이지 index 번호 : 0 , 다음 페이지 index 번호 : 1
history.pushState()	3개의 변수 state 객체, title (예약되나 내부역할 없음), 옵션인 URL 객체를 가집니다. history에 새로운 history를 추가하며 실제 페이지 이동은 일으키지 않습니다. 특히 페이지를 reload하지 않고 url만 변경해야 할 경우 사용한다. 사용법 : // 상태 값을 나타내는 것으로 브라우저에서 앞/ 뒤로 갈 때, 넘겨줄 데이터 var state = { 'page_id': 1, 'user_id': 5 }; // 변경할 브라우저 제목 (변경을 원하지 않으면 null = '') var title = '변경할 타이틀'; // 변경할 브라우저 URL var url = '변경할 홈페이지 주소'; // url 변경 history.pushState(state, title, url); ※ HTML5 이상환경 지원
history.replaceState()	히스토리를 추가하지 않고 덮어씁니다. history.replaceState()는 history.pushState()와 동일하게 동작하지만, replaceState()는 새로운 히스토리를 하나 생성하는 대신에 현재의 히스토리 엔트리를 변경합니다. 하지만 전역 브라우저 히스토리에 새로운 항목을 추가하는 것을 막지는 않습니다. replaceState() 는 state 객체나 사용자의 동작에 따라 현재 히스토리 엔트리의 URL을 업데이트 하려고 할 때 매우 유용합니다. 사용법 : history.replaceState(state, title[, url]) 식별자 : state replaceState에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 null일 수 있습니다. title 나중에는 사용할 수도 있지만, 대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다. 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다. url history 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생합니다. ※ HTML5 이상환경 지원
history.popstate()	popstate 이벤트는 현재 활성화된 히스토리 엔트리에 변화가 있을 때 마다 실행됩니다. 만약 pushState 함수나 replaceState 함수에 의해 현재 활성화되어 있는 히스토리 엔트리가 조작 및 변경된다면, popstate 이벤트의 state 속성은 히스토리 항의 state 객체의 사본이 됩니다. ※ HTML5 이상환경 지원

예시)

<p> goBack / goForward 메소드 이용 :
<button onclick="goBack()">이전 페이지</button>
<button onclick="goForward()">다음 페이지</button>
</p>

<p>  go 메소드 이용 :
<button onclick="goBack_1()">이전 페이지</button>
<button onclick="goForward1()">다음 페이지</button>
</p>

<div id="demo"></div>

<script>

    //이전 페이지
    function goBack() {
history.back();
    }

    //다음 페이지
    function goForward() {
history.forward();
    }

    //이전 페이지
     function goBack_1() {
history.go(-1);
    }

    //다음 페이지
    function goForward1() {
history.go(1);
    }

var txt = "";
txt += "<p>히스토리 페이지 수: " + history.length + "</p>";
txt += "<p>히스토리 현재상태: " + history.state + "</p>";

document.getElementById("demo").innerHTML = txt;

</script>

결과)

※ 혹시 설명에 오류가 있다면 양해 부탁드립니다.

'자바스크립트' 카테고리의 다른 글

#34 자바스크립트에서 타이머(timer) 사용 (0)	2023.07.26
#32 자바스크립트에서 이벤트 리스너 등록/삭제 - addEventListener() , removeEventListener() (0)	2023.07.23
#31 자바스크립트에서 DOM 요소의 선택하기 (0)	2023.07.23
#30 자바스크립트에서 this 사용하기 (0)	2023.07.20
#29 자바스크립트에서 Object.assign() 메소드를 이용한 객체를 생성 및 create()와 차이점 (0)	2023.07.20

태그

최근글

댓글

공지사항

아카이브

'자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바