DOM
자바스크립트 - 웹문서를 제어하기 위해 개발된 언어
HTML 파일을 자바스크립트로 어떻게 제어할 수 있는가?
브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.
브라우저로 HTML 파일을 열게 되면 렌더링 엔진이 HTML로 작성된 문서를 한 줄 한 줄 해석한다.
해석이 끝나면 HTML 파일을 객체화 하여 자바스크립트로 접근할 수 있게 한다.
-> 문서를 객체화 했다고 해서, 문서 객체 모델 (Document Object Model, DOM) 이라 한다.
Dom은 Tree 구조를 가지고 있다.
브라우저 객체 모델 (BOM, Browser Object Model)
웹 브라우저를 객체화 한 것을 말한다.
객체화 한 이유는, 브라우저를 스크립트 언어로 제어하기 위해서이다.
https://www.youtube.com/watch?v=3c4xp8U3jjM
Browser 객체는 어떤 것들이 있는가?
- window - 모든 객체가 소속된 객체이며, 브라우저 창을 의미한다.
- document - 현재문서에 대한 정보를 갖고 있는 객체이다.
- history - 현재의 브라우저가 접근했던 URL history를 제어할 수 있다.
- location - 문서의 주소와 관련된 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티이다.
이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.
- screen - 사용자의 디스플레이 화면에 대한 다양한 정보를 갖고 있는 객체이다.
- navigator - 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다. 크로스 브라우징 이슈를 해결할 때 사용할 수 있다.
script 태그 defer, async
HTML 파일에서 자바스크립트 파일을 가져올 때 효과적으로 가져오는 방법
HTML 파일을 차례로 읽다가 <script> 태그를 만나면 읽는 과정을 멈추고, script 파일을 가져오는 동작을 수행하고, 가져온 스크립트를 실행을 한다.
그런데 HTML 파싱을 하면서 동시에 Script를 다운로드 받으면 더 좋다.(효율적이다.)
위 기능을 위해서 HTML 5에서 defer와 async 속성이 등장했다.
HTML5 script 로드 해결방법
HTML5에서는 defer, async 속성을 통해 비동기 script 로드가 가능해져 이 문제가 근본적으로 해결되었다.
- defer 속성 - HTML 파싱과 함께, 비동기로 JavaScript 파일을 불러온다.
- HTML 파싱이 완료된 후, JavaScript 코드를 실행한다.
- <script src="script.js" defer></script>
- async 속성 - HTML 파싱과 함께 비동기로 JavaScript 파일을 불러온다.
- HTML 파싱이 완료되지 않았더라도, 먼저 로딩되는 JavaScript 파일부터 실행이 시작된다.
- JavaScript 파일을 실행할 때는 HTML 파싱이 중단된다.
- <script src="script.js" async></script>
자바스크립트 this란 무엇인가?
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.
- this는 호출한 놈 이다.
- 호출한 놈이 없을 경우에는 기본값으로 window 객체이다.
- 예외
- 전역스코프에서 this는 window 객체이다.
- 화살표 함수에서 this가 조금 달라진다.
- Strict Mode에서는 this가 조금 달라진다.
댓글