책에서 외부 자바스크립트파일을 참조하는 예제로 네이버개발자센터에서 제공하는 지도 api활용하는게 나왔는데
첫번째 코드는 외부참조한 script태그 내에 바로 onload이벤트로 외부참조객체를 이용해 지도를 할당하는거구요
두번째 코드는 script태그를 또하나 만들어서 거기에서 onload이벤트를 할당한겁니다.
결과는 첫번째코드는 지도를 불러내지 못했구요
두번째코드는 정상적으로 불러냈습니다.
책에서 브라우저가 html페이지를 읽을때 태그를 위에서 아래로 읽는다고 했습니다. 그래서 외부스크립트를 참조할땐 가장위의 script태그에서 참조하라구요.
근데 외부스크립트를 참조한 script태그내에서 외부참조객체를 이용했는데 작동을 안하는게 이해가 안됩니다.
그래서 생각해본건 script태그에서 외부자바스크립트를 참조했을때 내부스크립트를 실행하고 나서 그다음에 참조를 하기때문에 onload에서 외부에서 참조한 객체는 없는셈 쳐진게 아닌가 하는건데, 브라우저가 어떻게 작동하는지 모르니까 그냥 뜬구름잡는 것 같습니다.
(첫번째 코드)
</script>
<script>
window.onload = function() {
new nhn.api.map.Map('map');
//외부참조 js파일에 들어있는 생성자의 인수로 태그 id를 넣어서 지도생성.
}
</script>
</head>
<body>
<!-- JavaScript Map을 이용한 지도 띄우기. <scirpt>태그에서 외부 js파일을 추가해야함. -->
<!-- 지도를 넣을 공간 script로 할당한다. -->
<div id="map" style="width:700px; height:450px;"> <!-- 지도의 크기는 style이 결정. -->
</div>
</body>
...
</script>
결과
(두번째 코드)
<script>
window.onload = function() {
new nhn.api.map.Map('map');
//외부참조 js파일에 들어있는 생성자의 인수로 태그 id를 넣어서 지도생성.
}
</script>
</head>
<body>
<!-- JavaScript Map을 이용한 지도 띄우기. <scirpt>태그에서 외부 js파일을 추가해야함. -->
<!-- 지도를 넣을 공간 script로 할당한다. -->
<div id="map" style="width:700px; height:450px;"> <!-- 지도의 크기는 style이 결정. -->
</div>
</body>
...
결과
