HTML에 JavaScript 뭍히기..

kjhoon0814·2022년 1월 15일
0

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번 방식이 좀더 맞다고 생각한다
profile
Lv.1 개발자

0개의 댓글