2012년 11월 18일 일요일

[상호작용-웹표준 교과서]2. 스크립트 삽입

1. 스크립트 삽입

- 스크립트는 움직임이 있는 쌍방향 콘텐츠를 구현하기 위한 간이 프로그래밍언어의 총칭이다. CGI같이 서버에 준비된 프로그램으로 처리하는 것이 아니라 사용자의 PC에서 프로그램을 실행하여 처리되기 때문에 클라이언트 스크립트라고 한다.
- 보통 '스크립트'라고 하면 클라이언트 사이트 스크립트를 가리킨다. 엄밀히는 CGI나 PHP도 스크립트의 한 종류이지만 이 같은 스크립트는 서버 사이트 스크립트라 하며 클라이언트 사이드 스크립트와 구별된다.
- 현재 일반적으로 사용되는 스크립트의 종류는 다음과 같다.

2. 스크립트언어 지정

- 웹 페이지에서 스크립트를 사용하는 경우 meta 요소에 스크립트언어를 지정할 필요가 있다. JavaScript를 사용할 때에는 아래와 같이 지정한다.
- content 속성값은 사용하는 스크립트에 따라 지정하는  MIME타입이 다음과 같이 달라진다.
 - 서버가 Apache라면 스타일시트언어의 지정과 동일하게 .htacees파일에 다음과 같이 지정해도 좋다.

3. 스크립트의 지정 요소(script 요소)

- 스크립트의 내용은 script 요소로 지정한다. script 요소는 head 요소나 body 요소의 범위에 몇 번이든 출현할 수 있다.

# <script> 요소의 코멘트화

- XHTML 에서는 script 요소의 내용모델은 '#PCDATA' (Parsed CDATA, 분석처리된 문자 데이터)이며, '<' '>' '&' 등의 기호는 문자참조로 이스케이프해야 한다. 이 문제를 피하려고 내용을 주석 처리하는 데는 '<![CDATA['와 ']]>'로 둘러싸서 CDATA영역으로 정의하여 내용을 '#CDATA'로 인식시켜야 한다.
 - HTML 에서 script 요소의 내용 모델은 원래 '#CDATA'이기 때문에 '<!--'와 '-->'으로 주석 처리하는 점에 차이가 있다. XHTML에 이같이 주석 처리하는 경우 스크립트가 작동하지 않을 가능성이 있으므로 '<![CDATA]'와 ']]>'으로 주석 처리한다.
  - JavaScript 라면 '<![CDATA['와 ']]>'의 앞뒤에 '//'을 붙여 주석 처리해도 좋다.

#외부 스크립트 참조

- 외부 스크립트는 src 속성으로 참조한다.

 4. 스크립트의 대체내용(noscript 요소)

- 스크립트를 사용할 수 없는 환경을 위해서 noscript 요소로 대체 내용을 지정한다.
- noscript 속성은 블록 레벨 요소이며 XHTML1.0 Strict 와 XHTML1.1 에서 직접적인 자식 요소로 둘 수 있는 것은 블록 레벨 요소만 존재한다.

5. 이벤트 핸들러 속성

- 이벤트 핸들러 속성은 스크립트 요소를 연계시켜 어떤 요소에 스크립트를 편입시키기 위하여 사용한다. 이벤트 핸들러 속성에는 다음의 18개의 종류가 있다.

# 이벤트 핸들러 속성의 접근성

- 이벤트 핸들러 속성은 onfocus, onblur, onselect 라는 입력장치에 존재하지 않는 속성을 지정하는 것이 바람직하다. 이들 속성은 실제로는 키보드의 움직임에만 반응하는 경우가 많기 때문에 필요에 따라 다른 속성과 함께 지정한다.
- WCAG1.0 기술서에서는 마우스나 키보드의 움직임 대상의 속성을 사용하는 경우에는 접근성을 저하시키지 않으려고 키보드 움직임 대상의 속성을 함께 지정하게 한다.

  • onclick 속성과 onkeypress 속성
  • onmousedown 속성과 onkeydown 속성
  • onmouse 속성과 onkeyup 속성
- ondblclick 속성이나 마우스 커서의 좌표에 의존하는 속성(onmousemove, onmouseover, onmouseout)은 대응하는 키보드 움직임 대상의 속성이 없기 때문에 바람직하지 않음에 주의하자. 


댓글 없음:

댓글 쓰기