W3C18 스크립트(script)Trio 홈페이지
목차
  1. 스크립트의 소개
  2. 스크립트 지원 사용도구를 위한 문서 설계
    1. SCRIPT 엘레멘트
    2. 스크립트 언어의 지정
    3. 본질적(intrinsic) 이벤트(event)
    4. 역동적 문서의 수정
  3. 스크립트 지원 않하는 사용도구을 위한 문서 설계
    1. NOSCRIPT 엘레멘트(element)
    2. 사용도구로 부터 스크립트 감추기

18.1 스크립트(script)의 소개

사용자(client-side) 스크립트(script)는 HTML 문서와 같이 사용하거나 문서에 깔릴(embedded) 수 있는 하나의 프로그램이다. 이 프로그램은 문서가 로드되거나, 연결(link)이 활성화되는 등의 경우에 사용자의 기계에서 수행된다. HTML의 스크립트의 지원은 스크립트 언어에 독립적(independent)이다.

스크립트(script)는 제작자에게 고도로 활성적이고 연결하기 좋은 방식으로 HTML 문서을 확장하는 수단을 제공한다. 예를 들면:

제작자가 HTML 문서에 사용할 수 있는 두 종류의 스크립트:

주기: 이 규격의 스크립트에 관한 더 상세한 정보는 스크립크 마크로(script macro)를 참조하라.

18.2 스크립트 지원 사용도구를 위한 문서 설계

여기에서는 스크립트(script)를 지원하는 사용도구의 문제를 다룬다.

18.2.1 SCRIPT엘레멘트(element)

<!ELEMENT SCRIPT - - %Script;          -- 스크립트 선언 -->
<!ATTLIST SCRIPT
 charset     %Charset;      #IMPLIED  -- 연결 자원의 글자 엔코딩 --
 type        %ContentType;  #REQUIRED -- 스크립트 언어의 컨텐트 타입 --
 src         %URI;          #IMPLIED  -- 외부 스크립트의 URI --
 defer       (defer)        #IMPLIED
	-- 사용도구에 따라 스크립트의 작용이 다를 수 있슴 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

