자바스크립 예제(1)

자바스크립 예제(1)

경고 메시지 윈도우 뛰우기
	처음으로 다루어 볼 예제는 경고 메시지를 보여주는 윈도우를 뜨게 하는 것입니다. 인터넷 여행을 많이 해 보신 분이라면 자주 접하셨을 것입니다. <HTML> <HEAD> <SCRIPT LANGUAGE = "JAVASCRIPT"> function pushbtn() { alert("HELLO!"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT NAME="Button1" TYPE="button" VALUE="Push Me" onClick="pushbtn()"> </FORM> </BODY> </HTML> 위와 같이 head 태그에서 함수 하나를 정의하고 그 함수가 단지 alert 도구를 호출하도록 합니다. 그리고 버튼을 사용하여 윈도우를 뜨게 하기 위하여 form 태그 내의 input 태그의 속성들을 정합니다. 이 때 onClick="pushbtn()"이라는 것은 이 버튼이 클릭될 때 pushbtn() 함수를 호출하라는 것입니다. 다음 예제는 새로운 윈도우를 생성하는 것입니다. 물론 HTML 문서의 Target을 이용해도 새로운 윈도우를 만들어 낼 수 있지만 이 때는 현재 브라우저 윈도우의 크기와 속성을 그대로 이어받은 윈도우가 생기는 것이므로 사용하기 불편한 경우가 있을 것입니다. 다음의 코드를 봅시다 <HTML><HEAD> <SCRIPT LANGUAGE = "JAVASCRIPT"> function makewin() { msg=open("","Dis_Window","width=300,height=200") ; msg.document.write("<head><title>New Window</title>") ; msg.document.write("</head><body>New window<BR>") ; msg.document.write("made by javascript<BR></body>") ; } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT NAME="bt1" TYPE="button" VALUE="Push Me" onClick="makewin()"> </FORM> </BODY> </HTML> 이 예제에서도 역시 새로운 함수 makewin()을 정의한 뒤 그 안에서 새로운 윈도우를 만들고 그 윈도우에 필요한 문자열을 삽입하였습니다. 그리고 밑의 input 태그에서도 같은 방법으로 버튼을 만들어서 makewin() 함수와 연결하였습니다. 위에서 새로운 윈도우를 만들기 위해 사용한 open 도구에 대해 더 자세히 알아 봅시다. open 도구는 새로운 문서나 윈도우를 생성하는 것으로 여기서는 새로운 윈도우를 생성하는 것만을 설명하겠습니다. 일반적인 구문은 다음과 같습니다. [windowVar]=open("[URL]","windowName","[windowFeatures]") 여기서, []로 둘러싼 곳은 생략이 가능합니다. windowVar는 예에서의 msg처럼 윈도우의 이름입니다. 이것은 자신이 원하는 이름으로 사용하면 됩니다. URL은 새로운 윈도우에 열려고 하는 URL를 나타냅니다. 비어 있으면 내용이 빈 윈도우만 생성됩니다. 위의 예제에서는 msg라는 내용이 없는 윈도우를 생성하고 여기에 직접 document.write를 이용하여 내용을 작성하였습니다. windowName 필드는 윈도우의 이름을 지정하는 필드로서 위 예의 Dis_Window처럼 원하는 이름을 사용하며, 반드시 지정되어야 합니다. 여러개의 윈도우를 열 경우에는 반드시 서로 다른 이름을 사용해야 합니다. 여러개의 윈도우를 생성할 때 이 이름이 같다면 하나의 윈도우만이 생성됩니다. windowFeatures는 윈도우의 속성을 지정하는 필드입니다. 여기에 사용되는 각 인자들은 다음과 같습니다. toolbar=yes or no : back, home같은 툴바(no). location=yes or no : location 입력 창(no). directories=yes or no : what's new, what's cool 같은 것(no). status=yes or no : 상태바(no). menubar=yes or no : 메뉴(no). scrollbars=yes or no : 스크롤바(no). resizable=yes or no : 크기 변경(no). width=pixel value height=pixel value 각 인자들은 콤마로 구분되고, 이 인자들 사이에 공백이 있어서는 안된다는 것에 주의해야 합니다. 위에서 yes or no 는 각 요소들을 on/off하는 것이고, width, height는 창의 크기로 픽셀 단위의 수치를 쓰면 됩니다. 이제 여러분이 원하는 윈도우를 직접 생성해보고 각각의 인자들의 기능을 확인하기 바랍니다.