자바스크립트의 브라우저 객체


Navagator 객체

Navigator 객체는 브라우저 객체의 하나로 사용자의 웹 브라우저의 종류와 자바사용이 가능한 브라우저 인지의 여부 등을 판별 해 줍니다

속성

appCodeName

브라우저 코드 이름을 알려줍니다 ★

appName

브라우저의 이름을 알려줍니다 ★

appVersion

브라우저의 버전정보를 알려줍니다 ★

userAgent

브라우저의 User Agent를 알려줍니다 ★

platform

사용중인 시스템 정보를 알려줍니다 ★

메소드

JavaEnabled()

자바 사용이 가능한지 여부를 true, false 형태로 알려줍니다

예문에서 간단한 사용사례를 살펴봅니다

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. document.write("navigator.appCodeName ==> " , navigator.appCodeName , "<br>");
  4. document.write("navigator.appName ==> " , navigator.appName , "<br>");
  5. document.write("navigator.appVersion ==> " , navigator.appVersion , "<br>");
  6. document.write("navigator.userAgent ==> " , navigator.userAgent , "<br>");
  7. document.write("navigator.platform ==> " , navigator.platform , "<br>");
  8. document.write("사용중인 언어는 ==> " , navigator.language , "<br>");
  9. document.write("Mime Type 의 갯수는 ==> " , navigator.mimeTypes.length , "<br>");
  10. document.write("설치된 플러그인의 갯수는 ==> " , navigator.plugins.length , "<br>");


  11. if(navigator.JavaEnabled == true) {
  12.         document.write("자바사용이 가능한 브라우저 입니다<br>");
  13. }
  14. else {
  15.         document.write("자바사용이 불가능한 상태입니다<br>");
  16. }
  17. //-->
  18. </SCRIPT>


8~10번행에서 사용된 속성들은 네츠케이프에서는 아래와 같은 결과를 반환합니다

  • navigator.appCodeName ==> Mozilla
  • navigator.appName ==> Netscape
  • navigator.appVersion ==> 5.0 (Windows; en-US)
  • navigator.userAgent ==> Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4) Gecko/20011019 Netscape6/6.2
  • navigator.platform ==> Win32
  • 사용중인 언어는 ==> en-US
  • Mime Type 의 갯수는 ==> 5
  • 설치된 플러그인의 갯수는 ==> 4
  • 자바사용이 불가능한 상태입니다

경우에 따라 브라우저의 버전정보를 정확히 파악하여 특정 페이지로 이동시켜 준다든지 하는 스크립트가 필요할 때가 많습니다. 다음의 예문은 네츠케이프와 익스플로러의 2.x에서 6.x 까지의 버전정보를 정확하게 판별하는 방법을 보여주고 있습니다. 소스가 좀 길어서 이해가 힘들 것 같지만 브라우저객체의 속성을 이해한 후 자세히 보면 의외로 간단합니다

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. if (navigator.appName.charAt(0) == "N") {
  4.         if (navigator.appVersion.charAt(0) == 2) {
  5.         document.write("당신의 브라우저는 네츠케이프 2.x 버전입니다");
  6.         }
  7.         if (navigator.appVersion.charAt(0) == 3 ){
  8.         document.write("당신의 브라우저는 네츠케이프 3.x 버전입니다");
  9.         }
  10.         if (navigator.appVersion.charAt(0) == 4) {
  11.         document.write("당신의 브라우저는 네츠케이프 4.x 버전입니다");
  12.         }
  13.         if (navigator.appVersion.charAt(0) == 5) {
  14.         document.write("당신의 브라우저는 네츠케이프 6.x 이상의 버전입니다");
  15.         }
  16. }

  17. if (navigator.appName.charAt(0) == "M") {
  18.         if (navigator.appVersion.charAt(0) == "2") {
  19.         document.write("당신의 브라우저는 익스플로러 2.x 입니다");
  20.         }
  21.         if (navigator.appVersion.charAt(0) == "3") {
  22.         document.write("당신의 브라우저는 익스플로러 3.x 입니다");
  23.         }
  24.         if (navigator.appVersion.charAt(0) == "4") {
  25.                 if(navigator.appVersion.indexOf("MSIE 5") != -1) {
  26.                 document.write("당신의 브라우저는 익스플로러 5.x 입니다");
  27.                 }
  28.                 if(navigator.appVersion.indexOf("MSIE 6") != -1) {
  29.                 document.write("당신의 브라우저는 익스플로러 6.x 입니다");
  30.                 }
  31.                 else {
  32.                 document.write("당신의 브라우저는 익스플로러 4.x 입니다");
  33.                 }
  34.         if (navigator.appVersion.charAt(0) == "5") {
  35.                 document.write("당신의 브라우저는 익스플로러 5.x 입니다");
  36.                 }
  37.         }
  38. }
  39. //-->
  40. </SCRIPT>


파란색으로 표시된 함수들은 String 객체의 메소드 들이라고 배웠습니다.

