반응형

Window 객체는 윈도우 조작과 다이얼로그, 타이머 등을 위한 기능 제공

Window표기는 생략이 가능함.

 

다이얼로그 표시

alert() : 지정된 메시지를 경고 다이얼로그로 표시.

평문과 escape sequence만을 포함할 수 있음.

HTML태그를 포함할 경우 그대로 표시됨.

 

alerttest.html

1
2
3
4
5
6
7
8
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
</head>
<body onload="window.alert('페이지가 표시되었습니다.');">
</body>
</html>
cs

confirm() : 사용자에게 의사를 물어보는 창을 표시한다.

confirmtest.html

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
</head>
<body>
<form onsubmit="return window.confirm('페이지를 송신해도 좋겠습니까？');">
    <input type="submit" value="송신" />
</form>
</body>
</html>
cs

확인이 선택되면 true반환

취소가 선택되면 false반환

 

prompt() : 사용자에게 입력할 수 있는 다이얼로그를 표시

사용자가 입력한 문자열을 반환한다.

브라우저에 따라 설정이 필요할 수 있음.

prompttest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
<script type="text/javascript">
window.onload = function() {
    var input = window.prompt('문자열을 입력해주세요.', '야마다');
    window.alert('입력값：' + input);
};
</script>
</head>
<body>
 
</body>
</html>
cs

자식 창(window)를 생성하기

open메서드는 alert으로 표현하기 어려운 복잡한 내용을 표시할 경우에 사용

변수 = window.open(URL, 윈도우이름, 화면구성옵션)

윈도우이름은 앵커의 target과 같은 속성에서 지정할 수 있는 이름

옵션은 옵션=값 형식으로 지정

 

주요 옵션 표

옵션

설명

width

윈도우 폭

height

윈도우 높이

location

주소바 표시 여부( yes | no )

scrollbars

스크롤바 표시 여부( yes | no )

resizable

창 크기 변경 가능 여부( yes | no )

toolbar

툴바 표시 여부( yes | no )

status

상태바 표시 여부( yes | no )

menubar

메뉴바 표시 여부( yes | no )

opentest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
<script type="text/javascript">
var subwin;
 
function win_open(){
    subwin = window.open('http://www.google.co.kr/', 'Google',
        'width=600, height=300, scrollbars=yes, location=yes');
}
 
function win_close(){
    if(subwin && !subwin.closed){
        subwin.close();
    }
}
</script>
</head>
<body>
<input type="button" value="서브 윈도우를 열기" onclick="win_open()" />
<input type="button" value="서브 윈도우를 닫기" onclick="win_close()" />
</body>
</html>
cs

타이머기능 구현하기

setInterval() : 지정된 시간 간격으로 처리를 반복적으로 수행

setTimeout() : 지정된 시간이 경과 했을 때 한 번만 처리

위 두 메서드는 타이머를 식별하는 고유ID를 반환함.

이를 이용하여 clearInterval(timer), clearTimeout(timer)메서드를 호출하여 타이머를 해제할 수 있다.

 

setIntervaltest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
<script type="text/javascript">
var timer;
 
window.onload = function(){
    timer = window.setInterval(
        function(){
            var dat = new Date();
            document.getElementById('result').innerHTML = dat.toLocaleTimeString();
        },
        1000
    );
};
</script>
</head>
<body>
<input type="button" value="타이머 정지" onclick="clearInterval(timer)" />
<div id="result"></div>
</body>
</html>
cs

setTimeouttest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
<script type="text/javascript">
var timer;
 
window.onload = function(){
    timer = window.setTimeout(
        function(){
            var dat = new Date();
            document.getElementById('result').innerHTML = dat.toLocaleTimeString();
        },
        3000
    );
};
</script>
</head>
<body>
<input type="button" value="타이머 정지" onclick="clearTimeout(timer)" />
<div id="result"></div>
</body>
</html>
cs

윈도우 사이즈나 스크롤 위치 조작

Window객체에 윈도우 사이즈나 위치를 조작할 수 있는 프로퍼티와 메서드가 내장되어 있다.

멤버

설명

moveBy(x, y)

윈도우 위치를 이동(상대 좌표)

moveTo(x, y)

윈도우 위치를 이동(절대 좌표)

resizeBy(x, y)

윈도우 사이즈 변경(상대 사이즈)

resizeTo(x, y)

윈도우 사이즈 변경(절대 사이즈)

scrollBy(x, y)

윈도우 내용을 스크롤(상대 위치)

scrollTo(x, y)

윈도우 내용을 스크롤(절대 위치)

blur()

윈도우로부터 포커스를 벗어남

focus()

윈도우에 포커스 맞춤(액티브 상태로)

print()

윈도우 내용을 인쇄

windowtest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Window객체</title>
</head>
<body>
<input type="button" value="scrollTo" onclick="window.scrollTo(0, 200)" />
<input type="button" value="moveBy" onclick="moveBy(100, 100)" />
<input type="button" value="resizeBy" onclick="window.resizeBy(50, 50)" />
<p>
1<br />
2<br />
3<br />
4<br />
5<br />
</p>
</body>
</html>
cs

moveBy/resizeBy 메서드는 Opera, Chrome에서는 대응하지 않음.

moveBy/moveTo, resizeBy/resizeTo 메서드는 탭이 여러 개 있으면 반응하지 않음(IE 11버전에서 확인)

반응형
저작자표시 비영리 변경금지

'교육자료 > Javascript' 카테고리의 다른 글

17-4. Location 브라우저 객체  (0) 2019.05.13
17-3. Form 브라우저 객체  (0) 2019.05.13
17-1. 브라우저 객체 모델 BOM(이벤트 드리븐 모델)  (0) 2019.05.13
16-2. 자바스크립트에서 객체의 상속  (0) 2019.05.13
16-1. 자바스크립트의 객체 지향 특성  (0) 2019.05.13

+ Recent posts

티스토리툴바