1. JavaScript파일 구성
Javascript 코드가 많지 않다면 한 페이지에 모두 표현하는 것도 좋습니다.
그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다.
적은 양의 코드면 HTML 안에 넣어서 더 빨리 가동되게 해줍니다.
HTTP 요청은 CSS에 별도로 요청 없이 화면에 보일 수 있으니깐요.
2. HTML안에 JavaScript 구성하기
CSS는 head태그 안에 상단에 위치합니다.
JavaScript는 body 태그가 닫히기 전에 소스파일 간 의존성을 이해해서 순서대로 배치합니다.
이미 선언된 element에 대해서만 js에서 인식할 수 있음
그래서 script를 html 하단에 적는 경우가 많음
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: aquamarine;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<script>
var elHeading = document.querySelector("h1");
console.log(elHeading);
</script>
</body>
</html>
DomContentLoaded
element는 모두 로드 되었으나 이미지 등 외부 리소스가 로드되지 않은 시점에 발생.
이때 DOM노드는 제어할 수 있지만 이미지의 크기를 가져오는 작업은 할 수 없음.
load와는 달리 이미지, 스타일 시트가 전부 읽히기 전에 먼저 로딩이 됨.
load는 화면 속 모든 요소를 읽은 후에 보여주기에 head 안에 적으면 느려질 수 있음.
그래서 실무에서 JS 코드를 작성할 때 DOMContentLoaded 이후에 동작되도록 하여 DOM에 미리 접근.
load VS DOMContentLoaded
네이버 사이트를 네트워크 탭에서 검사해보자
Diable cache하면 항상 모든 것을 서버에서 요청하기 때문에 테스트 시에 좋음
DOM tree 노드가 load보다 빨리 끝남
 이전 실습에서 DOMContentLoaded 이벤트 등록 후 결과 화면 |
 dom이 먼저 로드된 후에 window가 로드 된다 |
window.addEventListener("load", function () {
console.log("Window Loaded");
});
document.addEventListener("DOMContentLoaded", function () {
console.log("DOM Loaded");
});
코드 예제
function init() {
var target = document.querySelector(".outside");
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
var pre = parseInt(target.style.left);
target.style.left = pre + 200 + "px";
});
}
window.addEventListener("load", function () {
console.log("Window Loaded");
});
document.addEventListener("DOMContentLoaded", function () {
console.log("DOM Loaded");
init();
// 브라우저가 켜질 때 서비스를 해야할 항목을 적어야 한다면
// DOMContentLoaded를 콜백 함수 아래에 넣는 것이 안전한 방법
});
document.addEventListener("DOMContentLoaded", function() {
startSomething();
initFoo();
initBar();
var el = document.querySelector("div");
});
load
이미지가 다 보이고 나서 사용자에게 알람을 보여주는 등의 작업에 필요하지만
실제로 자주 사용하지 않음
'Web > Frontend' 카테고리의 다른 글
| [CSS] float (0) | 2021.05.27 |
|---|---|
| Event Delegtion - 등록, 버블링, 멈추기 (0) | 2021.05.25 |
| 웹 애니메이션 - requestAnimation, transition (0) | 2021.05.23 |
| AJAX - 개발자도구의 Network 탭 (0) | 2021.05.21 |
| DOM Node(API) 조작하기 (0) | 2021.05.19 |