<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function showBigImage() {
window.open("bigImage.html", "bigWin", "width=600, height=800, left=200, top=50");
}
</script>
</head>
<body>
<center>
그림에 마우스를 올리면 <br>
그림을 크게 볼 수 있습니다. <br> <br>
<img src="image/고흐.jpg" widht="118" height="146" onmouseover="showBigImage()">
</center>
</body>
</html>
수행 결과
windowOpen을 실행시키고, 그림 위에 마우스를 올리게 되면 bigImage 파일이 열리면서 큰 이미지를 볼 수 있다.
window 객체의 open() 메소드 예제1
새로운 창 만들어서 열기
windowopen2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
// 새로운 창 만들어서 열기
// 새로운 창에 문자열과 버튼 출력 / 버튼 클릭 시 창 닫는 기능 포함
function openNewWindow() {
var createWin = window.open("", "newWin", "width=400, height=150");
createWin.document.write("새로 만든 윈도우 입니다.<br>");
createWin.document.write("<button onClick='window.close()'>닫기</button>")
}
function openWindow() {
window.open("windowOpen.html", "bigWin",
"width=200, height=200, left=200, top=50, status=yes, scrollbars=yes, resizable=yes");
}
</script>
</head>
<body>
<button onclick="openWindow()">Big Image 열기</button>
<button onclick="openNewWindow()">새 창 열기</button>
</body>
</html>
수행 결과
새 창 열기
Big Image 열기
window 객체의 타이머 관련 함수
setTimeout() / clearTimeout()
setinterval() / clearinterval()
setTimeout()
setTimeout('호출함수', 지연시간);
시간 설정
일정 시간이 지난 후에 호출 함수를 1번만 실행
setTimeout('winClose()', 1000); // 1초 후에 winClose() 함수 호출
clearTimeout()
clearTimeout(타이머ID);
시간 설정 해제
setTimeout() 메소드가 반환하는 타이머ID 받아서 타이머 ID에 해당되는 타이머 설정 해제
타이머 ID = setTimeout('호출함수', 지연시간);
timerID = setTimeout('showTime()', 1000); // 타이머 설정
clearTimeout(timerID); // 타이머 설정 해제
setTimeout() 예제1
시작할 때, msgWindow 창이 열리고,3초 후에 닫힘
setTimeout.html : msgWindow 열기
3초 후에 새 창이 닫히면
로드하자마자 열린 공지사항 창이 3초 내에 자동으로 닫혔다고 표기하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript setTimeout() 메소드</title>
<script type="text/javascript">
function openInfo(){
window.open("msgWindow.html", "setTimeout", "width=300, height=200");
}
// msgWindow 창이 닫히고 부모창이 setTimeout.html 창이 포커스를 받을 때 호출
function showMsg() {
document.write("로드 하자마자 열린 공지사항 창이 <br> 3초 내에 자동으로 닫혔습니다.");
}
</script>
</head>
<body onload="openInfo()" onfocus="showMsg()">
부모창입니다. (opener에 해당)
</body>
</html>
msgWindow.html : 3초 타임아웃 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function winClose() {
window.close();
opener.focus(); // 현재 창을 연 부모 창에 포커스 주기
}
</script>
</head>
<body onload="setTimeout('winClose()',3000)">
공지사항 <br>
이 창은 3초 후에 자동으로 닫힘니다
</body>
</html>
