[JS] HTML에 Javascript 코드 포함하기, Javascript의 실행

HTML에 Javascript 포함는 방법

1. <script> </script> 태그 안에 직접 작성.
2. <script> 태그의 src 속성에 별도의 파일로 정의. *주로 사용*
   • <script src=".../test.js"></script>
   • 태그 사이에는 어떤 내용를 넣어도 경고 처리되고 무시됨. 필요하다면 코드에 대한 저작권이나 문서화된 설명을 넣을 수 있음.
   • 확장성이 좋고, js 파일을 사용한 첫 페이지에서 한 번만 내려 받으면 그 다음 페이지는 브라우저 캐시에서 참조할 수 있음.
   • 참조(http://code.google.com/apis/ajaxlibs/) (http://developers.google.com/speed/libraries/)
3. onclick 같은 HTML 이벤트 핸들러 속성 안에 작성
4. javascript: 라는 특별한 프로토콜을 이용하여 URL 안에 작성.

Javascript 실행

1. 문서 내용을 불러오고 <script> 요소의 코드 실행.
2. 이벤트를 중심으로 비동기적으로 자바스크립트 실행.

보통 1번은 1~2초 사이에 완료되지만, 1번을 진행하는 동안 <script> 아래쪽의 문서 내용은 브라우저에 보이지 않는다. (document.write()로 인해 브라우저 내용의 변경이 있을수도 있기 때문)

 

원한다면 <script> 태그의 defer, async 속성으로 <script> 코드의 실행을 미루거나 브라우저를 띄우는 것과 동시에 진행할 수 있다.

• <script defer src=".../test.js"></script> 브라우저는 문서를 모두 불러오고 파싱해서 조작할 준비가 끝날 때까지 스크립트 실행을 미룸.
• <script async src=".../test.js"></script> 스크립트를 다운로드하는 동안에도 문서 파싱을 계속하고, 문서 파싱 완료와 관계없이 가급적 빨리 스크립트를 실행함.