HTML에서 <script> 태그의 올바른 위치
JavaScript 코드는 HTML 문서에서 <script>와 </script> 태그 사이에 작성해야 합니다. JavaScript 코드를 담고 있는 <script> 태그는 웹 페이지 내 어디에든 배치할 수 있지만, 일반적으로는 <head> 태그 안에 두는 것이 권장됩니다.
<script> 태그는 브라우저에게 해당 태그 사이의 모든 텍스트를 스크립트로 해석하기 시작하라고 지시하는 역할을 합니다.
script 태그의 주요 속성
<script> 태그에는 두 가지 중요한 속성이 있습니다.
- language — 사용 중인 스크립팅 언어를 지정합니다. 일반적으로 값은 javascript입니다. 다만 최신 버전의 HTML(및 후속 표준인 XHTML)에서는 이 속성이 단계적으로 폐기되었습니다.
- type — 현재 권장되는 속성으로, 사용 중인 스크립팅 언어를 나타내며 값을 text/javascript로 설정해야 합니다.
Hello World 출력 예제
간단한 예제를 통해 "Hello World"를 출력해 보겠습니다. 이 예제에서는 JavaScript 코드를 감싸는 선택적 HTML 주석을 추가했습니다. 이는 JavaScript를 지원하지 않는 구형 브라우저에서 코드가 화면에 그대로 노출되는 것을 방지하기 위함입니다. 주석은 //-->로 끝나는데, 여기서 //는 JavaScript에서 한 줄 주석을 의미하므로 브라우저가 HTML 주석의 종료 기호를 JavaScript 코드로 잘못 해석하지 않도록 막아줍니다.
다음으로 document.write 함수를 호출하여 HTML 문서에 문자열을 출력합니다. 이 함수는 텍스트, HTML 또는 둘 모두를 출력하는 데 활용할 수 있습니다. 아래 코드를 살펴보세요.
예제 코드
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>실행 결과
Hello World!
참고: HTML5부터는 JavaScript가 기본 스크립트 언어로 지정되어 있어 type 속성을 생략할 수 있습니다. 또한 실무에서는 코드 관리와 성능 최적화를 위해 외부 JavaScript 파일을 <script src="파일명.js"></script> 형태로 불러오는 방식이 널리 사용됩니다.