Download
1 / 11
110 likes | 417 Views
DHTML+ 자바스크립트 프로그래밍 윈도우 객체들. window 객체. window 객체란 ? 브라우저 윈도우나 프레임 윈도우를 표현하는 객체 모든 DHTML 객체의 최상위 객체 . 톱레벨 객체 window 객체 생성 경우 : 3 가지 웹 브라우저가 실행될 때 자동 생성 <frame>, <frameset> 태그 당 하나 씩 생성 window.open(…) 메소드 호출로 동적으로 생성 지원하는 이벤트 핸들러
E N D
window 객체 • window 객체란? • 브라우저 윈도우나 프레임 윈도우를 표현하는 객체 • 모든 DHTML 객체의 최상위 객체. 톱레벨 객체 • window 객체 생성 경우 : 3 가지 • 웹 브라우저가 실행될 때 자동 생성 • <frame>, <frameset> 태그 당 하나 씩 생성 • window.open(…) 메소드 호출로 동적으로 생성 • 지원하는 이벤트 핸들러 • onblur, onerror, onfocus, onload, onmove, onresize, onunload var win = window.open(“윈도우에 출력할 문서 URL”, “생성하는 윈도우 이름”, “생성하는 윈도우의 모양 속성”)
window 객체가 지원하는 3 개의 메시지 상자 • 경고 메시지 상자 • window.alert(“메시지 텍스트”) 메소드 호출 • “메시지 텍스트”와 OK 버튼을 가진 경고 상자 출력 • 메소드 리턴값 : 메소드의 리턴 값은 “undefined” • 확인 메시지 상자 • window.confirm(“메시지 텍스트”) 메소드 호출 • “메시지 텍스트”와 OK 버튼, CANCEL 버튼을 가진 확인 상자 출력 • 메소드 리턴 값 : OK버튼이 클릭시 true, CANCEL 클릭시 false • 프롬프트 상자 • window.prompt(“메시지 텍스트”, “디폴트 입력값”) 메소드 호출 • “메시지 텍스트”와 입력 창을 가진 상자 출력. 입력창에는 “디폴트 입력값이 출력. • 리턴 값 : 입력 창에 사용자가 입력한 스트링 • 단순히 alert(…), confirm(….), prompt(…)로 사용 가능
3 개의 메시지 상자 예 <html><head><title>예제 10-3</title></head> <body> <h3>window가 지원하는 3 개의 메시지 상자 예</h3> <hr noshade> 메시지 상자를 선택하세요. <form name="dial"> <input type="radio" name="dialogBox" onclick="this.form.echo.value=alert('alert 메소드 호출됨')"> alert 메시지 상자<br> <input type="radio" name="dialogBox" onclick="this.form.echo.value=confirm('confirm 메소드 호출됨')"> confirm 메시지 상자<br> <input type="radio" name="dialogBox" onclick="this.form.echo.value=prompt('prompt 메소드 호출됨', '황기태')"> prompt 메시지 상자<br> <p>메소드의 리턴 값 : <input type="text" name="echo"> </form> </body></html>
다이얼로그 상자 • window 객체는 모달 다이얼로그와 모달리스 다이얼로그 지원 • 모달 다이얼로그 – 마우스와 키 입력 포커스을 장악 • 모달리스 다이얼로그 – 다른 곳으로 포커스 이동 가능
다양한 다이얼로그 만들기 예 <html><head><title>예제 10-4</title> <script> function modal() { showModalDialog("mesg.html","", dialogHeight:200px; dialogWidth:200px") } function modeless1() { showModelessDialog("mesg.html","", "dialogHeight:200px; dialogWidth:200px; dialogTop:10px; dialogLeft:10px; help:no") } function modeless2() { showModelessDialog("mesg.html","", "dialogHeight:200px; dialogWidth:200px; resizable:yes; scroll:no; status: no") } </script></head> <body> <h3>다이얼로그 박스 2 가지</h3> <hr noshade> 모달 다이얼로그와 모달리스 다이얼로그의 윈도우 속성을 보이는 예제<p> <a href="javascript:modal()"> 1. 모달 다이얼로그 : 200x200 크기와 디폴트 속성</a><br> <a href="javascript:modeless1()"> 2. 모달리스 다이얼로그 : 200x200 크기, (10, 10)위치, help 아이콘 없음</a><br> <a href="javascript:modeless2()"> 3. 모달리스 다이얼로그 : 200x200 크기, 크기조절 가능, 스크롤바 없음, 상태바 없음</a> </body></html>
팝업 창 생성하기 • 팝업 객체를 생성하는 메소드 • popup 객체에 대한 레퍼런스를 리턴 • 팝업 윈도우가 출력되는 것이 아님 • 팝업 창 출력 • 사용자가 팝업 창 외의 다른 곳을 클릭하면 팝업 창 닫힘 • 다른 팝업 창이 출력되면 자동으로 닫힘 • 팝업 창은 결코 포커스를 가지지 않음 • 팝업 창은 출력 후 이동이나 크기 조절이 불가능 p = window.createPopup() p = window.createPopup(); // popup 객체 생성 p.document.write(“…”); // popup 객체 내부에 요소 삽입 p.show(x, y, w, h, oElement); // oElement 위치를 기준(0,0)으로 (x,y) 위치에 w x h 크기로 popup 창 출력
팝업 창을 이용한 메뉴 만들기 <html><head><title>예제 10-5</title> <script> var p = window.createPopup(); function printMenu() { var x = event.offsetX+10; var y = event.offsetY+10; p.document.body.innerHTML = objMenu.innerHTML; p.document.body.bgColor = "skyblue"; p.show(x, y, 150, 40, document.body); } </script></head> <bodyoncontextmenu="printMenu();return false;"> <h3>팝업 메뉴를 출력하는 예</h3> <hr noshade> 브라우저 윈도우 상의 아무 위치에 오른쪽 마우스를 클릭하면 팝업 메뉴가 출력된다. <div id="objMenu" style="display:none;"> <div onmouseover="this.style.background='gold';" onmouseout="this.style.background='skyblue';"> <span onclick="parent.location.href='http://www.yahoo.com'"> 야후 사이트</span> </div> <div onmouseover="this.style.background='gold'" onmouseout="this.style.background='skyblue'" <span onclick="parent.location.href='http://www.empas.com'"> 엠파스 사이트</span></div> </div></body></html> 팝업창에 출력된 메뉴
