[모던JS] 005. [기본] Hello, world!(JS 작성법, 내외부 스크립트)
script 태그
자바스크립트의 코드는 HTML 문서에서 사용하는 방법이 두 가지가 있다.
HTML 태그 내에서 <script> 내부에 자바스크립트 코드를 작성하는 방법
script 태그 내에 자바스크립트 코드를 직접 작성하면 자바스크립트로 HTML을 제어할 수 있다.
외부 스크립트
별도의 .js 파일을 만들어서 <body> 태그 내에 링크를 거는 방법이다.
보통은 </body> body 닫는 태그 앞에 사용한다. 이유는 HTML은 위에서부터 코드를 차례로 읽어가며 웹 브라우저에 로드되는 언어인데, 자바스크립트를 읽어오는 외부 스크립트 호출 태그를 HTML 상단에 작성하면 자바스크립트를 불러오느라 화면을 구성하는 HTML을 로드하는데 시간이 오래 걸리기 때문에 사용자들이 느리고 답답한, 사용성이 떨어지는 경험을 할 수 있기 때문이다.
<script src="script.js"></script>
</body>모던 마크업
HTML의 <script> 태그에 몇 가지 속성이 있다. HTML5로 오면서 거의 사용하지 않지만 알고 있으면 좋다.
- type : 예전 HTML4에서는 스크립트에 type을 필수적으로 명시했어야 해싿. 하지만 지금은 타입 명시가 필수가 아니고, 이 type의 의미가 변경되었다. 이 속성은 현재는 자바스크립트 모듈에 사용할 수 있다. (모듈은 심화내용임)
<script type="text/javascript">- language : script 태그가 사용하는 언어를 지정한다. 지금은 어차피 자바스크립트가 웹 표준이 되었기에 설정이 의미 없다.
<script language="javascript">외부 스크립트
<!-- 내부 경로를 입력 -->
<script src="/script.js"></script>
<!-- 외부 CDN 주소를 입력 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>그런데 <script> 태그 내부에 자바스크립트 코드를 직정 작성하는 방식은 스크립트가 간단할 때만 사용한다.
대부분은 별도로 외부 스크립트를 작성해서 불러온다고 생각하면 좋다.
이유는 한 두개의 페이지가 아니라 웹 사이트는 여러 페이지에서 동일한 스크립트를 사용하기 때문에 매번 같은 코드를 작성하는 것도 번거롭고 수정도 불리하다. 그리고 가장 큰 문제는 스크립트를 별도 파일로 저장해서 불러오면 캐시(cache)에 저장하기 때문에 페이지를 새로고침 했을 때 다시 불러오지 않아 스크립트 파일을 한 번만 불러와 로딩 속도에서 유리하다.
정리
- HTML 내부에서 자바스크립트를 사용할 때, 또는 외부 스크립트를 불러올 때는 <script> 태그를 사용한다.
- <script> 태그 내에서 사용 하는 type, language 속성은 현재는 필수가 아니다.
- 가능한 <script> 태그 내에 자바스크립트 코드를 직접 작성하지 않고 외부 스크립트 .js 파일을 작성해서 불러오는 방식으로 사용하는 게 좋다.
'Programing > JavaScript' 카테고리의 다른 글
| [모던JS] 007. [기본] 엄격 모드(use strict) (0) | 2024.03.25 |
|---|---|
| [모던JS] 006. [기본] 코드 구조(문, 주석) (0) | 2024.03.25 |
| [모던JS] 004. [소개] 개발자 콘솔 (0) | 2024.03.25 |
| [모던JS] 003. [소개] 코드 에디터 (0) | 2024.03.25 |
| [모던JS] 002. [소개] 매뉴얼과 명세서 (0) | 2024.03.25 |
댓글