javascript, jQuery & Node.js

javascript 문서로딩 load 이벤트 실행, html 아이디 클래스 선택 addEventListener / querySelector & getElementById / LastModified / 현재시간

yy_dd2 2021. 3. 10. 18:16
반응형

이런 화면이 하나있다

그리고 색상버튼이 있고 클릭하면 이벤트가 실행되도록했다.

여기서는 지금껏 복습한거와 다르게 button에 onclick="" 속성이 없고

javascript에서 찾아오도록했다.

 

 

코드 확인전에 먼저 확인하기

- window.addEventListener('load', function (){})

- window.addEventListener('DOMContentLoaded', function(){})

 

- 문서로딩

문서는 위에서 아래로 읽어나간다.

현재 우리는 html >head > title > style > script >body 순서로 작성했다.

 

- 문제점

body를 먼저 읽지않고 script가 실행된다면

body 안에 있는 div나 다른 태그들은 만들어지지 않은 상태로

자바스크립트에서 불러오기 때문에 오류가난다.

 

- 해결

1. 자바스크립트의 스크립트를 맨아래 </html>전으로 옮긴다 (예전에 스크립트는 맨아래 있는걸 많이봤다)

 

2. 자바스크립트 시작할때 처음에 

window.addEventListener('load', function (){})  를 사용한다

이 부분은 브라우저가 문서를 다 읽고 난 후에 호출을 하라는 것이다

( *load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.)

 

3. 자바스크립트 시작할때 처음에

window.addEventListener('DOMContentLoaded', function(){})  를 사용한다

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에

이미지 다운로드를 기다릴 필요가 없다.

DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.

 

querySelector : CSS 선택자 구문으로 DOM 객체 검색 (선택자를 찾아서 저장)

 

button.addEventListener("click", function(){   }); : 이벤트 연결

 

document.lastModified :문서가 마지막으로 수정된 시간 나타내기 

 

lastModified 를 Date 객체 로 변환 var oLastModif = new Date(document.lastModified);

var oLastModif = new Date(document.lastModified);
alert(lastModified); 
// returns: Wed Mar 10 2021 18:10:19 GMT+0900 (대한민국 표준시)

lastModified 를 1970 년 1 월 1 일 00:00:00 (현지 시간) 이후 밀리 초로 변환

var nLastModif = Date.parse(document.lastModified);
alert(nLastModif);
// returns : 1615367581000

 

 

<!DOCTYPE html>
<html>
<head>
    <title>타이틀~~~</title>
    <style type="text/css">
        button {
            width: 150px;
            height: 50px;
        }

        #canvas {
            border: 1px solid;
            height: 300px;
        }
    </style>
    <script type="text/javascript">

        // window.onload = function(){} 은 브라우저가 문서를 다 읽은 후에 호출하라는 것
        window.addEventListener('load', function(){
            
            // querySelector : CSS 선택자 구문으로 DOM 객체 검색 (선택자를 찾아서 저장)
            var button = document.querySelector('button');
            
            // 이벤트 연결 : button.onclick = function(){}
            // addEventListener 공식권장사항
            button.addEventListener("click", function(){
                // 이전에는 getElementById를 사용했던 기억이 있다
                // var div = document.getElementById("canvas");
                
                var div = document.querySelector("#canvas");
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                div.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                // lastModified 를 Date 객체 로 변환
                var oLastModif = new Date(document.lastModified);
                // lastModified 를 1970 년 1 월 1 일 00:00:00 (현지 시간) 이후 밀리 초로 변환
                var nLastModif = Date.parse(document.lastModified);
                div.innerHTML = 
                    `<h1>URL : ${document.URL}<br>`+
                    `LAST MODIFIED : ${document.lastModified}<br>`+
                    `MODIFIED DATA : ${oLastModif}<br>`+
                    `MODIFIED DATA 밀리초로 변환 : ${nLastModif}<br>`+
                    `TITLE : ${document.title}`+
                    `</h1>`;
                
            });
        });
        
    </script>
</head>
<body>
    <button>색상 변경</button>
    <hr>
    <div id="canvas"></div>
</body>
</html>

반응형