브라우저 객체 모델(BOM)의 종류와 사용법을 정리해보겠습니다.
window, screen, location, history, navigator, document 객체를 이용해서 웹 브라우저에서 제공하는 정보를 이용하고 브라우저 기능을 자유자재로 다룰 수 있을 것 입니다.
지난 글에서 자바스크립트에는 3가지 객체가 있으며, 객체 기본 사용법과 내장 객체를 어떻게 사용하는지에 대해 소개해드렸었습니다.
자바스크립트 객체 사용법, 3종류 객체 핵심 정리
자바스크립트 객체 핵심 정리를 해보겠습니다. 내장 객체, 브라우저 객체, 문서 객체 모델에 대해 다룰 것 입니다. 이전 자바스크립트 공부 순서 글에서 언급했듯이, 자바스크립트의 가장 큰 특
cucat.tistory.com
이번 글에서는 지난 글에서 못다한 아래 내용을 다루도록 하겠습니다.
1. 브라우저 객체의 구조
브라우저 객체는 브라우저에 내장된 객체이며, WEB API에 속합니다.
WEB API 자체는 자바스크립트의 기능은 아니지만, 자바스크립트를 통해 제어할 수 있습니다.
- window : 브라우저 객체의 최상위 객체입니다.
- screen : 우리가 브라우저를 보는 모니터 화면에 대한 기능을 담은 객체입니다.
- location : 위치 정보에 대한 기능을 담은 객체입니다.
- history : 사용자의 방문 기록에 대한 기능을 담은 객체입니다.
- navigator : 사용자의 브라우저, 운영체제에 대한 기능을 담은 객체입니다.
- document : HTML 문서의 속성이나 그 안의 태그를 선택, 생성, 편집할 수 있는 객체입니다.
참고로, document 객체는 다음 글에서 살펴볼 문서 객체 모델(DOM)의 루트가 되는 객체입니다.
살짝만 봐도 유용할 것 같지 않나요?
특히 screen은 사용자 기기의 너비와 높이 등을 감지할 수 있기 때문에 반응형 웹사이트를 구현하는 웹퍼블리싱에서도 자주 쓰입니다.
자 그럼 하나씩 브라우저 객체를 살펴보겠습니다.
2. 자주 쓰는 브라우저 객체 메서드와 사용법
window 객체
먼저 최상위 객체인 window 객체에서 자주 쓰는 메서드는 어떤 것들이 있는지 알아보겠습니다.
- 작성한 URL로 새 창 열기 : open("URL","새 창 이름","새 창 옵션")
- 데이터가 담긴 경고창 띄우기 : alert(data)
- 질문이 담기고, 답변을 쓸 수 있는 창 띄우기 : prompt("질문","")
- 질문이 담기고, 확인과 취소 버튼이 있는 창 띄우기 : confirm("질문")
- 특정한 브라우저 창의 위치 이동 : moveTo(x,y)
- 특정한 브라우저 창의 크기 변경 : resizeTo(width, height)
- 일정한 시간 간격으로 반복해서 함수 호출 실행 : setInterval(function(){코드 내용}, 시간 간격)
- 특정한 시간에 맞춰 함수 호출 실행 : setTimeout(function(){코드 내용}, 시간 간격)
이 중에서 alert, prompt, confirm은 아래 제어문 글에서 예시를 많이 들었으니 참고해주세요.
제어문(조건문, 선택문, 반복문) 7가지 핵심 정리
제어문(조건문, 선택문, 반복문) 7가지 핵심 정리를 해보겠습니다. 제어문은 조건문, 선택문, 반복문 이렇게 3가지로 나뉩니다. 그리고 자바스크립트에서 사용 가능한 제어문은 각각 아래와 같이
cucat.tistory.com
팝업 띄우기
open은 팝업창을 띄울 때 사용할 수 있어서 매우 유용한 메서드입니다. 사용법은 아래와 같습니다.
//1. URL로 새 창 띄우기
window.open("http://www.naver.com", "새창 네이버", "width=350, height=400, left=50, top=50, scrollbars=no");
//2. 저장된 html 문서로 새 창 띄우기
window.open("브라우저객체_open_팝업문서.html","팝업 제목","width=350, height=400, left=250, top=50");
2번의 경우에는 아래와 같이 별도의 팝업용 html문서를 만들고, 버튼을 클릭하면 window.close로 팝업 창을 닫게 할 수 있습니다.
<body>
<p>팝업 내용입니다.</p>
<button onclick="window.close();">창 닫기</button>
</body>반복 실행, 예약 실행
또 자주 쓰이는 것은 setInterval과 setTimeout입니다.
반복 실행과 예약 실행의 차이가 있지만 사용법은 같으며 각각 clearInteval과 clearTimeout로 중단할 수 있습니다.
먼저 setInterval로 반복 실행을 해보겠습니다.
<body>
<p id="showNum"></p>
<button onclick="clearInterval(banbok)">정지</button>
</body>
<script>
let num=0;
let banbok= setInterval(function(){
num++;
document.getElementById("showNum").innerHTML= num;
}, 1000); //1초마다 안의 코드 실행
</script>
참고로 document.write는 태그도 줄바꿈도 없이 그냥 문자를 쓰는 것이라서 body에 작성한 버튼도 사라져버립니다.
따라서 write를 쓰려면 document.write("<p>"+num+"</p>");를 해줘야 버튼이 사라지지 않습니다.
예시처럼 html 태그에 글자를 넣는 것은 innerHTML입니다. 숫자가 나열되지 않고 p태그에 계속 고쳐쓰입니다.
getElementById는 CSS에서 #으로 특정 아이디를 선택하는것과 같습니다.
위의 예시에서 증가를 감소로 고치면 간단히 카운트 다운을 만들 수 있습니다. 버튼을 누르지 않아도 if문으로 제어가 가능합니다.
<body>
<p id="showNum"></p>
</body>
<script>
let count= 10;
let countDown= setInterval(function(){
count--;
document.getElementById("showNum").innerHTML= count;
if(count === 0)clearInterval(countDown);
}, 1000);
</script>
이번에는 setTimeout을 써보겠습니다.
위의 카운트 다운에서 10초가 지나면 0에서 그냥 멈췄다면, setTimeout을 이용해 10초 후에 특정 문장을 나타내도록 할 수 있습니다.
<body>
<p id="showNum"></p>
</body>
<script>
let count= 10;
let countDown= setInterval(function(){
count--;
document.getElementById("showNum").innerHTML= count;
if(count === 0)clearInterval(countDown);
}, 1000);
let timeOut= setTimeout(function(){
document.getElementById("showNum").innerHTML= "카운트 다운이 끝났습니다.";
}, 10000)
</script>screen 객체
스크린 객체는 다음과 같은 메서드로 사용자 기기의 화면(모니터, 액정)의 정보를 제공합니다.
- 화면의 너비 값 반환 : screen.width
- 화면의 높이 값 반환 : screen.height
- 작업표시줄을 제외한 화면 너비 값 반환 : screen.availWidth
- 작업표시줄을 제외한 화면 높이 값 반환 : screen.availHeight
- 사용자의 모니터, 액정에서 표현할 수 있는 컬러 bit 값 반환 : screen.colorDepth
document.write(screen.width+"<br>"+screen.colorDepth);
간단히 찍어보면 알 수 있듯이, 실제 기기의 해상도 값을 알 수 있습니다.
location 객체
이 객체는 다음과 같이 사용자가 사용하고 있는 브라우저와 관련된 메서드와 속성을 제공합니다.
- URL 정보를 참조, 변경, 반환 : location.href
- URL의 #값 반환 : location.hash
- URL의 요청값 반환 : location.search
- 브라우저 새로고침 : location.reload()
이 밖에도 다양하지만 주로 쓰이는 것만 꼽아보았습니다.
아래와 같이 간단히 사용 예시를 들어보았지만 없는 예시를 만드려니 창의성이 부족하군요;
<body>
<!-- 버튼 클릭시 -->
<button onclick="gotoGoogle()"><a href="#google">구글로 이동</a></button>
<button><a id="btn2" href="#reload">새로고침</a></button>
</body>
<script>
//특정 해쉬값이면 URL 이동
function gotoGoogle(){
if(location.hash=="#google") {
location.href="https://www.google.com/"
}
}
//버튼 클릭시 새로고침
// btn2에 <button onclick="location.reload()>" 라고 해도 됩니다.
document.getElementById("btn2").addEventListener("click", function (){
location.reload();
alert("리로드 되었습니다.");
});
//location.search는 쿼리값을 파라미터별로 따로 가져오기가 까다로우니 콘솔창에 직접 입력해서 테스트만 해봅시다.
//콘솔 창에 아래 명령어를 입력하면,검색한 쿼리값이 무엇인지 조회할 수 있습니다.
location.search
앞서 배웠던 setInterval을 이용해서, 일정한 시간마다 iframe속 티켓 예매 사이트 또는 뉴스 사이트를 새로고침 하는 프로그램이라든지 여러가지로 메서드를 응용할 수 있을 것 입니다.
history 객체
이 객체는 다음과 같이 사용자가 방문한 기록 정보를 제공합니다.
- 이전에 방문한 사이트로 이동 : history.back()
- 다음에 방문한 사이트로 이동 : history.forward()
- n단계 이전에 방문한 사이트로 이동 : history.go(이동할 단계 숫자)
- 방문 기록에 저장된 목록 개수 반환 : history.length
//history.back()
document.getElementById("btnBack").addEventListener("click", function(){
history.back();
})
//history.forward()
document.getElementById("btnForward").addEventListener("click", function(){
history.forward();
})
//history.go(이동할 단계 숫자)
document.getElementById("btnBackStep").addEventListener("click", function(){
let stepNum= prompt("이동할 이전 방문 페이지 단계는?","");
history.go(stepNum);
})
//history.length
document.getElementById("btnShowHistory").addEventListener("click", function(){
alert(history.length);
})
브라우저에 버튼이 있어서 따로 쓸 일이 있을까 싶지만, 입력 폼을 받을 때 조건에 따라 이전 단계로 가는 등으로 사용되곤 합니다.
navigator 객체
이 객체는 다음과 같이 방문자가 사용하는 브라우저의 정보, 운영체제의 정보를 제공합니다.
- 브라우저가 사용하고 있는 언어 반환 : navigator.language
- 브라우저의 엔진 이름 반환 : navigator.product
- 컴퓨터 운영체제 정보 반환 : navigator.platform
- 온라인 상태 여부 반환 : navigator.onLine
- 브라우저, 운영체제의 종합적인 정보 반환 : navigator.userAgent
콘솔창에 위의 메서드들을 입력해보면 다음과 같이 나옵니다.
navigator.language
'ko-KR'
navigator.product
'Gecko'
navigator.platform
'MacIntel'
navigator.onLine
true
navigator.userAgent
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
Gecko는 크롬의 엔진입니다.
navigator.userAgent에 나오기도 하는 브라우저의 코드명, 이름, 버전 정보 메서드는 현재 시점에서는 모두 동일하게 나오기 때문에 생략하였습니다.
만약 특정 브라우저에서 서비스가 원활하게 되지 않는다면, 안내문을 출력해서 다른 브라우저로 접속하도록 할 수 있겠습니다.
document 객체
이 객체는 HTML 문서, 웹페이지 그 자체입니다. 상위 객체인 window안에 있는 웹문서입니다.
따라서 문서 객체 모델(DOM)의 뿌리가 되는 객체이며, HTML 요소를 선택하고 조작하는데에 유용하게 쓰입니다.
이미 그동안의 예시에서 document.write, document.getElementById 등으로 사용해왔었습니다.
요소를 선택하고 편집하는 등의 HTML 조작은 DOM을 이용한 다양한 메소드들이 있으므로 다음 글에서 용도별로 묶어서 한꺼번에 다루도록 하겠습니다.
자바스크립트로 HTML을 조작하는 방법
자바스크립트로 HTML을 조작하는 방법을 정리해보겠습니다. 지난 글에서 문서 객체 모델(DOM)과 노드에 대해 개념을 알아보았습니다. 문서 객체 모델(DOM), 노드 구조와 개념 정리 문서 객체 모델(DO
cucat.tistory.com
위 글을 읽기 전에 아래에 DOM과 노드에 대한 개념 정리를 따로 해두었으니 참고해주세요.
문서 객체 모델(DOM), 노드 구조와 개념 정리
문서 객체 모델(DOM)과 노드 구조와 개념에 대해 정리해보겠습니다. 이전 글에서 브라우저 객체 모델을 공부하면서, 마지막에 document 객체에 대해 알아보았었습니다. 브라우저 객체 모델 6가지 정
cucat.tistory.com
여기까지 브라우저 객체 모델 6가지(window, screen, location, history, navigator, document)정리와 사용법에 대해 알아보았습니다. 긴 글 읽어주셔서 감사합니다.
'웹 > 웹코딩 공부' 카테고리의 다른 글
| 자바스크립트 함수 사용법 정리 (1) | 2022.08.17 |
|---|---|
| 자바스크립트로 HTML을 조작하는 방법 (0) | 2022.08.12 |
| 문서 객체 모델(DOM), 노드 구조와 개념 정리 (0) | 2022.08.10 |
| 자바스크립트 객체 사용법, 3종류 객체 핵심 정리 (0) | 2022.08.10 |
| 제어문(조건문, 선택문, 반복문) 7가지 핵심 정리 (0) | 2022.08.08 |
| 연산자 7종류 핵심 정리 (0) | 2022.08.08 |
| 변수의 개념과 사용법, 자료형 정리 (0) | 2022.08.08 |
| 자바스크립트 공부 순서 4단계로 정리 (0) | 2022.08.08 |
댓글