❗️위의 내용을 정리하면 웹 페이지는 DOM 표현을 통해 조작할 수 있다는 것을 말한다.
-> DOM 표현은 웹 페이지의 객체 지향적 표현으로 Javascript와 같은 스크립팅 언어로 수정할 수 있다.(=조작할 수 있다.)
-> 그리고 언뜻 보기에도 이미 DOM은 각 노드들이 Tree 구조로 이뤄져 있기 때문에 변경하고자 하는 노드에 접근해서 조작할 수 있어보인다.
element들의 속성또한 Tree구조의 노드로 되어있는 것을 확인할 수 있다.
브라우저는 HTML 문서를 읽다가
<script>
태그를 만나면 DOM 생성을 멈추고 스크립트를 먼저 실행하는 순서를 통해 생성된다.
-> 만약 페이지 상단에 대용량의 스크립트 파일이 있는 경우 해당 스크립트를 모두 받아서 실행할 때 까지 DOM 생성이 멈춰지기 때문에 해당 스크립트 하단의 페이지가 표시되는 것이 지연되는 현상이 있다.
-> 위와 같은 현상을 해경하기 위한 방법으로 해당 script태그를 페이지 맨 아래 놓는 것이 하나의 방법이 될 수 있다.
-> 하지만 완벽한 해결책은 아니다.HTML 문서 자체가 아주 큰 경우라면 해당 문서를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려지는 현상이 발생할 것이다. => defer, async를 통해 해결
- defer : 브라우저는
defer
속성이 있는 스크립트(< script defer src=''>를 "백그라운드"에서 다운로드 한다. 따라서 해당 스크립트를 다운로드 받는 도중에도 DOM 생성(HTML 파싱)은 멈추지 않는다. -> 다운로드는 백그라운드에서 계속 받고, HTML 파싱이 모두 이뤄진 후에 실행된다.
- async :
async
속성 또한 "백그라운드"에서 다운로드를 한다. 하지만defer
속성과는 다르게 다운로드가 완료되면 바로 실행하여, HTML 파싱이 중단되고 실행이 완료되면 다시 파싱을 시작한다. -> 또한, script 태그의 순서와 상관없이 먼저 다운로드 완료되는 script가 먼저 실행되므로 유의해서 사용해야한다.
이벤트란 일반적으로 사용자의 동작 혹은 프로그램에서 발생하는 특정 상황을 의미한다.
보통 이벤트가 발생하면 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생
- 웹 브라우저가 알려주는 HTML요소에 대한
사건의 발생
을 의미.- 자바스크립트는 이벤트에 반응하여
특정 동작
을 수행할 수 있음.- 입력양식으로 부터 사용자의 입력값을 가져올 수 있음.
- HTML 이벤트 속성은 자바스크립트 구문을 직접 실행하거나 함수를 호출할 수 있다.
Event 목록은 https://developer.mozilla.org/en-US/docs/Web/API/Element#events 에서 이벤트를 클릭하면 어떤 property를 통해 발생시킬 수 있는지 자세하게 나와있다.