| 18 스크립트(script) | |
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문 |
사용자측(client-side) 스크립트(script)는 HTML 문서와 같이 사용하거나 문서에 깔릴(embedded) 수 있는 하나의 프로그램이다. 이 프로그램은 문서가 로드되거나, 연결(link)이 활성화되는 등의 경우에 사용자의 기계에서 수행된다. HTML의 스크립트의 지원은 스크립트 언어에 독립적(independent)이다.
스크립트(script)는 제작자에게 고도로 활성적이고 연결하기 좋은 방식으로 HTML 문서을 확장하는 수단을 제공한다. 예를 들면:
제작자가 HTML 문서에 사용할 수 있는 두 종류의 스크립트:
주석: 이 규격의 스크립트에 관한 더 상세한 정보는 스크립크 마크로(script macro)를 참조하라.
여기에서는 스크립트(script)를 지원하는 사용도구의 문제를 다룬다.
<!ELEMENT SCRIPT - - %Script; -- 스크립트 선언 --> <!ATTLIST SCRIPT charset %Charset; #IMPLIED -- 연결 자원의 글자 엔코딩 -- type %ContentType; #REQUIRED -- 스크립트 언어의 컨텐트 타입 -- src %URI; #IMPLIED -- 외부 스크립트의 URI -- defer (defer) #IMPLIED -- 사용도구에 따라 스크립트의 작용이 다를 수 있슴 -- >
시작태그: 필요 함, 종료태그: 필요 함
애트리뷰트의 정의
SCRIPT 엘레멘트는 문서 안에 스크립트(script)를 위치시킨다. 이 엘레멘트는 HTML 문서의 HEAD 또는 BODY 안에 여러번 나타날 수 있다.
스크립트는 SCRIPT 엘레멘트의 내용 안에 또는 외부 화일 안에 정의 될 수 있다. 만일 src 애트리뷰트가 설정되지 않았으면, 사용도구는 엘레멘트의 내용을 스크립트로 해석하여야 한다. 만일 src가 URI 값을 가지면, 사용도구는 엘레멘트의 내용을 무시하여야 하고, 그 URI로부터 스크립트를 읽어 표현 하여야한다. charset 애트리뷰트는 SCRIPT 엘레멘트의 내용은 고려하지 않고, src 애트리뷰트로 지정 한 스크립트의 글자 엔코딩을 참조한다,
스크립트들은 사용도구가 아는 스크립트 엔진(engine)에 의하여 평가된다.
스크립트 데이터의 문법은 스크립트 언어에 따라 다르다.
HTM이 특정 스크립트(script) 언어에 의존하지 않으므로, 문서 제작자는 사용도구에게 각 스크립트의 언어를 정확하게 알려 주어야한다. 이는 디폴트 선언 또는 지역 선언으로 될 수 있다.
제작자는 문서 안의 모든 디폴트 스크립트에 대하여, 다음 HEAD 안에 META 선언으로 디폴트 스크립트 언어를 지정한다.
<META http-equiv="Content-Script-Type" content="type">
여기서 "type"은 스크립트 언어의 이름을 주석 위 한 컨텐트 타입(content type)이다. 값은 예를 들어 "text/tcl", "text/Javascript", "text/vbscript" 등이다.
META 선언이 없으면, 디폴트를 HTTP 헤더(header)의 "Content-Script-Type"으로 설정 될 수 있다.
Content-Script-Type: type
여기서도 "type"은 스크립트 언어의 이름을 주석 위 한 컨텐트 타입이다.
사용도구는 문서의 디폴트 스크립트 언어를 다음 단계(위쪽 먼저)로 판정하여야 한다.
디폴트 스크립트 언어 정보가 지정되지 않은 문서와 본질적 이벤트(intrinsic event) 스크립트가 지정 된 엘레멘트를 포함하는 문서는 틀린 것이다. 사용도구는 역시 잘 못 정의 된 스크립트를 해석 하도록 시도 할 수 있으나, 꼭 필요한 것은 아니다. 편집기들은 제작자가 잘못 된 문서의 제작을 막기 위해 디폴트 스크립트 언어 정보를 생성하여야 한다.
문서 안의 각 SCRIPT 엘레멘트 인스탄스(instance)를 위 한 type 애트리뷰트는 지정하여야 한다. SCRIPT 엘레멘트의 type 애트리뷰트의 값은 그 엘레멘트의 디폴트 스크립트 언어를 덮어(override) 씌운다.
예제에서, 디폴트 스크립트 언어를 "text/tcl"로 선언하였다. 헤더(header)에 한 SCRIPT를 포함하였다. 그 스크립트 는 외부 화일에 위치하고 스크립트 언어는 "text/vbscript"이다. 다른 한 SCRIPT를 본체(body)에 포함시켰고, 그 내용은 자체의 스크립트 "text/Javascript" 로 썼다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>SCRIPT를 갖는 문서</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/Javascript">
... Javascript 부분 ...
</SCRIPT>
</BODY>
</HTML>
각 스크립트 언어는 자신의 스크립트 안의 HTML 오브젝트를 조회하는 방법을 갖는다. 이 규격에는 HTML 오브젝트(object)를 조회하는 표준 기능이 지정되어 있지 않다.
그러나, 스크립트들은 지정 된 이름에 따라 엘레멘트(element)를 조회한다. 스크립트 엔진(engine)들은 엘레멘트를 인식하는데, 다음 과정의 규칙을 따라야한다. 두가지가 다 설정되었으면, id 보다 name 애트리뷰트를 우선 적용하여야 한다. 아니면, 둘 중의 하나를 사용 할 수 있다.
주석: HTML 문서의 제작자들은, 예를 들어, 스크립트들이 이벤트(event)에 어떻게 반향하는가 등 본질적(intrinsic) 이벤트의 영역에 대한 변경이 예상된다는 점을 알 필요가 있다. 이 영역의 연구가 W3C의 문서의 오브젝트 모델 워킹 구룹(Document Object Model Working Group)에 의하여 진행된다(영문 http://www.w3.org/ 참조).
사용자가 사용도구를 사용하므로서, 하나의 액션(action)이 발생되는 여러개의 이벤트(event)들과 연관시키는 것이 가능하다. 위 목록에 열거된 각 본질적 이벤트("intrinsic events")는 스크립트인 값을 갖는다. 그 엘레멘트의 이벤트가 발생되면, 언제나 스크립트가 수행된다. 스크립트 데이터의 문법은 스크립트 언어에 따라 다르다.
INPUT, SELECT, BUTTON, TEXTAREA, LABEL와 같은 제어 엘레멘트들은 모두 어떤 본질적 이벤트에 반응한다. 이들 엘레멘트가 폼(form) 안에 없으면, 그 것들은 문서의 그래픽 사용자 인터페이스(interface)에 사용 될 수 있다.
예를 들어 제작자는 문서 안에 폼을 송신(submit)하지 않으나, 활성화되었을 때, 서버와 통신하는 누름 단추의 포함을 원 할 수 있다.
다음 예제는 일부 가능한 제어와 사용자 인터페이스가 어떻게 본질적 이벤트에 의하여 작용하는가를 설명한다.
다음 예제에서, userName(사용자 이름)이 필요한 텍스트 필드(field)이다. 사용자가 그 필드를 떠나기를 시도 할 때, onblur 이벤트는 userName이 만족스러운 값 임을 확인하기 위하여 자바스크립트(Javascript) 기능(function)을 부른다.
<INPUT NAME="userName" onblur="validUserName(this.value)">
다른 자바스크립트(Javascript)의 예제:
<INPUT NAME="num"
onchange="if (!checkNum(this.value, 1, 10))
this.focus();this.select();} else {thanks()}"
VALUE="0">
비쥬얼베직 스크립트(VBScript)로 작성한 텍스트 필드의 이벤트 취급자(handler) 예제:
<INPUT name="edit1" size="50">
<SCRIPT type="text/vbscript">
Sub edit1_changed()
if edit1.value = "abc" Then
button1.enabled = True
Else
button1.enabled = False
End If
End Sub
</SCRIPT>
Tcl(tool command language)을 사용 한 같은 예제:
<INPUT name="edit1" size="50">
<SCRIPT type="text/tcl">
proc edit1_changed {} {
if {[edit value] == abc} {
button1 enable 1
} else {
button1 enable 0
}
}
edit1 onchange edit1_changed
</SCRIPT>
자바스크립트(Javascript)를 사용 한 스크립트 안의 이벤트 바인딩(binding) 예제, 먼저 단순한 클릭 처리자 예제이다.
<BUTTON type="button" name="mybutton" value="10">
<SCRIPT type="text/Javascript">
function my_onclick() {
. . .
}
document.form.mybutton.onclick = my_onclick
</SCRIPT>
</BUTTON>
더 재미있는 윈도우(window) 처리자(handler) 예제:
<SCRIPT type="text/Javascript">
function my_onload() {
. . .
}
var win = window.open("some/other/URI")
if (win) win.onload = my_onload
</SCRIPT>
Tcl(tool command language)로 다음과 같이된다.
<SCRIPT type="text/tcl">
proc my_onload {} {
. . .
}
set win [window open "some/other/URI"]
if {$win != ""} {
$win onload my_onload
}
</SCRIPT>
본질적 이벤트(intrinsic event) 처리자들 안의 "document.write" 또는 유사한 문장은 현재의 문장을 수정하기 보다는 새로운 문서를 생성하고 작성한다.
문서가 로드되어 작동되는 스크립트는 문서의 내용을 역동적(탄력적)으로 수정 할 수 있게 한다. 이렇한 능력은 스크립트 언어에 따라 다른데, 예를 들면 일부 사용도구는 HTML 오브젝트 모델의 "document.write" 문장을 지원한다.
역동적 문서의 수정은 다음과 같은 모델로 될 수 있다.
HTML 문서는 어떤 SCRIPT 엘레멘트의 처리 전과 후에 HTML DTD에 부합하도록 강요된다.
다음 예제는 어떻게 스크립트가 문서를 탄력있게 수정있는가를 설명한다.
<TITLE>실험 문서</TITLE>
<SCRIPT type="text/Javascript">
document.write("<p><b>여러분 안녕하세요!<\/b>")
</SCRIPT>
같은 효과를 갖는 이 HTML 작성(markup):
<TITLE>실험 문서</TITLE> <P><B>여러분 안녕하세요!</B>
여기서는 제작자가 스크립트를 지원하지 않는 사용도구를 위한 문서를 어떻게 생성 할 수 있는가를 설명한다.
<!ELEMENT NOSCRIPT - - (%block;)+ -- 스크립트를 지원하지 않는 표현을 위한 대체(alternate) 내용 --> <!ATTLIST NOSCRIPT %attrs; -- %coreattrs, %i18n, %events -- >
시작태그: 필요 함, 종료태그: 필요 함
NOSCRIPT 엘레멘트는 제작자가 스크립트가 수행되지 않을 때, 대체(alternate) 내용을 제공 할 수 있게 한다. NOSCRIPT 엘레멘트의 내용은 스크립트를 아는 사용도구에서 다음 경우에 만 표현하여야 한다.
사용자측(client-side) 스크립트를 지원하지 않는 사용도구는 이 엘레멘트(element)의 내용을 표현하여야 한다.
다음 예제에서, SCRIPT를 수행하는 사용도구는 문서 안에 탄력적으로 생성 된 데이터를 가질 것이다. 만일 이 사용도구가 스크립트를 지원하지 않으면, 사용자는 연결(link)을 통하여 여전히 읽어 볼 수 있다.
<SCRIPT type="text/tcl"> ... 데이터를 삽입하기 위 한 Tcl 스크립트 ... </SCRIPT> <NOSCRIPT> <P><A href="http://someplace.com/data">데이터</A>에 접속하시오. </NOSCRIPT>
SCRIPT 엘레멘트를 인식하지 못하는 사용도구는 그 엘레멘트(element)의 내용을 텍스트로 표현한다. Javascript, VBScript와 Tcl 언어를 위 한 것을 포함 한 일부 스크립트 엔진(engine)들은 SGML 코멘트 안에 스크립트 문장들을 허용한다. SCRIPT 엘레멘트를 인식하지 못하는 사용도구는, 그래서 그 코멘트를 무시 할 것이며, 세련 된 스크립트 엔진(engine)들은 코멘트 안의 스크립트가 수행되어야 한다는 것을 알 것이다.
이 문제의 다른 해결책은 스크립트를 외부 문서에 위치시키고 src 애트리뷰트로 참조하는 것이다.
Javascript 안에서 코멘트(comment)
Javascript 엔진은 SCRIPT 엘레멘트의 시작에서 문자열 "<!--"이 나오는 것을 허용하고, 그 열(line)의 끝까지의 다른 글자들을 무시한다.
Javascript는 "//"를 시작으로 그 열(line) 끝까지 코멘트로 해석한다.
이는 문자열을 " -->"까지 Javascript 표현(parse)으로 부터 감추는데 필요하다.
<SCRIPT type="text/Javascript">
<!-- 옛 브라우저로 부터 스크립트 내용을 감추기 위하여
function square(i) {
document.write("수치 ", i ,"를 기능(function)에 보냄.","<BR>")
return i * i
}
document.write("기능 종료 ",square(5),".")
// 옛 브라우저로 부터 감춘 내용의 끝 -->
</SCRIPT>
VBScript 안에서 코멘트
VBScript에서, 단일 따옴표(')는 그 열의 끝 까지 코멘트로 처리한다.
그래서 이는 예를 들어 문자열 " -->"를 VBScript로 부터 감추는데 사용 할 수 있다.
<SCRIPT type="text/vbscript">
<!--
Sub foo()
...
End Sub
' -->
</SCRIPT>
TCL 안에서 코멘트
Tcl에서, "#" 글자는 그 열의 나머지 부분을 코멘트로한다.
<SCRIPT type="text/tcl">
<!-- 옛 브라우저로 부터 스크립트 내용을 감추기 위하여
proc square {i} {
document write "수치 $i를 기능(function)에 보냄.<BR>"
return [expr $i * $i]
}
document write "기능 종료 [square 5]."
# 옛 브라우저로 부터 감춘 내용의 끝 -->
</SCRIPT>
주석: 일부 브라우저는 첫번째 ">" 글자에서 코멘트를 닫는다. 그래서 이런 브라우저로 부터 코멘트 스크립트를 감추려면, 관계 된 오퍼란드(operand)와 오퍼레이터(operator)의 위치를 바꾸거나(예: "x> y" 대신 "y < x" 사용) 혹은 스크립트 언어에 영항을 받는 이탈(졸료) ">"를 사용 할 수 있다.
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문 |
이 문서(http://trio.co.kr/webrefer/html/interact/scripts.html)는 자유로이 연결 사용이 가능함.