우리는 자바스크립트 선언시 2가지 방법으로 선언할수있다.
1.head 태그안에
2.body 태그 안에
왠만해서는 body 태그 안에 선언을 추천한다. 왜 그럴까?
*head 태그 안에
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- head 선언과 body 선언 차이 -->
<script>
window.onload=function(){
var hw=document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
}
</script>
</head>
<body>
<input type="button" id="hw" value="hello world"/>
</body>
</html>
실행 순서는 위 사진과 같이 웹 브라우저에서 html 페이지를 요청하면
1. 자바 스크립트 파일 이 먼저 읽히고 그 다음
2.body 태그 안에 있는 정보들이 읽히게 된다.
이때문에 body 태그안에 있는 id값을 통해서 이벤트를 주고싶을때는 window.onload 라는 함수를 통해서 html의 전체 정보를 가져와 실행시켜야 한다.
이는 실행 순서로 인해서 js가 먼저 실행되고 body 정보가 해석되기때문에 결국
js는 body정보를 모르기 때문에 전체를 택하는 함수를 통해서 사용해주어야 한다.
별도의 자바 스크립트 파일로 뺏을때도 그 안의 코드는 똑같이 window.load 를 사용해 선언 해주어야 한다.
웹 브라우저 에서 페이지 요청시 코드의 실행순서에 따라서 body태그의 내용 위에 있는
1. JS파일을 먼저 다운받게된다.
js파일을 다운 받는동안 사용자에겐 아무것도 안보이는 흰색로딩화면만 보일것이고 다운이 끝나야만
2.요청한 페이지(body 정보) 의 모습이 보일 것이다.
이 로딩 문제 때문에 우리는 body 태그 안에 선언하여
1.먼저 body 가 실행되어 내용을 보여주고
2. js 파일을 다운받게 만든다.
*body 태그 안에
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- head 선언과 body 선언 차이 -->
</head>
<body>
<input type="button" id="hw" value="hello world"/>
<script>
var hw=document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- head 선언과 body 선언 차이 -->
</head>
<body>
<input type="button" id="hw" value="hello world"/>
<script src="script2.js"></script>
</body>
</html>
body 안에 선언하게 되면 위와는 다르게 window.load 함수를 쓸 필요가 없게된다.
이미 body 정보가 해석이 되었으므로 hw 값은 알수 있기 때문에 모르는 정보까지포함하여 window.load 함수를 쓸필요가 없다.
*결과
1.body 태그안에 자바스크립트 파일을 선언하는것이 좋으며(사용자 입장에서 훨씬 빠르게 웹페이지가 로드되게 느낌)
2.JS 파일은 외부파일로 따로 만들어 불러와 사용하는것이 코드의 가독성 측면과 용량측면에서 좋다.
'Language > 자바스크립트' 카테고리의 다른 글
| 6. CheckBox 에 체크여부 확인 (0) | 2021.09.04 |
|---|---|
| 5.[JS]자바스크립트 MAP,Array 사용법 (0) | 2021.08.19 |
| 4.[JS] FileReader 이용하여 업로드 이미지 출력하기 (0) | 2021.06.12 |
| 3.[JS] 사용자와의 커뮤니케이션(alert,confirm,promt) (0) | 2021.03.17 |
| 1.[JS]메모리 절약을 위한 프로토타입 사용하기 (0) | 2021.03.03 |
