H_eh
2022. 7. 14. 11:50
BOM(Browser Object Model)
자바스크립트로 브라우저를 제어하기 위해 지원되는 객체
- 브라우저 공통 BOM 객체와 기능
-
window – 브라우저 윈도우 모양 제어. 새 윈도우 열기/닫기
-
history - 브라우저 윈도우에 로드한 URL 리스트의 히스토리 관리
-
location – 브라우저 윈도우에 로드된 HTML 페이지의 URL 관리
-
window 객체
열려 있는 브라우저 윈도우나 탭 윈도우의 속성을 나타내는 객체
브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성
- 이름 없는 윈도우 열기
<button onclick=“window.open(‘http://www.naver.com’, ‘’,
‘width=600,height=600’)”>새 윈도우 열기
</button>
- window 객체의 타이머 기능
- 타임아웃 코드 1회 호출
- setTimeout()/clearTimeout() 메소드
- ex) 3초 후 경고창 출력
- 타임아웃 코드 1회 호출
function myAlert(time) {
alert(time + "초 지났습니다");
}
var timerID = setTimeout("myAlert(3)", 3000);
// 3초 후 myAlert(‘3’) 호출
clearTimeout(timerID);
// timerID의 타이머 해제
- 타임아웃 코드 반복 호출
- setInterval()/clearInterval() 메소드
- ex) 1초 간격으로 f() 반복 호출
function f() {
// 함수 코드
}
var timerID = setInterval("f()", 1000);
// 1초 주기로 f()가 호출되도록 타이머 작동
clearInterval(timerID);
// timerID의 타이머 해제
- 사진에 5초 동안 마우스를 올리면 지정사이트를 새창으로 띄우기
더보기
<body>
<img id="im" src="C:/Users/soldesk/Desktop/치킨.png" onmouseover="start(5000)"
onmouseout="cancel()">
<script>
var n=null;
function start(t){
n=setTimeout("load('http://www.naver.com')",t);
document.getElementById("im").title="시작!!";
}
function cancel(){
if(n!=null){
clearTimeout(n); //타임 중단
}
}
function load(url){
window.location=url;
}
</script>
</body>
- 간단한 전광판st
더보기
<body>
<div id="aa">자바스크립트 넘나 재밌는 것</div>
<script>
var n=document.getElementById("aa");
var t=setInterval("on()",200);
//0.2초 주기로 on함수를 호출한다!!
n.onclick=function(e){
clearInterval(t);
//타이머 해제
}
function on(){
var a=n.innerHTML;
var b=a.substr(0,1);
var c=a.substr(1,a.length-1);
a=c+b;
n.innerHTML=a;
}
</script>
</body>
- 1초씩 흘러가는 시간 표시
history 객체
윈도우에서 방문한 웹 페이지 리스트를 나타내는 객체
- history 객체를 이용하여 웹 페이지를 이동하는 코드
history.back(); // 이전 페이지로 이동
history.go(-1); // 이전 페이지로 이동
history.forward(); // 다음 페이지로 이동
history.go(1); // 다음 페이지로 이동
728x90
728x90