window 객체
1. 윈도우 객체 속성
| 속성 | 설명 |
| innerHeight/innerWidth | 윈도우에 표시되는 영역의 넓이와 높이 |
| name | 윈도우 이름 |
| opener | 윈도우를 생성한 윈도우 |
| outerHeight/outerWidth | 윈도우 밖의 테두리 |
| pageXOffset/pageYOffset | 윈도우 페이지의 x,y |
| parent | 계층 구조가 생길때 상위 객체 |
| scrollbars | 스크롤바를 윈도우에서 보여줄 것인지 판별 |
| self | 자기 자신 |
| status | 상태 표시바 |
| toolbar | 툴바 |
| topwindow | 객체의 계층 구조에서 상위 객체 |
| history | 히스토리 객체 |
| menubar | 메뉴바 객체 |
| location | location 객체 |
| defautlSatus | 상태 표시줄 |
2. 윈도우 메소드
| 메서드 | 설명 |
| alert() | 메시지를 간단히 전달하기 위한 다이얼로그 박스 |
| back() | 앞페이지로 이동 |
| blur() | 포커스 지우기 |
| clearInterval(0 | setInterval 해제 |
| clearTimeout | setTimeout 해제 |
| close() | 윈도우 창 닫기 |
| confirm() | 사용자에게 확인이 필요한 대화 상자 |
| find() | 윈도우에 포함된 텍스트 검색 |
| focus() | 포커스를 특정 객체에 맞춤 |
| forward() | 뒤 페이지로 이동 |
| home() | 홈페이지로 지정된 페이지 이동 |
| moveBy() | 현재 위치를 기준으로 지정된 크기 만큼 페이지 이동 |
| moveTo() | 절대 좌표를 기준으로 지정된 크기 만틈 페이지 이동 |
| open() | 윈도우 열기 |
| print() | 윈도우 내용을 프린트 |
| prompt() | 사용자에게 메시지를 받기 위한 다이얼로그 창 |
| resizeBy() | 창의 크기를 지정된 크기만큼 변경 |
| resizeTo() | 창의 크기를 지정된 크기로 변경 |
| setInterval() | 시간 간격을 두고 주기적으로 명령 실행 |
| setTimeout() | 지정된 시간을 기다린후 명령 실행 |
| scroll() | 원하는 위치까지 스크롤 |
| scrollBy() | 현재를 기준으로 윈하는 크기 만큼 스크롤 |
| scrollTo() | 지정된 위치로 스크롤 |
| stop() | 문서 전송 중지 |
3. 원도우 주요 이벤트
| 이벤트 | 설명 |
| onBlur | 포커스를 브라우저가 잃었을때 |
| onDragDrop | 객체를 브라우저에 드래그-앤 드롭 시켰을때 |
| onFocus | 포커스를 브라우저가 얻었을때 |
| onLoad | 브라우저에 모든 내용을 읽었을때 |
| onMove | 브라우저의 위치를 이동하였을때 |
| onResize | 브라우저의 크기를 변경하였을때 |
| onUnLoad | 현재 문서를 브라우저에서 삭제하였을때 |
4. 창열기/닫기의 원형
| 변수 = window.open("url","윈도우 이름“,”옵션“) //열기 변수.close() //닫기 self.close() // 자기 자신 닫기 window.opener.document // 자신을 생성한 창을 나타냄. |
5. 응용예
[실습예제] 윈도우 창끼리 값 전달
<!-- main.html -->
<html>
<head>
<script>
function open_rtn(){
win=window.open("win_chk.html","win","width=200,height=200")
}
function close_rtn(){
window.win.close()
}
</script>
</head>
<body>
<form name="f1">
<input text=text name="irum1" value="abc">
<input type="button" value="open"
onclick="open_rtn()">
<input type="button" value="close" onclick="close_rtn()">
</form>
</body>
</html>
<!-- win_chk.html --->
<html>
<head>
<script>
function ok_rtn(f){
window.opener.document.f1.irum1.value = document.f2.irum2.value
self.close()
}
function load_rtn(){
document.f2.irum2.value = window.opener.document.f1.irum1.value
}
</script>
</head>
<body onload="load_rtn()">
<form name="f2">
<input text=text name="irum2" value="abc">
<input type="button" value="o k" onclick="ok_rtn(this.form)">
</form>
</body>
</html>
6. 3가지 대화 상자
윈도우가 지원하는 대화상자는 아래와 같이 3종류가 있다.
| 대화 상자 | 설명 |
| alert("문자열“) | 단순한 문자열을 보여주고 확인 하게 한다. |
| confirm("문자열“) | 문자열을 보여주고 “OK", ”CANCEL" 버튼을 선택하도록 한다. |
| prompt(“메시지”,“초기값”) | 사용자로 하여금 특정한 값을 입력할 수 있도록 대화 상자를 만든다. |
[실습 예제] 대화 상자 예
<HTML>
<HEAD>
<TITLE> 사용자 대화 상자 </TITLE>
<style>
#result{
border-style:solid;
border-width:1px;
padding:5px;
width:400px; height:300px;
}
</style>
<script>
function func1(){
r = document.getElementById("result");
r.innerHTML="<font color=red>Alert 버튼 클릭!!!</font>";
alert("확인하세요....");
}
function func2(){
r = document.getElementById("result");
su = prompt("숫자 입력", 2);
str = "";
// 구구단
red="#FF0000";
blue = "#0000FF";
for(i=1 ; i<10 ; i++){
aa = su * i;
color = (i%2==0)? red : blue;
str += "<font color=" + color + ">";
str += su + " * " + i + " = " + aa + "<br>";
str += "</font>";
}
r.innerHTML = str;
}
function func3(){
r = document.getElementById("result");
ans = confirm("승인하시겠습니까 ?");
if(ans) r.innerHTML="승인하셨군요...";
else r.innerHTML="다음엔 꼭~~~~";
}
</script>
</HEAD>
<BODY>
<input type="button" value="ALERT" onClick="func1()">
<input type="button" value="PROMPT" onClick="func2()">
<input type="button" value="CONFIRM" onClick="func3()">
<div id="result"></div>
</BODY>
</HTML>
[실행결과] 메시지창에 해당하는 버튼을 클릭하면 다음과 같은 그림들을 볼 수 있다.
<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock>
'BOOK > 자바스크립트' 카테고리의 다른 글
| navigator 객체 (0) | 2021.07.30 |
|---|---|
| 폼 객체 (0) | 2021.07.30 |
| history 객체 (0) | 2021.07.30 |
| location 객체 (0) | 2021.07.30 |
| document 객체 (0) | 2021.07.30 |
댓글