window객체
창에 대한 전반적인 모든 상황을 제어하는 최상위 객체로 widow객체에서 파생 된 다른 객체를 이용해 대부분의 작업을 처리한다. 매우 다양한 메서드와 속성을 제공하는데 alert(), confirm(), prompt()도 window 객체에 포함 된 메서드다. 원칙적으로 window.메서드() 처럼 window를 붙여서 사용해야 하지만 생략해도 무방하다.
| 메서드 | 설명 |
| open() | 새로운 윈도우를 엶 |
| close() | 열린 창을 닫음 |
| setInterval() | 일정 시간 간격으로 반복적으로 함수 호출. 함수 수행 중지는 clearInterval() 사용 |
| setTimeout() | 일정 시간 후 지정함수를 수행. 함수 수행 중지는 clearTimeout() 사용 |
| alert() | 경고창 표시 |
| confirm() | 확인창 표시 |
| prompt() | 입력창 표시 |
| moveBy(x, y) | 창을 현재 위치에서 상대적인 양만큼 이동 |
| moveTo(x좌표, y좌표) | 창을 임의의 절대 위치로 이동 |
| resizeBy(폭, 높이) | 창의 크기를 상대적인 크기만큼 변경 |
| resizeTo(폭, 높이) | 창의 크기를 절대 크기로 변경 |
open(), close() 메서드
창을 열고 닫아주는 메서드.
window.open("연결할 url", "타깃 또는 창의 이름", "옵션리스트(속성=값, 속성=값,...)" )
-옵션리스트-
| 창 속성 | 설명 | 속성값 |
| location | URL 표시하는 주소 표시줄의 표시 여부 | yes / no |
| status | 상태 표시줄의 표시 여부 | |
| menubar | 메뉴바의 표시 여부 | |
| resizable | 사용자에 의한 창의 크기 조절 가능 여부 | |
| height | 창의 높이를 지정 | 픽셀 수 |
| width | 창의 너비를 지정 | |
| left | 창의 표시될 x축 위치 지정 | |
| top | 창의 표시될 y축 위치 지정 |
<!doctype html>
<head>
<meta charset="UTF-8">
<title>window open, close</title>
<script>
function winOpen(){
window.open("notice.html", "_blank", "width=500, height=400, left=200, top=100");
}
</script>
</head>
<body>
<h1>공지사항 열기</h1>
<input type="button" value="창 열기" onClick="winOpen()">
</body>
</html><!doctype html>
<head>
<meta charset="UTF-8">
<title>notice.html</title>
<script>
function winClose(){
ans = confirm("창을 닫겠습니까?");
if (ans) window.close();
}
</script>
</head>
<body>
<h1>공지사항</h1>
<img src="resource/fish.jpg" width="350" ><br>
<input type="button" value="창 닫기" onClick="winClose()">
</body>
</html>
창의 크기와 위치 조정
창의 크기 조정 : resizeBy(폭, 높이), resizeTo(폭, 높이)
창의 위치 조정 : moveBy(x, y), moveTo(x, y)
By는 상대적인 변화, To는 절대적인 값.
대부부느이 브라우저에서 이메서드들은 기본적으로 비활성화되어 있다. 위치 조정은 오직 최상위 창에서만 동작하고, 크기조정은 최상위 window객체에만 적용된다.
setTimeOut() 메서드
타임아웃은 지정한 시간 후에 특정 코드를 실행하는 메서드로 지연시간은 1/1000초 단위로 숫자값을 입력한다.
timerID = setTimeout("호출함수", 지연시간)
clearTimeout(timerID)
-setTimeout() 메서드 사용해서 1.5초 후 큰이미지창 닫기-
<!doctype html>
<head>
<meta charset="UTF-8">
<title>window setTimeout</title>
</head>
<body onLoad="window.resizeTo(500,350)">
<h1>타임아웃</h1>
<p>영상을 클릭하면 큰 영상을 볼 수 있습니다. 그리고 1.5초 후 원래 영상크기로 돌아옵니다.</p>
<img src="resource/fish.jpg" onClick="bigImage(); return true" width=150>
<script>
function bigImage() {
window.open("bigimage.html", "");
}
</script>
</body>
</html><!doctype html>
<head>
<meta charset="UTF-8">
<title>bigimage.html</title>
</head>
<body onLoad="setTimeout('window.close();', '1500')">
<img src="resource/fish.jpg">
</body>
</html>
시계나 움직이는 문자열과 같이 일정한 시간 간격으로 반복적인 일을 수행하기 위해서는 setTimeout()메서드를 호출하는 함수가 끝나기 전에 다시 setTimeout()을 호출하는 재귀적 호출방식으로 함수를 사용한다.
-setTimeout() 메서드 재귀적 호출 1초마다 현재시간 불러오기-
<!doctype html>
<head>
<meta charset="UTF-8">
<title>window setTimeout</title>
</head>
<body onLoad="showTime();">
<h1>타임아웃(재귀함수)</h1>
<div id="clock"></div>
<script>
function showTime() {
today = new Date();
today = today.toLocaleString();
var clock = document.getElementById("clock");
clock.style.backgroundColor = "yellow";
clock.innerHTML = today;
setTimeout("showTime()", 1000);
}
</script>
</body>
</html>
설정된 내용을 해제하기 위해서는 clearTimeout() 메서드의 매개변수로 setTimeout()메서드의 반환값을 사용한다.
-clearTimeout() 메서드 사용해서 setTimeout() 메서드 설정 내용 해제-
<!doctype html>
<head>
<meta charset="UTF-8">
<title>window clearTimeout</title>
<script>
var timerID;
function Show(n){
if(n<1){
clearTimeout(timerID);
location.replace("newhome.html");
}else{
myArea = document.getElementById("myArea");
myArea.innerHTML = (n+"초후에 새 문서가 표시됩니다.");
timerID = setTimeout("Show(" + (n-1) + ")",1000);
}
}
</script>
</head>
<body onLoad="Show(10);">
<h1>타임아웃 함수 멈추기</h1>
<span id="myArea"></span>
</body>
</html><!doctype html>
<head>
<meta charset="UTF-8">
<title>newhome.html</title>
</head>
<body>
<h1>지정 시간 후 새페이지</h1>
</body>
</html>setInterval() 메서드
인터벌은 일정한 간격으로 특정함수를 반복 호출하는 메서드로 무한히 반복되는 동작을 정지하기 위해서는 clearInterval()메서드를 사용한다.
timerID = setInterval("호출함수", 간격)
clearInterval(timerID)
-interval 메서드 사용해서 시간표시하기-
<!doctype html>
<head>
<meta charset="UTF-8">
<title>window setinterval</title>
</head>
<body onLoad="showTime();">
<h1>인터벌</h1>
<div id="clock"></div><br>
<button onClick="showTime();">다시 시작</button>
<button onClick="stopClock();">일시 정지</button>
<script>
var timerID;
function showTime(){
var clock = document.getElementById("clock");
timerID = setInterval(function(){clock.innerHTML=new Date().toLocaleString();},1000);
}
function stopClock() {
clearInterval(timerID);
}
</script>
</body>
</html>
'프로그래밍언어 > JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX(Asynchronous Javascript And XML) (0) | 2025.03.11 |
|---|---|
| [JavaScript] JSON(JavaScript Object Notation) (0) | 2025.03.11 |
| [JavaScript] 문서 객체 모델(DOM) (0) | 2022.03.16 |
| [JavaScript] JS의 대화상자 (0) | 2022.03.14 |
| [JavaScript] 이벤트 연습 (0) | 2021.09.07 |
