html에서 자바스크립트 코드 분리하기 (onlick 없이 동작)

인라인 방식

 

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

 

<input type="button" onclick="alert('Hello world')" value="Hello world" />

 

 

 

인라인 코드에서 분리하는 방법

 

<script></script> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식이다.
장점은 html 태그와 js 코드를 분리할 수 있다

 

<input type="button" id="hw" value="Hello world" />

<script type="text/javascript">
  var hw = document.getElementById('hw');
  
  hw.addEventListener('click', function(){
  	alert('Hello world');
  })
</script>

 

js를 별도의 외부 파일로 분리해서도 가능하겠다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있으며 캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다. Script 파일의 위치는 head 태그 사이에 위치할 경우 오류가 발생할 수도 있다. body 태그 하단쪽에 넣거나 window.onload = function(){} 함수로 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되게 해야할 것이다.

 

 

 

[JavaScript] 이벤트 핸들러

20. 자바스크립트 - 관리하기 쉬운코드 작성하기