charAt(0) 은 앞에서 지정한 문자열의 맨처음에 오는 문자를 반환합니다. 따라서 navigator.appName.charAt(0) == "N" 이라고 하면 브라우저의 이름을 반환하는 문자열중에서 첫 번째 나오는 문자가 N 이면, 이라는 뜻이됩니다. navigator.appName 속성은 네츠케이프 인 경우에 "Netscape", 익스플로러 인 경우에 "Microsoft Internet Explorer"를 반환합니다.

navigator.appVersion 속성은 네츠케이프의 경우에 2.x, 3.x, 4.x, 그리고 6.0 인 경우 5.0 (Windows; en-US) 의 형식으로 값을 반환하며, 익스플로러에서는 4.0 (compatible; MSIE 6.0; Windows 98) 의 형태로 반환받게 됩니다.즉, 4.0 이상의 경우 모두 4.0 으로 보여주며, 괄호안에 "MSIE 버전" 형태로 값을 출력하므로 코드가 좀 더 복잡하게 만들어 졌습니다.

indexOf("MSIE 5") != -1 는, appVersion 속성으로 얻어진 값(문자열)에서 "MSIE 5" 라는 글자가 있으면.. 이라는 뜻입니다. indexOf() 속성은 괄호안의 문자열의 위치값을 반환해 주고, 없을 경우 -1을 반환한다고 하였습니다.

위의 예문을 이용하면 브라우저별로 각각 다른 페이지나 메시지를 출력할 수 있는 환경이 만들어 집니다.


Window 객체

window 객체는 계층적 구조로 되어 있는 자바스크립트 계층구조 중에서 최상위에 있는 어른(?) 객체입니다. 이 객체는 그 자체적으로도 여러 가지 작업을 수행하지만 대부분 이 객체의 자식들인 하위객체를 이용해서 많은 일들을 수행하게 됩니다.

예를들어 우리는 경고창을 띄우는데 alert() 라는 메소드를 아무런 생각없이 사용하고, 문장을 출력하는데 document.write() 메소드를 사용하지만 실제로 이들 메소드는 window.alert(), window.document.write() 가 올바른 사용법입니다. 하지만, 대부분의 경우 최상위 객체인 window 는 자연스럽게 생략하여 사용해도 이 어른(?)은 이해를 다 해 줍니다. 자식사랑은 끝이 없군요.

window 객체의 속성과 메소드는 다음과 같습니다

속성

메소드

closed

창의 닫힘여부(true/false)

alert()

경고창을 보여줍니다 ★

defaultStatus

상태표시줄의 초기문자열

blur()

focus를 제거합니다

document

document 객체

clearInterval()

setInterval()메소드에의해 수행되고 있는 함수를 중지합니다

frames

프레임 객체

clearTimeout()

setTimeout()메소드에의해 수행되고 있는 함수를 중지합니다

history

history 객체

close()

창을 닫습니다

length

프레임의 수

comfirm()

확인버튼이 있는 창을 엽니다 ★

location

location 객체

focus()

focus를 줍니다

name

창의 이름

moveBy()

상대적 좌표로 창을 이동합니다

opener

현재창을 열어준 윈도우

moveTo()

절대위치로 창을 이동합니다

parent

부모 프레임

open()

새로운 창을 열어줍니다

self

현재창 자신

print()

화면의 내용을 프린트로 출력합니다 ★

status

상태표시줄의 문자열

prompt()

입력란이 있는 대화상자를 엽니다 ★

top

가장 앞쪽 창

resizeBy()

상대적 크기를 이용해서 창의 크기를 변경합니다 ★

window

현재창(=self)

resizeTo()

절대크기로 창크기를 변경합니다 ★

 

scroll()

창을 스크롤 시킵니다 ★



scrollBy()

상대적 좌표로 창을 스크롤 시킵니다 ★



scrollTo()

절대적 좌표로 창을 스크롤 시킵니다 ★



setInterval()

일정시간 간격으로 지정함수를 반복 호출 합니다



setTimeout()

일정시간 후 지정함수를 호출 합니다

먼저, 팝업창을 만들어 주는 window.open() 메소드를 보겠습니다. window.open() 메소드의 사용법은 다음과 같습니다.

window.open("팝업창으로 보여줄 문서","팝업창의 이름","옵션")

  • <SCRIPT LANGUAGE="JavaScript">
  • <!--
  • window.open("http://cafe.naver.com/ss2education.cafe", "삼성컴퓨터인터넷강좌", "width=500,height=300,left=0,top=0,resizable=no");
  • //-->
  • </SCRIPT>


이 예문은 http://cafe.naver.com/ss2education.cafe 페이지를 가로 500픽셀, 높이 300 픽셀의 크기로 왼족위 모서리에 붙게 팝업창으로 열어줍니다. 두 번째 인자인 "dreamwiz" 는 뭐냐구요? 이 부분은 팝업창의 이름을 말하는 것으로 프레임 문서에서 타겟(target) 처럼 사용할 수 있습니다.. 즉, <a href="xxx.html" target="삼성컴퓨터인터넷강좌"> 열기</a> 처럼 사용하게 되면, 현재 드림위즈 홈페이지가 열려있는 팝업창에 xxx.html 문서가 열리게 되는 것이랍니다. 이 두 번째 인자에 아무것도 입력하지 않으려면 그냥 "" 만 표시 해 줍니다. (예) : window.open("http://cafe.naver.com/ss2education.cafe", "", "옵션들")

