javascript 파일 분리하기

javascript 파일 분리하기

이전 포스팅에서는 html파일 내부에 스크립트 태그를 직접 열어서 그 내부에 코드를 직접 작성해서 화면에 알림창을 띄워보았습니다. 지금은 html내부가 간단하지만 웹페이지가 복잡해질 수 록 여러가지 기능을 하는 스크립트 들이 늘어나게됩니다. 이 때 javascript를 분리시켜 놓으면 나중에 문제가 생겼을 때 코드를 유지보수 하기가 쉽고, 가독성도 좋아집니다. 그렇다면 어떻게 자바스크립트 코드를 html 코드와 분리시키는지 알아보도록 하겠습니다.

우선 html파일 옆에 .js 라는 확장자를 가진 파일을 하나 생성합니다. 이름은 아무거나 지어도 되는데, 헷갈리지 않게 하기 위해서 html파일과 같은 이름을 가지도록 파일을 생성하였습니다.

그리고 나서 index.js 파일 내부에 실행하고 싶은 javascript 소스코드를 입력합니다.

마지막으로 script 태그를 열어서 이번에는 그 내부가 아닌  태그의 src속성으로 연결하고 싶은 js 파일의 상대경로를 입력합니다. 저의 경우에는 index.html 파일과 js 파일이 같은 경로에 있었으므로 같은 경로를 의미하는  ./ 와 index.js 를 합쳐서 경로를 만들었습니다.

마지막으로 코드를 실행시켜보면

정상적으로 코드가 작동하는 것을 알 수 있습니다. 이로써 html파일에서 javascript 코드를 외부로 분리하는 방법에 관한 포스팅을 마치겠습니다.