HTML 속의 자바스크립트
2014. 9. 23. 16:58 나홀로스터디/JS For Web Dev
이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
2.1 <'script> 요소 사용
2.2 인라인 스크립트와 외부 스크립트의 비교
2.3 문서 모드가 자바스크립트에 미치는 영향
2.4 자바스크립트가 비활성화된 상황에 대한 대비
2.1 <script> 요소 사용
<script>요소는 async, charset, defer, language, src, type 여섯가지 속성이 있다.
async와 defer속성은 외부 스크립트 파일을 불러올 때만 유효하고 charset와 language속성은 거의 사용하지 않는다. src속성은 외부 파일의 위치를 지정하고 type속성은 브라우저 호환성을 위해 "text/javascript"로 표기하나 기본값이므로 생략 가능하다.
<script> 요소는 두가지 방법으로 사용한다.
페이지에 직접 작성하는 인라인 자바스크립트 코드는 위에서부터 차례로 해석되며 스크립트 요소 내부의 코드 전체를 평가하기 전에는 페이지의 나머지 콘텐츠를 불러오지도 표시하지도 않는다.
인라인 스크립트를 파싱하는 방식때문에 "/"문자를 \로 이스케이프해서 해결한다.
자바스크립트를 외부에서 불러오려면 src속성을 사용하고 마찬가지로 외부파일 코드를 해석하는 동안은 페이지 처리가 멈춘다.
<script type="text/javascript" src="example.js"></script>
중요: <script>와 </script> 태그 사이에 스크립트 코드가 있고 src 속성도 사용했다면 브라우저는 스크립트 파일을 내려받아 실행하며 인라인 코드는 무시한다.
2.1.1 태그위치
외부파일을 한곳에서 관리하기 위한 목적으로 전통적으로 <script>요소는 페이지 <head> 요소 안에 쓰는것이 일반적이나 <body>를 만나기전 자바스크립트 코드를 내려받고 파싱하고, 해석이 끝날때까지 렌더링이 지연되는 것을 이유로 최신 웹 애플리케이션에서는 자바 스크립트 코드를 모두 <body> 요소 안에, 페이지 콘텐츠 마지막에 쓴다.
2.1.2 스크립트 처리 지연(defer 속성)
defer속성을 설정하면 브라우저는 즉시 코드를 내려받지만 실행은 지연한다. 하지만 현실에서는 defer 속성으로 지연시킨 스크립트가 항상 순서대로 실행되지 않고 html5를 지원하는 브라우저는 인라인 defer속성을 무시한다. 따라서 지연시킬 <script>요소는 하나만 쓰고 맨 마지막에 놓는것이 최선이다.
2.1.3 비동기 스크립트(async 속성)
스크립트를 내려받아 실행할 때까지 기다릴 필요없이 페이지 렌더링을 시작해도 좋다는 명시이므로 파일 사이에 의존성이 있으면 제대로 실행되지 않을수 있다. DOM을 조작하는 스크립트는 비동기적으로 불러오지 않는것이 좋다.
2.1.4 XHTML에서 바뀐 점
확장성 있는 하이퍼텍스트 마크업 언어 XHTML은 HTML에 XML을 적용한 것으로 HTML보다 엄격한 규칙으로 <script>요소의 콘텐츠를 파싱하는 규칙이 적용되지 않는다.
따라서 < 기호를 태그의 시작으로 간주하여 < 기호다음에는 공백문자가 올수 없으므로 발생하는 문법에러를 해결하기 위해서는 < 기호를 HTML 엔티티 <로 변경하거나 CDATA 섹션으로 자바스크립트 코드를 감싸는 방법이 있다.
XHTML 비호환 브라우저에서 CDATA 섹션을 지원하지 않는 문제를 해결하기 위해 CDATA 마크업앞에 주석기호 //를 사용한다.
2.2 인라인 스크립트와 외부 스크립트의 비교
- 외부파일 사용의 이점
2.3 문서 모드
인터넷 익스플로러 5.5는 '쿽스모드'와 '표준모드' 두 가지 문서모드를 도입했다. 두 모드 사이의 중요한 차이는 콘텐츠 렌더링으로 자바스크립트에도 영향이 있다. 이후 등장한 '거의 표준모드'는 표준모드의 대부분을 지원하나 엄격하지 않고 테이블에서 사용한 이미지 주변의 공백을 어떻게 처리하느냐의 차이가 크게 나타난다.
문서 시작에 독타입을 쓰지 않으면 모든 브라우저는 쿽스모드를 사용하고, '거의 표준'모드는 트랜지셔널이나 프레임셋 독타입에서 사용된다. 표준 모드와 '거의 표준'모드는 거의 유사하기 때문에 '표준 모드'는 쿽스모드를 제외한 둘이라고 생각해도 무관하다.
2.4 자바스크립트가 비활성화된 상황에 대한 대비(noscript 요소)
<noscript> 요소는 브라우저가 자바스크립트를 지원하지 않을때 대체 콘텐츠를 제공하기 위한 것으로 <script> 요소를 제외한 html 요소를 포함할수 있다.
브라우저가 스크립트를 지원하지 않거나 스크립트 지원이 꺼져있는 상황이 되면 <noscript> 요소의 내용이 렌더링 된다.
'나홀로스터디 > JS For Web Dev' 카테고리의 다른 글
| 참조타입 (0) | 2014.10.17 |
|---|---|
| 객체에 대한 이해 (0) | 2014.10.15 |
| 변수와 스코프, 메모리 (0) | 2014.10.07 |
| 언어의 기초 (0) | 2014.10.01 |
| 자바스크립트란 무엇인가 (0) | 2014.09.22 |
by 허클베리밋