<script>요소 속성
- 자바스크립트를 HTML 페이지에 삽입하는 일차적인 방법은 <script>요소를 통하는 것이다.
- <script>요소의 여섯 가지 속성
| 속성 | 설명 | 구분 |
| async | 스크립트를 즉시 내려받지만 자원을 내려받거나 스크립트를 불러오는 등 다른 페이지 작업을 방해해서는 안된다고 지시한다. 외부스크립트 파일을 불러올 때만 유효하다. | 옵션 |
| charset | src 속성으로 명시한 코드의 문자셋을 지정한다. 브라우저는 대개 이 속성의 값을 무시하므로 잘 쓰이지 않는다. | 옵션 |
| defer | 문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타낸다. 외부 스크립트 파일을 불러올 때만 유효하다. | 옵션 |
| language | 원래는 코드블록에서 사용한 스크립트 언어를 'Javascript'나 'Javascript1.2'처럼 나타낼 목적이었으나 이 속성을 대부분의 브라우저에서 무시하기 때문에 사용해서는 안된다. | 폐기됨 |
| src | 실행할 코드를 포함한 외부 파일의 위치를 지정한다. | 옵션 |
| type |
-language 속성을 대체할 의도로 만들어졌다. 스크립트 언어의 콘텐츠 타입(MIME타입)을 지정한다. - 속성의 값 중 'text/javascript'와 'text/ecmascript'는 구식임에도 불구하고 아직 이 속성에 'application/x-javascript' MIME 타입으로 전송되므로 type속성을 명시적으로 지정하면 스크립트가 무시될 가능성이 있다. - 이 속성을 생략해도 안전한데 속성을 생략했을 떄의 기본 값이 'text/javascript'이기 때문이다.
|
옵션 |
<sciprt> 요소 사용
- <script> 요소는 두 가지 방법으로 사용한다. 자바스크립트 코드를 페이지에 직접 작성할 수도 있고 외부파일에서 불러올 수도 있다.
1) 인라인 자바스크립트 코드
- <script> 요소 내부의 자바스크립트 코드는 위에서부터 차례로 해석된다.
- 먼저 함수 정의가 해석되어 인터프리터 환경 내부에 저장된다.
- <script> 요소 내부의 코드 전체를 평가하기 전에는 페이지의 나머지 콘텐츠를 불러오지도 않고 표시하지도 않는다.
- 인라인 자바스크립트 코드를 사용할 때는 문자열 "</script>"는 쓸 수 없다.
- 인라인 스크립트를 파싱하는 방식 때문에 브라우저는 문자열"</script>"를 닫는 태그 </script>로 인식한다. 이런 문제는 위 코드와 같이 "/"문자를 이스케이프해서 해결할 수 있다.
2) 외부 파일 자바스크립트 코드
- 자바스크립트를 외부 파일에서 불러오려면 src 속성을 사용해야 한다.
- 위 코드는 example.js란 이름의 외부 파일을 페이지로 불러온다.
- 이 파일에는 오직 자바스크립트 코드만 들어가며 <script>,</script> 태그를 쓰면 안된다.
- 인라인 자바스크립트 코드와 마찬가지로 외부 파일의 코드를 해석하는 동안에는 페이지 처리가 멈춘다.
코드를 가져온 방법과 관계 없이 <script> 요소는 페이지에 나타난 순서대로 실행되며 예외는 defer와 async속성이 있을 때 뿐이다.
- HTML 파일에 자바스크립트 직접 써도 되긴 하지만 일반적으로 가능한 한 자바스크립트는 외부 파일로 분리하는 방법을 모범 사례로 간주한다.
- 외부 파일 써서 얻는 이점
∙ 관리하기 쉽다 - 자바스크립트 코드를 다양한 HTML 페이지에 여기저기 뿌려 놓으면 코드 관리가 어려워진다. 자바스크립트 파일을 모두 디렉터리 하나에 모아 놓으면 마크업과 무관하게 자바스크립트 코드를 수정할 수 있으므로 훨씬 편리해진다.
∙ 캐싱 - 브라우저는 특정한 설정에 따라 외부에서 연결된 자바스크립트 파일을 모두 캐시하므로 서로 다른 페이지에서 같은 파일을 사용한다면 한 번만 내려받아도 된다. 따라서 페이지를 불러오는 시간이 짧아진다.
∙ 미래에도 안전하다. - 자바스크립트를 외부 파일에 저장하면 CDATA 섹션이나 주석 편법을 쓰지 않아도 된다. 외부 파일을 불러오는 문법은 HTML과 XHTML 모두 같다.
태그 위치
- 전통적으로 <script> 요소는 페이지의 <head> 요소 안에 쓰는 것이 일반적이었다.
- 이런 형식을 취한 주요 목적은 CSS 파일이나 자바스크립트 파일 같은 외부 파일에 대한 참조를 한곳에서 관리하자는 것이다. 하지만 자바스크립트 파일을 전부 <head> 요소에서 불러온다면 자바스크립트 코드를 전부 내려받고, 파싱하고, 해석을 끝낼 때까지 페이지 랜더링이 멈추게된다. 브라우저는 <body>태그를 만나면서 페이지 렌더링을 시작하기 때문이다. 자바스크립트 코드를 매우 많이 사용하는 페이지에서는 이렇게 <head> 요소에서 스크립트를 모두 불러오면 눈에 띌 정도로 페이지 렌더링이 지연되며 이 시간동안 브라우저에는 텅 빈 화면만 존재하게 된다. 이런 이유로 일반적으로 자바스크립트 코드를 모두 <body> 요소 안에, 페이지 콘텐츠 마지막에 쓴다.
스크립트 지연 처리
- defer 속성의 목적은 스크립트에서 페이지 구조를 바꾸지 않는다고 명시하는 것이다. 따라서 페이지 전체를 파싱한 후에 스크립트를 실행해도 상관없다.
- <script>요소에 defer 속성을 설정하면 브라우저는 해당 요소를 만나는 즉시 코드를 내려받지만 실행은 지연한다.
- <sciprt> 요소가 모두 문서 <head>에 있지만 브라우저 </html>태그를 만날 때 실행된다.
- HTML5 명세는 스크립트를 요소 순서대로 실행하도록 정의했으므로 첫 번째 스크립트는 두 번째 스크립트보다 먼저 실행되며 모두 DOMContentLoaded 이벤트보다 먼저 실행된다. 하지만 현실에서는 defer 속성으로 지연시킨 스크립트가 항상 순서대로 실행되지는 않으며 DOMContentLoaded 이벤트보다 먼저 실행된다는 보장도 없으므로 <script> 요소는 하나만 쓰는 것이 최선이다.
비동기 스크립트
- async 속성은 defer 속성과 비슷한 방법으로 스크립트를 처리한다.
- 외부 스크립트에만 적용되며 브라우저에게 파일을 즉시 내려받으라고 지시하는 점 역시 비슷하다.
- async 속성이 defer 속성과 다른 점은 스크립트가 마크업 순서대로 실행된다는 보장이 없다는 점이다.
- async 속성의 목적은 스크립트를 모두 내려받아 실행할 때까지 기다릴 필요 없이 페이지 렌더링을 시작해도 좋으며 앞선 스크립트 파일을 기다리지 않고 뒤에 있는 스크립트 파일을 내려받아 실행해도 좋다고 명시하는 것이다. 이런 이 유로 DOM을 조작하는 스크립트는 비동기적으로 불러오지 않는 편이 좋다.