head 태그 사이에 추가하는 방법
script태그 사이에 JavaScript 코드를 작성하는 방법<head> ... <script> alert('This works - between script tags!') </script> </head>- 스크립트가 길어질수록 HTML 파일도 길어져서 웹사이트를 관리하기가 어려워진다.
- JavaScript 파일을 가져오는 방법
<head> ... <script src="assets/scripts/app.js"></script> </head>- 통상적으로 스크립트 파일의 위치엔 큰 따옴표를 사용한다.
- 스크립트는 셀프 클로징을 지원하지 않는다.
head 태그 사이에 script 를 추가하면 JavaScript 코드를 읽기 전까지 HTML 코드가 파싱 되지 않는 문제가 발생한다. 그러면 사용자에게 화면이 보여지는 속도가 늦어지게 되고 의도치않게 불편함을 줄 수도 있다. 그렇다면 브라우저가 스크립트를 실행하기 전에 HTML 코드를 파싱하고 페이지를 보여주는 방법은 없을까? 물론 있다.
body 태그 끝 부분에 추가하는 방법
💡 alert 함수의 경우 head 태그 안에 추가시 알림창에서 ‘확인’을 눌러야 페이지를 볼 수 있으나 body 끝 부분에 추가시 ‘확인’을 누르지 않아도 페이지를 볼 수 있다. (참고: html 코드가 간단할때는 두 방법 모두 alert 창부터 보인다)
<head>
...
<head>
<body>
...
<script src="assets/scripts/app.js"></script>
</body>
또한 주의할 점은 JavaScript는 순서가 중요하기 때문에 의존할 내용이 있으면 사용하기 전에 가져와야한다. 만약 app.js 파일에 작성한 코드가 vender.js 파일 내의 코드에 의존하는 경우에는 vender.js 를 먼저 불러주고 그 다음에 app.js 를 불러준다.
<head>
...
<head>
<body>
...
<script src="assets/scripts/vender.js"></script>
<script src="assets/scripts/app.js"></script>
</body>
참고자료