-
자바스크립트 - BOM (Browser Object Model)웹프로그래밍/javascript 2018. 7. 20. 14:41
웹 브라우저와 관련된 객체의 집합이다.
window, location, navigator, history, screen, (document) 등
-window 관련 객체 출력
<!DOCTYPE html>
<html>
<head>
<script>
// 출력합니다.
var output = '';
for (var key in window) {
output += '●' + key + ': ' + window[key] + '\n';
}
alert(output);
</script>
</head>
<body>
</body>
</html>
-window.open() : 새창 열기
<!DOCTYPE html>
<html>
<head>
<script>
window.open('http://hanb.co.kr', 'child', 'width=600, height=300', true);
</script>
</head>
<body>
</body>
</html>
-window.open() : 윈도우 객체에 추가 입력
<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var child = window.open('', '', 'width=300, height=200');
// 출력합니다.
child.document.write('<h1>From Parent Window</h1>');
</script>
</head>
<body>
</body>
</html>
-setTimeout() : 타이머 메서드
<!DOCTYPE html>
<html>
<head>
<script>
// 윈도우가 로드될 때
window.onload = function () {
alert('3초후 이 페이지는 종료됩니다.');
// 3초 후에 함수를 실행합니다.
window.setTimeout(function () {
window.close();
}, 3000);
};
</script>
</head>
<body>
</body>
</html>
-clearInterval() : 시간 간격
<!DOCTYPE html>
<html>
<head>
<script>
// 윈도우가 로드될 때
window.onload = function () {
// 1초마다 함수를 실행합니다.
var intervalID = setInterval(function () {
document.body.innerHTML += '<p>' + new Date() + '</p>';
}, 1000);
// 10초 후 함수를 실행합니다.
setTimeout(function () {
// 타이머를 종료합니다.
clearInterval(intervalID);
}, 10000);
}
</script>
</head>
<body>
</body>
</html>
-moveBy
<!DOCTYPE html>
<html>
<head>
<script>
// 변수를 선언합니다.
var child = window.open('', '', 'width=300, height=200');
child.moveTo(0, 0);
// 1초마다 함수를 실행합니다.
setInterval(function () {
child.moveBy(10, 10);
}, 1000);
</script>
</head>
<body>
</body>
</html>
'웹프로그래밍 > javascript' 카테고리의 다른 글
자바스크립트 - 기본 내장객체 (0) 2018.07.20 자바스크립트 - DOM (Document Object Model) (0) 2018.07.20 자바스크립트 - 이벤트 (0) 2018.07.20