[자바스크립트] Html에서 Javascript 작성하기

자바스크립트의 기초 이론부터 공부하지 않아서, js파일 자체에 기록해 html로 연결하는데 익숙해져 있었다. 

그래서 수업을 들으면서 굳이 html파일에 head 태그와 body태그에 구분해서 적을 이유가 있나 싶었는데, 

 -> 스크립트  태그의 위치가 달랐던 이유는 HTML문서의 파싱과 자바스크립트의 코드 실행 관계 때문 

 

HTML 요소를 자바스크립트에서 활용하려면, 

해당 요소가 스크립트보다 먼저 파싱(Parsing)되어야 해서 실행 스크립트가 더 아래에 있어야 함 

 

case1 )

스크립트 태그의 실행 순서는 위에서 아래로 실행되는데, 윗문장에서 에러가 발생할 경우, 아래문장을 실행하지 않는다.

 

case2 )

head에 작성하는 이유는 브라우저가 컨텐츠를 그려내기 전에 미리 호출해 파일을 불러오는데 

body보다 상단에 실행 스크립트가 있는 경우, 처음 로드 시 찾고자 하는 element가 아직 존재하지 않아서 오류가 발생

-> 이럴 때는 document.addEventListener()를 통해서 html이 모두 로드된 이후에 실행하도록 만들 수 있음