지난 포스트에서는 첫 번째 자바스크립트 코드를 작성하는 방법을 배웠습니다. 이번에는 html 문서에 자바스크립트 코드를 삽입하는 방법들에 대해서 알아보겠습니다.

<script>태그 사용하기

지난 포스트에서도 다룬 방식입니다. html 문서 내부에 <script>코드를 삽입하고 태그 내용으로 자바스크립트 코드를 작성하는 방식입니다.

<script>
  자바스크립트 코드
</script>

이 방식은 파일이 여러개로 나뉘지 않아서 디렉토리 구조는 간단해지는 장점이 있습니다. 그러나 스크립트 태그 사이의 코드가 길어지면 오히려 문서 구조를 복잡하게 만듦니다. 그래서 한 줄 짜리 간단한 코드가 아닌이상 사용하지 않게 되는 방식입니다.

자바스크립트 삽입은 외부 파일 임포트 방식을 주로 사용하게 됩니다.

외부 파일 import하기

이 방식은 자바스크립트 파일과 html 문서를 분리하고 임포트해서 불러오는 방식입니다.

<script src='자바스크립트 파일 경로'></script>

src속성에 지정된 경로의 js파일이 불러와서 실행됩니다.

이 방식의 장점은 다음과 같습니다.

• 페이지의 골격을 구성하는 html 문서와 동작을 담당하는 js파일의 분리로 코드의 유지보수가 쉽다.
• 스크립트가 외부파일화 되므로 html 문서의 가독성이 좋아진다.

추가적으로, <script>태그에 src속성을 주는 경우 <script>~</script>태그 사이의 코드들은 무시가 됩니다.

<script src="js파일 경로">
	외부 임포트 사용시 이곳의 코드는 무시됩니다!!!
</script>