script 요소
속성
- async 옵션 - 다운로드는 바로하지만 다른 작업을 참조하지 않습니다. 외부스크립트 파일 불러올 때에만 유효합니다.
- defer 옵션 - DOM이 완성될 때까지 스크립트 실행을 지연시켜도 된다고 알립니다. 외부스크립트 파일 불러올 때에만 유효합니다.(단, IE7은 예외적으로 인라인 스크립트도 허용합니다.)
- language 폐기됨
- charset 옵션 - src로 명시한 코드의 문자셋을 지정합니다. 브라우저는 대개 이 속성을 무시합니다.
- src 옵션 - 실행할 코드를 포함한 외부 파일의 위치 알려줍니다.
- type 옵션 - 스크립트 언어 콘텐츠 타입을 지정합니다. default값이 text/javascript여서 생략 가능합니다.
###Tips
function sayScript() {
alert("</script>"); // 에러발생 - 스크립트 닫는 태그는 쓸 수 없음 -> alert("<\/script>");
}- src속성을 사용하고 있으면 인라인 자바스크립트는 무시됩니다.
- 자바스크립트 파일은 꼭 js가 아니어도 상관 없습니다.
- 파일은 외부 도메인 참조 가능합니다. 하지만 악의적인 프로그래머가 존재할 수 있으니 신뢰할 수 있는 곳에서만 참조하는걸 추천합니다.
###스크립트 처리 지연 head안에 script 요소가 있으면 페이지 렌더링이 지연됩니다.
HTML 4.01에서는 defer 속성을 정의했습니다. defer 속성은 위에서 설명했습니다.
하지만 defer 속성을 쓴다고 항상 순서대로 시작되는 것을 보장하지 않으며, DOMContentLoaded 이벤트보다 먼저 실행된다는 보장도 없습니다.
HTML5에서는 async속성을 도입했습니다. 이 속성은 파일 사이에 의존성이 있으면 안되며 DOM을 조작하는 스크립트는 비동기적으로 불러오지 않는 편이 좋습니다.
비동기 스크립트는 페이지의 load 이벤트 전에는 반드시 실행되지만 DOMContentLoaded 이벤트의 순서는 보장할 수 없습니다.
따라서 지연시킬 스크립트는 페이지 맨 마지막에 놓는 편이 최상입니다.
###XHTML
HTML에 XML을 적용한 것입니다.
XHTML에서 인라인스크립트의 경우 ‘<’가 있으면 에러가 납니다. 그래서 이스케이프하거나 CDATA섹션으로 감쌉니다. 하지만 파일로 빼는 방법이 가장 좋습니다.
외부 파일의 장점
- 관리하기 쉽습니다.
- 캐싱하므로 다른 페이지에서 같은 파일 사용하면 한번만 받으면 됩니다.
- 주석편법등을 사용하지 않아도 되서 미래에 안전합니다.
문서모드
쿽스모드 - 비표준기능 사용가능 (default)
표준모드
거의 표준모드 - 표준모드 대부분은 지원하지만 표준모드만큼 엄격하지는 않음
<!-- HTML5 항상 붙여야함-->
<!DOCTYPE html>noscript 요소
브라우저가 스크립트를 지원하지 않거나 브라우저 스크립트 지원이 꺼져있으면 noscript요소가 렌더링 됩니다.
##참고자료
Nicholas C. Zakas. (2013). 프론트엔드 개발자를 위한 자바스크립트 프로그래밍, (한선용 옮김). 인사이트