Blog

2장 HTML 속의 자바스크립트

March 22, 2014

2장 HTML 속의 자바스크립트

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 «프론트엔드 개발자를 위한 자바스크립트»(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

HTML 속의 자바스크립트

초기 자바스크립트는 HTML에 포함, 현재는 HTML 명세에서 공식적으로 문서화

<script> 요소

<script>의 여섯 가지 속성
– async (옵션) : 스크립트를 즉시 내려받지만 자원을 받거나 다른 스크립트를 불러오는 등 다른 페이지 작업을 방해해서는 안된다고 지시 (외부 스크립트 파일을 불러올 때만 유효)
– charset (옵션) : src 속성으로 명시한 코드의 문자셋을 지정 (브라우저에서 대게 이 속성을 무시하기 때문에 잘 안씀)
– defer (옵션) : 문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타냄 (외부 스크립트 파일을 불러올 때만 유효함)
– language (폐기) : 스크립트 언어를 나타낼 목적이었으나 대부분의 브라우저에서 무시하기 때문에 안씀
– src (옵션) : 실행할 코드를 포함한 외부 파일의 위치를 지정
– type (옵션) : 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정 (“text/javascript”는 구식이지만 호환성을 위해서나 생략했을 때 기본 값이기 때문에 많이 쓰임 / “application/javascript”와 “application/ecmascript”는 IE를 제외한 브라우저에서 인식)

<script> 요소 안에 직접 작성한 자바스크립트는 인라인 자바스크립트 코드라 부르며 위에서부터 차례로 해석되며 </script>는 닫는 태그로 인식되기 때문에 사용할 수 없음

자바스크립트를 외부 파일에서 불러오려면 src 속성을 사용해야 함, src 속성 값에는 다음과 같이 자바스크립트 코드를 포함한 파일의 URL을 지정

<script type="text/javascript" src="example.js"></script>

외부 파일(.js)는 오직 자바스크립트 코드만 들어가며 <script>, </script> 태그를 쓰면 안됨

중요 : <script></script> 태그 사이에 스크립트 코드가 있고 src 속성도 사용했다면 스크립트 파일을 내려받아 실행하며 인라인 코드는 무시

src 속성으로 도메인 외부에 있는 스크립트도 사용할 수 있으나 직접 제어할 수 없기 때문에 직접 관리하는 도메인이나 신뢰할 수 있는 곳에서 관리하는 도메인의 파일만 이용해야 함

태그 위치

전통적으로 <script> 요소는 페이지의 <head> 요소 안에 쓰는 것이 일반적이었으나 페이지 렌더링 문제 때문에 최신 웹 애플리케이션에서는 일반적으로 <body> 요소 안에, 페이지 콘텐츠 마지막에 씀

스크립트 처리 지연 (defer)

defer 속성의 목적은 스크립트에서 페이지 구조를 바꾸지 않는다고 명시하는 것으로 페이지 전체를 파싱한 후에 스크립트를 실행해도 상관없다는 의미, 브라우저는 해당 요소를 만나는 즉시 코드를 내려받지만 실행은 지연

비동기 스크립트 (async)

defer 속성과 비슷하나 외부 스크립트에만 적용되며 브라우저에게 파일을 즉시 내려받으라고 지시함, async 속성과 defer 속성의 다른 점은 스크립트가 마크업 순서대로 실행된다는 보장이 없다는 점

XHTML에서 바뀐 점

< 기호를 태그의 시작으로 간주하기 때문에 < 기호 다음에 공백이 올 수 없음
1) < 기호를 &lt;로 바꾸거나, 2) CDATA 섹션으로 코드를 감싸서 해결

구식 문법

자바스크립트를 지원하지 않는 브라우저를 위해 스크립트 코드를 HTML 주석으로 감싸는 방법을 사용 (자바스크립트를 지원하는 브라우저는 패턴을 인식해서 정상적으로 파싱하여 동작)

<script><!--
fuction sayHi(){
alert("Hi!");
}
//--></script>

인라인 코드와 외부 파일

자바스크립트를 외부 파일로 분리했을 때 이점
– 관리하기 쉽다 (마크업과 무관하게 수정가능)
– 캐싱 (스크립트 파일을 한 번만 내려받음)
– 안전하다 (CDATA 섹션이나 주석 편법 필요없음)

문서 모드

쿽스 모드, 표준 모드, 거의 표준 모드로 구분

‘쿽스 모드’와 ‘표준 모드’의 주요 차이는 콘텐츠 렌더링과 관련이 있지만 자바스크립트에도 영향이 있음

‘표준 모드’와 ‘거의 표준 모드’의 주요 차이는 이미지 주변의 공백을 어떻게 처리하느냐인데 테이블에서 사용한 이미지에서 가장 잘 드러남

문서의 시작 부분에 독타입을 쓰지 않으면 쿽스 모드로 동작, 하지만 브라우저 사이의 일관성을 위해 표준 모드나 거의 표준 모드의 독타입 사용

<noscript> 태그

<noscript> 요소의 콘텐츠가 표시되는 상황은
– 브라우저가 스크립트를 지원하지 않거나
– 브라우저의 스크립트 지원이 꺼져 있을 때

요약

  • 자바스크립트는 <script> 요소를 통해 HTML에 삽입
  • 인라인 또는 외부 파일로 분리
  • defer 속성으로 실행을 미루거나 async 속성으로 비동기 가능
  • 자바스크립트를 지원하지 않을 경우를 대비해서 <noscript> 요소 사용