반응형
<!DOCTYPE html>
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
console.log('자바스크립트 실행');
var img1 = document.querySelector('.img-1');
console.log(img1);
</script>
<body>
<div>
<h3>자바스크립트 실행 순서</h3>
<span>이미지</span>
<br>
<div class="img-1">
<img src="img01.jpg" alt="My Image" id="img-1" width="300px" height="200px">
</div>
</div>
</body>
</html>
웹브라우저로 위의 소스를 실행하면, img-1 속성을 읽을 수 없으므로
console.log(img1) 의 결과는 null로 콘솔 로그가 찍히게 된다.
이번 포스팅에 자세히 설명하지 않겠으나 모든 프로그램 언어는 '생명주기'란 것이 존재하며 프로그램의 실행 순서를 반드시 이해할 필요가 있다.
이번에는 아래와 같이 소스를 변경하고 실행해 본다.
<!DOCTYPE html>
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
console.log('자바스크립트 실행');
//var img1 = document.querySelector('.img-1');
//console.log(img1);
</script>
<body>
<div>
<h3>자바스크립트 실행 순서</h3>
<span>이미지</span>
<br>
<div class="img-1">
<img src="img01.jpg" alt="My Image" id="img-1" width="300px" height="200px">
</div>
</div>
<script>
var img1 = document.querySelector('.img-1');
console.log(img1);
</script>
</body>
</html>실행결과는
script 코딩을 <img src...... 이후에 적어 놓으니 img-1 태그의 id를 불러올 수 있게 된다.
이 결과를 보고 경험이 극히 적은 프로그래머라면 단순하게 생각할 수 있다. 그렇다면 html 사이사이에 자바스크립트 태그를 넣어서 코딩을 해야 하는가?라고...
결론은 그럴 수도 있으나 자바스크립트 소스를 가독성 좋게 한 곳에 몰아넣는 다른 방법이 존재한다.
결론은
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>슬기형과 함께하는 JAVASCRIPT</title>
</head>
<script>
window.addEventListener('DOMContentLoaded', function() {
var img1 = document.querySelector('.img-1');
console.log(img1);
});
</script>
<body>
<div>
<h3>안녕하세요.</h3>
<span>이미지</span>
<br>
<div class="img-1">
<img src="img01.jpg" alt="My Image" id="img-1">
<button onclick="buttonConfirm()">확인 다이얼로그</button>
</div>
</div>
</body>
</html>
head 태그가 끝나는 시점에 window.addEventListner 부분을 넣어서 그 안에 소스를 넣는 것이다.
웹브라우저는 html 함수를 먼저 실행하고 wondow 함수를 썼기 때문에 로드가 끝난 후 스크립트가 실행된다.
이런 실행주기 특성을 잘 이해하고 코딩을 해야 한다. 상황에 따라서는 html body태그가 시작되기 전에 전처리 작업을 해야 하는 경우도 존재하기 때문이다.
반응형
'Web Front 개발공부 > HTML과 JAVASCRIPT' 카테고리의 다른 글
| 스프레드 연산자 "...변수명" (배열, 문자열, 객체) (0) | 2024.02.18 |
|---|---|
| 프로미스(Promise) 객체를 이용해 비동기 처리하기 (1) | 2024.02.18 |
| 자바스크립트 Arrow Function (0) | 2023.07.16 |
| 자바스크립트 for-in 과 for-of 문 (0) | 2023.07.16 |
| 자바스크립트 서버 통신 Ajax, fetch, axios, XMLHttpRequest (0) | 2023.07.09 |
댓글