<script>요소

자바스크립트를 HTML페이지에 삽입하는 일차적인 방법은<script>요소를 통하는 것이다. <script> 요소에는 여섯 가지 속성이 있다.

  • anync – 옵션.스크립트를 즉시 내려받지만 자원을 내려받거나 다른 스크립트를 불러오는 등 다른 페이지 작업을 방해해서는 안된다고 지시.외부 스크립트 파일을 불러올 때만 유효하다.
  • charset – 옵션.src속성으로 명시한 코드의 문자셋을 지정한다.
  • defer – 옵션.문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타낸다.인터넷 익스플로러 7과 이전 버전에서는 인라인 스크립트에서도 이 속성을 허용한다.
  • language – 폐기됨.
  • src – 옵션실행할 코드를 포함한 외부 파일의 위치를 지정한다.
  • type – 옵션language 속성을 대체할 의도로 만들어졌다. 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정한다. 속성의 값 중 “text/javascript” 와 “text/ecmascript”는 구식임에도 불구하고 아직 이 속성에 “text/javascript”를 명시하는 사례가 많다고 한다.type 속성은 아직 습관적으로, 또는 브라우저 호환성을 위해 “text/javascript”라 표기하곤 합니다. 사실 이 속성은 생략해도 안전하다. 속성을 생략했을 때의 기본 값이 “text/javascript”이기 때문이다.

<script> 요소는 두 가지 방법으로 사용한다. 자바스크립트 코드를 페이지에 직접 작성할 수도 있고 외부 파일에 불러올 수 있다. – 인라인 자바스크립트 코드

<scrip type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>

<script> 요소 내부의 자바스크립트 코드는 위에서부터 차례로 해석된다. 인라인 자바스크립트 코드를 사용할 때는 문자열 “</script>”는 쓸 수 없다. 예를 들어:

<script type="text/javascript">
function sayScript(){
alert("</script>");
}
</script>

인라인 스크립트를 파싱하는 방식 때문에 브라우저는 문자열 “</script>”를 닫는 태그 </script>로 인식한다. 이런 문제는 “/” 문자를 이스케이프해서 쉽게 해결이 가능하다.

<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>

이렇게 하면 브라우저에서 코드를 올바르게 인식하며 에러가 나지 않는다. 자바스크립트를 외부 파일에서 불러오려면 src 속성을 사용해야 한다. <script type=”text/javascript” src=”example.js”></script> XHTML문서에서는 닫는 태그를 생략할 수 있다. <script type=”text/javascript” src=”example.js” />

태그 위치

전통적으로 <script> 요소는 같은 페이지의 <head> 요소 안에 쓰는 것이 일반적이다. 그러나 자바스크립트 파일을 전부 <head> 요소에서 불러온다면 자바스크립트 코드를 전부 내려받고, 파싱하고, 해석을 끝낼 때까지 페이지 렌더링이 멈추게 된다. 브라우저는 <body> 태그를 만나면서 페이지 렌더링을 시작하기 때문이다. 자바스크립트 코드를 매우 많이 사용하는 페이지에서는 이렇게 <head> 요소에서 스크립트를 모두 불러오면 눈에 띌 정도로 페이지 렌더링이 지연되며 이 시간 동안 브라우저에서는 텅 빈 화면만 보일 수 있다. 이런 이유로 인해 아래와 같이 자바스크립트 코드를 모두 <bodyt> 요소 안에, 페이지 콘텐츠 마지막에 쓸 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>Example HTML Page</title>
</head>
<body>
	<!-- 페이지 콘텐츠 -->
	<script type="text/javascript" src="example1.js"></script>
	<script type="text/javascript" src="example2.js"></script>
</body>
</html>

이렇게 하면 브라우저는 페이지 랜더링을 모두 마친 다음 자바스크립트 코드를 처리 한다.브라우저에 빈 화면만 떠 있던 시간이 줄었으므로 사용자는 페이지가 빠르다고 느낄 수 있다.

스크립트 처리 지연

defer 속성을 설정하면 브라우저는 해당 요소를 만나는 즉시 코드를 내려받지만 실행은 지연시킨다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>Example HTML Page</title>
	<script type="text/javascript" defer src="example1.js"></script>
	<script type="text/javascript" defer src="example2.js"></script>
</head>
<body>
	<!-- 페이지 콘텐츠 -->
</body>
</html>

defer 속성은 외부 스크립트 파일을 불러올 때만 유효하다. 이 내용은 HTML5에서 명세화 된것이므로 HTML5를 지원하는 브라우저는 모두 인라인 스크립트도 지연 실행하며 인터넷 익스플로러 4와 7은 이전 방법을 고수해서 인라인 스크립트도 지연 실행하며 인터넷 익스플로러 8 이후부터는 HTML5 명세에서 정한 방법을 따른다. XHTML 문서에서는 defer 속성을 defer=”defer” 형식으로 써야 한다.

