▶ <script>
-
스크립트 코드를 문서에 포함하거나 외부 스크립트 참조.
- Javascript 내용을 삽입하거나 외부의 스크립트를 src 속성을 통해 가져오는 경우 사용.
- cf. css를 가져올 때는 <link> 사용. -
속성
-
async
: 스크립트의 비동기적(Asynchronously) 실행 여부를 설정. boolean값.
사용 시 src 속성 필수. -
defer
: 문서 파싱(구문 분석) 후 작동 여부 지정. boolean값.
사용 시 src 속성 필수.
※ 스크립트의 실행 시점 제어
- 자바스크립트 실행 시 HTML에 있는 내용을 자바스크립트로 찾아 실행해야 하는 경우가 있는데, 이때 자바스크립트의 코드가 언제 동작하느냐에 따라 HTML의 내용을 제대로 실행할 수도, 그렇지 않을 수도 있음.
- 위 실행 화면에서의 에러는 자바스크립트 코드상에서 'my-name'이라는 id를 찾아야 하는데 자바스크립트가 이를 찾지 못했기 때문에 'my-name'은 존재하지 않고, 다시 존재하지 않는 'my-name'에서 .innerText()라는 명령을 실행했기 때문에 발생함.
- HTML 코드는 위에서 아래로 실행되는데, 순차적으로 처리를 하다 <script>를 만났고 해당 경로인 main.js로 가서 그 안에 코드를 실행함.
- HTML에서 'my-name'이라는 id를 가진 요소를 찾아 console.log()를 실행해야 하는데 자바스크립트가 실행되는 시점에서는 <div id="my-name">Barva!</div> 요소를 읽지 않았기 때문에 찾을 수가 없는 것.
- 따라서 에러의 해결을 위해서는 main.js가 실행되는 시점이 <div id="my-name">Barva!</div>를 브라우저가 읽은 이후여야 함.
- 일반적으로 <script>는 <header></header> 내에 작성하지만 실무에서는 많은 경우 <body> 영역 내의 가장 아래 부분에서, 즉 HTML 요소를 다 읽은 후에 스크립트가 실행되도록 설정하기도 함.
- <body></body> 영역 최하단에 script 작성 시 정상 작동. 물리적으로 실행 순서를 강제한 것.
- <script>를 <header></header> 안으로 다시 옮기고 defer 속성 추가 후 재실행 시 정상 작동.
- defer 속성은 HTML 문서 전체를 다 분석한 다음 .js의 소스 파일을 실행하라는 의미를 가짐. 물리적인 위치와는 상관 없이 HTML 문서를 파싱 후 스크립트가 실행되도록 선언하는 것.
-
src
: 참조할 외부 스크립트 URL 명시.
src 속성이 명시된 <script> 내에 포함된 자바스크립트 코드는 무시됨.
- <script>의 src 속성을 통해 외부 스크립트를 가져오는 경우 소스 내부에 작성된 코드는 무시됨.
- 따라서 src에 명시된 main.js의 명령은 실행되었지만 <script> 내의 console.log('hello!')는 무시됨.
-
type
: MIME 타입 text/javascript(기본값)
'HTML' 카테고리의 다른 글
| [HTML] 표(1) - table, tr, th, td (0) | 2020.08.26 |
|---|---|
| [HTML] <noscript> (0) | 2020.08.26 |
| [HTML] 내장 콘텐츠 - iframe, canvas (0) | 2020.08.26 |
| [HTML] 멀티미디어(2) - audio, video, figure, figcaption (0) | 2020.08.25 |
| [HTML] 멀티미디어(1) - img (0) | 2020.08.24 |
