🙋♂️ 브라우저 환경에서 'Hello world' 출력하기
1. <script> 태그 달기
<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
<script>와 </script> 사이에는 자바스크립트 코드가 들어간다. 브라우저는 script 태그를 만나면 안의 코드를 자바스크립트 코드로 인식한다.
2. 모던 마크업
<script> 태그엔 몇 가지 속성이 있다. 요즘엔 잘 사용하지 않는다고 한다.
-
type 속성
HTML4에서는 type을 필수로 명시해야 했다. 현재는 필수가 아니며, 모던 HTML 표준에선 이 속성의 의미가 바뀌었다.
<script type="..."> ``` ``` -
language 속성
현재 사용하는 언어를 나타내지만 지금은 자바스크립트가 기본 언어이므로 의미가 퇴색되어 사용할 필요가 없다.
<script language="...">
- 스크립트 전후에 위치한 주석 :
<script type="text/javascript"><!-- ... //--></script>
<script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했지만 지난 15년간 출시된 브라우저는 <script>태그를 처리할 수 있으므로 이러한 주석은 아주 오래된 코드일 것이다.
3. 외부 스크립트
자바스크립트 코드의 양이 많은 경우, 파일로 소분하여 저장할 수 있다.
각 파일은 src 속성으로 HTML에 삽입한다.
<script src="/path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>복수의 스크립트 파일을 삽입하고자 한다면 스크립트 태그를 여러 개 사용한다.
<script src="/path/to/script1.js"></script>
<script src="/path/to/script2.js"></script>❗ 주의!
-
HTML 안에서 직접 스크립트를 작성하는 방식은 스크립트가 아주 간단할 때만 사용한다. 스크립트를 파일로 분리하면 브라우저의 캐시에 저장되기 때문에, 여러 사이트에서 동일한 스크립트를 사용하는 경우 새로 스크립트를 다운받지 않고 캐시로부터 불러와 성능상의 이점이 있다.
-
src 속성이 있으면 태그 내부의 코드는 무시된다. src 속성과 내부 코드를 동시에 가지지 못한다.
📒 요약
-
자바스크립트를 사용하기 위해 HTML 코드에 <script> 태그를 작성한다.
-
type과 language 속성 및 스크립트 태그 무시 주석은 필수가 아니다.
-
외부 스크립트 파일은
<script src="/path/to/script.js"\></script\>
와 같이 src 속성을 사용하여 삽입하며, 성능상의 이점이 있다.
