위치(Location)
1. <header> 안쪽 하단. 거의 사용하지 않는 위치이다. (자세한 사항은 참고자료)
2. 한 HTML파일에 코드를 작성하는 경우에는 99% 바디안쪽 하단에 script를 작성을 한다.
3. 별도의 .js 파일을 만들기 -> 다른 HTML 파일에서 자주 사용할것 같은 코드의 경우에는 별도로 파일을 만들어주는것이 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 1. 헤더 안쪽 -->
<script>
document.write("Hello World!");
</script>
</head>
<body>
<!-- 2. 바디 하단 -->
<script>
document.write("Kim");
</script>
<!-- 3. 별도의 파일 -->
<script src="./js/js_location.js"></script>
</body>
</html>
<script> 태그의 defer 속성
브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연 됩니다.
파싱((syntactic) parsing)
일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정을 말한다.
데이터를 분해하여 분해한 것을 트리로 만들어 해석해 나가는 것으로 이해하였음.
js_location.js
let x = document.getElementById("id");
x.innerText = "바뀌었습니다.";
js_location.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="./js/js_location.js" defer></script>
<p>첫번째 문장입니다.</p>
<p id="para">두번째 문장입니다.</p>
<p>마지막 문장입니다.</p>
</body>
</html>
js_location.js 파일은 두번째 문장을 바꾸는 코드입니다. 그런데 defer 속성이 존재하면 화면의 파싱이 끝난 후에 외부 자바스크립트 코드가 실행되어 두번째 문장을 바꾸게 됩니다. 만약 defer 속성을 넣지 않으면 두번째 문장은 그대로 나오게 됩니다.
참고자료
'WEB > JavsScript' 카테고리의 다른 글
| [JavaScript] Array 인스턴스 메소드 (0) | 2022.05.09 |
|---|---|
| [JavaScript] Number 인스턴스 메소드 (0) | 2022.05.08 |
| [JavaScript] String 인스턴스 메소드 (0) | 2022.05.07 |
| [JavaScript] 함수(function) (0) | 2022.05.06 |
| [JavaScript] 반복문 (0) | 2022.05.05 |
댓글