HTML에 자바스크립트 적용하기

HTML에 JavaScript를 적용하기 위해선 <script> 태그를 이용한다.

<script src="myScriptFile.js"></script>```

• <script> 태그를 만나면 , 브라우저는 HTML 태그 해석을 멈추고 JavaScript 파일을 불러와서 실행한다.

script 태그 추가방법

<script> 태그를 추가하는 방법은 2가지다.

1. 태그에 추가하는 방법

• 이 경우 HTML 문서를 해석 완료하기 전에 스크립트 파일을 실행하기 때문에 스크립트 파일에서 HTML 태그를 가져와 조작하는 경우 오류가 발생한다.
• HTML 파싱중에 스크립트를 로드하고 실행하기 때문에 렌더링이 지연된다.

2. 태그 마지막에 추가하는 방법

• HTML 문서 해석을 완료한 뒤 스크립트 파일을 실행하기 때문에 오류가 발생하지 않는다.

3. <script defer="" />

• 브라우저가 <script defer...> 를 만나면 다운로드를 시작하지만, HTML 파싱을 중단하지 않고 파싱이 완료되면 스크립트 파일을 실행하는 방식이다.

4. <script async="" />

• 브라우저가 <script async...> 를 만나면 defer`와 마찬가지로 다운로드를 진행하고 HTML 파싱을 막지 않지만 다운로드가 완료되면 스크립트가 실행되면서 HTML 파싱이 멈춘다.

참고링크

• https://kimlog.me/js/2019-10-05-script/