HTML에서 JavaScript를 적용하고 싶을때?
—> script 태그를 이용
—> 아래의 경우 HTML파일과 같은 디렉토리에 존재하는 myScriptFile.js를 불러옵니다
<script src="myScriptFile.js"></script>
[코드] HTML 문서에 포함되는 script 요소
웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춤 —> 해석을 멈춘 웹 브라우저는 script 요소를 먼저 실행시킴
script 요소는 등장과 함께 실행된다는 사실을 기억하자
[그림] 웹 브라우저는 script 요소를 만나면 HTML 해석을 일시정지 합니다.
script태그를 추가하는 방법
- < Head >태그에 추가하기
- < /body >가 끝나기 전에 추가하는 법
1. < head > 안쪽에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>
2. < body > 태그가 끝나기 전에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>
두 방식은 모두 myScriptFile.js 내의 첫 번째 console.log를 성공적으로 출력하나 두번째 console.log같은 경우 제대로 출력하지 못하는 예시가 있음
console.log('welcome JavaScript');let msgElement = document.querySelector('#msg'); console.log(msgElement);
[코드] myScriptFile.js 파일을 수정합니다.
질문
- 각 방법은 콘솔 출력이 어떻게 다른가?
--> 1번은 welcome JavaScript 다음에 Null이 출력이 되고 2번은
< div id="msg ">Hello JavaScript!< /div > 가 출력이 된다
- 1번 방법에서 Null이 콘솔에 출력되는 이유가 무엇인가?
--> 위에서 우리는 script가 불려오면 그 즉시 HTML해석을 중지하게된다 즉 1번의 코드에서는 body의 div가 정의되기 전에 script가 불려왔기에 값이 비어있으므로 Null값을 출력한다 2번에서는 div가 정의된 이후에 값을 불러왔기에
< div id="msg" >Hello JavaScript!< /div >가 welcome JavaScript 다음에 출력이 되는 것이다
- HTML 엘리먼트를 이용하려면 1번과 2번 중 어떤 방법을 사용해야 할까?
--> 엘리먼트를 이용하려면 태그가 정의된 다음에 사용을 해야하기에 2번 방식이 좀더 맞다고 생각한다
Lv.1 개발자