개발 공부/JavaScript
JavaScript (3) - HTML속의 자바스크립트
듬뿍듬뿍
2018. 7. 18. 17:38
이 포스팅은 “프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)”에서 발췌 요약했습니다.
=========================================================================
이 장에서 다루는 내용
- <script> 요소 사용
- 인라인 스크립트와 외부 스크립트의 비교
- 문서 모드가 자바스크립트에 미치는 영향
- 자바스크립트가 비활성화된 상황에 대한 대비
자바스크립트가 HTML 페이지 렌더링을 방해하지 않으면서 공존할 방법을 모색한 결과,
웹에서의 스크립트 지원을 통일하는 몇 가지 최종 결정이 내려졌습니다.
1. <script>요소
- 자바스크립트를 HTML 페이지에 삽입하는 일차적 방법은 <script> 요소를 통하는 것입니다.
- 넷스케이프에서 이 요소를 만들고 구현하였습니다.
- <script>요소와 이후 공식 HTM 명세에 추가되었습니다.
- <script>요소에는 여섯가지 속성이 있습니다.
- async - 옵션. 스크립트를 즉시 내려받지만 자원을 내려받거나 다른 스크립트를 불러오는 등 다른 페이지 작업을 방해해서는 안된다고 지시합니다. 외부 스크립트 파일을 불러올 때만 유효합니다.
- charset - 옵션. src 속성으로 명시한 코드의 문자셋을 지정합니다. 브라우저는 대개 이 속성의 값을 무시하므로 좀처럼 쓰이지 않습니다.
- defer - 옵션. 문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타냅니다. 외부 스크립트 파일을 불러올 때만 유효합니다 인터넷 익스플로러 7과 이전 버전에서는 인라인 스크립트에서도 이 속성을 허용합니다.
- language - 폐기됨. 스크립트 언어의 종류를 나타내는 목적, 브라우저에서 무시하기 때문에 써서는 안됩니다.
- src - 옵션. 실행할 코드를 포함한 외부 파일의 위치를 지정합니다.
- type - 옵션. language 속성을 대체할 의도로 만들어졌습니다. 스크립트 언어의 콘텐츠 타입(마입 타입)을 지정합니다. 속성의 값 중 "text/javascript"와 "text/ecmascript"는 구식임에도 불구하고 아직 이 속성에 "text/javascript"를 명시하는 사례가 많습니다.
- 자바스크립트 파일은 일반적으로 "application/x-javascript"마임 타입으로 전송되므로 type 속성을 명시적으로 지정하면 스크립트가 무시될 가능성도 있습니다.
- type 속성은 습관적으로, 또는 호환성을 위해 "text/javascript"라고 표기합니다. HTML5에서 이 속성은 생략해도 안전한데 생략했을 때의 기본 값이 "text/javascript"이기 때문입니다.
- <script>요소는 두 가지 방법으로 사용합니다. 자바스크립트 코드를 페이지에 직접 작성할 수도 있고, 외부 파일에서 불러올 수도 있습니다.
- <script>요소 안에 직접 작성한 자바스크립트 코드를 '인라인 자바 스크립트 코드'라고 부릅니다.
<script type="text/javascript">
function sayHello(){
alert("Hello world!");
}
</script>
- <script>요소 내부의 자바스크립트 코드는 위에서부터 차례대로 해석됩니다.
- <script>요소 내부의 코드 전체를 검증받기 전에는 페이지의 나머지 콘텐츠를 불러오지도 않고 표시하지도 않습니다.
- 자바스크립트를 외부 파일에서 불러오려면 src속성을 사용해야 합니다. src 속성의 값에는 다음과 같이 코드를 포함한 URL을 지정합니다.
<script type="text/javascript" src="example.js></script>
- 이 예제는 example.js란 이름의 외부 파일을 페이지로 불러옵니다.
- 이 파일엔 오직 자바스크립트 코드만 들어가며 <script>, </script> 태그를 쓰면 안됩니다.
- 인라인 자바스크립트 코드와 마찬가지로 외부 파일의 코드를 해석하는 동안에는 페이지 처리가 멈춥니다.
- XHTML문서에서는 다음과 같이 닫는 태그를 생략할 수 있습니다.
<script type="text/javascript" src="example.js />
- HTML 문서에서는 이 문법을 허용하지 않고 일부 브라우저, 특히 인터넷 익스플로러에서는 제대로 처리되지 않으므로 이 문법을 써서는 안됩니다.
- 태그 위치
- 전통적으로 스크립트 태그 위치는 <head>요소 안에 쓰는것이 일반적이었습니다.
- 그 목적은 CSS나 자바스크립트 파일 같은 외부 파일에 대한 참조를 한 곳에서 관리하자는 것이었습니다.
- 하지만 자바스크립트 파일을 전부 <head>요소에서 불러온다면 자바스크립트 코드를 전부 내려받고, 파싱하고, 해석을 끝날 때까지 페이지 렌더링이 멈추게 됩니다.
- 브라우저는 <body> 태그를 만나면서 페이지 렌더링을 시작하기 때문입니다.
- 자바스크립트를 많이 사용하는 페이지에서 이렇게 <head> 요소에서 스크립트를 모두 불러오면 눈에 띌 정도 페이지 렌더링이 지연되고, 이 시간동안 브라우저는 텅 빈 화면만 존재합니다.
- 이런 이유로 최근 웹 애플리케이션에서는 일반적으로 자바 스크립트 코드를 모두<body>요소 안에, 페이지 콘텐츠 마지막에 씁니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<!-- 페이지 콘텐츠 -->
<script type="text/javascript" src="example1.js"></script>
2. XHTML에서 바뀐 점
- Extensible HyperText Markup Language의 약자로, HTML에 XML을 적용한 것입니다.
- XHTML 코드 규칙은 HTML보다 엄격하며 이는 <script>요소에 인라인 자바스크립트 코드를 쓸 때도 적용됩니다.
- 다음 코드 블록은 HTML에서는 유효하지만 XHTML에서는 잘못된 것으로 간주합니다.
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
alert("A is less than B");
} else if ( a > b ) {
alert("A is greater than B");
} else {
alert("A is equal to B");
}
}
</script>
- HTML에는 <script> 요소의 컨텐츠를 파싱하는 특별한 규칙이 있지만 XHTML에는 해당 규칙이 적용되지 않습니다
- XHTML에서는 a < b에 있는 < 기호를 태그의 시작으로 간주하기 때문에 문법 에러가 발생합니다.
- XHTML 문법 에러는 두 가지 방법으로 수정할 수 있습니다.
- 첫 번째 방법은 < 기호를 모두 HTML 엔티티 <로 바꾸는 방법입니다.
- 이 코드는 XHTML, HTML에서 잘 실행되지만 코드 가독성이 나쁩니다.
- 두 번째 방법은 자바스크립트 코드를 CDATA 섹션으로 감싸는 것입니다.
- XHTML과 XML에서 CDATA 섹션은 해당 콘텐츠가 있는 그대로의 텍스트이며 파싱하면 안된다고 명시하는 기능이 있습니다.
- CDATA 섹션은 다음과 같은 형식으로 씁니다.
<script type="text/javascript">
<!CDATA[
function compare(a, b) {
if (a < b) {
alert("A is less than B");
} else if ( a > b ) {
alert("A is greater than B");
} else {
alert("A is equal to B");
}
}
]]>
</script>
- XHTML 호환 웹 브라우저에서는 이 방법으로 문제가 해결됩니다.
- 하지만 XHTML 비호환 브라우저가 있다면 CDATA 섹션을 지원하지 않습니다.
- 이 문제를 해결하려면 다음과 같이 CDATA 마크업 앞에 자바스크립트 주석 기호를 써야합니다.
<script type="text/javascript">
//<!CDATA[
function compare(a, b) {
if (a < b) {
alert("A is less than B");
} else if ( a > b ) {
alert("A is greater than B");
} else {
alert("A is equal to B");
}
}
//]]>
</script>
- 이 형식은 최신 브라우저 전체에서 모두 잘 동작합니다.
- 약간 편법이긴 하지만 이 코드는 유효한 XHTML 마크업으로 인정되며 XHTML을 지원하지 않는 브라우저에서 아무 문제도 일으키지 않습니다.
3. 인라인 코드와 외부 파일
- HTML 파일에 자바스크립트를 직접 쓰기보다는 일반적으로 가능한 한 자바스크립트는 외부 파일로 분리하는 방법을 모범 사례로 간주합니다.
- 외부 파일을 쓰면 다음과 같은 이점이 있습니다.
- 관리하기 쉽습니다.
- 캐싱 : 브라우저는 특정한 설정에 따라 외부에서 연결된 자바스크립트 파일을 모두 캐시하므로 서로 다른 페이지에서 같은 파일을 사용한다면 한 번만 내려받아도 됩니다.
- 미래에도 안전합니다 : 자바스크립트를 외부 파일에 저장하면 앞에 언급한 CDATA 섹션이나 주석 편법을 쓰지 않아도 됩니다. 외부 파일을 불러오는 문법은 HTML XHTML 모두 똑같습니다.
4. <noscript>요소
- <noscript>요소는 브라우저가 자바스크립트를 지원하지 않을 때 대체 콘텐츠를 제공하기 위하여 만들어졌습니다.
- <noscript>요소는 <script>요소를 제외한 모든 HTML 요소를 포함할 수 있습니다.
- <noscript>요소의 콘텐츠는 오직 다음 두 상황에서만 표시됩니다.
- 브라우저가 스크립트를 지원하지 않거나
- 브라우저의 설정에 의하여 스크립트 지원이 꺼져 있을 때
- 두 가지 조건중 하나를 만족하면 <noscript> 요소의 내용이 렌더링됩니다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목입니다.</title>
<script type="text/javascript" defer src="example1.js"></script>
<script type="text/javascript" defer src="example1.js"></script>
</head>
<body>
<noscript>
<p>해당 브라우저는 자바스크립트를 지원하지 않습니다. 자바스크립트 설정을 켜주세요.</p>
</noscript>
</body>
</html>
5. 요약
자바스크립트는 <script>요소를 통해 HTML 페이지에 삽입됩니다.
자바스크립트는 HTML 페이지 안에 인라인으로 쓸 수도 있고, 외부 파일로 분리할 수도 있습니다.
- 외부 자바스크립트 파일을 불러오려면 src 속성에 파일의 위치를 나타내는 URL을 씁니다.
- 외부 파일은 페이지와 같은 서버에 있어도 되고 완전 다른 도메인에 있어도 됩니다.
- 모든 <script>요소는 페이지에 나타나는 순서대로 해석됩니다.
- defer 속성이나 async 속성을 사용하지 않았다면 <script> 요소의 코드를 완전히 해석한 이후에만
- 그 다음 <script> 요소의 코드를 해석하고 처리할 수 있습니다.
- 브라우저는 지연되지 않은 <script> 요소의 코드를 완전히 해석한 이후에만 페이지 렌더링을 계속할 수 있습니다.
- 이 때문에 <script>요소는 보통 페이지의 주요 콘텐츠 다음, </body> 태그 바로 앞에 놓습니다.
- defer 속성을 써서 스크립트의 실행을 문서 렌더링 이후로 미룰 수 있습니다.
- async 속성(비동기 스크립트)을 쓰면 해당 스크립트가 해석될 때까지 다른 스크립트나 문서 렌더링을 차단하지 않아도 된다고 명시할 수 있습니다.
- 비동기 스크립트는 마크업 순서대로 실행된다는 보장은 없습니다.
=========================================================================