HTML에 Javascript 적용하기(9-18)

2501 단어 scriptscript

Achievement Goals

  • HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.
    <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.

1. HTML에서 JS스크립트를 적용할 때 <script>태그를 이용한다.
-아래 경우는html파일과 js파일이 같은 디렉토리에 있는 경우이다.

<script src="myScriptFile.js"></script>

2. 기본적으로 <script> 태그를 만나면,
브라우저는 HTML 태그를 해석하는 것을 잠시 멈추고, JavaScript 파일을 불러와서 실행한다.

결론은,<script> 태그 등장과 동시에 스크립트가 실행된다는 것이다.

3. html에 <script> 사용하는 방법 <head>태그안에 넣는다.

4. html에 <script> 사용하는 방법 <body>태그 맨 끝에 넣는다.

5. 두가지 방식의 공통점

  • 두 방식 모두 js파일과 연결된다.

6. 두가지 방식의 차이점 -
DOM을 사용시에는 html에 <script><body>태그 맨 끝에 넣어서 사용해야 DOM을 사용할 수 있다.

  • 먼저, js에다가 아래 내용을 넣자
console.log('welcome javascript')

let msgElement = document.querySelector('#msg');
console.log(msgElement);

6-1. <head><script>를 넣은경우

  • 콘솔창에 아래 내용 출력
    welcome javascript
    null

6-2. <body><script>를 넣은경우

  • 콘솔창에 아래 내용 출력
    welcome javascript
    <div class="tweet" id="msg">hello</div>

좋은 웹페이지 즐겨찾기