JavaScript 2.1
자바스크립트 기본
2.1 Hello, world!
‘script’ 태그
- script 태그를 이용하면 자바 스크립트 프로그램을 문서 어느 곳에나 삽입할 수 있다.
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p>스크립트 후</p>
</body>
</html>
- script 태그엔 자바 스크립트 코드가 들어간다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다.
모던 마크업
- script 태그엔 몇 가지 속성(attribute)이 있다.
type 속성 : <script type=…>
- html4에선 타입을 명시하는 것이 필수였으나 지금은 타입 명시가 필수가 아니다. 게다가 모던 html 표준에선 이 속성의 의미가 바뀌었다. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있다.
language 속성 : <script language=…>
- 이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바 스크립트가 기본 언어이므로 속성의 의미가 퇴색된 상황이다.
스크립트 전후에 위치한 주석
<script type="text/javascript"><!--
...
//--></script>
- 모던 자바스크립트에선 이런 형식의 주석을 사용하지 않는다.
외부 스크립트
- 자바 스크립트 코드의 양이 많은 경우 파일로 소분하여 저장할 수 있다. 이렇게 분해해놓은 각 파일은 src 속성을 사용해 HTML에 삽입한다.
<script src="/path/to/script.js"></script>
- 여기서 /path/to/script.js 는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
- URL 전체를 속성으로 사용할 수도 있다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
- 복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러개 사용하면 된다.
- 주의
- HTML 안에 직접 스크립트를 작성하는 방식은 스크립트가 아주 간단할 때만 사용한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
- 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능 상의 이점이 있다.
- 여러 페이지에서 동일한 스크립트를 사용하는 경우 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다.
- 스크립트 파일을 한번만 다운받기 때문에 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.
- src 속성이 있으면 태그 내부의 코드는 무시된다.
- 스크립트 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.
- 따라서
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시된다.
</script>
<script src="file.js"></script>
<script>
alert(1); // 스크립트를 두개로 분리하면 정상 실행된다.
</script>