웹 브라우저 객체

1. 클라이언트 측 자바스크립트

1) 웹 브라우저에서 자바스크립트가 하는 일

2) 웹 브라우저에서 자바스크립트 실행 순서

주소 입력 -> 요청 -> 서버 -> 응답 -> 텍스트 형태 HTML -> 브라우저 수신
-> Document 객체 변환
-> DOM 트리 구조 재구성
-> DOMContentLoaded 이벤트 발생
-> load 이벤트 발생 : 모든 웹페이지의 자원(css, js, image, video 등등)의 로드가 완료된 경우

예)
window.addEventListener("DOMContentLoaded", function() {
// DOM 구성 완료
DOM 조작, 이벤트 바인딩 가능 ...

});

3) async와 defer 속성 - ES6+

• 외부 스크립트 형태로만 적용 가능

async : 비동기 스크립트 실행
- 무거운 작업이고, 독립적으로 실행되는 작업인경우 비동기로 실행

defer : DOMContentLoaded 이벤트 이후에 실행 - DOM 바로 선택해도 문제 없다.

2. CSS와 렌더링

3. 웹 브라우저 렌더링 엔진과 자바스크립트 엔진

Window 객체

웹 브라우저의 창을 하나 생성할 때 마다 하나씩 생성.
iframe : 또한 독립적인 window 객체 존재.

1. Window 객체의 주요 프로퍼티

self
parent : 부모창의 window 객체 / iframe관련 : 자식창 👉 상위 창(부모창-parent)
top : 가장 상위 창의 window 객체 / iframe이 중첩된 경우
같은 창이고 가장 상위 창인 경우 👉 self, parent, top은 전부 동일한 window객체
opener : 팝업을 열어준 창의 window 객체 / widnow.open() 팝업에서 opener : 열어준창
pageXOffset : x축에서 스크롤한 정도
pageYOffset : y축에서 스크롤한 정도

2. Window 객체의 주요 메서드

alert(message) : 확인 메세지
prompt(message) : 입력 대화 상자, 반환값이 입력한 값
confirm(message) : 확인 메세지, 반환값이 boolean, 확인 true, 취소 false

setTimeout(callback, interval) : 반환값은 취소할 때 사용되어지는 timeid가 반환되어진다.

setTimeout(function(){
    //5초 뒤에 실행
    console.log("실행")
}, 5000);

Location 객체

주소창과 관련된 정보, 기능 통제

1. Location 객체의 프로퍼티

정보, 살아있는 속성, 변경하면 실시간 반영

2. Location 객체의 메서드

통제기능

assing(url) : 해당 주소로 이동, History 객체에 이력이 남음
location.href="url" : 해당 주소로 이동
replace(url) : 해당 주소로 이동, History 객체에 이력이 남지 않음.

History 객체

1. History 객체의 프로퍼티

scrollRestoration

• auto(기본값), 스크롤 위치를 기억하고 복구.
• manual - 스크롤 위치를 기억하지않고 맨 위 상단으로 옮김.

2. History 객체의 메서드

back() : 뒤로 1단계 이동 : go(-1)
forward() : 앞으로 1단계 이동 : forward(1)
go(number) : 음수이면 뒤로, 양수이면 앞으로

Naviator 객체

1. Navigator 객체의 주요 프로퍼티

2. Navigator 객체의 메서드

Screen 객체

1. Screen 객체의 주요 프로퍼티

창 제어하기

1. 창 여닫기

open

2. open 메서드로 설정할 수 있는 옵션의 이름

width, height, location, scrollbars, toolbar, status, menubar

3. 창 제어하기

1) moveBy(..), moveTo(...)
2) resizeBy(..), resizeTo(...)
3) scrollBy(..), scrollTo(...)

4. 다른 창 참조하기