본문 바로가기

언어공부/JavaScript&jQuery

(생활코딩) Javascript 파일로 쪼개서 정리 정돈하기.

<script> 태그의 코드들을 따로 color.js라는 파일에 저장해서 사용해보자.

 

 

해당 script태그 안에있는 코드부분들을 복사한다.

 

 

그리고 color.js 라는 파일을 새로 만들어 코드를 붙여 놓는다 (*<script> 태그는 있으면 안된다.)

 

 

그리고 다시 html파일로 돌아와 <script>태그안의 코드들을 지우고 src="color.js"를 추가하고 저장해준다.

 

한번 웹페이지, 웹브라우저에 다운로드 된 파일은 보통 컴퓨터에 저장하므로, 다음 번에 웹페이지에 접속하면 저장된 파일을 읽어서 네트워크를 통하지 않게한다. (서버 입장에서는 훨씬 더 비용을 절감 가능하며, 사용자 입장에서는 네트워크 트래픽 절감 및 속도가 빨라짐)

 

웹페이지 새로고침을 누르면, 기능이 똑같이 적용되는 것을 확인할 수 있고, 검사에서 color.js파일을 다운 받은 것을 알 수 있다.

 

color.js 파일만 수정하면 <script src="color.js"></script>태그가 있는 html파일에는 수정사항이 모두 다 반영되므로 유지보수하기 쉽다. 또한 가독성이 좋아지며 코드가 훨씬 더 명확해지며 코드의 의미를 파일의 이름을 통해서 우리가 확인할 수가 있다.