HTML <script> 태그란?
<script> 태그는 웹 페이지에서 클라이언트 측 스크립트(client-side script)를 정의하는 데 사용되는 HTML 태그입니다. 자바스크립트 코드를 실행하거나 외부 스크립트 파일을 불러올 때 반드시 필요한 핵심 요소입니다.
- a) <script> 태그는 클라이언트(브라우저) 측에서 실행될 스크립트를 정의합니다.
- b) 태그 안에 직접 스크립트 문(statement)을 작성하거나, src 속성을 통해 외부 스크립트 파일을 연결할 수 있습니다.
자바스크립트 코드는 반드시 <script> 태그 안에 작성해야 합니다. 브라우저는 이 태그 내부의 내용만 자바스크립트로 해석하고 실행하기 때문입니다. 그렇다면 태그 안과 밖에 코드를 작성했을 때 어떤 차이가 있는지 예제를 통해 살펴보겠습니다.
예제 1: script 태그 밖에 변수 선언하기
먼저 변수를 <script> 태그 바깥에 선언한 경우입니다.
<html>
<body>
<p id="tag"></p>
var a = 1;
<script>
var b = 2;
var c = a + b;
document.getElementById("tag").innerHTML = c;
</script>
</body>
</html>실행 결과
var a = 1
<script> 태그 밖에 선언된 var a = 1;은 자바스크립트로 인식되지 못하고 화면에 일반 텍스트로 그대로 출력됩니다. 즉, 의도했던 덧셈 연산도 실행되지 않습니다.
예제 2: script 태그 안에 변수 선언하기
이번에는 모든 변수를 <script> 태그 안에 선언해 보겠습니다.
<html>
<body>
<p id="tag"></p>
<script>
var a = 1;
var b = 2;
var c = a + b;
document.getElementById("tag").innerHTML = c;
</script>
</body>
</html>실행 결과
3
이번에는 변수 a, b, c가 모두 <script> 태그 안에 선언되어 자바스크립트가 정상적으로 실행되며, 화면에는 두 수의 합인 3이 출력됩니다.
참고: 외부 스크립트 파일 연결하기
<script> 태그는 src 속성을 사용하면 별도의 .js 파일을 불러올 수도 있습니다. 코드의 재사용성과 유지보수성을 높이려면 자바스크립트 코드를 외부 파일로 분리해 관리하는 것이 좋습니다.
<script src="script.js"></script>