src = uri [대소문자 타입 참조: CT]
이 애트리뷰트는 외부 스크립트의 위치를 지정한다.
type = content-type [대소문자 구별 없이: CI]
이 애트리뷰트는 엘레멘트 내용의 스크립트(script) 언어를 지정하고, 디폴트 스크립트 언어를 덮어(override) 씌운다. 스크립트 언어는 "text/Javascript"등 컨텐트 타입(content type)으로 지정된다. 제작자는 이 애트리뷰트의 값을 제공하여야 하며, 이 애트리뷰트의 디폴트 값은 없다.
language = cdata [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 엘레멘트 내용의 스크립트 언어를 지정한다. 그 값은 언어의 지정자(identifier)이나, 이 지정자들은 표준이 없으므로, 이 애트리뷰트 불량한 것이 되었고, 대신 type을 사용하는 것이 좋다.
defer [대소문자 구별 없이: CI]
설정되면, 이 불린(boolean) 애트리뷰트는 사용도구에게 스크립트는 어떤 문서의 내용도 만들지 않는다는 암시를 주는 것(예를 들어, 자바스크립트에서 "document.write"이 없는 것)이므로, 사용도구는 다음을 처리(parse)하고 표현 할 수 있다.
다른 곳에서 정의 된 애트리뷰트

SCRIPT 엘레멘트는 문서 안에 스크립트(script)를 위치시킨다. 이 엘레멘트는 HTML 문서의 HEAD 또는 BODY 안에 여러번 나타날 수 있다.

스크립트는 SCRIPT 엘레멘트의 내용 안에 또는 외부 화일 안에 정의 될 수 있다. 만일 src 애트리뷰트가 설정되지 않았으면, 사용도구는 엘레멘트의 내용을 스크립트로 해석하여야 한다. 만일 src가 URI 값을 가지면, 사용도구는 엘레멘트의 내용을 무시하여야 하고, 그 URI로부터 스크립트를 읽어 표현 하여야한다. charset 애트리뷰트는 SCRIPT 엘레멘트의 내용은 고려하지 않고, src 애트리뷰트로 지정 한 스크립트의 글자 엔코딩을 참조한다,

스크립트들은 사용도구가 아는 스크립트 엔진(engine)에 의하여 평가된다.

스크립트 데이터의 문법은 스크립트 언어에 따라 다르다.

18.2.2 스크립트 언어의 지정

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"은 스크립트 언어의 이름을 주기 위 한 컨텐트 타입이다.

사용도구는 문서의 디폴트 스크립트 언어를 다음 단계(위쪽 먼저)로 판정하여야 한다.

  1. 만일 어떤 META 선언이 "Content-Script-Type"을 지정하면, 글자 흐름의 마지막의 것이 디폴트 스크립트 언어를 결정한다.
  2. 아니면, 만일 어떤 HTTP 헤더가 "Content-Script-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.0//EN"
    "http://www.w3.org/TR/REC-html40/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 오브젝트를 조회하는 방법을 갖는다. 이 규격에는 HTML 오브젝트(object)를 조회하는 표준 기능이 지정되어 있지 않다.

그러나, 스크립트들은 지정 된 이름에 따라 엘레멘트(element)를 조회한다. 스크립트 엔진(engine)들은 엘레멘트를 인식하는데, 다음 과정의 규칙을 따라야한다. 두가지가 다 설정 되었으면, id 보다 name 애트리뷰트를 우선 적용하여야 한다. 아니면, 둘 중의 하나를 사용 할 수 있다.

18.2.3 본질적 이벤트intrinsic

주기: HTML 문서의 제작자들은, 예를 들어, 스크립트들이 이벤트(event)에 어떻게 반향하는가 등 본질적(intrinsic) 이벤트의 영역에 대한 변경이 예상된다는 점을 알 필요가 있다. 이 영역의 연구가 W3C의 문서의 오브젝트 모델 워킹 구룹(Document Object Model Working Group)에 의하여 진행된다(영문 http://www.w3.org/ 참조).

애트리뷰트의 정의
onload = script [대소문자 타입 참조: CT]
onload 이벤트(event)는 사용도구가 윈도우(window) 또는 FRAMESET 안의 모든 프레임(frame)들의 로딩을 완료하였을 때 발생된다. 이 애트리뷰트(attribute)는 BODYFRAMESET 엘레멘트(element)에 사용 될 수 있다.
onunload = script [대소문자 타입 참조: CT]
onunload 이벤트는 사용도구가 윈도우 또는 프레임으로부터 를 제거(remove)되었을 때 발생된다. 이 애트리뷰트는 BODYFRAMESET 엘레멘트에 사용 될 수 있다.
onclick = script [대소문자 타입 참조: CT]
onclick 이벤트는 지시하는 장치(pointing device)의 단추가 엘레멘트 위를 클릭하였을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onDblClick = script [대소문자 타입 참조: CT]
onDblClick 이벤트는 지시하는 장치의 단추가 엘레멘트 위를 두번 클릭하였을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onMouseDown = script [대소문자 타입 참조: CT]
onMouseDown 이벤트는 지시하는 장치의 단추가 엘레멘트 위를 눌렀을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onMouseUp = script [대소문자 타입 참조: CT]
onMouseUp 이벤트는 지시하는 장치의 단추가 엘레멘트 위를 누른 것을 해제하였을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onMouseOver = script [대소문자 타입 참조: CT]
onMouseOver 이벤트는 지시하는 장치의 단추가 엘레멘트 위로 이동하였을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onMouseMove = script [대소문자 타입 참조: CT]
onMouseMove 이벤트는 지시하는 장치의 단추가 엘레멘트 위에서 이동하였을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onMouseOut = script [대소문자 타입 참조: CT]
onMouseOut 이벤트는 지시하는 장치의 단추가 엘레멘트 위에서 이탈하였을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onfocus= script [대소문자 타입 참조: CT]
onfocus 이벤트는 지시하는 장치나 탭에 의한 항해(tabbing navigation)에 의해, 엘레멘트에 초점이 왔을 때 발생된다. 이 애트리뷰트는 LABEL, INPUT, SELECT, TEXTAREA, BUTTON 엘레멘트에 사용 될 수 있다.
onblur = script [대소문자 타입 참조: CT]
onblur 이벤트는 지시하는 장치나 탭에 의한 항해에 의해, 엘레멘트의 초점을 상실 했을 때 발생된다. 사용 될 수 있는 엘레멘트는 onfocus에서와 같다.
onKeyPress = script [대소문자 타입 참조: CT]
onKeyPress 이벤트는 키(key)를 엘레멘트 위에서 눌렀다 놓았을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onKeyDown = script [대소문자 타입 참조: CT]
onKeyDown 이벤트는 키를 엘레멘트 위에서 눌렀을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onKeyUp = script [대소문자 타입 참조: CT]
onKeyUp 이벤트는 키를 엘레멘트 위에서 놓았을 때 발생된다. 이 애트리뷰트는 대부분의 엘레멘트에 사용 될 수 있다.
onSubmit = script [대소문자 타입 참조: CT]
onSubmit 이벤트는 폼(form)이 송신(submit) 될 때 발생된다. 이는 FORM 엘레멘트에 만 사용 될 수 있다.
onReset = script [대소문자 타입 참조: CT]
onReset 이벤트는 폼이 재지정(reset) 될 때 발생된다. 이는 FORM 엘레멘트에 만 사용 될 수 있다.
onselect = script [대소문자 타입 참조: CT]
onselect 이벤트는 사용자가 텍스트 필드에 텍스트를 선택(select)하였을 때 발생된다. 이 애트리뷰트는 INPUT, TEXTAREA 엘레멘트에 사용 될 수 있다.
onchange = script [대소문자 타입 참조: CT]
onchange 이벤트는 입력 초점(focus)을 잃고 또한 초점을 받기 시작해서 부터 값이 변경 되었을 때까지 발생된다. 이 애트리뷰트는 INPUT, SELECT, TEXTAREA 엘레멘트에 사용 될 수 있다.

사용자가 사용도구를 사용하므로서, 하나의 액션(action)이 발생되는 여러개의 이벤트(event)들과 연관시키는 것이 가능하다. 위 목록에 열거된 각 본질적 이벤트("intrinsic events")는 스크립트인 값을 갖는다. 그 엘레멘트의 이벤트가 발생되면, 언제나 스크립트가 수행된다. 스크립트 데이터의 문법은 스크립트 언어에 따라 다르다.

INPUT, SELECT, BUTTON, TEXTAREA, and 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" 또는 유사한 문장은 현재의 문장을 수정하기 보다는 새로운 문서를 생성하고 작성한다.

18.2.4역동적 문서의 수정

문서가 로드되어 작동되는 스크립트는 문서의 내용을 탄력적으로 수정 할 수 있게 한다. 이렇한 능력은 스크립트 언어에 따라 다른데, 예를 들면 일부 사용도구는 HTML 오브젝트 모델의 "document.write" 문장을 지원한다.

역동적 문서의 수정은 다음과 같은 모델로 될 수 있다.

  1. 모든 SCRIPT 엘레멘트는 로드 된 문서의 순서에 따라 점검된다.
  2. SGML CDATA를 생성시키는, 주어진 SCRIPT엘레멘트 안의 모든 스크립트들은 구성이 모두 점검된다. 그들의 조합 생성 된 텍스트는 문서 안의 SCRIPT 엘레멘트 자리에 삽입된다.
  3. 생성 된 CDATA는 재 점검된다.

HTML 문서는 어떤 SCRIPT 엘레멘트의 처리 전과 후에 HTML DTD에 부합하도록 강요된다

다음 예제는 어떻게 스크립트가 문서를 탄력있게 수정있는가를 설명한다.

<TITLE>실험 문서</TITLE>
 <SCRIPT type="text/Javascript">
   document.write("<p><b>여러분 안녕하세요!<\/b>")
</SCRIPT>

같은 효과를 갖는 이 HTML 작성(markup):

<TITLE>실험 문서</TITLE>
<P><B>여러분 안녕하세요!</B>

18.3 스크립트를 지원 않는 사용도구을 위한 문서 설계

여기서는 제작자가 스크립트를 지원하지 않는 사용도구를 위한 문서를 어떻게 생성 할 수 있는가를 설명한다.

18.3.1 NOSCRIPT 엘레멘트(element)

<!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>

18.3.2 사용도구로 부터 스크립트 감추기

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" 사용) 혹은 스크립트 언어에 영항을 받는 이탈 ">"를 사용 할 수 있다.


Trio 홈페이지 문서(http://trio.co.kr/webrefer/html40/interact/scripts.html)는 자유로이 연결 사용이 가능함는.