윈도우 생성
자바스크립트를 이용하면 새로운 브라우저 윈도우를 열 수 있다. 새로운 윈도우를 열어서 그 윈도우에 새로운 문서를 불러들일 수 있다. 이미 준비된 문서를 불러들일 수 있을 뿐 아니라 그 윈도우상에 직접 웹문서를 작성할 수도 있다. 우선 새로운 윈도우를 하나 열고 그 윈도우에 HTML 웹페이지를 불러들이는 방법, 그리고 열어놓은 윈도우를 닫는 방법에 대해서 알아보자.
다음의 스크립트는 새로운 브라우저 윈도우를 하나 열어서 그 윈도우에 하나의 웹페이지를 불러들이는 코드이다.
open_window.html
<html>
<head>
<script language="JavaScript">
<!--
function openWindow1() {
myWin = open("blank.html");
}
// end of script -->
</script>
</head>
<body>
<form>
<input type="button" value="윈도우를 만듭니다." onClick="openWindow1()">
</form>
</body>
</html>
이미 만들어져 있는 웹페이지 blank.html이 open() 메소드를 통해서 새로 만들어진 윈도우에 불러 읽혀진다.
여러분은 또한 윈도우를 만들 때 생성되는 윈도우의 모양을 바꿀 수도 있다. 일반적으로 윈도우는 공통적으로 상태선 (status)나 메뉴바 (menubar), 툴바 (toolbar), 스크롤바 (scrollbar)등의 요소를 가지고 있는데 윈도우를 만들어 띄울 때 이들 요소가 나타날 것이지 아닌지를 제어할 수 가 있다. 물론 윈도우의 크기도 지정할 수 있다. 다음의 스크립트는 상태바와 툴바, 메뉴바를 감춘, 크기가 400x300인 윈도우를 하나 띄운다.
<html>
<head>
<script language="JavaScript">
<!--
function openWindow2() {
myWin = open("blank.html", "displayWindow",
"width=400, height=300,status=no,toolbar=no,menubar=no");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="윈도우를 하나 만듭니다." onClick="openWindow2()">
</form>
</body>
</html>
코드에서 보면 open()함수의 세 번째 인자로서 문자열 "width=400,height=300,status=no,toolbar=no,menubar=no" 로서 생성될 윈도우의 속성을 지정한 것을 볼 수 있다. 이때 반드시 기억해야 할 것은 이들 속성을 지정할 때 절대 스페이스(공란)을 두어서는 안된다는 것이다. 공란을 두면 윈도우가 뜨지 않거나 의도한 모양을 나타내지 않을 것이다.
아래는 윈도우가 가질 수 있는 여러 가지 다른 속성들이다.
directories | yes | no |
height | number of pixels |
location | yes | no |
member | yes | no |
resizable | yes | no |
scrollbars | yes | no |
status | yes | no |
width | number of width |
toolbar | yes | no |
width | number of width |
윈도우의 이름
앞서 본것처럼 윈도우를 여는데에는 세가지의 인수가 사용되었다.
myWin = open("blank.html", "displayWindow", "width=400,
height=300,status=no,toolbar=no,menubar=no")
두번째 인수는 무얼까? 이것은 바로 윈도우의 이름이다. 우리는 앞서 target 속성을 이용하는 법을 배웠다. 만일 존재하고 있는 윈도우의 이름을 알고있다면 우리는 그 윈도우에 다음과 같은 코드로 새로운 웹문서를 불러올 수 있다.
<a href="blank.html" target="displayWindow">
바로 여기에서 윈도우의 이름이 필요하다. 즉, 출력방향을 새로만들어지는 'displayWindow'라는 이름을 갖는 윈도우로 지정하는 것이다. 따라서 'blank.html'이라는 웹문서는 이 윈도우에서 불러 읽혀지게 된다. 만일 'displayWindow'라는 이름을 갖는 윈도우가 존재하지 않는다면 이 코드는 하나의 새로운 윈도우를 만들어낸다.
앞서의 코드에서 myWin은 윈도우의 이름이 아니라는 것을 기억해야 한다. 윈도우의 이름은 'displayWindow'이고 이 'myWin'은 윈도우 객체를 받는 변수이다. 여러분은 이 변수를 이용해서 새로 만들어지는 윈도우에 접근할 수 있다. 변수라는 것을 기억하라 변수는 일반 HTML 태그문법과는 상관없이 자바스크립트 프로그래밍에서 필요한 존재이다. 따라서 이 변수가 정의되는 스크립트 내에서만 유효하다. 반면 윈도우이름은 스크립트 변수가 아니므로 다른 모든 브라우저 윈도우에 의해 사용될 수 있으며 고유한 이름을 가져야 한다.
생성된 윈도우닫기
자바스크립트로 생성한 윈도우는 마찬가지로 자바스크립트를 이용하여 닫을수 있다. 앞서 윈도우를 열때는 open()이라는 메소드를 사용했던 것을 기억할 것이다. 닫을 때는 당연히 close()라는 메소드가 사용될 것이라는 것을 쉽게 짐직할 수 있을 것이다. 자. 앞서 했던것처럼 새로운 윈도우를 만들어 보자. 그리고 이 윈도우에다가 새로운 페이지를 불러들인다.
<html>
<head>
<script language="JavaScript">
<!--
function closeWindow1() {
close();
}
// -->
</script>
</head>
<body>
<center>
<form>
<input type="button" value="생성된 윈도우를 닫습니다. (1)"
onClick="closeWindow1()">
</form>
</center>
</body>
</html>
위의 버튼을 클릭하면 새로운 윈도우가 뜨고 새 윈도우 안에 있는 버튼을 클릭하면 그 윈도우가 닫힌다. 원칙적으로 우리는 open()이나 close() 대신 window.open() 또는 window.close()를 사용해야 한다. open()과 close()가 윈도우 객체를 열고 닫는 윈도우객체에 속한 메소드이기 때문이다. 하지만 윈도우 객체에 대해서만은 이것은 예외이다. 앞서 자바스크립트가 브라우저 윈도우상의 모든 구성요소를 계층구조화 한다고 하였다. 바로 이 윈도우객체는 그 계층구조에서 최상위 객체이기 때문에 윈도우 객체에 한해서는 별도로 객체를 지정해주지 않아도 인식을 하는 것이다.
생성된 윈도우 안에 직접 쓰기
이제 자바스크립트의 새로운 특징을 한가지 보자. 지금까지는 윈도우를 하나 띄워서 이미 준비된 웹페이지를 로딩했는데 이번에는 윈도우를 하나 띄우고 직접 그 윈도우에 웹문서를 작성하는 것이다. 자바스크립트를 이용하면 어렵지 않다.
<html>
<head>
<script language="JavaScript">
<!--
function openWindow4() {
myWin = open("","displayWindow", "width=500,
height=400, status=yes,toolbar=yes,menubar=yes");
// 도큐먼트에 출력을 하기 위해 문서를 연다.
myWin.document.open();
// 도큐먼트에 출력한다.
myWin.document.write("<html><head><title>
생성된 윈도우에 직접 쓰기 ");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>");
myWin.document.write(" 자바스크립트를 이용하여
HTML 도큐먼트가 만들어졌습니다.");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");
// 도큐먼트를(윈도우가 아니다) 닫는다.
myWin.document.close();
}
