JavaScript를 HTML에 삽입하는 기본 원리
JavaScript는 <script>...</script> 태그 사이에 작성된 JavaScript 문장들을 통해 구현됩니다. 즉, HTML 파일 안에 JavaScript 코드를 포함시키려면 반드시 <script>...</script> 태그를 사용해야 합니다.
<script> 태그는 브라우저에게 이 태그 사이의 모든 텍스트를 스크립트로 해석하기 시작하라고 알려주는 역할을 합니다. JavaScript의 가장 기본적인 문법 구조는 다음과 같습니다.
<script ...>
JavaScript 코드
</script>
script 태그를 배치할 수 있는 위치
<script> 태그는 웹 페이지 내 어디에든 배치할 수 있습니다. 다만 일반적으로는 <head> 태그 내부에 두는 것이 권장됩니다. 페이지가 로드되기 전에 스크립트가 먼저 해석되어야 하는 경우(예: 함수 정의, 전역 설정 등)에 특히 유용합니다.
참고로 최신 웹 개발에서는 페이지 렌더링 성능을 위해 <body> 태그의 맨 끝에 스크립트를 배치하거나, <script> 태그에 defer 또는 async 속성을 추가하는 방식도 널리 사용됩니다.
Hello World 출력 예제
간단한 예제를 통해 "Hello World"를 화면에 출력해 보겠습니다. 여기서는 선택 사항으로 JavaScript 코드 주변에 HTML 주석을 추가했습니다.
주석은 "//-->"로 끝납니다. 여기서 "//"는 JavaScript에서 한 줄 주석을 의미하며, 브라우저가 HTML 주석의 끝 부분("-->")을 JavaScript 코드로 잘못 해석하지 않도록 방지하는 역할을 합니다.
다음으로 document.write 함수를 호출합니다. 이 함수는 문자열을 HTML 문서에 직접 작성해 주는 기능을 하며, 텍스트, HTML 태그, 또는 그 둘 모두를 출력하는 데 사용할 수 있습니다. 아래 코드를 확인해 보세요.
<html>
<body>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
정리
JavaScript 코드는 <script> 태그로 감싸서 HTML 문서 어디에나 삽입할 수 있으며, 전통적으로는 <head> 태그 안에 배치하는 것이 일반적입니다. 오래된 브라우저와의 호환성을 위해 HTML 주석 처리 기법을 사용할 수도 있지만, 현대 브라우저에서는 더 이상 필수적이지 않습니다.