JS Study — Ch02. HTML 속의 자바스크립트


HTML 에서 자바스크립트 사용하기

<script> 태그 속성
- async: 외부스크립트 파일을 불러올 때에만 유효
- charset: src로 명시한 코드의 문자셋. 브라우저에서 무시하므로 잘 사용되지 않음
- defer: 문서의 내용을 전부 파싱할때까지 스크립트 실행을 지연해도 되는지(스크립트에서 페이지 구조를 바꾸지 않는다는 의미)
- src: 실행할 코드가 담긴 외부 파일의 위치
- type: language 속성(현재는 쓰이지 않음)을 대체. 생략시 기본값은 “text/javascript”

inline javascript
- <script> 태그 내에 직접 작성
- “</script>”라는 문자열을 사용할 수 없음. 원한다면 이스케이프할것

outside javascript
- src를 이용해서 불러옴
- 해당 파일에는 js 코드만이 들어가야함
- inline과 마찬가지로 파싱중에는 페이지 처리가 멈춤
- inline code가 있는 경우, src의 외부 코드를 우선함. 다시말해 무시됨
- 다른 도메인의 js 파일도 불러올 수 있음(주의)
- 태그는 순차적으로 파싱됨(병렬처리X)

- 관리에 유리
- 캐싱을 할 수 있음
- inline code 처럼 파싱 처리를 위해 편법을 쓸 필요가 없음.

<script> 태그의 위치
- 전통적으로는 <head> 내에 위치
- 파싱중 페이지 렌더링 지연이 발생하므로, 최근에는 <body>의 맨 마지막에 위치시킴 -> js 가 무거워진 결과라고 보여짐

defer vs async
- defer: 마크업 순서를 보장O(단, 브라우저의 실제 구현은 이하략)
- async: 마크업 순서를 보장X

XHTML
- HTML에 XML을 적용한 방식
- 규칙이 엄격함.
- <,>를 태그로 처리하므로 유효하지 않음. -sol1: <를 &lt;로 변경하기 -sol2: ![CDATA[ code ]] 를 이용하기.

문서 모드
- 쿽스 모드
비표준을 사용하므로 가급적 사용하지 않을것

- 표준모드
Strict가 붙는 형식들. html5는 표준모드만 존재.

- Near 표준 모드
Transitional, Frameset. 이미지 주변 공백처리가 표준모드와 조금 다름.

<noscript>
- 브라우저가 스크립트를 지원하지 않음
- 또는 스크립트가 비활성화되어있을 경우
하나라도 충족되면 noscript 내부의 내용이 렌더링됨.

“<<프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김)에서 요약한 글입니다.”

Show your support

Clapping shows how much you appreciated Shia’s story.