<script></script> 태그의 선언 위치와 수행순서
<head> 태그 안에서 <script>를 선언하고 <body>안에 선언해 놓은 태그에 대한 작업을 할 때,
해당 <script>가 수행되는 시점에서 <body>태그는 아직 파싱되기 전이기 때문에 <script>에서 해당 태그가 무엇인지 알 수가 없게 된다.
<script>내의 코드가 정상 실행되었다면 원하는 결과를 얻을 수 있지만 실제로는 그렇지 않다.
원하는 결과 | 실제 결과 |
|
|
canvas 값을 console에 출력하는 코드를 추가하고,
F12의 개발자도구를 통해서 보면 canvas가 null값이라서 에러가 난 것을 볼 수 있다.
<script>내의 getElementById("myCanvas") 를 수행하려는데 id값이 'myCanvas'인 태그에 대한 정보가 아직 없기 때문이다.
따라서 위의 코드를 다음과 같이 수정하여 이를 해결할 수 있다.
방법1. <script>코드의 위치를 </body>바로 앞으로 이동시킨다. (속도 면에서 권장)
방법2. <script>에 작성한 내용을 함수로 만들고, onload 이벤트를 이용하여 <body>태그에 대한 페이지 로딩이 완료된 후 해당 함수를 호출하게 한다. 그러면 <body>태그의 내용을 먼저 읽기 때문에 <script>수행시 id값이 'myCanvas'인 태그가 무엇인지 알 수 있게 된다.
(onload 이벤트를 발생시키지 않아도 <script>안의 내용은 함수이기 때문에 직접 호출하지 않는 이상 실행되지 않는다.)
