자바스크립트 삽입 위치가 다양한 것은 로딩 시간에 영향을 주기 때문입니다. External 방식의 코드 삽입은 외부 파일에 주소를 링크시켜서 차후 수정 및 가독성에 효율적입니다.
자바스크립트 인터널 삽입
Internal 방식이란 <script>태그 사이의 코드를 HTML 문서에 직접 삽입하는 방법입니다. <script> 태그의 삽입 위치는 HTML 문서의 <head> 태그 사이일 수도 있고, 또는 <body> 태그 사이일 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
document.write("head태그 안의 자바스크립트 코드입니다.");
</script>
</head>
<body>
<h1>HTML 제목입니다.</h1>
<p>HTML 본문입니다.</p>
<script>
document.write("body태그 안의 자바스크립트 코드입니다.");
</script>
</body>
</html>삽입 위치가 여러 종류인 이유는 자바스크립트는 문서의 상단부터 코드를 순차적으로 읽기 때문에 어디에 삽입하느냐에 따라서 로딩 순서가 달리지기 때문입니다.
삽입 위치나 자바스크립트의 로딩 시간은 중요한 개념입니다. 하지만 처음 학습을 할 때 부차적인 요소는 생략하고 전체를 먼저 빠르게 보는 것이 학습 흥미를 계속 유지하는 방법입니다.
좀더 궁금한 분은 async, defer와 같은 키워드로 검색엔진에서 검색해보시면 JS 코드의 삽입 위치 및 로딩 시간 등에 대해서 자세한 자료를 얻을 수 있습니다.
자바스크립트 외부 삽입
Exteranl 방식이란 JS 코드를 외부 파일에서 링크시키는 방식입니다.
CSS에서 <style> 태그 안에서 코드 길이가 길어지면 가독성 및 편집 용이성을 위해서 외부 파일로 링크를 돌립니다.
<link rel = "stylesheet" href = "파일명.css">마찬가지로 JavaScript도 <script> 태그안의 코드가 길어지면 .js라는 확장자를 가진 자바스크립트 파일을 외부에 저장후 링크 형식으로 불러옵니다.
<script src = "파일명.js"></script>외부 파일로 자바스크립트 코드를 돌리면 대량 편집에 유리하며, 가독성이 증가합니다.
자바스크립트 인라인 코드 삽입
Inline 방식은 <script>태그 없이 자바스크립트 코드를 HTML 문서에 바로 삽입하는 방법입니다.
HTML <input> 태그의 onclick 속성값에 document.write()라는 자바스크립트 출력 명령어를 삽입한 예제입니다. 색모양 아이콘을 클릭하면 JS 코드에 삽입된 데이터가 출력됩니다.
<form>
<input type="color" onclick="document.write('색을 고르세요.');">
</form>하지만 이 방법은 현재는 거의 사용되지 않습니다. CSS에서 <p style = "color:red;">와 같은 인라인 스타일이 대부분 지양되는 것과 비슷한 이유입니다.
이런 수정은 정보(HTML)와 디자인(CSS)이 분리되지 않아서 검색 엔진과 사람 모두 정보 스크리닝이나 차후 편집에 비효율적인 구조를 유발합니다.
마찬가지로 JS 코드가 인라인으로 HTML 태그 내부에 삽입되면 정보를 나타내는 태그 영역과 동적 제어를 나타내는 JS 코드 블록의 구분이 사라지게 됩니다. 가독성이 떨어지고 차후 수정에 힘들 수 있습니다.