[HTML/JavaScript] HTML 문서에서 자바스크립트(js) 파일 호출하여 사용하기

  1. HTML 문서에서 자바스크립트 파일을 호출 하여 사용 하기 위해서는 script 태그의 src 속성에 파일 주소를 적어 주면 됨
  2. script 태그는 브라우저의 html 문서 렌더링을 멈추게 하므로 웬만하면 body 태그가 닫히기 직전에 호출 할 것
  3. HTML5 에서는 type 속성은 생략할 수 있음

HTML 문서에서 자바스크립트를 사용하기 위해서는 HTML 문서에 직접 자바스크립트를 작성하여 사용 하는 방법도 있지만, 관리의 편의를 위하여 자바스크립트 파일을 만들어 저장하고 해당 파일을 호출 하여 사용 하는 것이 좋습니다.

자바스크립트(js) 파일 호출하기

자바스크립트 파일을 호출 하기 위해서는 HTML 문서에 아래와 같이 작성 하면 됩니다.

<script type="text/javascript" src="./js/showmemyblog.js"></script>

간단합니다. 스크립트의 타임을 지정해주고, 해당 js 파일의 위치만 src 속성 값으로 지정해주면 됩니다.

자바스크립트 파일 호출은 페이지 하단에서

브라우저가 자바스크립트를 해석 하고 페이지에 반영할 때에는 화면 렌더링을 멈추게 됩니다. 따라서 웬만하면 시간이 걸리는 자바스크립트의 호출은 페이지가 보여줄 내용을 거의 다 보여준 다음에 하는 것이 좋습니다. 그래서 정답은?

body 태그가 끝나기 직전에 자바스크립트 파일을 호출 하는 것이 가장 좋습니다. 아래 처럼요.

        ...
        <script src=" ... "></script>
    </body>
</html>

참고사항

  • HTML5 에서는 script 태그의 속성 중 type=”text/javascript” 를 생략 할 수 있습니다.
  • 사실상 script 태그는 HTML 문서의 어느 곳에나 위치해도 상관은 없습니다.
  • 그러므로 head 태그 내부에는 가벼운 스크립트를, body 태그가 끝나기 전에는 상대적으로 무거운 스크립트를 위치 시키는게 좋습니다.