비동기 스크립트

HTML5에서는 <script>요소에 async속성을 도입했다. asyc속성은 defer속성과 비슷한 방법으로 스크립트를 처리한다. 외부스크립트에만 적용되며 브라우저에게 파일을 즉시 내려받으라고 지시하는 점 역시 비슷하다. async 속성이 defer 속성과 다른 점은 스크립트가 마크업 순서대로 실행된다는 보장이 없다는 점이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example HTML Page</title>
    <script type="text/javascript" defer src="example1.js"></script>
    <script type="text/javascript" defer src="example2.js"></script>
</head>
<body>

</body>
</html>

이 코드에서는 두 번째 스크립트 파일이 첫 번째 스크립트 파일보다 먼저 실행 될 수도 있으므로 파일 사이에 의존성이 있어서는 안된다. async 속성의 목적은 스크립트를 모두 내려받아 실행할 때까지 기다릴 필요 없이 페이지 렌더링을 시작 해도 좋으며 앞선 스크립트 파일을 기다리지 않고 뒤에 있는 스크립트 파일을 내려받아 실행해도 좋다고 명시하는 것이다. 이런 이유로 DOM을 조작하는 스크립튼 비동기적(async)으로 불러오지 않는편이 좋다. XHTML 문서에서는 async 속성을 async=”async” 형식으로 써야한다.

XHTML에서 바뀐점

XHTML은 HTML에 XML을 적용한 것이다. XHTML 코드 규칙은 HTML보다 엄격하며 이는 <script>요소에 인라인 자바스립트 코드를 쓸 때도 적용된다. 다음 코드 블록은 HTML에서는 유효하지만 XTHML에서는 잘못된 것으로 간주한다.

<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 엔티티 &lt;로 바꾸는 방법이다. 두번째 방법은 자바스크립트 코드를 CDATA 섹션으로 감싸는 거다. XHTML과 XML에서 CDATA 섹션은 해당 콘텐츠가 있는 그대로의 텍스트이며 파싱하면 안된다고 명시하는 기능이 있다. 따라서, 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 마크업 앞에 자바스크립트 주석 기호를 사용해야한다. 위 코드를 보면 된다. 페이지의 마임 타입을 “application/xhtml+xhtml”로 설정하면 HTML 모드로 페이지를 처리하게 된다. 하지만 모든 브라우저에서는 이런 마임 타입을 전송된 XHTML을 제대로 지원하는 것은 아니다.

인라인 코드와 외부파일

  • 관리하기 쉽다 – 자바스크립트 코드를 다양한 HTML 페이지에 여기저기 뿌려 놓으면 코드 관리가 어려워진다. 자바스크립트 파일을 모두 디렉터리 하나에 모아 놓으면 마크업과 무관하게 자바스크립트 코드를 수정할 수 있으므로 훨씬 편리하다.
  • 캐싱 – 브라우저는 특정한 설정에 따라 외부에서 연결된 자바스크립트 파일을 모두 캐시하므로 서로 다른 페이지에서 같은 파일을 사용한다면 한 번만 내려 받아도 된다. 따라서 불러오는 시간이 짧아진다.
  • 미래에도 안전하다 – 자바스크립트를 외부 파일에 저장하면 앞서 언급한 CDATA 섹션이나 주석 편버을 쓰지 않아도 된다.

<noscript>

<noscirpt>요소는 브라우저가 자바스크립트를 지원하지 않을 때 대체 콘텐츠를 제공하기 위해 만들어졌다.
<noscript> 요소는 <script>요소를 제외한 모든 HTML 요소를 포함할 수 있다. <noscript>요소의 콘텐츠는 오직 다음 두 상황에서만 표시된다.

  • 브라우저가 스크립트를 지원하지 않거나
  • 브라우저의 스크립트 지원이 꺼져 있을 때

두 가지 조건 중 하나를 만족하면
<noscript> 요소의 내용이 렌더링 된다. 이를 제외하면 브라우저는
<noscript>요소의 콘텐츠를 표시하지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Example HTML Page</title>
	<script type="text/javascript" defer="defer" src="example1.js"></script>
	<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
	<noscript>
		<p>This page requires a JavaScript - enabled browser.</p>	
	</noscript>
</body>
</html>

스크립트를 사용할 수 없을 때에만 사용자에게 메시지가 표시된다. 스크립트가 활성화된 브라우저에서는 메시지가 페이지의 일부이긴 하지만 사용자에게는 절대 표시되지 않는다.