HTML에서 Javascript 로드하기

JavaScript로 웹페이지를 제어하기 위해서는 JavaScript를 로드해야 한다.

로드를 하는 방법은 여러가지가 있다.

첫번째 방식 , inline방식

inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다.
장점은 태그에 연관된 스크립트가 분명히 드러난다는 점이다.     
하지만 정보(HTML)와 제어(JavaScript)가 섞여있기 때문에
정보로서의 가치가 떨어진다.

위 소스를 보면 HTMl 기본 프레임으로 구성되어 있다.

우리가 여태 봐왔던 script태그는 없다 , 
다만 8행을 보면 onclick속성에 값으로 들어가있는 자바스크립트 코드를 실행하게 되어있다.
onclick은 HTML속성이고 , alert()은 JavaScript의 문법이다.
8행을 해석해보면 다음과 같다 ,  button을 만드는데 그 버튼은 Hello World라는 값을 갖고 , 버튼 클릭시 Hello World!라는 경고문을 띄워라
정도가 되겠다.           
그러나 현대 코드들은 이와같이 inline방식으로 코드를 작성하지는 않는다.

두번째 방식은 <script>태그 내에 자바스크립트 코드를 삽입하는 방식이다.

장점은 html태그와 자바스크립트 코드를 분리할 수 있다는 점이다.

위 코드를 보면 우리가 여태 작성해왔던 코드들과 같이

body태그 내에 script태그가 열린 후 script태그 내에 자바스크립트 코드들이 적혀있다.
브라우저는 html태그를 해석하다가 script태그를 보고 자바스크립트 코드임을 인식하고 자바스크립트 코드로 해석한다.
그 후 스크립트 태그가 닫힌 후엔 다시 html코드로 해석한다.

이렇게 하면 첫번째 방식과는 달리
html코드 내에 자바스크립트 코드가 더이상 존재하지 않는다.
또한 자바스크립트 코드의 위치를 정확히 할수있기 때문에 유지보수면에서도 좀 더 용이하다.

세번째 방식으로는 외부파일로 분리시키는 방법이있다.
자바스크립트 코드를 별도의 파일로 분리할수 있다는 뜻이다 , 장점은 보다 엄격히 정보와 제어를 분리할 수 있고
하나의 js파일을 여러 웹페이지에서 로드함으로써 JS의 재활용성을 높일 수 있다 .
캐쉬를 통해어 속도의 향상 , 전송량의 경량화를 도모할 수 있다.
유지보수의 편의성에서 매우 용이하다.
만일 같은 디렉토리 내에 자바스크립트 소스가 적혀있는 파일의 이름을 script.js 라고하자,
그러면 html소스 파일에서 body태그가 끝나는 지점에
<script src = "./script.js"></script> 라고 적어주면 , 브라우저는 html태그를 해석하다가
script 태그를보고 script.js소스를 다운받아온다.
(src 는 소스의 약자다.)