모던 JavaScript 튜토리얼을 읽고 정리한 글입니다.
Preview
- 웹 페이지에 JavaScript 코드를 추가하기 위해
<script>태그를 사용한다. type과language속성은 필수가 아니다.- 외부 스크립트 파일은
<script src="path/to/script.js"></script>와 같이 삽입한다.
Hello, world!
📝 <script> 태그
<script> 태그를 이용하면 JavaScript 프로그램(스크립트)을 HTML 문서 대부분의 위치에 삽입할 수 있다.
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert('Hello, world!');
</script>
<p>스크립트 후</p>
</body>
</html>
<script> 태그에는 JavaScript 코드가 들어간다. 브라우저는 이 태그를 만나면 내부 코드를 자동으로 처리한다. 커맨드 라인에서 코드를 실행했을 때는 다음과 같다.
✨ 모던 마크업
<script> 태그에는 여러 속성(attribute)이 있는데 요즘에는 잘 사용하지 않는다 ❌
-
type속성(<script type=...>): HTML4에서는 스크립트에 type을 반드시 명시했어야 했다. 그래서 보통type="text/javascript"속성을 썼는데 지금은 타입 명시를 하지 않아도 된다. 게다가 모던 HTML 표준에서는 이 속성의 의미가 바뀌었고 JavaScript 모듈에 사용할 수 있다. -
language속성(<script language=...>): 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 JavaScript가 기본 언어이므로 사용할 필요가 없어졌다. -
스크립트 전후에 위치한 주석: 15년 전까지는
<script>태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 태그 옆에 붙은 주석을 사용했었다.<script type="text/javascript"><!-- ... //--></script>
🔗 외부 스크립트
JavaScript 코드를 별도의 파일로 분리해서 src 속성으로 해당 파일을 HTML에 삽입할 수 있다. 절대 경로 또는 상대 경로를 사용할 수 있다.
<script src="/path/to/script.js"></script>
또는 URL 전체를 속성으로 사용할 수도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
여러 스크립트를 HTML에 삽입할 경우 스크립트 태그를 여러 개 사용하면 된다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
일반적으로 스크립트가 아주 간단할 때만 HTML 안에 직접 스크립트를 작성한다. 스크립트가 길어지면 별도의 분리된 파일로 만들어 저장하는 것이 좋다.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다. 여러 페이지에서 동일한 스크립트를 사용할 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 그래서 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다 🔥
⚠️ <script> 태그는 src 속성과 내부 코드를 동시에 갖지 못한다. <script src="…">로 외부 파일을 연결할지, 태그 내에 코드를 작성할지를 선택해야 한다. src 속성이 있으면 태그 내부의 코드는 무시된다. 다음 코드는 실행되지 않는다.
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>
스크립트 두 개를 분리하면 정상적으로 실행된다!
<script src="file.js"></script>
<script>
alert(1);
</script>