세 번째 인자에는 옵션들을 설정 합니다. 이곳에서 사용할 수 있는 옵션에는 아래와 같은 것들이 있습니다

menubar

yes/no, 1/0

메뉴바를 보여주거나 숨깁니다

toolbar

yes/no, 1/0

도구막대를 보여주거나 숨깁니다

directories

yes/no, 1/0

디렉토리바를 보여주거나 숨깁니다

scrollbars

yes/no, 1/0

스크롤바를 보여주거나 숨깁니다

status

yes/no, 1/0

상태표시줄을 보여주거나 숨깁니다

location

yes/no, 1/0

주소표시줄을 보여주거나 숨깁니다

width

픽셀

팝업 윈도우의 가로크기를 지정합니다

height

픽셀

팝업 윈도우의 높이를 지정합니다

left

픽셀

팝업 윈도우의 x축 위치를 지정합니다

top

픽셀

팝업 윈도우의 y축 위치를 지정합니다

resizable

yes/no 1/0

팝업윈도우의 크기를 사용자가 임의로 수정할 수 있는지 여부를 지정합니다

fullscreen


전체화면 모드로 열어줍니다

channelmode


채널모드 창으로 열어줍니다


옵션인자를 지정하지 않으면 현재 창의 모양과 같은 형태로 팝업윈도우가 열리게 되고, 어느 한가지 옵션만 지정하면 나머지는 모두 디폴트 값으로 no 가 설정 됩니다.

