<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 브라우저 객체</title>
</head>
<body>
<h1>자바스크립트 브라우저 객체</h1>
<h2>개요</h2>
<p>웹브라우저의 여러 구성요소들을 객체형태로 구현해서
자바스크립트로 제어할 수 있도록 만들어 놓은 것</p>
<p>BOM은 W3C의 표준모델은 아님.</p>
<p>따라서, 브라우저 제조사마다 구현방식이 달라
특정 부분은 서로 호환되지 않는 것도 존재</p>
<h2>window객체</h2>
<p>웹브라우저의 창 자체를 의미하는 객체</p>
<p>innerHeight, innerWidth : 브라우저의 뷰포트 크기를 의미</p>
<script>
let iw = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
let ih = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
document.write('뷰포트너비 : ', iw, '<br>',
'뷰포트높이 : ', ih, '<br>')
</script>rs
<h2>문서열기/닫기</h2>
<p>window객체의 open 함수를 이용해서 지정한 문서를 새창이나 새로운탭에 띄울수 있음</p>
<p>또한, window객체의 close함수를 이용하면 띄워진 창이나 탭을 닫을수있음</p>
<p>창 생성시 창에 관한 속성(크기,너비등)을 설정하면 탭으로 생성되지 않고 독립적인 창으로 생성됨</p>
<p>주 브라우저의 url과 새창의 url이 동일하지 않을 경우 CSRF와 CORS교차출처리소스공유 보안 위배 </p>
<div>
<button type="button" id="btn1">새창띄우기</button>
<button type="button" id="btn2">닫기</button>
</div>
<script>
let mywin = null; //창객체를 저장할 변수 선언
let makeWin = () => {
mywin = window.open('http://finance.naver.com');
};
let rmvWin = () => {
mywin.close(); //특정 탭 닫음
};
const btn1 =document.getElementById('btn1');
const btn2 =document.getElementById('btn2');
btn1.addEventListener('click', makeWin);
btn2.addEventListener('click', rmvWin);
</script>
<h2>창 조작</h2>
<p>resize : 생성한 창의 크기를 변경</p>
<p>moveTo : 생성한 창의 위치를 변경</p>
<div>
<button type="button" id="btn3">새창 띄우기</button>
<button type="button" id="btn4">생성한 창 위치 변경</button>
<button type="button" id="btn5">생성한 창 크기 변경</button>
</div>
<script>
let makeWin2 = () => {
mywin = window.open('about:blank', null, 'popup, width=300, height=300')
};
let movWin = () => {
mywin.moveTo(500,500);
};
let rszWin = () => {
mywin.resizeTo(700,710);
};
const btn3 =document.getElementById('btn3');
const btn4 =document.getElementById('btn4');
const btn5 =document.getElementById('btn5');
btn3.addEventListener('click', makeWin2);
btn4.addEventListener('click', movWin);
btn5.addEventListener('click', rszWin);
</script>
<h2>screen</h2>
<p>사용자 디스플레이에 관한 정보를 다루는 객체</p>
<p>width, height : 사용자 디스플레이의 실제 해상도 크기 </p>
<p>availWidth, availHeight : 사용자 디스플레이 실제 해상도 중에서 실제 사용가능한 화면영역</p>
<script>
document.write('화면 가로크기 : ', screen.width,
'화면 세로크기 : ', screen.height, '<br>');
document.write('화면 최대 가로크기 : ', screen.availWidth,
'화면 최대 세로크기 : ', screen.availHeight, '<br>');
</script>
<div>
<button type="button" id="btn6">화면중앙에 새 창 띄우기</button>
</div>
<script>
let newwin=()=>{
win = window.open('/img/rubber-duck.png', null, 'popup, width=325, height=200' )
};
let WinCenter = () => {
win.moveTo(screen.availWidth/2-325/2, screen.availHeight/2-200/2);
}
const btn6 = document.getElementById('btn6');
btn6.addEventListener('click', newwin);
btn6.addEventListener('click', WinCenter);
</script>
<h2>특정함수 주기적으로 실행 </h2>
<p>window 객체의 setTimeout과 setInterval 함수를 이용하면
일정시간이 지난 후 어떤 함수를 실행시킬수 있고,
주기적으로 어떤 함수를 실행시킬수도 있음</p>
<p>setTimeout 또는 setInterval 등으로 실행중인 작업을 취소하려면
clearTimeout 또는 clearInterval을 사용</p>
<div id="datetime"></div>
<div id="timer">5초뒤 알람울림</div>
<div>
<button type="button" id="btn7">타이머 작동</button>
<button type="button" id="btn8">시간 보여주기 시작</button>
<button type="button" id="btn9">시간 보여주기 중지</button>
</div>
<script>
let mydt = null;
let fivesec = () => {
let timer = document.getElementById('timer');
timer.textContent = '드디어 5초가 다 흘렀군! ';
};
let startTimer = () => {
// setTimeout(콜백함수, 시간)
window.setTimeout(fivesec, 5000); //5초 뒤 처리할내용 정의
};
let showTime = () => {
const today = new Date();
let dt = document.getElementById('datetime');
dt.textContent = today.toLocaleDateString() + ' ' +
today.toLocaleTimeString();
}; // 현재 날짜와 시간을 알아내는 함수
let startWatch = () => {
showTime();
mydt = window.setInterval(showTime, 1000);
};
let stopWatch = () => {
window.clearInterval(mydt);
};
const btn7 = document.getElementById('btn7');
const btn8 = document.getElementById('btn8');
const btn9 = document.getElementById('btn9');
btn7.addEventListener('click', startTimer);
btn8.addEventListener('click', startWatch);
btn9.addEventListener('click', stopWatch);
</script>
<h2>랜덤창 띄우기</h2>
<div>
<button type="button" id="btn10">랜덤창 시작!</button>
<button type="button" id="btn11">랜덤창 중지!</button>
</div>
<script>
let showRan = () => {
win= window.open('/img/rubber-duck.png',
null, 'popup, width=325, height=200')
};
let moveRan = () => {
win.moveTo(Math.floor(Math.random() * 1001), Math.floor(Math.random() * 1001));
};
let startRan = () => {
showRan();
mydt = window.setInterval(moveRan, 1000);
};
let stopRan = () => {
window.clearInterval(mydt);
};
const btn10 = document.getElementById('btn10');
const btn11 = document.getElementById('btn11');
btn10.addEventListener('click', startRan);
btn10.addEventListener('click', moveRan);
btn11.addEventListener('click', stopRan);
</script>
<div>
<button type="button" id="btn12">랜덤창 시작!</button>
<button type="button" id="btn13">랜덤창 중지!</button>
</div>
<script>
const moveWin = () => {
// 0~n 사이 난수 : floor(random * n)
// 1~n 사이 난수 : floor(random * n) + 1
let x = Math.floor(Math.random() * 1920);
let y = Math.floor(Math.random() * 1080);
console.log(x+' ' + y);
mywin.moveTo(x,y);
mywin.focus();
}; //창의 위치를 난수로 생성한 후 그 위치에 창을 이동시킴
const resizeWin = () => {
let w = Math.floor(Math.random() * 300);
let h = Math.floor(Math.random() * 300);
mywin.resizeTo(w,h);
}; // 창의 크기를 난수로 생성한 후 그 값으로 창을 변경함
const startRndWin = () => {
makeWin2();
mydt = setInterval(()=> {
moveWin(); resizeWin();
mywin.focus(); }, 500 );
}; // 창을 하나 띄우고 ?초 간격으로 위치와 크기변경
const stopRndWin = () => {
clearInterval(mydt);
mywin.close();
}; //주기적으로 창띄우는 것 중지 후 창 닫음
const btn12 = document.getElementById('btn12');
const btn13 = document.getElementById('btn13');
btn12.addEventListener('click', startRndWin);
btn13.addEventListener('click', stopRndWin);
</script>
</body>
</html>