스크립트 태그를 헤드태그 안에 넣을 때와 바디 태그 직전에 넣을 때의 차이는?
->HTML문서의 파싱과 JS 코드의 실행 관계때문이다.
브라우저는 HTML 문서를 읽으면서 script tag를 실행한다.
- HTML 문서에 있는 Element 파싱보다 스크립트가 먼저 실행되면 접근되지 않는다.
- 페이지의 상단의 script에서 이후 파싱될 Element에 접근하고 싶다면
onload 등의 eventhandler로 실행되도록 해야 한다.- 또는 async, defer 속성을 이용하여 스크립트의 실행과 문서의 로딩을 동시에 진행할 수도 있다.(비 동기적)
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="02.css">
<script>
function check(n) {
var sum = 0
for (var i = 0; i < 200000000; i++) {
sum += n;
}
alert(n);
console.log(n);
console.log(document.getElementById("songwriter"));
console.log(document.getElementsByClassName("lyric"));
}
check(1);
</script>
</head>
<body>
<script>check(2);</script>
<h1>애국가</h1>
<p id="songwriter">작곡 : 안익태</p>
<p id="lyricist" style="color:red;">작사: 미상</p>
<script>check(3);</script>
<h2>1절</h2>
<p class="lyric">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.<br>
무궁화 삼천리 화려강산대한 사람, 대한으로 길이 보전하세.
</p>
<script>check(4);</script>
<h2>2절</h2>
<p class="lyric">
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. <br>
무궁화 삼천리 화려강산대한 사람, 대한으로 길이 보전하세.
</p>
<script>check(5);</script>
</body>
</html><실행순서>
1. 가장 상단에 head태그 안에 있는 스크립트 안 check(1) 메소드 실행되면서 '1'이라는 경고창이 뜬다.
2. 경고창 확인 버튼을 누르면 콘솔창에 1과 null [] 빈배열 창이 차례로 나온다. 3. 헤드태그 밑 바디태그 상단에 있는 스크립트 안 check(2) 메소드가 실행되면서 '2'이라는 경고창이 뜬다.
4. 경고창 확인 버튼을 누르면 역시 콘솔창에 2와 null [] 빈배열 창이 차례로 나온다. 밑에 html element들이 파싱되지 않았기 때문이다.
5. 경고창 확인 버튼을 누르면 역시 콘솔창에 3과 songwriter에 대해 접근한 반환값이 나온다. 그러나 가사부분에 접근한 것은 [] 빈배열이다.
6 .경고창 확인 버튼을 누르면 '4'경고창이 뜨고 브라우저에 1절 내용이
나온다. check(4)함수 호출시 위에 있는 태그는 파싱이 되었다.
7. 경고창 확인 버튼을 누르면 역시 콘솔창에 4과 songwriter에 대해 접근한
반환값과 class lyric에 대한 배열도 반환되지만 아직 1개의 element만 가
지고 있다.
8. 잠시후 브라우저에 2절이 마저 입력된다.
9.경고창 확인 버튼을 누르면 '5'경고창이 뜬다.
10. 경고창 확인 버튼을 누르면 역시 콘솔창에 4과 songwriter에 대해 접근한
반환값과 class lyric에 대한 배열도 반환된다. 총 2개의 element를 가지고 있다.