버튼을 클릭하면 아무런 옵션이 없는 팝업 윈도우가 열리게 하는 코드는 아래와 같습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winOpen() {
  9. window.open("http://cafe.naver.com/ss2education.cafe","삼성컴인터넷강좌");
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <input type=button onclick="winOpen();" value="옵션없이 팝업윈도우 열기">

  16. </BODY>

  17. </HTML>


위에서 보듯이 옵션을 사용하지 않으면 <a href="xxx.html" target="_blank">열기</a> 처럼 태그를 사용한 것과 같은 효과를 줍니다. 이 옵션 인자는 지정하지 않아도 되지만, 두 번재 인자인 name 은 사용하지 않더라도 반드시 "" 으로 표시해 주어야 한다는 것은 명심하기 바랍니다.

그럼, 이번에는 몇가지 옵션만 선별적으로 주는 예를 보겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winOpen() {
  9. window.open("http://cafe.naver.com/ss2education.cafe","삼성컴퓨터인터넷강좌","location=yes,width=400,height=300");
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <input type=button onclick="winOpen();" value="location=yes,width=400,height=300">

  16. </BODY>

  17. </HTML>


위의 예에서 보듯이 특정 옵션을 지정하면 나머지 옵션값은 자동으로 no를 준 것과 같은 효과를 나타냅니다. 옵션을 줄때 주의할점은 절대 공백을 주어서는 안됩니다. 공백을 주게되면 네츠케이프 등에서는 에러를 발생시킬 수 있습니다

이번에는 잘 이용하면 아주 요긴하게 사용될 수 있는 fullscreen 모드와 channelmode 옵션으로 팝업윈도우를 열어보도록 하겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function fullOpen() { // fullscreen 모드로 열기 함수
  9. window.open("http://cafe.naver.com/ss2education.cafe","삼성컴퓨터인터넷강좌","fullscreen");
  10. }

  11. function channelOpen() { // 채널모드로 열기 함수
  12. window.open("http://cafe.naver.com/ss2education.cafe","삼성컴퓨터인터넷강좌","channelmode");
  13. }
  14. //-->
  15. </SCRIPT>

  16. </HEAD>

  17. <BODY>

  18. <input type=button onclick="fullOpen();" value="fullscreen">
  19. <p>fullscreen 윈도우를 닫으려면 Alt+F4 키를 누르세요
  20. <p>
  21. <input type=button onclick="channelOpen();" value="channelmode">

  22. </BODY>

  23. </HTML>


상태표시줄에 메시지를 보여주는 예제를 만들어 보겠습니다. window 객체에는 status 라는 속성이 있다고 하였습니다.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winStatus() {
  9. window.status = "안녕하세요? 자바스크립트는 재미있습니다";
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <a href="http://cafe.naver.com/ss2education.cafe" onmouseOver = "winStatus(); return true;">마우스를 대어 보세요</a>

  16. </BODY>

  17. </HTML>


링크에 마우스를 대면 상태표시줄에 메시지를 보여주는 함수를 9~11번행에서 미리 정의한 후 이 함수를 19번행에서 mouseOver 이벤트가 발생하면 호출되도록 코딩 되었습니다.

19번행에서 함수호출 다음에 return true를 사용하였는데, 이는 함수를 호출하고 마우스를 다른 곳으로 옮겨도 상태표시줄에 그 메시지가 그대로 남아 있게 하기위함입니다. return false 로 설정하면 마우스를 떼었을 때는 해당 링크 주소가 보여지게 됩니다.


window.close()

window.open() 메소드는 새로운 팝업윈도우를 열어주는 역할을 하고, window.close()0 메소드는 윈도우를 닫아주는 역할을 합니다.

이 window.close() 메소드를 사용하면 팝업창인 경우에는 그냥 닫아 버리지만, 팝업창이 아닌 경우에는 윈도우를 닫을지를 물어보는 경고 메시지가 뜨게 됩니다.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winOpen() {
  9. window.open("http://cafe.naver.com/ss2education.cafe","sample","width=400,height=300");
  10. }
  11. function winClose() {
  12. window.close();
  13. }
  14. //-->
  15. </SCRIPT>

  16. </HEAD>

  17. <BODY>

  18. <a href="#" onclick="winOpen()">팝업 윈도우 열기</a><br>
  19. <a href="#" onclick="winClose()">현재 윈도우 닫기</a><br>

  20. </BODY>

  21. </HTML>


물론 위와 같은 간단한 코드 사용시에는 특별히 함수를 사용하지 않고 인라인 자바스크립트를 사용해도 무방합니다. 아래처럼 HTML 태그내에서 사용되는 자바스크립트를 인라인 자바스크립트라고 합니다

  •  <a href="#" onclick="window.open('http://cafe.naver.com/ss2education.cafe','sample','width=400,height=300')">팝업 윈도우 열기</a><br>
  • <a href="#" onclick="window.close()">현재 윈도우 닫기</a><br>


window.moveTo(x,y)

window.moveTo(x,y) 메소드는 괄호안에서 지정된 위치로 윈도우의 위치를 이동시켜주는 메소드입니다.샘플 스크립트를 볼까요?

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winMoveTo() {
  9. window.moveTo(300,250);
  10. }
  11. function winMoveTo_00() {
  12. window.moveTo(0,0);
  13. }
  14. //-->
  15. </SCRIPT>

  16. </HEAD>

  17. <BODY>

  18. <p><input type=button onclick="winMoveTo()" value="이동하기">
  19. <p><input type=button onclick="winMoveTo_00()" value="원래대로 이동하기">
  20. <p><input type=button onclick="window.moveTo(300,250)" value="이동하기">

  21. </BODY>

  22. </HTML>


9~11번행에서 선언한 함수는 윈도우의 위치를 x축-300픽셀, y축-250 픽셀의 위치로 이동시켜주며, 12~14번행에서 선언한 함수는 x,y 축 의 위치를 왼쪽위(0,0) 로 이동시켜줍니다.

물론 14번행에서 처럼 인라인 자바스크립트를 사용해도 무방합니다.


window.moveBy(x,y)

window.moveBy(x,y) 메소드는 괄호안에서 지정된 픽셀수만큼 윈도우의 위치를 이동시켜주는 메소드입니다.window.moveTo() 메소드와 어떻게 다른지 샘플 스크립트를 볼까요?

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winMoveBy() {
  9. window.moveBy(10,10);
  10. }
  11. function winMoveBy2() {
  12. window.moveBy(-10,-10);
  13. }
  14. //-->
  15. </SCRIPT>

  16. </HEAD>

  17. <BODY>

  18. <p><input type=button onclick="winMoveBy()" value="이동하기(↘)">
  19. <p><input type=button onclick="winMoveBy2()" value="이동하기(↖)">
  20. <p><input type=button onclick="window.moveBy(10,10)" value="이동하기(↘)">

  21. </BODY>

  22. </HTML>


9~11번행에서 선언한 함수는 윈도우의 위치를 오른쪽으로 10픽셀, 아래쪽으로 10 픽셀의 위치로 이동시켜주며, 12~14번행에서 선언한 함수는 왼쪽으로10 픽셀, 위쪽으로 10 픽셀씩 이동시켜줍니다.

물론 24번행에서 처럼 인라인 자바스크립트를 사용해도 무방합니다.


window.resizeTo(x,y)

window.resizeTo(x,y) 메소드는 괄호안에서 지정된 크기로 윈도우 자체의 크기를 변경시켜주는 메소드입니다.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winResizeTo() {
  9. window.resizeTo(150,150);
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <p><input type=button onclick="winResizeTo()" value="윈도우 크기 변경하기">

  16. </BODY>

  17. </HTML>


9~11번행에서 선언한 함수는 윈도우의 크기를 150*150 픽셀 크기로 변경시켜주며, 19번행에서 호출하여 사용합니다.


window.resizeBy()

window.resizeBy() 메소드는 괄호안에서 지정된 크기만큼씩 윈도우 자체의 크기를 변경시켜주는 메소드입니다.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winResizeBy() {
  9. window.resizeBy(50,50);
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <p><input type=button onclick="winResizeBy()" value="윈도우 크기 변경하기">

  16. </BODY>

  17. </HTML>


9~11번행에서 선언한 함수는 윈도우의 크기를 50*50 픽셀씩 증가시켜주며, 19번행에서 호출하여 사용합니다. 물론, 숫자를 음수로 지정하면 그 크기만큼 작아집니다

예 : window.resizeBy(-50,-50)


window.scrollBy()

window.scrollBy() 메소드는 괄호안에서 지정된 크기만큼 문서의 내용을 스크롤 시켜주는 메소드입니다.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winScrollBy_1() {
  9. window.scrollBy(0,50);
  10. }
  11. function winScrollBy_2() {
  12. window.scrollBy(0,-50);
  13. }
  14. //-->
  15. </SCRIPT>

  16. </HEAD>

  17. <BODY>
  18. <p><img src="http://www.jasko.co.kr/java_data/img1.jpg">
  19. <p><input type=button onclick="winScrollBy_1()" value="아래로 스크롤">
  20. <p><input type=button onclick="winScrollBy_2()" value="위로 스크롤">
  21. <p><img src="http://www.jasko.co.kr/java_data/img2.jpg">

  22. </BODY>
  23. </HTML>


window.scrollTo()

window.scrollTo() 메소드는 괄호안에서 지정된 위치로 창을 스크롤 시켜주는 메소드입니다.scrollBy() 메소드와 다른점은 scrollBy() 가 상대적 위치만큼 이동하는데 비해, scrollTo() 메소드는 절대좌표로 이동시켜 줍니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winScroll() {
  9. window.scrollTo(0,200);
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <p><input type=button onclick="winScroll()" value="아래로 스크롤">
  16. <p><img src="http://www.jasko.co.kr/java_data/img1.jpg">
  17. <p><img src="http://www.jasko.co.kr/java_data/img2.jpg">

  18. </BODY>

  19. </HTML>


10번행에서는 창의 위치를 위쪽(y-좌표)에서 200픽셀 떨어진으로 스크롤 시켜주는 함수를 정의합니다.


window.alert()

이번에는 경고창(alert box)를 나타내 주는 스크립트에 대해 알아보도록 하겠습니다

경고창을 나타낼 때는 alert() 라는 메소드를 사용합니다. 먼저 아래 예문을 살펴보도록 하죠


  1. <HTML>
  2. <HEAD>
  3. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  4. <TITLE> Jasko Sample Script </TITLE>

  5. </HEAD>

  6. <BODY>

  7. <script>
  8. <!--
  9. alert("안녕하세요?\n자바스크립트를 공부하는 중입니다");
  10. //-->
  11. </script>

  12. </BODY>
  13. </HTML>
 


어때요? document.write() 메소드랑 다른게 있나요?

그렇습니다. 문자열을 따옴표 안에 넣어 표현하는 것은 같지만 줄바꿈태그 대신 이상한 부호들이 들어가 있죠?

파란색으로 표시된 \n 은 한줄바꿈 표시입니다. 두줄을 바꾸려면 연속해서 \n\n을 넣어주면 됩니다.

alert() 메소드를 사용할 때는 HTML 태그는 사용할 수 없답니다.


window.confirm()

이번시간에는 메시지를 방문자들에게 보여주고 확인/취소를 선택하면 특별한 행동을 할 수 있게 해 주는 확인상자에 대해 알아보도록 합니다.

확인상자는 confirm() 이라는 함수를 사용합니다

아래의 예문을 보도록 합니다

  1. <HTML>
  2. <HEAD>
  3. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  4. <TITLE> Jasko Sample Script </TITLE>

  5. </HEAD>

  6. <BODY>

  1. <script>
  2. <!--
  3. yesorno = confirm("당신은 남자분 이시군요. 그렇죠?")
  4. if(yesorno == true)
  5.    document.write("당신은 <font color=red>남성</font>입니다")
  6. else
  7.   document.write("당신은 <font color=blue>여성</font>입니다")
  8. //-->
  9. </script>

  1. </BODY>
  2. </HTML>


위의 예문에서는 갑자기 처음 보는 듯한 용어들이 많이 나왔습니다. 하지만 너무 걱정하지 마세요. 뒷부분에서 자세히 다루게 될테니까요.

우선 간단하게 설명 드리도록 하겠습니다.

3번째 줄에 있는 yesorno = confirm("당신은 남자분 이시군요. 그렇죠?")

에서 confirm() 이라는 함수를 사용하였습니다. 따옴표 안에는 사용자들에게 하는 질문이 들어 있는데 그 결과값을 yesorno 라는 변수에 담아두고, 확인 버튼을 클릭하면 5번째 구문이, 그렇지 않으면 7번째 구문이 실행 됩니다.

자바스크립트에서 A = 변수값 이라는 형태가 자주 사용되는데 이는 변수값을 A 라는 변수에 저장한다는 뜻으로 이해하면 됩니다

즉, 위의 예에서는 confirm() 함수의 결과값을 yesorno 라는 변수에 담아둔다는 말이 됩니다.

그리고, if ~ else 구문도 나왔는데, 이 구문은 앞으로 여러분들이 공부하면서 상당히 자주 접하게 되는 자바스크립트의 제어문의 하나입니다. 내용은 만약~이라면~, 그렇지 않으면~ 라는 영문법 식으로 해석을 해도 됩니다.


window.prompt()

어떤 사이트에 가면 이름을 물어보고 입력하면 문서에 내 이름을 출력 해주는 스크립트를 본적이 있나요?

이번시간에는 방문자들로부터 원하는 데이터를 입력받게 해주는 prompt() 함수에 대해 알아보도록 하겠습니다

  1. <HTML>
  2. <HEAD>
  3. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  4. <TITLE> Jasko Sample Script </TITLE>
  5. </HEAD>

  6. <BODY>

  7. <script>
  8. <!--
  9. name = prompt("손님의 이름을 적어주세요","나그네")
  10. document.write("<font color=blue>" + name + "</font>님 감사합니다")
  11. //-->
  12. </script>

  13. </BODY>
  14. </HTML>


자, 이번 예제는 name 이라는 변수를 사용한 것과 함수의 따옴표 안에 무자열을 넣어주는 법은 앞전의 confirm() 함수를 사용할 때와 비슷한 것 같아 보입니다.

우선, 설명부터 드리자면 prompt() 함수에서 '손님의 이름을 적어주세요' 라는 부분은 입력상자에 나타낼 메시지입니다. 그리고 오른쪽에 '나그네' 라고 되어 있는 부분에는 디폴트값을 넣어 주었습니다.

형식은 prompt("메세지","디폴트값") 의 모양으로 사용합니다

그리고, 사용자가 입력한 값을 name 이라는 변수에 담아 두었다가 12번째 라인에서 써먹게 됩니다.

12번째 라인을 자세히 보면 document.write() 함수의 괄호안에 따옴표가 좀 복잡하게 사용된 듯 합니다.

보시는대로 HTML 태그나 일반 문자열은 따옴표 안에 들어 있고, 11번째 라인에서 사용한 name 이라는 변수는 따옴표를 사용하지 않았죠? 그렇습니다. 자바스크립트 내에서 선언된 변수는 따옴표를 붙이지 않습니다.


window.print()

window.print() 메소드는 현재의 문서를 인쇄 할 수 있게 해 줍니다. 이 print() 메소드를 호출하면 브라우저의 프린트 버튼을 클릭한 것과 동일한 효과를 줍니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function winPrint() {
  9. window.print();
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <p><input type=button onclick="winPrint()" value="화면인쇄">
  16. <p><input type=button onclick="window.print()" value="화면인쇄">

  17. </BODY>

  18. </HTML>


19번행에서는 문서의 HEAD 부분에서 미리 선언해둔 함수를 통해 프린트를 하는 버튼을 보여주고 있고, 20번 행에서는 인라인 스크립트를 사용하여 화면을 프린트 하는 샘플을 보여주고 있습니다.


window.blur(), window.focus()

blur() 와 focus() 메소드는 현재창에 포커스를 주거나 해제하는 기능을 합니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. myWin = window.open("sample54-11.html","sample","width=300,height=300");
  9. function winFocus() {
  10. myWin.focus();
  11. }
  12. function winBlur() {
  13. myWin.blur();
  14. }

  15. //-->
  16. </SCRIPT>

  17. </HEAD>

  18. <BODY>

  19. <p><input type=button onclick="winFocus()" value="앞으로 보내기">
  20. <p><input type=button onclick="winBlur()" value="뒤로 보내기">

  21. </BODY>

  22. </HTML>


9번행에서 새로운 팝업윈도우를 열고 myWin 이라는 변수에 저장해 두었습니다

10~12번행에서 팝업윈도우에 포커스를 주는 함수를 정의하고, 13~15번행에서는 포커스를 해제하는 함수를 정의하였습니다.


setTimeout() 메소드

setTimeout() 은 지정된 시간후 특정 코드를 실행시켜주는 메소드입니다. 뒤에서 다룰 setInterval() 과는 달리 setTimeout() 메소드를 사용하면 지정된 코드는 한번만 실행 됩니다. 사용형식은 아래와 같습니다

 setTimeout(code,delay)

code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열

delay : 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위)

아래의 예는 3초 후에 alert()를 실행시키는 setTimeout()을 이용한 간단한 예문입니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function Timer() {
  9. setTimeout("alert('3초후에, 안녕하세요')",3000);
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <p><input type=button onclick="Timer()" value="3초후에 인사하기">

  16. </BODY>

  17. </HTML>

이번에는 setTimeout()을 이용하여 입력상자에 실시간으로 작동하는 디지털시계를 만들어 보겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function Timer() {
  9. var now = new Date();
  10. var H = now.getHours();
  11. var M = now.getMinutes();
  12. var S = now.getSeconds();
  13. myForm.myText.value = "지금은 " + H + "시" + M + "분" + S + "초";
  14. setTimeout("Timer()", 1000);
  15. }
  16. document.onLoad = setTimeout("Timer()",1000);
  17. //-->
  18. </SCRIPT>

  19. </HEAD>

  20. <BODY>

  21. <form name=myForm>
  22. <input type=text name=myText style="text-align:center">
  23. </form>

  24. </BODY>
  25. </HTML>


9~14번행에서는 26번행의 텍스트 입력상자에 현재시간을 보여주는 Timer() 함수를 정의한 코드입니다. 그냥 단순히 보여주기만 해서는 실시간으로 변화하는 시간을 알려줄 수가 없기 때문에 15번행에서 1초(1000)후에 다시 Timer() 함수를 호출하여 현재시간을 표시하고 있습니다.

17번행에서 이렇게 재귀적으로 반복 호출되는 Timer() 함수를 페이지가 로딩되면 실행토록 하였습니다.


setInterval() 메소드

setInterval()은 지정된 시간후 특정 자바스크립트 코드가 포함된 문자열을 반복하여 호출하는 메소드입니다. setTimeout() 이 지정 시간 후 한번만 호출하는데 비해, 이 메소드는 반복하여 호출 됩니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function myFunc() {
  9. setInterval("alert('안녕하세요')",1000);
  10. }
  11. document.onLoad = myFunc();
  12. //-->
  13. </SCRIPT>

  14. </HEAD>

  15. <BODY>

  16. <b>1초 간격으로 반복해서 경고창이 뜹니다

  17. </BODY>
  18. </HTML>

9~11번행에서 1초(1000)마다 경고창을 띄우는 함수 myFunc()를 정의하고, 12번행에서는 이 함수를 문서가 로딩되면 실행되도록 호출하였습니다

window 의 setInterval() 메소드를 이용하여, 우리가 자바스크립트에 관심을 갖게되는 가장 기본적인 자바스크립트 효과인 브라우저의 상태표시줄에 메시지 보여주기를 할 수 있습니다.
아래의 자세한 설명이 첨부된 예문을 보면서 배워 보기로 할까요?

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. // 메세지의 시작부분을 결정하는 변수를 설정 합니다
  9. var $count = 0  

  10. // 공백 메세지를 설정 합니다
  11. var $message = " "      

  12. // 메세지 앞에 보여줄 공백칸을 50개 입력 합니다
  13. // 이 공백은 메세지를 흐르게 하는 효과를 주기위한 메세지 시작 앞 부분에
  14. // 보여줄 공백 문자열 입니다.
  15. for(i=0; i<50; i++) {
  16.         $message += " "
  17. }

  18. // 실제 메세지들을 공백 메세지 뒤에 붙입니다
  19. $message += "자바스크립트는 재미있습니다...."
  20. $message += "즐거운 시간 되세요...."

  21. // 이제, 메세지들을 스크롤 시키는 함수를 정의 합니다
  22. function myScroll()            
  23. {      
  24. // 메세지 문자열에서 $count 이후 부터, $count + 150 개의 문자열을 추출하여 보여줍니다
  25. // substring(start,length) 메소드는 start 번째 이후부터 length 개의 문자열을 추출합니다
  26. window.status = $message.substring($count, $count + 150)

  27. // 이제 $count 변수값을 1 씩 증가시켜 줍니다.
  28. // 그러면 substring($count, $count + 150) 메소드에 의해
  29. // 초기에는 substring(0,150) 이므로, 첫번째 문자부터 150 번째 까지 보여주고,
  30. // 그 다음에는 substring(1,151)이 되므로, 두번째 문자부터 151번째 까지 보여주고,
  31. // 그 다음에는 substring(2,152)이 되므로, 세번째 문자부터 152번째 까지 보여주는 식으로 되겠죠
  32. $count++;                               

  33. // 그렇게 해서 $count가 문자열의 길이($message.length) 보다 커지면 메시지가 모두 출력된 것이므로
  34. // 메시지가 처음부터 다시 흐르도록 $count 에 0을 다시 지정해 줍니다.
  35. if($count>$message.length)      {
  36.         $count = 0;
  37. }
  38. }
  39. // 이제 이렇게 설정 된 myScroll( ) 함수를 setInterval() 메소드를 이용해 0.05 초 마다 호출합니다
  40. setInterval(함수,시간간격) 메소드는 지정된 시간간격 마다 함수가 반복해서 호출해 주는 역할을 합니다
  41. document.onload=setInterval("myScroll()",50);
  42. //-->
  43. </SCRIPT>
  44. </HEAD>

  45. <BODY>

  46. <H3 align=center> 아래 상태표시줄을 보세요 </H3>

  47. </BODY>
  48. </HTML>


window.closed

이 속성은 특정 윈도우가 닫여있는지 여부를 체크하여 true 나 false 값으로 반환합니다.

아래 예문은 현재의 윈도우가 열려있는 상태인지 아닌지를 체크하여 메시지를 출력하도록 한 간단한 예문이지만, 팝업 윈도우를 열고 그 팝업 윈도우에서 opener 페이지(팝업윈도우를 열어준 페이지)를 참조하고자 할 때 이 closed 프로퍼티를 주로 사용합니다

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. if (window.closed) {
  4. document.write("윈도우가 닫힌 상태입니다");
  5. }
  6. else {
  7. document.write("윈도우가 열려 있는 상태입니다");
  8. }
  9. //-->
  10. </SCRIPT>

3번행에서는 현재의 윈도우가 닫힌 상태이면 true 를, 열려있는 상태이면 false를 반환합니다. 당연히 여러분들이 보고 있는 이 윈도우는 열려있는 상태이므로 false를 반환받아 7번행을 리턴합니다

다음에서 오프너 윈도우가 열려있는지 여부를 알려주는 간단한 예문을 살펴보고 넘어가겠습니다. 이 예문은 현재윈도우(opener)에서 버튼을 클릭하면 열려지는 팝업 윈도우에 사용된 코드 입니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function myFunc() {
  9.         if (opener.closed) {
  10.         alert("오프너 윈도우가 사라졌어요");
  11.         }
  12.         else {
  13.         alert("오프너 윈도우가 아직 열려 있습니다");
  14.         }
  15. }
  16. //-->
  17. </SCRIPT>

  18. </HEAD>

  19. <BODY>

  20. <input type=button onClick="myFunc();" value="확인하기">

  21. </BODY>
  22. </HTML>

현재의 창을 닫고 팝업윈도우에 있는 버튼을 클릭하면 11번째행의 구문이, 현재의 창이 있는 상태에서 버튼을 클릭하면 14번째행의 구문이 출력 됩니다.


window.defaultStatus 속성

defaultStatus 프로퍼티는 윈도우의 상태표시줄에 메시지를 보여줍니다.일반적으로 문서내의 하이퍼링크에 마우스를 대면 상태표시줄에서는 해당 URL을 출력 해 주지만 마우스를 떼었을 때는 공백을 보여줍니다. 이 경우 defaultStatus를 설정 해 두면 마우스를 떼었을 때에도 상태표시줄에 기본값으로 설정한 defaultStatus 값을 출력 해 줍니다.

이 defaultStatus 속성은 읽기/쓰기가 가능하며 반영구적입니다. 일시적인 메시지를 출력 하려면 status 프로퍼티를 사용합니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. defaultStatus = "안녕하세요"
  9. //-->
  10. </SCRIPT>

  11. </HEAD>

  12. <BODY>

  13. <input type=button onClick="javascript:defaultStatus='반갑습니다';" value="바꾸기">
  14. <p>
  15. <a href="http://www.jasko.co.kr">JASKO</a>

  16. </BODY>
  17. </HTML>


opener 프로퍼티, name 프로퍼티

opener 프로퍼티는 팝업창에서 팝업창을 열어준 윈도우를 참조할 때 사용되는 프로퍼티입니다. 반대로 opener에서 팝업윈도우를 참조할 때는 팝업윈도우의 name 이 아닌, 팝업윈도우의 변수값을 참조한다는 점 기억해 두세요

아래 예문에서는 팝업윈도우를 열 때 myWin = window.open('sample61-2.html','popwindow','옵션') 의 코드로 열어주었으므로 오프너에서 팝업윈도우를 참조하려면 myWin 이라는 변수값을 사용해야 합니다

여기에서 사용된 팝업윈도우의 이름인 popwindow 는 HTML 코드에서 타겟을 지정할 때처럼 타겟으로 사용됩니다.

오프너 페이지

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> 삼성컴퓨터학원 인터넷강좌</TITLE>

  6. <SCRIPT LANGUAGE="JavaScript">
  7. <!--
  8. function openWin() {
  9. myWin = window.open('sample61-2.html','popwindow','width=600,height=300');
  10. }
  11. //-->
  12. </SCRIPT>

  13. </HEAD>

  14. <BODY>

  15. <input type=button onclick="openWin();" value="팝업창 열기">
  16. <input type=button onclick="myWin.close();" value="팝업창 닫기">

  17. </BODY>
  18. </HTML>

9~11번행에서 정의된 openWin() 함수에서는 새로운 팝업윈도우를 myWin 이라는 변수에 담아 열어주는 함수입니다. 21번행에서 사용된 팝업윈도우 닫기 코드에서 사용된 myWin을 주의깊게 살펴 보세요

오프너 페이지에서 <a href="http://cafe.naver.com/ss2education.cafe" target="popwindow"> 처럼 태그를 사용하면 팝업윈도우에 자스코 홈페이지가 열리게 됩니다

팝업 윈도우

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>

  6. </HEAD>

  7. <BODY>

  8. <input type=button onclick="alert('현재창의 이름은 : ' + window.name)" value="현재창의 이름">
  9. <input type=button onclick="opener.location='http://cafe.naver.com/ss2education.cafe'" value="삼성컴퓨터인터넷강좌 열기">

  10. </BODY>
  11. </HTML>


window.name 프로퍼티는 현재윈도우의 이름값을 반환해 줍니다. 11번 행의 코드를 실행시키면 팝업윈도우의 이름인 popwindow를 반환해 줍니다

팝업윈도우에서 오프너 페이지에 다른 페이지를 불러오려면 참조값으로 opener 프로퍼티를 사용해야 합니다.



 
출처: http://cafe.naver.com/ss2education.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=78
Posted by 행복한 프로그래머 궁금쟁이박
TAG

댓글을 달아 주세요