1. 웹페이지에 스크립트를 삽입하는 방법
- Node.js 와 같은 서버 사이드 환경 - "node my.js" 와 같은 명령어를 사용.
- script 태그 - 자바스크립트 프로그램을 HTML 문서 어느 곳에나 삽입할 수 있다.
2. 모던 마크업
script 태그의 속성
- type 속성 : < script type = ... >_
HTML4에선 스크립트에 type을 명시하는 것이 필수 였으며,
type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었다.
이제는 타입 명시가 필수가 아니며, 모던 HTML 표준에선 이 속성의 의미가 바뀌었다.
이제 이 속성은 자바스크립트 모듈에 사용할 수 있다.
- language 속성: < script language= ... >
현재 사용하고 있는 스크립트 언어를 나타낸다.
지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색되어 더는 사용할 필요가 없어졌다.
3. 외부 스크립트
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다.
이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입한다.
<script src="/path/to/script.js"></script>
여기서 /path/to/script.js 는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다.
현재 페이지에서의 상대 경로를 사용하는 것도 가능하다.
<script src="https://cdnjs.cloudflare.com/ ajax/libs/lodash.js/3.2.0/lodash.js"></script>
URL 전체를 속성으로 사용할 수도 있다.
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
스크립트 태그를 여러 개 사용하면 복수의 스크립트를 HTML에 삽입할 수 있다.
HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용한다.
스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하여, 스크립트 파일을 한 번만 다운받으면 된다.
이를 통해 트래픽이 절약되고 웹 페이지의 실 속도가 빨라진다.
src 속성이 있으면, 태그 내부의 코드는 무시된다.
<script> 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.
<script src="file.js"> alert(1); // src 속성이 사용되었으므로 이 코드는 무시된다. </script>
이 코드는 실행되지 않으며 <script src="..." > 로 외부 파일을 연결할지 아니면
<script src="file.js"></script> <script> alert(1); </script>
두 개의 스크립트로 분리하면 정상적으로 실행된다.
