HTML에서 JavaScript 로드하기

inline 방식

• onclick = "alert('hello')"를 속성으로 사용하여 제어한다.
  - 버튼 클릭 시 JavaScript 코드가 실행되는 형태이다.
  - HTML(정보)과 JavaScript(제어)가 섞여있기 때문에 유지보수가 용이하지 않고 SEO에도 좋지 않다.

script 태그로 분리 방식

• <script>
  var hw = document.getElementById('hw');
  hw.addEventListener('click',function(){alert('hello');
  </script>

• script 태그 안은 JavaScirpt로 해석하기 때문에 가능하다.
• <script src = "./script.js"></script> 를 통해 외부 파일로 분리도 가능하다.
• 외부 파일로 분리된 script 태그를 head 태그나 body 태그의 끝나는 지점에 위치시킨다.

script 태그의 위치

• head 태그에 위치시키는 경우
  - 아직 동작하지 않은 body 태그의 내용이 필요하기 때문에 실행에 오류가 발생한다.
  - window.onload = function(){...} 웹페이지가 모두 완성 되었을 때 호출되는 함수를 사용해서 오류를 없애야한다.

• body 태그 끝나는 지점 직전에 위치
  - 모든 html 코드가 실행 된 후 script가 실행되기 때문에 오류가 발생하지 않고 window.onload도 필요 없다.
  

• head 태그에 넣는다면 script 태그의 내용을 거친 다음 body가 실행되기 때문에 렌더링에 시간이 더 오래 걸리고 비효율적이기 때문에 body 태그 끝나는 지점 직전에 위치 시키는 것이 바람직하다.