<script type="text/javascript">
alert(1);
</script>자바스크립트를 문서에 포함할 때는 <script>를 사용합니다. 웹 브라우저는 여는 <script>와 닫는 </script> 사이에 작성된 코드를 자바스크립트 엔진으로 전달하고, 엔진은 자바스크립트 코드를 해석하고 실행합니다.
type 속성
HTML5 이전에는 <script>요소에는 type 속성은 반드시 필요했습니다. HTML5 부터는 type 속성을 생략할 수 있으며 생략하면 text/javascript가 기본값으로 사용됩니다. 그러나 HTML5는 여전히 초안 상태이므로 아직까지는 type 속성을 반드시 사용해야 합니다.
예전에는 language 속성을 사용하기도 했으나 HTML4부터 폐지 예정(deprecated)이 되었으므로 가급적 사용하지 않는 것이 좋습니다.
주석
간혹 다음과 같이 주석을 포함하여 코드를 작성하는 경우도 있습니다.
<script type="text/javascript">
<!--
alert(1);
//-->
</script>자바스크립트가 처음 등장하던 때는 <script> 요소가 표준이 아니었기 때문에 일부 브라우저는 <script> 요소를 인식하지 못하고 화면에 스크립트 코드를 그대로 출력해버리기도 했습니다. 그래서, 이런 문제를 방지하기 위해 주석을 포함했던 것입니다. 그러나 최신 브라우저는 설령 자바스크립트를 실행하지 못하는 브라우저라 해도 <script> 요소를 인식하므로 스크립트 코드가 그대로 화면에 출력되는 일은 없습니다. 따라서, 현재는 불필요한 사용법입니다.
그러나 시간이 흐르면서 주석에는 새로운 용도가 생겼습니다. 다음 HTML 문서를 W3C에서 제공하는 유효성 검사기에 직접 입력해보면 에러가 발생하는 것을 알 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Example 1</title>
</head>
<body>
<script type="text/javascript">
var v = 10;
if (v < 15) alert(1);
</script>
</body>
</html>HTML에서 <,와 > 는 요소를 표현하는 특수 문자입니다. 따라서 요소를 표현할 용도가 아니라면 <와 >는 각각 <와 >로 표현해야 합니다. XHTML에서는 <script> 요소로 감싸는 자바스크립트 코드도 마찬가지 규칙을 따르기 때문에 if (v < 15)는 if (v < 15)로 표현해야 합니다. 그러나 모든 코드를 엔티티로 변환하려면 작성하기도 귀찮고 가독성도 나빠지기 때문에 엔티티로 변환하는 대신 문제를 우회하는 방법을 많이 사용합니다. 그 중 하나가 바로 앞에서 말한 바와 같이 스크립트 코드를 주석으로 감싸는 것입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Example 1</title>
</head>
<body>
<script type="text/javascript"><!--
var v = 10;
if (v < 15) alert(1);
//-->
</script>
</body>
</html>CDATA
W3C에서 제공하는 유효성 검사기에 위 문서를 입력하면 에러가 해결되었을 것입니다. 주석으로 표현하는 대신 XML 문서에서 텍스트 데이터를 표현하는 CDATA 섹션을 사용할 수도 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Example 1</title>
</head>
<body>
<script type="text/javascript"><![CDATA[
var v = 10;
if (v < 15) alert(1);
]]>
</script>
</body>
</html>오늘의 과제
type 속성을 제외하고 유효성 검사를 해봅시다.