-
[JavaScript] 02. HTML 속의 자바스크립트프로그래밍/JavaScript 2014. 3. 22. 14:53반응형
< 프론트엔드 개발자를 위한 자바스크립트>>(2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.
2.1 <script> 요소
- 자바스크립트를 HTML 페이지에 삽입하는 일차적인 방법은 <script> 요소를 사용하여 적용하고 <script> 요소에는 여섯가지 속성이 존재한다.
* async : 옵션, 스크립트를 즉시 내려받지만 자원을 내려받거나 다른 스크립트를 불러오는등의 다른 페이지 작업을 방해해서는 안된다고 지시, 외부 스크립트 파일을 불러올 때만 유효
* charset : 옵션, src 속성으로 명시한 코드의 문자셋 지장 (잘 안쓰임)
* defer : 옵션, 문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트를 지연해도 안전함을 나타냄, 외부 스크립트를 불러올 때만 유효. (IE7과 이전버전에서는 인라인 스크립트에서도 허용)
* language : 폐기됨, 대부분 브라우저에서 이 속성을 무시하므로 사용하면 안됨.
* src : 옵션, 실행할 코드를 포함한 외부 파일의 위치를 지정
* type : 옵션, language 속성을 대체할 의도로 만들어짐, 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정 ("text/javascript" 은 구식이지만 기본값이기도 하고 호환성을 위해 많이 표기한다. IE를 제외한 브라우저에서는 "application/javascript"와 "application/ecmascript"도 인식한다.)
- <script> 요소는 두가지 방법으로 사용하는데 자바스크립트 코드를 페이지에 직접 작성 할수 있고 외부 파일에서 불러올 수도 있다.
- <script> 코드 </script> 와 같이 요소 안에 직접 작성한 자바스크립트 코드를 인라인 자바스크립트 코드라 부른다.
- <script> 요소 내부의 자바스크립트 코드는 위에서부터 차례로 해석된다.
- 인라인 스크립트를 파싱하는 방식 때문에 브라우저는 문자열 "</script>"를 사용할수 없다.
- 자바스크립트를 외부 파일에서 불러오려면 src 속성을 이용해야하는데 src의 속성 값에는 다음 코드와 같은 파일의 URL을 지정합니다.
- 이 예제는 example.js 란 이름의 외부 파일을 페이지로 불러옵니다. 이 파일에는 오직 자바스크립트 코드만 들어가며 <sciprt, </script> 태그를 사용하면 안된다.
- 인라인 자바스크립트 코드와 마찬가지로 외부 파일의 코드를 해석하는 동안에는 페이지 처리가 멈춘다.
* 중요 : <script> 와 </script> 태그 사이에 스크립트 코드가 있고 src 속성도 사용했다면 브라우저는 스크립트 파일을 내려받아 실행하며 인라인 코드는 무시한다.
- <script> 요소에서 가장 강력하면서도 논란이 끊이지 않는 부분은 다른 도메인에 있는 자바스크립트 파일을 불러오는 능력이다. </img> 요소와 마찬가지로 <script> 요소의 src속성에는 페이지가 존재하는 도메인 외부를 가리키는 완전한 URL을 쓸 수 있다. 그러므로 외부 도메인의 코드를 마치 페이지의 일부였던것 처럼 불러와서 해석한다.
- 다른 도메인에서 자바스크립트 파일을 가져올때에는 직접 관리하는 도메인이나 신뢰할 수 있는 곳에서 관리하는 도메인의 파일만 이용해야한다. (안정성)
2.1.1 태그 위치
- 전통적으로 <script> 요소는 <head> 요소 안에 쓰는것이 일반적이지만 최신 웹 애플리케이션에서는 일반적으로 자바스크립트 코드를 모두 <body> 요소 안에, 페이지 콘텐츠 마지막에 쓴다. (이유 : 자바스크립트 코드를 매우 많이 사용하는 페이지에서는 <head>요소에서 스크립트를 모두 불러오면 눈에 띌 정도로 페이지 렌더링이 지연되기 되므로 이 시간 동안 브라우저에는 텅 빈 화면만 존재하므로)
2.1.2 스크립트 처리 지연
- <script> 요소에서 defer라는 속성을 정의하였는데 defer 속성의 목적은 스크립트에서 페이지의 구조를 바꾸지 않는다고 명시하는것. (따라서 페이지 전체를 파싱한 후에 스크립트를 실행하도 상관없다.)
- HTML5 명세에서 스크립트를 요소 순서대로 실행하도록 정의했으므로 첫 번째 스크립트는 두번 째 스크립트보다 먼저 실행 되며 둘 모두 DOMContentLoaded 이벤트보다 먼저 실행된다. 하지만 실제로는 defer 속성으로 지연시킨 스크립트가 항상 순서대로 실행되지 않으며 DOMContentLoaded 이벤트보다 먼저 실행된다는 보장도 없으므로 가능하다면 <script> 요소는 하나만 쓰는것이 최선이다.
- defer 속성은 외부 스크립트 파일을 불러올 때만 유효하다. 이 내용은 HTML5에서 명세화 한 것이므로 HTML5를 지원하는 브라우저는 모두 인라인 스크립트의 defer 속성을 무시한다.
- 지연시킬 스크립트는 페이지 맨 마지막에 놓는 편이 여전히 최상.
2.1.3 비동기 스크립트
- HTML5에서는 <script> 요소에 async 속성을 도입하였는데 async 속성이 defer 속성를 비교하면 브라우저에게 파일을 즉시 내려받으라고 지시하는점에서 비슷하지만 마크업 순서대로 실행된다는 보장이 없으므로 DOM을 조작하는 스크립트는 비동기적(async)으로 불러오지 않는 편이 좋다.
2.1.4 XHTML에서 바뀐점
- XHTML은 HTML에 XML을 적용하여 확장성 있게 만든것이다. XHTML 코드 규칙은 HTML보다 엄격하며 이는 <script> 요소에 인라인 스크립트 코드를 쓸 때에도 적용.
- HTML에는 <script> 요소의 콘텐츠를 파싱하는 특별한 규칙이 있지만 XHTMl에는 해당 규칙이 적용되지 않는다. XHTML에서는 a<b에 있는 <기호를 태그의 시작으로 간주하는데 이로 인해 문법 에러가 발생한다. (해결방법에는 두가지가 있는데 < 기호를 < 로 바꾸는 방법과 아래 코드를 이용하는 방법이 있다.
- 형식은 최신 브라우저 전체에서 모두 작동한다. 유효한 XHTML 마크업으로 인정되며 XHTML을 지원하지 않는 브라우저에서 아무 문제를 일으키지 않는다.
2.1.5 구식 문법
- 자바스크립트를 지원하지 않는 브라우저에서는 스크립트 코드를 HTML 주석으로 감싸 <script> 요소의 콘텐츠를 페이지에 출력하지 않게 만들수 있다. (하지만 모든 웹 브라우저가 아직 이 형식을 정확히 인식하며 자바스크립트를 제대로 해석하긴 하지만 더 이상 필요 하지 않으므로 사용하면 안된다.)
- XHTML 모드에서는 <!-- // --> 패턴도 유효한 XML 주석이므로 스크립트를 무시
2.2 인라인 코드와 외부 파일
- 가능한 자바스크립트는 외부 파일로 분리하는 방법을 모범 사례로 간주
* 이유
1. 관리하기 쉽다 - 한 디텍터리에 넣어 모아두면 관리가 쉽다.
2. 캐싱 - 페이지를 불러오는 시간이 짧아진다.
3. 안전하다 - 자바스크립트를 외부에 저장하면 CDATA섹션이나 주석 편법을 사용하지 않아도 된다.
2.3 문서 모드
- 문서 시작에 DOCTYPE 비선언시 쿽스 모드로 동작하는데 브라우저의 사이의 일관성을 위해 DOCTYPE을 사용하는것이 좋다.
2.4 <noscript> 요소
* <noscript>요소의 컨텐츠는 다음 두 상황에서만 표시
1. 브라우저가 스크립트의 지원하지 않거나
2. 브라우저의 스크립트 지원이 꺼져있을때
2.5 요약
- 자바스크립트는 <script> 요소를 통해 HTML에 삽입
- 모든 <script> 요소는 나타내는 순서대로 해석
- 인라인과 외부 스크립트로 분리 가능
- <noscript> 요소 사용시 자바스크립트를 비지원하는 브라우저에 대비 가능
반응형'프로그래밍 > JavaScript' 카테고리의 다른 글
[JavaScript] 06-1. 객체 지향 프로그래밍 - 객체에 대한 이해 (0) 2014.04.09 [JavaScript] 04. 변수와 스코프, 메모리 (0) 2014.04.03 [JavaScript] 03. 언어의 기초 (0) 2014.03.24 [JavaScript] 01. 자바스크립트란 무엇인가? (0) 2014.03.21 [JavaScript] 00. 개요 (0) 2014.03.21
