본문 바로가기

개발/웹브라우저 JS

HTML에서 JavaScript 로드하기

 

JavaScript로 웹페이지를 제어하기 위해서는 JavaScript를 로드해야 한다.

onclick = "alert('Hello world')"

HTML JavaScript

정보 + 제어 구분

>> 이걸 해결하는 것이 Script 태그

 

inline

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

 

script

html파일안에 <script></script>를 쓰면 그 안의 코드는 js로 인식

>> 이렇게 하면 유지보수나 정보를 제어하는데 바람직해져

 

외부 파일로 분리

>> 유지보수의 편의성 : script 들어있는 html파일을 다 바꾸지 않아도돼

중복되는 js를 하나의 js로 빼므로써

 

브라우저는 cash를 갖고 있어

이미 다운로드 받았던거를 계속 받을 필요 없겠지?

똑같은 파일 요청할 때는 cash가 돼

>> js를 외부 별도 바일로 빼므로서 html 경량화

 

Script 파일의 위치

script를 head 태그에 위치시킬 수도 있다. 하지만 이 경우는 오류가 발생한다.

>> head 태그의 script 파일내에서 정의된 src

에러가 안 발생하게 하려면

>> window.onload 사용

따라서 script 태그에 src를 사용할때는

body태그가 끝나는 부분에 위치시키는게 바람직해