자바스크립트 문법을 코드로 직접 시연해 보기

자바스크립트 태그란 무엇인가?

HTML의 <script> 태그는 브라우저에게 해당 태그 사이에 있는 스크립트를 읽어 실행하도록 지시하는 역할을 합니다. 즉, 자바스크립트 코드를 웹 페이지에서 동작시키려면 반드시 script 태그로 감싸야 합니다.

자바스크립트 코드는 크게 다음 세 가지 위치에 작성할 수 있습니다.

head 태그 내부 — 문서의 머리 부분에 스크립트를 배치하는 방식입니다.
body 태그 내부 — 본문 요소들 사이에 스크립트를 배치하는 방식입니다.
외부 파일 — .js 확장자를 가진 별도의 파일로 저장한 후 불러오는 방식입니다.

클라이언트 측 스크립트인 자바스크립트는 어떤 방식을 선택하든 반드시 script 태그 안에 작성되어야 합니다.

예제 코드

<html>
<body>
<p>이 예제는 id="imp"인 HTML 요소에 "JavaScript is not java"라는 문구를 출력합니다</p>
<p id="imp"></p>
<script>
    document.getElementById("imp").innerHTML = "JavaScript is not java";
</script>
</body>
</html>

실행 결과

이 예제는 id="imp"인 HTML 요소에 "JavaScript is not java"라는 문구를 출력합니다
JavaScript is not java

코드 설명

모든 자바스크립트 코드는 반드시 script 태그 안에 위치해야 하며, 그렇지 않으면 코드가 실행되지 않습니다. 위 예제에서는 id 속성을 기준으로 document.getElementById() 메서드를 사용해 해당 요소에 접근한 뒤, innerHTML 속성에 문자열을 대입하여 화면에 텍스트가 출력되었습니다.

추가 팁

실무에서는 script 태그를 body 태그의 맨 끝에 배치하는 것이 일반적입니다. HTML 문서가 모두 로드된 후 스크립트가 실행되기 때문에, 아직 생성되지 않은 DOM 요소에 접근해 발생하는 오류를 예방할 수 있습니다. 또한 외부 파일 방식을 사용할 때는 src 속성으로 경로를 지정하며, 필요에 따라 async 또는 defer 속성을 활용해 스크립트 로딩 동작을 제어할 수 있습니다.