🎨 Programming/JavaScript
[JavaScript] 12. 브라우저 객체 모델(Browser Object Model)
ryang x2
2020. 9. 19. 01:10
728x90
반응형
# 브라우저 객체 모델(Brower Object Model)
웹 브라우저에 구현된 JavaScript 객체 모델을 의미하며 window 객체의 프로퍼티로 조회할 수 있습니다.
● window
현재 웹브라우저의 창이나 탭을 표현하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현하게 됩니다.
| setTimeout() | 일정 시간이 지난 후 매개변수로 제공된 함수를 실행합니다. (한 번) |
| setInterval() | 일정 시간마다 매개변수로 제공된 함수를 실행합니다. |
| clearTimeout() | 일정 시간 후 setTimeout()에서 실행된 함수를 중지합니다. |
| clearInterval() | 일정 시간마다 setInterval()에서 실행된 함수를 중지합니다. |
예시 1)
<script>
'use strict'
for(let win in window){
console.log(`${win} : ${window[win]}`);
}
</script>
예시 2) setTimeout
* clearTimeout() 메서드는 setTimeout() 메서드로 설정된 타이머를 지웁니다.
<script>
'use strict'
const st = window.setTimeout(Hi, 2000); // 2초
function Hi(){
alert('안녕하세요?');
}
clearTimeout(st);
</script>
예시 3) setInterval
<body>
<h2>setInterval</h2>
<script>
'use strict'
const si = setInterval(Hi, 2000);
function Hi(){
console.log('안녕하세요. JavaScript');
}
function Ci(si){
console.log('Hi() 중지되었습니다.')
clearInterval(si);
}
</script>
<button onclick="Ci(si)">중지</button>
</body>
● document
현재 로드된 웹 페이지를 표현하는 객체
● location
현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용합니다.
| href | 페이지의 URL 전체 정보를 반환합니다. URL을 지정하여 페이지를 이동할 수 있습니다. |
| protocol | 콜론을 포함하는 http, https, ftp 등 프로토콜 정보를 반환합니다. |
| hostname | 호스트의 이름과 포트번호를 반환합니다. |
| pathname | URL 경로 부분의 정보를 반환합니다. |
예시 1)
<script>
'use strict'
console.log(`현재 문서의 URL 주소는 : ${location.href} 입니다.`);
</script>
예시 2)
<script>
'use strict'
console.log(`현재 문서의 protocol 주소는 : ${location.protocol} 입니다.`);
</script>
예시 3)
<script>
'use strict'
console.log(`현재 문서의 hostname 주소는 : ${location.hostname} 입니다.`);
</script>
예시 4)
<script>
'use strict'
console.log(`현재 문서의 pathname 주소는 : ${location.pathname} 입니다.`);
</script>
예시 5)
<body>
<h2>location 객체 - 2</h2>
<script>
'use strict'
function sendit(){
console.log('sendit() 호출');
const frm = document.myform;
if(frm.site.value == 'naver'){
location.href = 'https://www.naver.com';
}else if(frm.site.value == 'daum'){
location.href = 'https://www.daum.net';
}else if(frm.site.value == 'google'){
location.href = 'https://www.google.com';
}else{
location.href = '4_setInterval함수.html';
}
}
</script>
<form name="myform">
<p><label>네이버 <input type="radio" value="naver" name="site" checked></label></p>
<p><label>다음 <input type="radio" value="daum" name="site"></label></p>
<p><label>구글 <input type="radio" value="google" name="site"></label></p>
<p><label>setInterval 함수 예제<input type="radio" value="page" name="site"></label></p>
<p><input type="button" value="이동" onclick="sendit()"></p>
</form>
</body>
● history
브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체의 접근하는 방법을 일부 제한하고 있습니다.
| back() | 브라우저에서 뒤로 버튼을 누른 효과를 냅니다. |
| go() | 매개변수로 전달된 숫자만큼 히스토리에 적용된 페이지로 이동합니다. (0 또는 음수) |
| goForward() | 브라우저에서 앞으로 버튼을 누른 효과를 냅니다. |
예시 )
<body>
<h2>history 객체</h2>
<script>
'use strict'
function goBack(){
history.back();
}
function go(){
history.go(-2);
}
function goForward(){
history.goForward();
}
function goReload(){
location.reload(); // = history.go(0);
}
</script>
<button onclick="goBack()">뒤로</button>
<button onclick="go()">뒤로 2페이지 이동</button>
<button onclick="goForward()">앞으로</button>
<button onclick="goReload()">새로고침</button>
</body>
● screen
장치의 디스플레이 정보를 담고 있는 객체입니다.
● navigator
브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체입니다.
| geolocation | 객체 : 지리위치 API, 사용자의 위치 정보를 확인할 수 있습니다. |
예시 )
<script>
'use strict'
navigator.geolocation.getCurrentPosition(success, fail);
function success(location){
console.log(location.coords.latitude);
console.log(location.coords.longitude);
}
function fail(msg){
console.log(msg.code);
}
</script>
문제)
시간 > 17 : 33 : 00
[시작][중지]
<body>
<h2>시계만들기</h2>
<div id="result"></div>
<p><input type="button" value="시작" onclick="startClock()"></p>
<p><input type="button" value="중지" onclick="stopClock()"></p>
<script>
'use strict'
function printTime(){
const today = new Date();
const hh = today.getHours();
const mm = today.getMinutes();
const ss = today.getSeconds();
document.getElementById('result').innerHTML = hh + ' : ' + mm + " : " + ss;
}
let timeId = null;
function startClock(){
printTime();
timeId = setInterval(printTime, 500);
}
function stopClock(){
clearInterval(timeId);
}
</script>
</body>
728x90
반응형