우리가 모든 CSS 들을 별도의 파일에 놓고 스타일 속성이나 기타 다른 표현적 마크업들을 삼가함으로써 구조와 표현을 분리하는 것과 마찬가지로, HTML 구조와 자바스크립트 행동들을 분리해야 한다. 이유는 동일하다: 당신의 관심영역을 분리하고, 당신의 코드를 깔끔하게 해주며, HTML 이나 CSS에 손 댈 필요 없이 자바스크립트 작업을 할 수 있게 해준다.

기본적인 규칙은 간단하다: HTML 파일은 자바스크립트 코드를 포함하면 안된다 - CSS를 포함하지 않아야 하는 것과 마찬가지로 말이다. 자바스크립트 개발자들이 HTML 파일에 넣을 수 있는 것은 두가지이다: 내장_embeded 된 스크립트와 이벤트 핸들러가 그것이다. 스크립트 코드들을 없애는 것이, 구조와 행동을 분리하는 가장 간단한 방법이다.

마지막 글에서 배웠듯이, 내장된 스크립트들은 HTML 페이지 내부에, <script> 태그로 둘러싸여져 있는 자바스크립트 코드 들이다. 이것들은 쉽게 외부 스크립트 파일로 옮겨질 수 있으므로, 아무런 문제도 일으키지 않는다.

<a href=“somewhere.html” onmouseover=“hideAll()”> 와 같은 인라인 이벤트 핸들러들은 없애기가 약간 더 힘들다. 이것은 특정 이벤트가 일어났을때 어떤 이벤트 핸들러(자바스크립트 함수)가 실행되는지 정의하는 것이다. 이벤트 핸들러를 겸손하게 만들기 위해 우리가 할 일은 그것들을 별도의 스크립트 파일로 보내는 일이다. 이것은 외부 스크립트 파일이 적절한 요소를 찾아내고, 거기에 이벤트 핸들러를 연결하는 것을 의미한다.

이벤트 핸들러에 대해 더 많이 배우고 싶다면, 우리의 글 중 Handling events with Javascript 를 참고하기 바란다.

특정한 요소를 찾아내기 위해 가장 쉬운 방법은, 그것에 ID를 주는 것이다. 예를 들어:

<!-- HTML: -->
<a href="somewhere.html" id="somewhereLink">

<!-- Javascript: -->
var x = document.getElementById('somewhereLink');
if (x) {
  x.onmouseover = hideAll;
}

hideAll() 함수는 사용자가 링크 위로 마우스를 가져갈때마다 실행되고, 이 코드는 <a href=“somewhere.html” onmouseover=“hideAll()”> 와 동일하다.

더 좋은것은, 이 두 줄의 코드는 “somewhereLink”라는 아이디를 가진 요소를 포함하는 모든 페이지들에서 동작한다는 것이며, 따라서 당신은 시간을 들여 이것을 반복할 필요가 없다. 그리고 이러한 요소를 포함하지 않는 페이지들에 대해서는, if(x) 구문이 에러 메세지가 나지 않을 것을 보장하고 있다: 요소 x가 실제로 존재할때에만 이벤트 핸들러를 할당하기 때문이다.

그리고 브라우저가 자바스크립트를 지원하지 않는다면? 당연히, 마우스오버는 동작하지 않는다. 하지만 링크는 여전히 링크이고, 여전히 따라갈 수 있다.

이제 우리의 코드는, 깔끔해진것에 더해, 좀더 관리하기 편해졌다.

예를 들자면, 마우스오버와 포커스 이벤트를 결합하는것은 종종 좋은 결과를 가져온다. 마우스오버는 사용자가 마우스를 쓸 때에만 동작한다. 마우스를 사용하지 않는 사람들은 키보드를 사용해서 클릭하고자 하는 링크에 포커스를 줄 것이며, 이것은 포커스 이벤트를 동작시킨다. 만약 우리가 이 이벤트에도 마찬가지로 함수를 등록해준다면(즉, 함수에게 이 이벤트에 대해서도 동작하라고 말해둔다면), 우리의 프로그램이 키보드에 대해서도 동작할 것임을 확신할 수 있게 된다.

스크립트를 HTML에서 분리해 뒀다면 이것은 아주 쉽게 할 수 있다:

var x = document.getElementById('somewhereLink');
if (x) {
  x.onmouseover = x.onfocus = hideAll;
}

2글자를 추가함으로써 우리의 프로그램이 키보드로도 동작하게끔 만들었다. 쉽지 않은가?

인라인 이벤트 핸들러를 사용했었다면 어떻게 했어야 됬을지 한번 생각해보자. 우리는 사이트 전체를 헤집고 다니면서, 마우스오버 이벤트를 가진 모든 링크에 onfocus=“hideAll()” 이라는 구문을 일일이 손으로 추가해 주어야 했을 것이다. 뭔가 다른 유용한 일에 투자할 수 있었을 시간을 아주 많이 낭비할 뿐만 아니라, 에러를 보증하는 방법이기도 하다 - 아주 특정한 상황에서만 사용되는, 조금 따로 떨어져 있는 템플릿 속에 들어있는 링크는 잊어버리고 바꾸지 않기 쉬우며, 또한 많은 onfocus= 중 어느 하나에 오타를 낼 수도 있다.

따라서, HTML과 CSS를 분리하는 것이 현명한 것 처럼, HTML에서 자바스크립트를 분리해내는 것 역시 마찬가지로 좋은 방법이다. 내장된 스크립트와 인라인 이벤트 핸들러들을 없애는 것은 아주 쉬우며, 그 즉시 당신의 코드의 유용성과 유지보수성을 향상시킨다.