웹페이지에서 자바스크립트 코드 실행하기


웹페이지에서 자바스크립트 코드 실행하기

웹페이지에 자바스크립트 코드를 삽입하고 실행하기 위해서는 HTML 문서 내부에서 <script> 태그를 이용해야 합니다. script 태그를 사용하는 방식에는 인라인 스크립트 를 직접 작성하는 방식과 외부 스크립트를 링크하는 방식이 있습니다.

인라인 스크립트 방식은 <script> 태그 내부에 직접 코드를 작성하는 방식입니다.

<!-- index.html -->
<body>
  <h1>Hello World</h1>
  <script>
    alert("Hello");
  </script>
</body>

외부 스크립트 방식은 자바스크립트 코드를 script.js 등과 같은 외부 파일에 작성하고 파일을 <script> 태그의 src 속성값으로 링크시키는 방식입니다.

<!-- index.html -->
<body>
  <h1>Hello World</h1>
  <script src="script.js"></script>
</body>
// script.js
alert("Hello");

이렇게 자바스크립트 코드는 HTML 문서 내부에 삽입해서 실행시키게 됩니다.

많은 경우에 HTML 문서와 CSS 문서, 그리고 JavaScript 문서를 분리시키기 위해 실무에서는 자바스크립트 코드는 다른 문서로 분리하여 링크하는 방식을 사용합니다.

script 태그의 위치

<script> 태그는 HTML 문서 내부에서 주로 </body> 태그 바로 위 (즉 body 태그의 가장 아래)에 작성하거나, 혹은 <head> 태그 내부에 작성하게 됩니다.

최근에는 주로 스크립트 태그는 HTML문서의 하단에 위치시키며, 이유는 웹사이트의 빠른 초기로딩을 위해서 입니다.

웹브라우저는 웹사이트의 문서를 다운로드 받고 읽어올때, 문서의 가장 상단 부터 읽기 시작하는데, 이때 용량이 큰 자바스크립트 문서가 head 부분에 있게 되면 자바스크립트 파일을 다운받는 동안 HTML 문서의 다운로드가 지연됩니다. 따라서 전체적인 웹사이트의 로딩 속도가 느린 것처럼 보이게 되어 좋지않은 사용자 경험을 줄 수도 있게되죠.