브라우저의 인라인 자바스크립트 식별 방식
HTML에 다음과 같은 코드가 있다고 가정해 보겠습니다.
<input type="Button" value="Result" onclick="alert('Hello World!');"/>이 경우 브라우저는 <script> 태그가 전혀 존재하지 않더라도 onclick 속성을 감지하여 해당 코드를 인라인 자바스크립트로 인식합니다. 즉, HTML 요소의 이벤트 속성(onclick, onmouseover, onload 등) 안에 직접 작성된 코드는 모두 인라인 자바스크립트로 처리되며, 별도의 스크립트 태그 없이도 실행됩니다.
인라인 자바스크립트 사용 시 권장 사항
- 단일 페이지 전용이라면 인라인 스크립트 고려 — 해당 스크립트가 오직 하나의 페이지에서만 사용된다면 <script>...</script> 형태의 인라인 스크립트 요소를 사용해도 무방합니다.
- 이벤트 속성 사용은 지양 — onclick="..."처럼 HTML에 이벤트를 직접 작성하기보다는, addEventListener() 등을 활용해 자바스크립트 코드 내에서 이벤트 핸들러를 바인딩하는 것이 좋습니다. 이렇게 하면 구조(HTML)와 동작(JS)이 분리되어 유지보수가 쉬워집니다.
- 외부 스크립트 파일 활용 — 대부분의 스크립트, 특히 여러 페이지에서 재사용되는 코드는 <script src="..."></script> 형태의 외부 파일로 분리하는 것이 바람직합니다. 외부 파일은 브라우저 캐싱의 이점도 얻을 수 있어 페이지 로딩 성능에도 도움이 됩니다.
정리하면, 브라우저는 이벤트 속성 자체를 자바스크립트 실행 지점으로 인식하기 때문에 <script> 태그가 없어도 인라인 코드를 실행합니다. 다만 실무에서는 코드의 재사용성, 가독성, 보안(CSP 정책 준수)을 위해 외부 스크립트와 이벤트 리스너 방식을 사용하는 것이 일반적으로 권장됩니다.