[FE 날개달기] DOM, BOM, Load js, this

프론트엔드 날개달기

 

이 포스팅에서 작성하는 내용은 프론트엔드 날개달기 에서 발췌하였습니다.

https://inf.run/MYzP

[무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의

 

---

 

DOM

• Document Object Model : 문서 객체 모델
• 브라우저에서 javascript로 html 요소를 제어할 수 있도록 제공하는 API 같은 역할
• 나무모양의 Tree구조를 가지며, 각 구성요소를 노드(Node)라고 함
• 최상위 노드에는 document 노드가 존재함

 

 

BOM

• Browser Object Model : 브라우저 객체 모델
• 웹브라우저를 객체화 한 것.즉, 브라우저를 제어하는 인터페이스의 역할
• Browser 객체
  • window : 모든 객체가 소속된 객체, 브라우저 창 정보를 갖는 객체
    ex) window.alert(). window 는 생략 가능. window.open()
  • document : 현재 문서에 대한 정보를 갖는 객체. DOM에 대한 정보를 가짐
  • history : 현재 브라우저가 접근했던 URL history 정보를 갖는 객체 (뒤로가기, 앞으로가기)
    ex) history.back() / history.forward()
  • location : 현재 문서의 주소와 관련된 객체. window 객체의 property인 동시에 document의 property. 
    사용자 display에 대한 정보가 필요할 때 사
  • screen : 사용자의 디스플레이 화면에 대한 정보를 갖는 객체
  • navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 갖는 객체.
    크로스 브라우징 이슈 해결할 때 사용 / 위치정보 조회할 때 사용

 

 

Load Javascript

• window.onload : HTML파싱, DOM생성, 외부 콘텐츠(images, script, css 등)이 로드 된 후 발생하는 이벤트 
• DOMContentLoaded : HTML파싱, DOM생성 후 발생하는 이벤트

HTML5

• defer : HTML 파싱과 함께, 비동기로 Javascript 파일을 불러옴
  • HTML 파싱이 완료된 후, Javascript 코드를 실행
• async : HTML 파싱과 함께, 비동기로 Javascript 파일을 불러옴
  • HTML 파싱이 완료되지 않았더라도, 먼저 로드된 Javascript 파일부터 실행
  • Javascript 파일을 실행할 때는 HTML 파싱이 중단

 

 

this?

• Javascript에서 호출한 객체를 가리키는 키워드
• 만약, 호출한 객체가 없다면 this의 기본값은 window 객체
• Strict Mode에서 호출한 객체가 없는 this는 undefined

function printThis() {
    console.log(this);
}

let dog1 = {
    name: '뽀삐',
    whatIsName : printThis
}

let dog2 = {
    name: '나르',
    whatIsName : printThis
}

let dog3 = {
    name: '초코',
    whatIsName : printThis
}
    
printThis();		// this === window
dog1.whatIsName();	// this === dog1
dog2.whatIsName();	// this === dog2
dog3.whatIsName();	// this === dog3

 

this In ES5

• Javascript ES5 부터 this를 설정할 수 있는 기능. bind
• bind는 한 번만 적용 (중첩해도 적용 X)

function printThis() {
    console.log(this);
}

let dog1 = {
    name : '나르'
}

let printThis2 = printThis.bind(dog1);   
printThis();                              // this === window
printThis2();                             // this === dog1

 

 

this In ES6

• 화살표 함수(Arrow Function)에서는 자신을 포함하고 있는 외부 Scope에서 this를 계승받는다.
• 즉, 화살표 함수의 this 는 자신을 감싼 정적 범위